diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 3879b06aeeeed..0000000000000
--- a/.babelrc
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "presets": ["react"],
-  "ignore": ["third_party"],
-  "plugins": [
-    "transform-class-properties",
-    "syntax-trailing-function-commas",
-    ["transform-object-rest-spread", { "useBuiltIns": true }],
-    "transform-es2015-template-literals",
-    "transform-es2015-literals",
-    "transform-es2015-arrow-functions",
-    "transform-es2015-block-scoped-functions",
-    ["transform-es2015-classes", { "loose": true }],
-    "transform-es2015-object-super",
-    "transform-es2015-shorthand-properties",
-    "transform-es2015-computed-properties",
-    "transform-es2015-for-of",
-    "check-es2015-constants",
-    ["transform-es2015-spread", { "loose": true }],
-    "transform-es2015-parameters",
-    ["transform-es2015-destructuring", { "loose": true }],
-    ["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
-  ]
-}
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4d676f62786b6..584f8c111327e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -22,6 +22,32 @@ aliases:
   - &attach_workspace
     at: build
 
+  - &process_artifacts
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      - run: node ./scripts/rollup/consolidateBundleSizes.js
+      - run: ./scripts/circleci/upload_build.sh
+      - run: ./scripts/circleci/pack_and_store_artifact.sh
+      - store_artifacts:
+          path: ./node_modules.tgz
+      - store_artifacts:
+          path: ./build.tgz
+      - store_artifacts:
+          path: ./build/bundle-sizes.json
+      - store_artifacts:
+          # TODO: Update release script to use local file instead of pulling
+          # from artifacts.
+          path: ./scripts/error-codes/codes.json
+      - persist_to_workspace:
+          root: build
+          paths:
+            - bundle-sizes.json
+
 jobs:
   setup:
     docker: *docker
@@ -72,19 +98,24 @@ jobs:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test --maxWorkers=2
 
-  test_source_persistent:
+  test_source_experimental:
     docker: *docker
     environment: *environment
-
     steps:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test-persistent --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test --maxWorkers=2
 
-  test_source_prod:
+  test_source_persistent:
     docker: *docker
     environment: *environment
 
@@ -92,9 +123,12 @@ jobs:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test-prod --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-persistent --maxWorkers=2
 
-  test_source_fire:
+  test_source_prod:
     docker: *docker
     environment: *environment
 
@@ -102,20 +136,38 @@ jobs:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test-fire --maxWorkers=2
-      - run: yarn test-fire-prod --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-prod --maxWorkers=2
 
-  test_coverage:
+  build:
     docker: *docker
     environment: *environment
-
+    parallelism: 20
     steps:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: ./scripts/circleci/test_coverage.sh
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: |
+            ./scripts/circleci/add_build_info_json.sh
+            ./scripts/circleci/update_package_versions.sh
+            yarn build
+      - run: echo "stable" >> build/RELEASE_CHANNEL
+      - persist_to_workspace:
+          root: build
+          paths:
+            - RELEASE_CHANNEL
+            - facebook-www
+            - node_modules
+            - react-native
+            - dist
+            - sizes/*.json
 
-  build:
+  build_experimental:
     docker: *docker
     environment: *environment
     parallelism: 20
@@ -123,40 +175,76 @@ jobs:
       - checkout
       - *restore_yarn_cache
       - *run_yarn
-      - run: ./scripts/circleci/add_build_info_json.sh
-      - run: ./scripts/circleci/update_package_versions.sh
-      - run: yarn build
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: |
+            ./scripts/circleci/add_build_info_json.sh
+            ./scripts/circleci/update_package_versions.sh
+            yarn build
+      - run: echo "experimental" >> build/RELEASE_CHANNEL
       - persist_to_workspace:
           root: build
           paths:
+            - RELEASE_CHANNEL
             - facebook-www
             - node_modules
             - react-native
             - dist
             - sizes/*.json
 
-  process_artifacts:
+  build_devtools_and_process_artifacts:
     docker: *docker
     environment: *environment
+    parallelism: 20
     steps:
       - checkout
       - attach_workspace: *attach_workspace
       - *restore_yarn_cache
       - *run_yarn
-      - run: node ./scripts/rollup/consolidateBundleSizes.js
-      - run: node ./scripts/tasks/danger
-      - run: ./scripts/circleci/upload_build.sh
-      - run: ./scripts/circleci/pack_and_store_artifact.sh
-      - store_artifacts:
-          path: ./node_modules.tgz
-      - store_artifacts:
-          path: ./build.tgz
-      - store_artifacts:
-          path: ./build/bundle-sizes.json
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh
       - store_artifacts:
-          # TODO: Update release script to use local file instead of pulling
-          # from artifacts.
-          path: ./scripts/error-codes/codes.json
+          path: ./build/devtools.tgz
+
+  # These jobs are named differently so we can distinguish the stable and
+  # and experimental artifacts
+  process_artifacts: *process_artifacts
+  process_artifacts_experimental: *process_artifacts
+
+  sizebot:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      # This runs in the process_artifacts job, too, but it's faster to run
+      # this step in both jobs instead of running the jobs sequentially
+      - run: node ./scripts/rollup/consolidateBundleSizes.js
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: node ./scripts/tasks/danger
+
+  sizebot_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      # This runs in the process_artifacts job, too, but it's faster to run
+      # this step in both jobs instead of running the jobs sequentially
+      - run: node ./scripts/rollup/consolidateBundleSizes.js
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: node ./scripts/tasks/danger
 
   lint_build:
     docker: *docker
@@ -177,7 +265,36 @@ jobs:
       - attach_workspace: *attach_workspace
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test-build --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-build --maxWorkers=2
+
+  test_build_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test-build --maxWorkers=2
+
+  test_devtools:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test-build-devtools --maxWorkers=2
 
   test_dom_fixtures:
     docker: *docker
@@ -188,6 +305,8 @@ jobs:
       - *restore_yarn_cache
       - run:
           name: Run DOM fixture tests
+          environment:
+            RELEASE_CHANNEL: stable
           command: |
             cd fixtures/dom
             yarn --frozen-lockfile
@@ -204,10 +323,8 @@ jobs:
       - run:
           name: Run fuzz tests
           command: |
-            FUZZ_TEST_SEED=$RANDOM
-            echo $FUZZ_TEST_SEED
-            yarn test fuzz --maxWorkers=2
-            yarn test-prod fuzz --maxWorkers=2
+            FUZZ_TEST_SEED=$RANDOM yarn test fuzz --maxWorkers=2
+            FUZZ_TEST_SEED=$RANDOM yarn test-prod fuzz --maxWorkers=2
 
   test_build_prod:
     docker: *docker
@@ -217,11 +334,27 @@ jobs:
       - attach_workspace: *attach_workspace
       - *restore_yarn_cache
       - *run_yarn
-      - run: yarn test-build-prod --maxWorkers=2
+      - run:
+          environment:
+            RELEASE_CHANNEL: stable
+          command: yarn test-build-prod --maxWorkers=2
+
+  test_build_prod_experimental:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - *restore_yarn_cache
+      - *run_yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: yarn test-build-prod --maxWorkers=2
 
 workflows:
   version: 2
-  commit:
+  stable:
     jobs:
       - setup
       - lint:
@@ -239,15 +372,15 @@ workflows:
       - test_source_persistent:
           requires:
             - setup
-      - test_source_fire:
-          requires:
-            - setup
       - build:
           requires:
             - setup
       - process_artifacts:
           requires:
             - build
+      - sizebot:
+          requires:
+            - build
       - lint_build:
           requires:
             - build
@@ -260,9 +393,42 @@ workflows:
       - test_dom_fixtures:
           requires:
             - build
-  hourly:
+
+  experimental:
+    jobs:
+      - setup
+      - test_source_experimental:
+          requires:
+            - setup
+      - build_experimental:
+          requires:
+            - setup
+      - process_artifacts_experimental:
+          requires:
+            - build_experimental
+      - sizebot_experimental:
+          requires:
+            - build_experimental
+      - test_build_experimental:
+          requires:
+            - build_experimental
+      - test_build_prod_experimental:
+          requires:
+            - build_experimental
+      - lint_build:
+          requires:
+            - build_experimental
+      - test_devtools:
+          requires:
+            - build_experimental
+      - build_devtools_and_process_artifacts:
+          requires:
+            - build_experimental
+
+  fuzz_tests:
     triggers:
       - schedule:
+          # Fuzz tests run hourly
           cron: "0 * * * *"
           filters:
             branches:
@@ -273,6 +439,3 @@ workflows:
       - test_fuzz:
           requires:
             - setup
-      - test_coverage:
-          requires:
-            - setup
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
new file mode 100644
index 0000000000000..7dd2a59e41457
--- /dev/null
+++ b/.codesandbox/ci.json
@@ -0,0 +1,10 @@
+{
+  "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
+  "buildCommand": "build --type=NODE react/index,react-dom/index,scheduler/index,scheduler/tracing",
+  "publishDirectory": {
+    "react": "build/node_modules/react",
+    "react-dom": "build/node_modules/react-dom",
+    "scheduler": "build/node_modules/scheduler"
+  },
+  "sandboxes": ["new"]
+}
diff --git a/.eslintignore b/.eslintignore
index d95f2bf247e3c..62ca593965173 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,3 +12,10 @@ scripts/bench/benchmarks/**/*.js
 
 # React repository clone
 scripts/bench/remote-repo/
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 1c48ea5330a3d..74b87ab13a679 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,21 +9,19 @@ const OFF = 0;
 const ERROR = 2;
 
 module.exports = {
-  extends: 'fbjs',
+  extends: [
+    'fbjs',
+    'prettier'
+  ],
 
   // Stop ESLint from looking for a configuration file in parent folders
-  'root': true,
+  root: true,
 
-  plugins: [
-    'jest',
-    'no-for-of-loops',
-    'react',
-    'react-internal',
-  ],
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 
-  parser: 'espree',
+  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 8,
     sourceType: 'script',
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
@@ -35,13 +33,13 @@ module.exports = {
   rules: {
     'accessor-pairs': OFF,
     'brace-style': [ERROR, '1tbs'],
-    'comma-dangle': [ERROR, 'always-multiline'],
     'consistent-return': OFF,
     'dot-location': [ERROR, 'property'],
-    'dot-notation': ERROR,
+    // We use console['error']() as a signal to not transform it:
+    'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
     'eol-last': ERROR,
-    'eqeqeq': [ERROR, 'allow-null'],
-    'indent': OFF,
+    eqeqeq: [ERROR, 'allow-null'],
+    indent: OFF,
     'jsx-quotes': [ERROR, 'prefer-double'],
     'keyword-spacing': [ERROR, {after: true, before: true}],
     'no-bitwise': OFF,
@@ -51,9 +49,9 @@ 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-use-before-define': OFF,
     'no-useless-concat': OFF,
-    'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
+    quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
     'space-before-blocks': ERROR,
     'space-before-function-paren': OFF,
     'valid-typeof': [ERROR, {requireStringLiterals: true}],
@@ -65,6 +63,12 @@ module.exports = {
     'no-var': ERROR,
     strict: ERROR,
 
+    // Enforced by Prettier
+    // TODO: Prettier doesn't handle long strings or long comments. Not a big
+    // deal. But I turned it off because loading the plugin causes some obscure
+    // syntax error and it didn't seem worth investigating.
+    'max-len': OFF,
+
     // React & JSX
     // Our transforms set this automatically
     'react/jsx-boolean-value': [ERROR, 'always'],
@@ -78,7 +82,10 @@ module.exports = {
     'react/react-in-jsx-scope': ERROR,
     'react/self-closing-comp': ERROR,
     // We don't care to do this
-    'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
+    'react/jsx-wrap-multilines': [
+      ERROR,
+      {declaration: false, assignment: false},
+    ],
 
     // Prevent for...of loops because they require a Symbol polyfill.
     // You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
@@ -88,7 +95,9 @@ module.exports = {
     // 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,
+    'react-internal/invariant-args': ERROR,
+    'react-internal/warning-args': ERROR,
+    'react-internal/no-production-logging': ERROR,
   },
 
   overrides: [
@@ -112,6 +121,7 @@ module.exports = {
       files: esNextPaths,
       parser: 'babel-eslint',
       parserOptions: {
+        ecmaVersion: 8,
         sourceType: 'module',
       },
       rules: {
@@ -124,21 +134,40 @@ module.exports = {
       rules: {
         // https://github.com/jest-community/eslint-plugin-jest
         'jest/no-focused-tests': ERROR,
-      }
+        'jest/valid-expect': ERROR,
+        'jest/valid-expect-in-promise': ERROR,
+      },
+    },
+    {
+      files: [
+        '**/__tests__/**/*.js',
+        'scripts/**/*.js',
+        'packages/*/npm/**/*.js',
+        'packages/dom-event-testing-library/**/*.js',
+        'packages/react-devtools*/**/*.js'
+      ],
+      rules: {
+        'react-internal/no-production-logging': OFF,
+        'react-internal/warning-args': OFF,
+      },
     },
     {
       files: ['packages/react-native-renderer/**/*.js'],
       globals: {
         nativeFabricUIManager: true,
-      }
-    }
+      },
+    },
   ],
 
   globals: {
+    SharedArrayBuffer: true,
+
     spyOnDev: true,
     spyOnDevAndProd: true,
     spyOnProd: true,
     __PROFILE__: true,
     __UMD__: true,
+    __EXPERIMENTAL__: true,
+    trustedTypes: true,
   },
 };
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index f2f6a21e173ff..e19ec2cb10b16 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,14 +1,4 @@
-<!--
-  Note: if the issue is about documentation or the website, please file it at:
-  https://github.com/reactjs/reactjs.org/issues/new
--->
+👉 Please follow one of these issue templates:
+- https://github.com/facebook/react/issues/new/choose
 
-**Do you want to request a *feature* or report a *bug*?**
-
-**What is the current behavior?**
-
-**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**
-
-**What is the expected behavior?**
-
-**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
+Note: to keep the backlog clean and actionable, issues may be immediately closed if they do not follow one of the above issue templates.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000000000..e561f9d26154a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,41 @@
+---
+name: "🐛 Bug Report"
+about: Report a reproducible bug or regression.
+title: 'Bug: '
+labels: 'Status: Unconfirmed'
+
+---
+
+<!--
+  Please provide a clear and concise description of what the bug is. Include
+  screenshots if needed. Please test using the latest version of the relevant
+  React packages to make sure your issue has not already been fixed.
+-->
+
+React version:
+
+## Steps To Reproduce
+
+1.
+2.
+
+<!--
+  Your bug will get fixed much faster if we can run your code and it doesn't
+  have dependencies other than React. Issues without reproduction steps or
+  code examples may be immediately closed as not actionable.
+-->
+
+Link to code example:
+
+<!--
+  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
+  repository on GitHub, or provide a minimal code example that reproduces the
+  problem. You may provide a screenshot of the application if you think it is
+  relevant to your bug report. Here are some tips for providing a minimal
+  example: https://stackoverflow.com/help/mcve.
+-->
+
+## The current behavior
+
+
+## The expected behavior
diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md
new file mode 100644
index 0000000000000..57c380e2ac97a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/documentation.md
@@ -0,0 +1,13 @@
+---
+name: "📃 Documentation Issue"
+about: This issue tracker is not for documentation issues. Please file documentation issues at https://github.com/reactjs/reactjs.org.
+title: 'Docs: '
+labels: 'Resolution: Invalid'
+
+---
+
+🚨 This issue tracker is not for documentation issues. 🚨
+
+The React website is hosted on a separate repository. You may let the
+team know about any issues with the documentation by opening an issue there:
+- https://github.com/reactjs/reactjs.org/issues/new
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
new file mode 100644
index 0000000000000..0131925d2c7a3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -0,0 +1,29 @@
+---
+name: "🤔 Questions and Help"
+about: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.
+title: 'Question: '
+labels: 'Resolution: Invalid, Type: Question'
+
+---
+
+🚨 This issue tracker is not for questions. 🚨
+
+As it happens, support requests that are created as issues are likely to be closed. We want to make sure you are able to find the help you seek. Please take a look at the following resources.
+
+## Coding Questions
+
+If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.
+
+https://stackoverflow.com/questions/tagged/react
+
+## Talk to other React developers
+
+There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.
+
+https://reactjs.org/community/support.html#popular-discussion-forums
+
+## Proposals
+
+If you'd like to discuss topics related to the future of React, or would like to propose a new feature or change before sending a pull request, please check out the discussions and proposals repository.
+
+https://github.com/reactjs/rfcs
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index b8a0139bd96c1..a82527b0aa18d 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,14 +1,27 @@
-**Before submitting a pull request,** please make sure the following is done:
-
-1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
-2. Run `yarn` in the repository root.
-3. If you've fixed a bug or added code that should be tested, add tests!
-4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
-5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
-6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
-7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
-8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
-9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
-10. If you haven't already, complete the CLA.
-
-**Learn more about contributing:** https://reactjs.org/docs/how-to-contribute.html
+<!--
+  Thanks for submitting a pull request!
+  We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
+
+  Before submitting a pull request, please make sure the following is done:
+
+  1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
+  2. Run `yarn` in the repository root.
+  3. If you've fixed a bug or added code that should be tested, add tests!
+  4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
+  5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
+  6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
+  7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
+  8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
+  9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
+  10. If you haven't already, complete the CLA.
+
+  Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html
+-->
+
+## Summary
+
+<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
+
+## Test Plan
+
+<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->
diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 0000000000000..6dc44693e3ece
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,31 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 90
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - "Partner"
+  - "React Core Team"
+  - "Resolution: Backlog"
+  - "Type: Bug"
+  - "Type: Discussion"
+  - "Type: Regression"
+# Label to use when marking an issue as stale
+staleLabel: "Resolution: Stale"
+issues:
+  # Comment to post when marking an issue as stale.
+  markComment: >
+    This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
+    Thank you for your contribution.
+  # Comment to post when closing a stale issue.
+  closeComment: >
+    Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
+pulls:
+  # Comment to post when marking a pull request as stale.
+  markComment: >
+    This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
+    Thank you for your contribution.
+  # Comment to post when closing a stale pull request.
+  closeComment: >
+    Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!
diff --git a/.gitignore b/.gitignore
index 53de0c289077e..902e6c9c8838b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,14 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
\ No newline at end of file
diff --git a/.mailmap b/.mailmap
index 278784e0afa9b..86c96fe683ed6 100644
--- a/.mailmap
+++ b/.mailmap
@@ -88,6 +88,7 @@ Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
 Krystian Karczewski <karcz.k@gmail.com>
 Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
 Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
+Lea Rosema <terabaud@gmail.com>
 Marcin K. <katzoo@github.mail>
 Mark Anderson <undernewmanagement@users.noreply.github.com>
 Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
diff --git a/.nvmrc b/.nvmrc
index 33edba2d01f06..70047db82e050 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v8.4.0
+v10.16.3
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000000..bea24210eca5e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
index df8d863ae4c09..6e5dcb710f0f0 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -8,7 +8,7 @@ module.exports = {
   jsxBracketSameLine: true,
   trailingComma: 'es5',
   printWidth: 80,
-  parser: 'babylon',
+  parser: 'babel',
 
   overrides: [
     {
diff --git a/.watchmanconfig b/.watchmanconfig
index e69de29bb2d1d..0967ef424bce6 100644
--- a/.watchmanconfig
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 744cfa24e57bf..e8eb19c9d8927 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,95 @@
   </summary>
 </details>
 
+## 16.12.0 (November 14, 2019)
+
+### React DOM
+
+* Fix passive effects (`useEffect`) not being fired in a multi-root app. ([@acdlite](https://github.com/acdlite) in [#17347](https://github.com/facebook/react/pull/17347))
+
+### React Is
+
+* Fix `lazy` and `memo` types considered elements instead of components ([@bvaughn](https://github.com/bvaughn) in [#17278](https://github.com/facebook/react/pull/17278))
+
+## 16.11.0 (October 22, 2019)
+
+### React DOM
+
+* Fix `mouseenter` handlers from firing twice inside nested React containers. [@yuanoook](https://github.com/yuanoook) in [#16928](https://github.com/facebook/react/pull/16928)
+* Remove `unstable_createRoot` and `unstable_createSyncRoot` experimental APIs. (These are available in the Experimental channel as `createRoot` and `createSyncRoot`.) ([@acdlite](http://github.com/acdlite) in [#17088](https://github.com/facebook/react/pull/17088))
+
+## 16.10.2 (October 3, 2019)
+
+### React DOM
+
+* Fix regression in react-native-web by restoring order of arguments in event plugin extractors ([@necolas](https://github.com/necolas) in [#16978](https://github.com/facebook/react/pull/16978))
+
+## 16.10.1 (September 28, 2019)
+
+### React DOM
+
+* Fix regression in Next.js apps by allowing Suspense mismatch during hydration to silently proceed ([@sebmarkbage](https://github.com/sebmarkbage) in [#16943](https://github.com/facebook/react/pull/16943))
+
+## 16.10.0 (September 27, 2019)
+
+### React DOM
+
+* Fix edge case where a hook update wasn't being memoized. ([@sebmarkbage](http://github.com/sebmarkbage) in [#16359](https://github.com/facebook/react/pull/16359))
+* Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update. ([@sebmarkbage](http://github.com/sebmarkbage) in [#16739](https://github.com/facebook/react/pull/16739))
+* Clear additional fiber fields during unmount to save memory. ([@trueadm](http://github.com/trueadm) in [#16807](https://github.com/facebook/react/pull/16807))
+* Fix bug with required text fields in Firefox. ([@halvves](http://github.com/halvves) in [#16578](https://github.com/facebook/react/pull/16578))
+* Prefer `Object.is` instead of inline polyfill, when available. ([@ku8ar](http://github.com/ku8ar) in [#16212](https://github.com/facebook/react/pull/16212))
+* Fix bug when mixing Suspense and error handling. ([@acdlite](http://github.com/acdlite) in [#16801](https://github.com/facebook/react/pull/16801))
+
+
+### Scheduler (Experimental)
+
+* Improve queue performance by switching its internal data structure to a min binary heap. ([@acdlite](http://github.com/acdlite) in [#16245](https://github.com/facebook/react/pull/16245))
+* Use `postMessage` loop with short intervals instead of attempting to align to frame boundaries with `requestAnimationFrame`. ([@acdlite](http://github.com/acdlite) in [#16214](https://github.com/facebook/react/pull/16214))
+
+### useSubscription
+
+* Avoid tearing issue when a mutation happens and the previous update is still in progress. ([@bvaughn](http://github.com/bvaughn) in [#16623](https://github.com/facebook/react/pull/16623))
+
+## 16.9.0 (August 8, 2019)
+
+### React
+
+* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
+* Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))
+
+### React DOM
+
+* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
+* Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
+* Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
+* Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
+* Add support for `onLoad` event for `<embed>`. ([@cherniavskii](https://github.com/cherniavskii) in [#15614](https://github.com/facebook/react/pull/15614))
+* Add support for editing `useState` state from DevTools. ([@bvaughn](https://github.com/bvaughn) in [#14906](https://github.com/facebook/react/pull/14906))
+* Add support for toggling Suspense from DevTools. ([@gaearon](https://github.com/gaearon) in [#15232](https://github.com/facebook/react/pull/15232))
+* Warn when `setState` is called from `useEffect`, creating a loop. ([@gaearon](https://github.com/gaearon) in [#15180](https://github.com/facebook/react/pull/15180))
+* Fix a memory leak. ([@paulshen](https://github.com/paulshen) in [#16115](https://github.com/facebook/react/pull/16115))
+* Fix a crash inside `findDOMNode` for components wrapped in `<Suspense>`. ([@acdlite](https://github.com/acdlite) in [#15312](https://github.com/facebook/react/pull/15312))
+* Fix pending effects from being flushed too late. ([@acdlite](https://github.com/acdlite) in [#15650](https://github.com/facebook/react/pull/15650))
+* Fix incorrect argument order in a warning message. ([@brickspert](https://github.com/brickspert) in [#15345](https://github.com/facebook/react/pull/15345))
+* Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
+* Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))
+
+### React DOM Server
+
+* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
+
+### React Test Utilities and Test Renderer
+
+* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
+* Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
+* Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
+* Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))
+
+### ESLint Plugin: React Hooks
+
+* Report Hook calls at the top level as a violation. ([gaearon](https://github.com/gaearon) in [#16455](https://github.com/facebook/react/pull/16455))
+
 ## 16.8.6 (March 27, 2019)
 
 ### React DOM
@@ -445,7 +534,7 @@ This release was published in a broken state and should be skipped.
 * Fix an issue with `this.state` of different components getting mixed up. ([@sophiebits](https://github.com/sophiebits) in [#12323](https://github.com/facebook/react/pull/12323))
 * Provide a better message when component type is undefined. ([@HeroProtagonist](https://github.com/HeroProtagonist) in [#11966](https://github.com/facebook/react/pull/11966))
 
-## React Test Renderer
+### React Test Renderer
 
 * Fix handling of fragments in `toTree()`. ([@maciej-ka](https://github.com/maciej-ka) in [#12107](https://github.com/facebook/react/pull/12107) and [@gaearon](https://github.com/gaearon) in [#12154](https://github.com/facebook/react/pull/12154))
 * Shallow renderer should assign state to `null` for components that don't set it. ([@jwbay](https://github.com/jwbay) in [#11965](https://github.com/facebook/react/pull/11965))
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 0fb245803d839..f049d4c53173c 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,3 +1,76 @@
 # 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.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <opensource-conduct@fb.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000000000..655dfeaec0e67
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,7 @@
+# Reporting Security Issues
+
+If you believe you have found a security vulnerability in React, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
+
+Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported:
+
+https://www.facebook.com/whitehat
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000000..d4d1e3213c574
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    'syntax-trailing-function-commas',
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {loose: true, useBuiltIns: true},
+    ],
+    ['@babel/plugin-transform-template-literals', {loose: true}],
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-object-super',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-for-of',
+    ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
+    ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
+  ],
+};
diff --git a/dangerfile.js b/dangerfile.js
index 985c6b675626d..f4624a17c173d 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -32,6 +32,14 @@ const {generateResultsArray} = require('./scripts/rollup/stats');
 const {existsSync, readFileSync} = require('fs');
 const {exec} = require('child_process');
 
+// This must match the name of the CI job that creates the build artifacts
+const RELEASE_CHANNEL =
+  process.env.RELEASE_CHANNEL === 'experimental' ? 'experimental' : 'stable';
+const artifactsJobName =
+  process.env.RELEASE_CHANNEL === 'experimental'
+    ? 'process_artifacts_experimental'
+    : 'process_artifacts';
+
 if (!existsSync('./build/bundle-sizes.json')) {
   // This indicates the build failed previously.
   // In that case, there's nothing for the Dangerfile to do.
@@ -117,6 +125,8 @@ function git(args) {
     return;
   }
 
+  markdown(`## Size changes (${RELEASE_CHANNEL})`);
+
   const upstreamRef = danger.github.pr.base.ref;
   await git(`remote add upstream https://github.com/facebook/react.git`);
   await git('fetch upstream');
@@ -135,8 +145,7 @@ function git(args) {
     }
     for (let i = 0; i < statuses.length; i++) {
       const status = statuses[i];
-      // This must match the name of the CI job that creates the build artifacts
-      if (status.context === 'ci/circleci: process_artifacts') {
+      if (status.context === `ci/circleci: ${artifactsJobName}`) {
         if (status.state === 'success') {
           baseCIBuildId = /\/facebook\/react\/([0-9]+)/.exec(
             status.target_url
diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js
index 3764349b958a7..7cb678b587389 100644
--- a/fixtures/attribute-behavior/src/App.js
+++ b/fixtures/attribute-behavior/src/App.js
@@ -461,9 +461,7 @@ function prepareState(initGlobals) {
       hasSameBehaviorForAll,
       rowPatternHash,
       // "Good enough" id that we can store in localStorage
-      rowIdHash: `${attribute.name} ${attribute.tagName} ${
-        attribute.overrideStringValue
-      }`,
+      rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,
     };
     const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();
     rowGroup.add(row);
@@ -866,14 +864,12 @@ class App extends React.Component {
     // Sort
     switch (sortOrder) {
       case ALPHABETICAL:
-        return filteredAttributes.sort(
-          (attr1, attr2) =>
-            attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1
+        return filteredAttributes.sort((attr1, attr2) =>
+          attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1
         );
       case REV_ALPHABETICAL:
-        return filteredAttributes.sort(
-          (attr1, attr2) =>
-            attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1
+        return filteredAttributes.sort((attr1, attr2) =>
+          attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1
         );
       case GROUPED_BY_ROW_PATTERN: {
         return filteredAttributes.sort((attr1, attr2) => {
diff --git a/fixtures/attribute-behavior/yarn.lock b/fixtures/attribute-behavior/yarn.lock
index d4dff15fb03cc..f97911b5e4993 100644
--- a/fixtures/attribute-behavior/yarn.lock
+++ b/fixtures/attribute-behavior/yarn.lock
@@ -268,7 +268,7 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@^1.4.0, async@^1.5.2:
+async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -1448,6 +1448,10 @@ commander@2.11.x, commander@~2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2838,14 +2842,14 @@ handle-thing@^1.2.5:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
 handlebars@^4.0.3:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -4180,6 +4184,10 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+
 no-case@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
@@ -5696,11 +5704,9 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
+source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
 source-map@~0.2.0:
   version "0.2.0"
@@ -6090,7 +6096,7 @@ uglify-js@3.0.x, uglify-js@^3.0.13:
     commander "~2.11.0"
     source-map "~0.5.1"
 
-uglify-js@^2.6, uglify-js@^2.8.29:
+uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
@@ -6099,6 +6105,13 @@ uglify-js@^2.6, uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.1.4:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
diff --git a/fixtures/unstable-async/time-slicing/.gitignore b/fixtures/concurrent/time-slicing/.gitignore
similarity index 100%
rename from fixtures/unstable-async/time-slicing/.gitignore
rename to fixtures/concurrent/time-slicing/.gitignore
diff --git a/fixtures/unstable-async/time-slicing/README.md b/fixtures/concurrent/time-slicing/README.md
similarity index 100%
rename from fixtures/unstable-async/time-slicing/README.md
rename to fixtures/concurrent/time-slicing/README.md
diff --git a/fixtures/unstable-async/time-slicing/package.json b/fixtures/concurrent/time-slicing/package.json
similarity index 100%
rename from fixtures/unstable-async/time-slicing/package.json
rename to fixtures/concurrent/time-slicing/package.json
diff --git a/fixtures/unstable-async/time-slicing/public/favicon.ico b/fixtures/concurrent/time-slicing/public/favicon.ico
similarity index 100%
rename from fixtures/unstable-async/time-slicing/public/favicon.ico
rename to fixtures/concurrent/time-slicing/public/favicon.ico
diff --git a/fixtures/unstable-async/time-slicing/public/index.html b/fixtures/concurrent/time-slicing/public/index.html
similarity index 100%
rename from fixtures/unstable-async/time-slicing/public/index.html
rename to fixtures/concurrent/time-slicing/public/index.html
diff --git a/fixtures/unstable-async/time-slicing/public/manifest.json b/fixtures/concurrent/time-slicing/public/manifest.json
similarity index 100%
rename from fixtures/unstable-async/time-slicing/public/manifest.json
rename to fixtures/concurrent/time-slicing/public/manifest.json
diff --git a/fixtures/unstable-async/time-slicing/src/Charts.js b/fixtures/concurrent/time-slicing/src/Charts.js
similarity index 100%
rename from fixtures/unstable-async/time-slicing/src/Charts.js
rename to fixtures/concurrent/time-slicing/src/Charts.js
diff --git a/fixtures/unstable-async/time-slicing/src/Clock.js b/fixtures/concurrent/time-slicing/src/Clock.js
similarity index 100%
rename from fixtures/unstable-async/time-slicing/src/Clock.js
rename to fixtures/concurrent/time-slicing/src/Clock.js
diff --git a/fixtures/unstable-async/time-slicing/src/index.css b/fixtures/concurrent/time-slicing/src/index.css
similarity index 100%
rename from fixtures/unstable-async/time-slicing/src/index.css
rename to fixtures/concurrent/time-slicing/src/index.css
diff --git a/fixtures/unstable-async/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
similarity index 94%
rename from fixtures/unstable-async/time-slicing/src/index.js
rename to fixtures/concurrent/time-slicing/src/index.js
index dc8890617229f..40c19442e3511 100644
--- a/fixtures/unstable-async/time-slicing/src/index.js
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react';
-import {flushSync, unstable_createRoot} from 'react-dom';
+import {flushSync, createRoot} from 'react-dom';
 import Scheduler from 'scheduler';
 import _ from 'lodash';
 import Charts from './Charts';
@@ -107,9 +107,10 @@ class App extends PureComponent {
         this.debouncedHandleChange(value);
         break;
       case 'async':
-        unstable_scheduleCallback(() => {
+        // TODO: useTransition hook instead.
+        setTimeout(() => {
           this.setState({value});
-        });
+        }, 0);
         break;
       default:
         break;
@@ -146,5 +147,5 @@ class App extends PureComponent {
 }
 
 const container = document.getElementById('root');
-const root = ReactDOM.unstable_createRoot(container);
-root.render(<App />, container);
+const root = createRoot(container);
+root.render(<App />);
diff --git a/fixtures/unstable-async/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock
similarity index 100%
rename from fixtures/unstable-async/time-slicing/yarn.lock
rename to fixtures/concurrent/time-slicing/yarn.lock
diff --git a/fixtures/devtools/regression/14.9.html b/fixtures/devtools/regression/14.9.html
new file mode 100644
index 0000000000000..524ff196881f5
--- /dev/null
+++ b/fixtures/devtools/regression/14.9.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 14.9</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/14.9.html">http://localhost:3000/14.9.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.0.html b/fixtures/devtools/regression/15.0.html
new file mode 100644
index 0000000000000..fde26012c6bbe
--- /dev/null
+++ b/fixtures/devtools/regression/15.0.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.0</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.0/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.0.html">http://localhost:3000/15.0.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.1.html b/fixtures/devtools/regression/15.1.html
new file mode 100644
index 0000000000000..49813d80a19d6
--- /dev/null
+++ b/fixtures/devtools/regression/15.1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.1</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.1/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.1.html">http://localhost:3000/15.1.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.2.html b/fixtures/devtools/regression/15.2.html
new file mode 100644
index 0000000000000..2be6f7c41aae3
--- /dev/null
+++ b/fixtures/devtools/regression/15.2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.2</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.2/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.2.html">http://localhost:3000/15.2.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.3.html b/fixtures/devtools/regression/15.3.html
new file mode 100644
index 0000000000000..cc5c3960d2a44
--- /dev/null
+++ b/fixtures/devtools/regression/15.3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.3</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.3/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.3.html">http://localhost:3000/15.3.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.4.html b/fixtures/devtools/regression/15.4.html
new file mode 100644
index 0000000000000..93b425a644b6f
--- /dev/null
+++ b/fixtures/devtools/regression/15.4.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.4</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.4/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.4.html">http://localhost:3000/15.4.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.5.html b/fixtures/devtools/regression/15.5.html
new file mode 100644
index 0000000000000..75f722ccabfe6
--- /dev/null
+++ b/fixtures/devtools/regression/15.5.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.5</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.5/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.5.html">http://localhost:3000/15.5.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/15.6.html b/fixtures/devtools/regression/15.6.html
new file mode 100644
index 0000000000000..0ec03ee51d123
--- /dev/null
+++ b/fixtures/devtools/regression/15.6.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 15.6</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@15.6/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/15.6.html">http://localhost:3000/15.6.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.0.html b/fixtures/devtools/regression/16.0.html
new file mode 100644
index 0000000000000..1e1403372ca43
--- /dev/null
+++ b/fixtures/devtools/regression/16.0.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.0</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.0.html">http://localhost:3000/16.0.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.1.html b/fixtures/devtools/regression/16.1.html
new file mode 100644
index 0000000000000..a6131e9ae1ce9
--- /dev/null
+++ b/fixtures/devtools/regression/16.1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.1</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.1.html">http://localhost:3000/16.1.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.2.html b/fixtures/devtools/regression/16.2.html
new file mode 100644
index 0000000000000..4d0468d343428
--- /dev/null
+++ b/fixtures/devtools/regression/16.2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.2</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.2.html">http://localhost:3000/16.2.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.3.html b/fixtures/devtools/regression/16.3.html
new file mode 100644
index 0000000000000..335adaeffead1
--- /dev/null
+++ b/fixtures/devtools/regression/16.3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.3</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.3.html">http://localhost:3000/16.3.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.4.html b/fixtures/devtools/regression/16.4.html
new file mode 100644
index 0000000000000..8a881ea3fe059
--- /dev/null
+++ b/fixtures/devtools/regression/16.4.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.4</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.4.html">http://localhost:3000/16.4.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.5.html b/fixtures/devtools/regression/16.5.html
new file mode 100644
index 0000000000000..ad91102b1b609
--- /dev/null
+++ b/fixtures/devtools/regression/16.5.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.5</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
+    <script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.5/umd/react-dom.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.5.html">http://localhost:3000/16.5.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.6.html b/fixtures/devtools/regression/16.6.html
new file mode 100644
index 0000000000000..aa8ae33837e57
--- /dev/null
+++ b/fixtures/devtools/regression/16.6.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.6</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.6/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.6.html">http://localhost:3000/16.6.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/16.7.html b/fixtures/devtools/regression/16.7.html
new file mode 100644
index 0000000000000..76fb9823014c2
--- /dev/null
+++ b/fixtures/devtools/regression/16.7.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React 16.7</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/16.7.html">http://localhost:3000/16.7.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/canary.html b/fixtures/devtools/regression/canary.html
new file mode 100644
index 0000000000000..88cadef4ccaf6
--- /dev/null
+++ b/fixtures/devtools/regression/canary.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React canary</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@canary/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/canary.html">http://localhost:3000/canary.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/index.html b/fixtures/devtools/regression/index.html
new file mode 100644
index 0000000000000..125a8e8baf9b9
--- /dev/null
+++ b/fixtures/devtools/regression/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React DevTools regression test</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <iframe src="canary.html"></iframe>
+    <iframe src="next.html"></iframe>
+    <iframe src="16.7.html"></iframe>
+    <iframe src="16.6.html"></iframe>
+    <iframe src="16.5.html"></iframe>
+    <iframe src="16.4.html"></iframe>
+    <iframe src="16.3.html"></iframe>
+    <iframe src="16.2.html"></iframe>
+    <iframe src="16.1.html"></iframe>
+    <iframe src="16.0.html"></iframe>
+    <iframe src="15.6.html"></iframe>
+    <iframe src="15.5.html"></iframe>
+    <iframe src="15.4.html"></iframe>
+    <iframe src="15.3.html"></iframe>
+    <iframe src="15.2.html"></iframe>
+    <iframe src="15.1.html"></iframe>
+    <iframe src="15.0.html"></iframe>
+    <iframe src="14.9.html"></iframe>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/next.html b/fixtures/devtools/regression/next.html
new file mode 100644
index 0000000000000..4ac0751a0c22d
--- /dev/null
+++ b/fixtures/devtools/regression/next.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React next</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@next/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+    
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use the <code>server</code> script instead:
+      <br/><br/>
+      <code>node ./fixtures/devtools/regression/server.js</code><br/>
+      <code>open <a href="http://localhost:3000/next.html">http://localhost:3000/next.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/regression/server.js b/fixtures/devtools/regression/server.js
new file mode 100755
index 0000000000000..34853173a01ee
--- /dev/null
+++ b/fixtures/devtools/regression/server.js
@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+const finalhandler = require('finalhandler');
+const http = require('http');
+const serveStatic = require('serve-static');
+
+// Serve fixtures folder
+const serve = serveStatic(__dirname, {index: 'index.html'});
+
+// Create server
+const server = http.createServer(function onRequest(req, res) {
+  serve(req, res, finalhandler(req, res));
+});
+
+// Listen
+server.listen(3000);
diff --git a/fixtures/devtools/regression/shared.js b/fixtures/devtools/regression/shared.js
new file mode 100644
index 0000000000000..055ba3d65e553
--- /dev/null
+++ b/fixtures/devtools/regression/shared.js
@@ -0,0 +1,328 @@
+/* eslint-disable no-fallthrough, react/react-in-jsx-scope, react/jsx-no-undef */
+/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing  */
+
+const apps = [];
+
+const pieces = React.version.split('.');
+const major =
+  pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);
+const minor =
+  pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
+
+// Convenience wrapper to organize API features in DevTools.
+function Feature({children, label, version}) {
+  return (
+    <div className="Feature">
+      <div className="FeatureHeader">
+        <code className="FeatureCode">{label}</code>
+        <small>{version}</small>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// Simplify interaction tracing for tests below.
+let trace = null;
+if (typeof SchedulerTracing !== 'undefined') {
+  trace = SchedulerTracing.unstable_trace;
+} else if (typeof ScheduleTracing !== 'undefined') {
+  trace = ScheduleTracing.unstable_trace;
+} else {
+  trace = (_, __, callback) => callback();
+}
+
+// https://github.com/facebook/react/blob/master/CHANGELOG.md
+switch (major) {
+  case 16:
+    switch (minor) {
+      case 7:
+        if (typeof React.useState === 'function') {
+          // Hooks
+          function Hooks() {
+            const [count, setCount] = React.useState(0);
+            const incrementCount = React.useCallback(
+              () => setCount(count + 1),
+              [count]
+            );
+            return (
+              <div>
+                count: {count}{' '}
+                <button onClick={incrementCount}>increment</button>
+              </div>
+            );
+          }
+          apps.push(
+            <Feature key="Hooks" label="Hooks" version="16.7+">
+              <Hooks />
+            </Feature>
+          );
+        }
+      case 6:
+        // memo
+        function LabelComponent({label}) {
+          return <label>{label}</label>;
+        }
+        const AnonymousMemoized = React.memo(({label}) => (
+          <label>{label}</label>
+        ));
+        const Memoized = React.memo(LabelComponent);
+        const CustomMemoized = React.memo(LabelComponent);
+        CustomMemoized.displayName = 'MemoizedLabelFunction';
+        apps.push(
+          <Feature key="memo" label="memo" version="16.6+">
+            <AnonymousMemoized label="AnonymousMemoized" />
+            <Memoized label="Memoized" />
+            <CustomMemoized label="CustomMemoized" />
+          </Feature>
+        );
+
+        // Suspense
+        const loadResource = ([text, ms]) => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              resolve(text);
+            }, ms);
+          });
+        };
+        const getResourceKey = ([text, ms]) => text;
+        const Resource = ReactCache.unstable_createResource(
+          loadResource,
+          getResourceKey
+        );
+        class Suspending extends React.Component {
+          state = {useSuspense: false};
+          useSuspense = () => this.setState({useSuspense: true});
+          render() {
+            if (this.state.useSuspense) {
+              const text = Resource.read(['loaded', 2000]);
+              return text;
+            } else {
+              return <button onClick={this.useSuspense}>load data</button>;
+            }
+          }
+        }
+        apps.push(
+          <Feature key="Suspense" label="Suspense" version="16.6+">
+            <React.Suspense fallback={<div>loading...</div>}>
+              <Suspending />
+            </React.Suspense>
+          </Feature>
+        );
+
+        // lazy
+        const LazyWithDefaultProps = React.lazy(
+          () =>
+            new Promise(resolve => {
+              function FooWithDefaultProps(props) {
+                return (
+                  <h1>
+                    {props.greeting}, {props.name}
+                  </h1>
+                );
+              }
+              FooWithDefaultProps.defaultProps = {
+                name: 'World',
+                greeting: 'Bonjour',
+              };
+              resolve({
+                default: FooWithDefaultProps,
+              });
+            })
+        );
+        apps.push(
+          <Feature key="lazy" label="lazy" version="16.6+">
+            <React.Suspense fallback={<div>loading...</div>}>
+              <LazyWithDefaultProps greeting="Hello" />
+            </React.Suspense>
+          </Feature>
+        );
+      case 5:
+      case 4:
+        // unstable_Profiler
+        class ProfilerChild extends React.Component {
+          state = {count: 0};
+          incrementCount = () =>
+            this.setState(prevState => ({count: prevState.count + 1}));
+          render() {
+            return (
+              <div>
+                count: {this.state.count}{' '}
+                <button onClick={this.incrementCount}>increment</button>
+              </div>
+            );
+          }
+        }
+        const onRender = (...args) => {};
+        const Profiler = React.unstable_Profiler || React.Profiler;
+        apps.push(
+          <Feature
+            key="unstable_Profiler"
+            label="unstable_Profiler"
+            version="16.4+">
+            <Profiler id="count" onRender={onRender}>
+              <div>
+                <ProfilerChild />
+              </div>
+            </Profiler>
+          </Feature>
+        );
+      case 3:
+        // createContext()
+        const LocaleContext = React.createContext();
+        LocaleContext.displayName = 'LocaleContext';
+        const ThemeContext = React.createContext();
+        apps.push(
+          <Feature key="createContext" label="createContext" version="16.3+">
+            <ThemeContext.Provider value="blue">
+              <ThemeContext.Consumer>
+                {theme => <div>theme: {theme}</div>}
+              </ThemeContext.Consumer>
+            </ThemeContext.Provider>
+            <LocaleContext.Provider value="en-US">
+              <LocaleContext.Consumer>
+                {locale => <div>locale: {locale}</div>}
+              </LocaleContext.Consumer>
+            </LocaleContext.Provider>
+          </Feature>
+        );
+
+        // forwardRef()
+        const AnonymousFunction = React.forwardRef((props, ref) => (
+          <div ref={ref}>{props.children}</div>
+        ));
+        const NamedFunction = React.forwardRef(function named(props, ref) {
+          return <div ref={ref}>{props.children}</div>;
+        });
+        const CustomName = React.forwardRef((props, ref) => (
+          <div ref={ref}>{props.children}</div>
+        ));
+        CustomName.displayName = 'CustomNameForwardRef';
+        apps.push(
+          <Feature key="forwardRef" label="forwardRef" version="16.3+">
+            <AnonymousFunction>AnonymousFunction</AnonymousFunction>
+            <NamedFunction>NamedFunction</NamedFunction>
+            <CustomName>CustomName</CustomName>
+          </Feature>
+        );
+
+        // StrictMode
+        class StrictModeChild extends React.Component {
+          render() {
+            return 'StrictModeChild';
+          }
+        }
+        apps.push(
+          <Feature key="StrictMode" label="StrictMode" version="16.3+">
+            <React.StrictMode>
+              <StrictModeChild />
+            </React.StrictMode>
+          </Feature>
+        );
+
+        // unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)
+        const ConcurrentMode =
+          React.ConcurrentMode ||
+          React.unstable_ConcurrentMode ||
+          React.unstable_AsyncMode;
+        apps.push(
+          <Feature
+            key="AsyncMode/ConcurrentMode"
+            label="AsyncMode/ConcurrentMode"
+            version="16.3+">
+            <ConcurrentMode>
+              <div>
+                unstable_AsyncMode was added in 16.3, renamed to
+                unstable_ConcurrentMode in 16.5, and then renamed to
+                ConcurrentMode in 16.7
+              </div>
+            </ConcurrentMode>
+          </Feature>
+        );
+      case 2:
+        // Fragment
+        apps.push(
+          <Feature key="Fragment" label="Fragment" version="16.4+">
+            <React.Fragment>
+              <div>one</div>
+              <div>two</div>
+            </React.Fragment>
+          </Feature>
+        );
+      case 1:
+      case 0:
+      default:
+        break;
+    }
+    break;
+  case 15:
+    break;
+  case 14:
+    break;
+  default:
+    break;
+}
+
+function Even() {
+  return <small>(even)</small>;
+}
+
+// Simple stateful app shared by all React versions
+class SimpleApp extends React.Component {
+  state = {count: 0};
+  incrementCount = () => {
+    const updaterFn = prevState => ({count: prevState.count + 1});
+    trace('Updating count', performance.now(), () => this.setState(updaterFn));
+  };
+  render() {
+    const {count} = this.state;
+    return (
+      <div>
+        {count % 2 === 0 ? (
+          <span>
+            count: {count} <Even />
+          </span>
+        ) : (
+          <span>count: {count}</span>
+        )}{' '}
+        <button onClick={this.incrementCount}>increment</button>
+      </div>
+    );
+  }
+}
+apps.push(
+  <Feature key="Simple stateful app" label="Simple stateful app" version="any">
+    <SimpleApp />
+  </Feature>
+);
+
+// This component, with the version prop, helps organize DevTools at a glance.
+function TopLevelWrapperForDevTools({version}) {
+  let header = <h1>React {version}</h1>;
+  if (version.includes('canary')) {
+    const commitSha = version.match(/.+canary-(.+)/)[1];
+    header = (
+      <h1>
+        React canary{' '}
+        <a href={`https://github.com/facebook/react/commit/${commitSha}`}>
+          {commitSha}
+        </a>
+      </h1>
+    );
+  } else if (version.includes('alpha')) {
+    header = <h1>React next</h1>;
+  }
+
+  return (
+    <div>
+      {header}
+      {apps}
+    </div>
+  );
+}
+TopLevelWrapperForDevTools.displayName = 'React';
+
+ReactDOM.render(
+  <TopLevelWrapperForDevTools version={React.version} />,
+  document.getElementById('root')
+);
diff --git a/fixtures/devtools/regression/styles.css b/fixtures/devtools/regression/styles.css
new file mode 100644
index 0000000000000..6cbaaa5c0149a
--- /dev/null
+++ b/fixtures/devtools/regression/styles.css
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 20px;
+}
+
+h2 {
+  margin: 1rem 0 0;
+}
+
+iframe {
+  border: 1px solid #ddd;
+  border-radius: 0.5rem;
+}
+
+code {
+  white-space: nowrap;
+}
+
+.Feature {
+  margin: 1rem 0;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 1rem;
+}
+.FeatureHeader {
+  font-size: 16px;
+  margin-bottom: 0.5rem;
+}
+.FeatureCode {
+  background-color: #eee;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
diff --git a/fixtures/devtools/standalone/index.html b/fixtures/devtools/standalone/index.html
new file mode 100644
index 0000000000000..28255cb67ee6c
--- /dev/null
+++ b/fixtures/devtools/standalone/index.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>TODO List</title>
+
+    <!-- DevTools -->
+    <script src="http://localhost:8097"></script>
+
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/immutable@4.0.0-rc.12/dist/immutable.js"></script>
+
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+    <style type="text/css">
+      .Input {
+        font-size: 1rem;
+        padding: 0.25rem;
+      }
+
+      .IconButton {
+        padding: 0.25rem;
+        border: none;
+        background: none;
+        cursor: pointer;
+      }
+
+      .List {
+        margin: 0.5rem 0 0;
+        padding: 0;
+      }
+
+      .ListItem {
+        list-style-type: none;
+      }
+
+      .Label {
+        cursor: pointer;
+        padding: 0.25rem;
+        color: #555;
+      }
+      .Label:hover {
+        color: #000;
+      }
+
+      .IconButton {
+        padding: 0.25rem;
+        border: none;
+        background: none;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      const { Fragment, useCallback, useState } = React;
+
+      function List(props) {
+        const [newItemText, setNewItemText] = useState("");
+        const [items, setItems] = useState([
+          { id: 1, isComplete: true, text: "First" },
+          { id: 2, isComplete: true, text: "Second" },
+          { id: 3, isComplete: false, text: "Third" }
+        ]);
+        const [uid, setUID] = useState(4);
+
+        const handleClick = useCallback(() => {
+          if (newItemText !== "") {
+            setItems([
+              ...items,
+              {
+                id: uid,
+                isComplete: false,
+                text: newItemText
+              }
+            ]);
+            setUID(uid + 1);
+            setNewItemText("");
+          }
+        }, [newItemText, items, uid]);
+
+        const handleKeyPress = useCallback(
+          event => {
+            if (event.key === "Enter") {
+              handleClick();
+            }
+          },
+          [handleClick]
+        );
+
+        const handleChange = useCallback(
+          event => {
+            setNewItemText(event.currentTarget.value);
+          },
+          [setNewItemText]
+        );
+
+        const removeItem = useCallback(
+          itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
+          [items]
+        );
+
+        const toggleItem = useCallback(
+          itemToToggle => {
+            const index = items.indexOf(itemToToggle);
+
+            setItems(
+              items
+                .slice(0, index)
+                .concat({
+                  ...itemToToggle,
+                  isComplete: !itemToToggle.isComplete
+                })
+                .concat(items.slice(index + 1))
+            );
+          },
+          [items]
+        );
+
+        return (
+          <Fragment>
+            <h1>List</h1>
+            <input
+              type="text"
+              placeholder="New list item..."
+              className="Input"
+              value={newItemText}
+              onChange={handleChange}
+              onKeyPress={handleKeyPress}
+            />
+            <button
+              className="IconButton"
+              disabled={newItemText === ""}
+              onClick={handleClick}
+            >
+              <span role="img" aria-label="Add item">
+                ➕
+              </span>
+            </button>
+            <ul className="List">
+              {items.map(item => (
+                <ListItem
+                  key={item.id}
+                  item={item}
+                  removeItem={removeItem}
+                  toggleItem={toggleItem}
+                />
+              ))}
+            </ul>
+          </Fragment>
+        );
+      }
+
+      function ListItem({ item, removeItem, toggleItem }) {
+        const handleDelete = useCallback(() => {
+          removeItem(item);
+        }, [item, removeItem]);
+
+        const handleToggle = useCallback(() => {
+          toggleItem(item);
+        }, [item, toggleItem]);
+
+        return (
+          <li className="ListItem">
+            <button className="IconButton" onClick={handleDelete}>
+              🗑
+            </button>
+            <label className="Label">
+              <input
+                className="Input"
+                checked={item.isComplete}
+                onChange={handleToggle}
+                type="checkbox"
+              />{" "}
+              {item.text}
+            </label>
+          </li>
+        );
+      }
+
+      function SimpleValues() {
+        return (
+          <ChildComponent
+            string="abc"
+            emptyString=""
+            number={123}
+            undefined={undefined}
+            null={null}
+            nan={NaN}
+            infinity={Infinity}
+            true={true}
+            false={false}
+          />
+        );
+      }
+
+      class Custom {
+        _number = 42;
+        get number() {
+          return this._number;
+        }
+      }
+
+      function CustomObject() {
+        return <ChildComponent customObject={new Custom()} />;
+      }
+
+      const object = {
+        string: "abc",
+        longString: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890",
+        emptyString: "",
+        number: 123,
+        boolean: true,
+        undefined: undefined,
+        null: null
+      };
+
+      function ObjectProps() {
+        return (
+          <ChildComponent
+            object={{
+              outer: {
+                inner: object
+              }
+            }}
+            array={["first", "second", "third"]}
+            objectInArray={[object]}
+            arrayInObject={{ array: ["first", "second", "third"] }}
+            deepObject={{
+              // Known limitation: we won't go deeper than several levels.
+              // In the future, we might offer a way to request deeper access on demand.
+              a: {
+                b: {
+                  c: {
+                    d: {
+                      e: {
+                        f: {
+                          g: {
+                            h: {
+                              i: {
+                                j: 10
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }}
+          />
+        );
+      }
+
+      const set = new Set(['abc', 123]);
+      const map = new Map([['name', 'Brian'], ['food', 'sushi']]);
+      const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
+      const mapOfMaps = new Map([['first', map], ['second', map]]);
+      const typedArray = Int8Array.from([100, -100, 0]);
+      const immutable = Immutable.fromJS({
+        a: [{ hello: 'there' }, 'fixed', true],
+        b: 123,
+        c: {
+          '1': 'xyz',
+          xyz: 1,
+        },
+      });
+
+      function UnserializableProps() {
+        return (
+          <ChildComponent
+            map={map}
+            set={set}
+            mapOfMaps={mapOfMaps}
+            setOfSets={setOfSets}
+            typedArray={typedArray}
+            immutable={immutable}
+          />
+        );
+      }
+
+      function ChildComponent(props: any) {
+        return null;
+      }
+
+      function InspectableElements() {
+        return (
+          <Fragment>
+            <SimpleValues />
+            <ObjectProps />
+            <UnserializableProps />
+            <CustomObject />
+          </Fragment>
+        );
+      }
+
+      function App() {
+        return (
+          <Fragment>
+            <List />
+            <InspectableElements />
+          </Fragment>
+        );
+      }
+
+      ReactDOM.render(<App />, document.getElementById("root"));
+    </script>
+  </body>
+</html>
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index 9bf118f0c29cd..484d96ea088f2 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -7,9 +7,11 @@
   },
   "dependencies": {
     "@babel/standalone": "^7.0.0",
+    "art": "^0.10.3",
     "classnames": "^2.2.5",
     "codemirror": "^5.40.0",
     "core-js": "^2.4.1",
+    "jest-diff": "^24.8.0",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",
diff --git a/fixtures/dom/src/__tests__/nested-act-test.js b/fixtures/dom/src/__tests__/nested-act-test.js
new file mode 100644
index 0000000000000..a0500f47e9603
--- /dev/null
+++ b/fixtures/dom/src/__tests__/nested-act-test.js
@@ -0,0 +1,97 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+let React;
+let TestUtils;
+let TestRenderer;
+
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+
+expect.extend(require('../toWarnDev'));
+
+describe('unmocked scheduler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    TestUtils = require('react-dom/test-utils');
+    TestRenderer = require('react-test-renderer');
+  });
+
+  it('flushes work only outside the outermost act() corresponding to its own renderer', () => {
+    let log = [];
+    function Effecty() {
+      React.useEffect(() => {
+        log.push('called');
+      }, []);
+      return null;
+    }
+    // in legacy mode, this tests whether an act only flushes its own effects
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+
+    log = [];
+    // for doublechecking, we flip it inside out, and assert on the outermost
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual(['called']);
+    });
+    expect(log).toEqual(['called']);
+  });
+});
+
+describe('mocked scheduler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () =>
+      require.requireActual('scheduler/unstable_mock')
+    );
+    React = require('react');
+    TestUtils = require('react-dom/test-utils');
+    TestRenderer = require('react-test-renderer');
+  });
+
+  afterEach(() => {
+    jest.unmock('scheduler');
+  });
+
+  it('flushes work only outside the outermost act()', () => {
+    let log = [];
+    function Effecty() {
+      React.useEffect(() => {
+        log.push('called');
+      }, []);
+      return null;
+    }
+    // with a mocked scheduler, this tests whether it flushes all work only on the outermost act
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+
+    log = [];
+    // for doublechecking, we flip it inside out, and assert on the outermost
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+  });
+});
diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js
new file mode 100644
index 0000000000000..6c054efec1bf9
--- /dev/null
+++ b/fixtures/dom/src/__tests__/wrong-act-test.js
@@ -0,0 +1,197 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+let React;
+let ReactDOM;
+let ReactART;
+let ARTSVGMode;
+let ARTCurrentMode;
+let TestUtils;
+let TestRenderer;
+let ARTTest;
+
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';
+
+expect.extend(require('../toWarnDev'));
+
+function App(props) {
+  return 'hello world';
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactART = require('react-art');
+  ARTSVGMode = require('art/modes/svg');
+  ARTCurrentMode = require('art/modes/current');
+  TestUtils = require('react-dom/test-utils');
+  TestRenderer = require('react-test-renderer');
+
+  ARTCurrentMode.setCurrent(ARTSVGMode);
+
+  ARTTest = function ARTTestComponent(props) {
+    return (
+      <ReactART.Surface width={150} height={200}>
+        <ReactART.Group>
+          <ReactART.Shape
+            d="M0,0l50,0l0,50l-50,0z"
+            fill={new ReactART.LinearGradient(['black', 'white'])}
+            key="a"
+            width={50}
+            height={50}
+            x={50}
+            y={50}
+            opacity={0.1}
+          />
+          <ReactART.Shape
+            fill="#3C5A99"
+            key="b"
+            scale={0.5}
+            x={50}
+            y={50}
+            title="This is an F"
+            cursor="pointer">
+            M64.564,38.583H54l0.008-5.834c0-3.035,0.293-4.666,4.657-4.666
+            h5.833V16.429h-9.33c-11.213,0-15.159,5.654-15.159,15.16v6.994
+            h-6.99v11.652h6.99v33.815H54V50.235h9.331L64.564,38.583z
+          </ReactART.Shape>
+        </ReactART.Group>
+      </ReactART.Surface>
+    );
+  };
+});
+
+it("doesn't warn when you use the right act + renderer: dom", () => {
+  TestUtils.act(() => {
+    TestUtils.renderIntoDocument(<App />);
+  });
+});
+
+it("doesn't warn when you use the right act + renderer: test", () => {
+  TestRenderer.act(() => {
+    TestRenderer.create(<App />);
+  });
+});
+
+it('resets correctly across renderers', () => {
+  function Effecty() {
+    React.useEffect(() => {}, []);
+    return null;
+  }
+  TestUtils.act(() => {
+    TestRenderer.act(() => {});
+    expect(() => {
+      TestRenderer.create(<Effecty />);
+    }).toWarnDev(["It looks like you're using the wrong act()"], {
+      withoutStack: true,
+    });
+  });
+});
+
+it('warns when using the wrong act version - test + dom: render', () => {
+  expect(() => {
+    TestRenderer.act(() => {
+      TestUtils.renderIntoDocument(<App />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
+  });
+});
+
+it('warns when using the wrong act version - test + dom: updates', () => {
+  let setCtr;
+  function Counter(props) {
+    const [ctr, _setCtr] = React.useState(0);
+    setCtr = _setCtr;
+    return ctr;
+  }
+  TestUtils.renderIntoDocument(<Counter />);
+  expect(() => {
+    TestRenderer.act(() => {
+      setCtr(1);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"]);
+});
+
+it('warns when using the wrong act version - dom + test: .create()', () => {
+  expect(() => {
+    TestUtils.act(() => {
+      TestRenderer.create(<App />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
+  });
+});
+
+it('warns when using the wrong act version - dom + test: .update()', () => {
+  const root = TestRenderer.create(<App key="one" />);
+  expect(() => {
+    TestUtils.act(() => {
+      root.update(<App key="two" />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
+  });
+});
+
+it('warns when using the wrong act version - dom + test: updates', () => {
+  let setCtr;
+  function Counter(props) {
+    const [ctr, _setCtr] = React.useState(0);
+    setCtr = _setCtr;
+    return ctr;
+  }
+  TestRenderer.create(<Counter />);
+  expect(() => {
+    TestUtils.act(() => {
+      setCtr(1);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"]);
+});
+
+it('does not warn when nesting react-act inside react-dom', () => {
+  TestUtils.act(() => {
+    TestUtils.renderIntoDocument(<ARTTest />);
+  });
+});
+
+it('does not warn when nesting react-act inside react-test-renderer', () => {
+  TestRenderer.act(() => {
+    TestRenderer.create(<ARTTest />);
+  });
+});
+
+it("doesn't warn if you use nested acts from different renderers", () => {
+  TestRenderer.act(() => {
+    TestUtils.act(() => {
+      TestRenderer.create(<App />);
+    });
+  });
+});
+
+if (__EXPERIMENTAL__) {
+  it('warns when using createRoot() + .render', () => {
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    expect(() => {
+      TestRenderer.act(() => {
+        root.render(<App />);
+      });
+    }).toWarnDev(
+      [
+        'In Concurrent or Sync modes, the "scheduler" module needs to be mocked',
+        "It looks like you're using the wrong act()",
+      ],
+      {
+        withoutStack: true,
+      }
+    );
+  });
+}
diff --git a/fixtures/dom/src/components/Iframe.js b/fixtures/dom/src/components/Iframe.js
index 3030d5059453e..b69f74ef3ae8e 100644
--- a/fixtures/dom/src/components/Iframe.js
+++ b/fixtures/dom/src/components/Iframe.js
@@ -55,4 +55,4 @@ class IframeSubtree extends React.Component {
   }
 }
 
-export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);
+export default ReactDOM.createPortal ? IframePortal : IframeSubtree;
diff --git a/fixtures/dom/src/components/fixtures/buttons/index.js b/fixtures/dom/src/components/fixtures/buttons/index.js
index 46c12605847b6..e002937ee95bd 100644
--- a/fixtures/dom/src/components/fixtures/buttons/index.js
+++ b/fixtures/dom/src/components/fixtures/buttons/index.js
@@ -13,7 +13,7 @@ export default class ButtonTestCases extends React.Component {
       <FixtureSet title="Buttons">
         <TestCase
           title="onClick with disabled buttons"
-          description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
+          description="The onClick event handler should not be invoked when clicking on a disabled button">
           <TestCase.Steps>
             <li>Click on the disabled button</li>
           </TestCase.Steps>
diff --git a/fixtures/dom/src/components/fixtures/home.js b/fixtures/dom/src/components/fixtures/home.js
index b2f04ef272588..b446cf7e613d2 100644
--- a/fixtures/dom/src/components/fixtures/home.js
+++ b/fixtures/dom/src/components/fixtures/home.js
@@ -33,7 +33,8 @@ export default function Home() {
               <td>
                 <a href="https://www.mozilla.org/en-US/firefox/organizations/">
                   ESR<sup>†</sup>
-                </a>, Latest
+                </a>
+                , Latest
               </td>
             </tr>
             <tr>
diff --git a/fixtures/dom/src/components/fixtures/mouse-events/index.js b/fixtures/dom/src/components/fixtures/mouse-events/index.js
index 4c121bf094790..3624d4e837b2f 100644
--- a/fixtures/dom/src/components/fixtures/mouse-events/index.js
+++ b/fixtures/dom/src/components/fixtures/mouse-events/index.js
@@ -1,5 +1,6 @@
 import FixtureSet from '../../FixtureSet';
 import MouseMovement from './mouse-movement';
+import MouseEnter from './mouse-enter';
 
 const React = window.React;
 
@@ -8,6 +9,7 @@ class MouseEvents extends React.Component {
     return (
       <FixtureSet title="Mouse Events">
         <MouseMovement />
+        <MouseEnter />
       </FixtureSet>
     );
   }
diff --git a/fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js b/fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js
new file mode 100644
index 0000000000000..c0fbcbda6a432
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js
@@ -0,0 +1,73 @@
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+const MouseEnter = () => {
+  const containerRef = React.useRef();
+
+  React.useEffect(function() {
+    const hostEl = containerRef.current;
+    ReactDOM.render(<MouseEnterDetect />, hostEl, () => {
+      ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]);
+    });
+  }, []);
+
+  return (
+    <TestCase
+      title="Mouse Enter"
+      description=""
+      affectedBrowsers="Chrome, Safari, Firefox">
+      <TestCase.Steps>
+        <li>Mouse enter the boxes below, from different borders</li>
+      </TestCase.Steps>
+      <TestCase.ExpectedResult>
+        Mouse enter call count should equal to 1; <br />
+        Issue{' '}
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://github.com/facebook/react/issues/16763">
+          #16763
+        </a>{' '}
+        should not happen.
+        <br />
+      </TestCase.ExpectedResult>
+      <div ref={containerRef} />
+    </TestCase>
+  );
+};
+
+const MouseEnterDetect = () => {
+  const [log, setLog] = React.useState({});
+  const firstEl = React.useRef();
+  const siblingEl = React.useRef();
+
+  const onMouseEnter = e => {
+    const timeStamp = e.timeStamp;
+    setLog(log => {
+      const callCount = 1 + (log.timeStamp === timeStamp ? log.callCount : 0);
+      return {
+        timeStamp,
+        callCount,
+      };
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <div
+        ref={firstEl}
+        onMouseEnter={onMouseEnter}
+        style={{
+          border: '1px solid #d9d9d9',
+          padding: '20px 20px',
+        }}>
+        Mouse enter call count: {log.callCount || ''}
+      </div>
+      <div ref={siblingEl} />
+    </React.Fragment>
+  );
+};
+
+export default MouseEnter;
diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js
index c0423b6df853e..9356a3770ac98 100644
--- a/fixtures/dom/src/components/fixtures/selects/index.js
+++ b/fixtures/dom/src/components/fixtures/selects/index.js
@@ -172,7 +172,7 @@ class SelectFixture extends React.Component {
                 <option value="monkey">monkey</option>
                 <option value="lion">lion</option>
                 <option value="mongoose">mongoose</option>
-                <option value="tiger">tiget</option>
+                <option value="tiger">tiger</option>
               </select>
             </form>
           </div>
diff --git a/fixtures/dom/src/components/fixtures/suspense/index.js b/fixtures/dom/src/components/fixtures/suspense/index.js
index 2de6e257cde60..ce4c64f30e8ab 100644
--- a/fixtures/dom/src/components/fixtures/suspense/index.js
+++ b/fixtures/dom/src/components/fixtures/suspense/index.js
@@ -46,7 +46,7 @@ class SuspendyTreeChild extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Suspense fallback={<div>(display: none)</div>}>
           <div>
             <AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
@@ -54,7 +54,7 @@ class SuspendyTreeChild extends React.Component {
           </div>
         </Suspense>
         <button onClick={this.increment}>Hide</button>
-      </React.Fragment>
+      </>
     );
   }
 }
@@ -86,22 +86,22 @@ class SuspendyTree extends React.Component {
   };
   render() {
     return (
-      <React.Fragment>
+      <>
         <div ref={this.parentContainer}>
           <div ref={this.container} />
         </div>
         <div>
           {this.container.current !== null
             ? ReactDOM.createPortal(
-                <React.Fragment>
+                <>
                   <SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
                   <button onClick={this.removeAndRestore}>Remove</button>
-                </React.Fragment>,
+                </>,
                 this.container.current
               )
             : null}
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }
@@ -169,7 +169,7 @@ class TextInputFixtures extends React.Component {
               the "Go" button.
             </li>
             <li>
-              Intead of clicking "Go", which switches focus, press Command +
+              Instead of clicking "Go", which switches focus, press Command +
               Enter (or Control + Enter on Windows, Linux).
             </li>
           </TestCase.Steps>
@@ -213,8 +213,8 @@ class TextInputFixtures extends React.Component {
 
           <Fixture>
             <SuspendyTree>
-              <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Atom_%282%29.png" />React
-              is cool
+              <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Atom_%282%29.png" />
+              React is cool
             </SuspendyTree>
           </Fixture>
         </TestCase>
@@ -308,7 +308,9 @@ class TextInputFixtures extends React.Component {
               <div style={{height: 200, overflow: 'scroll'}}>
                 {Array(20)
                   .fill()
-                  .map((_, i) => <h2 key={i}>{i + 1}</h2>)}
+                  .map((_, i) => (
+                    <h2 key={i}>{i + 1}</h2>
+                  ))}
               </div>
             </SuspendyTree>
           </Fixture>
diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
index 54173cb323c22..9c3f14f85de91 100644
--- a/fixtures/dom/src/components/fixtures/textareas/index.js
+++ b/fixtures/dom/src/components/fixtures/textareas/index.js
@@ -1,3 +1,4 @@
+import Fixture from '../../Fixture';
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 
@@ -39,6 +40,44 @@ export default class TextAreaFixtures extends React.Component {
             <textarea placeholder="Hello, world" />
           </div>
         </TestCase>
+
+        <TestCase
+          title="Required Textareas"
+          affectedBrowsers="Firefox"
+          relatedIssues="16402">
+          <TestCase.Steps>
+            <li>View this test in Firefox</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            You should{' '}
+            <b>
+              <i>not</i>
+            </b>{' '}
+            see a red aura on initial page load, indicating the textarea is
+            invalid.
+            <br />
+            This aura looks roughly like:
+            <textarea style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <form className="control-box">
+              <fieldset>
+                <legend>Empty value prop string</legend>
+                <textarea value="" required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop</legend>
+                <textarea required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>Empty defaultValue prop string</legend>
+                <textarea required={true} defaultValue="" />
+              </fieldset>
+            </form>
+          </Fixture>
+        </TestCase>
       </FixtureSet>
     );
   }
diff --git a/fixtures/dom/src/index.test.js b/fixtures/dom/src/index.test.js
deleted file mode 100644
index 0eddb918706b3..0000000000000
--- a/fixtures/dom/src/index.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import TestUtils from 'react-dom/test-utils';
-import TestRenderer from 'react-test-renderer';
-
-let spy;
-beforeEach(() => {
-  spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-});
-
-function confirmWarning() {
-  expect(spy).toHaveBeenCalledWith(
-    expect.stringContaining(
-      "It looks like you're using the wrong act() around your test interactions."
-    ),
-    ''
-  );
-}
-
-function App(props) {
-  return 'hello world';
-}
-
-it("doesn't warn when you use the right act + renderer: dom", () => {
-  TestUtils.act(() => {
-    TestUtils.renderIntoDocument(<App />);
-  });
-  expect(spy).not.toHaveBeenCalled();
-});
-
-it("doesn't warn when you use the right act + renderer: test", () => {
-  TestRenderer.act(() => {
-    TestRenderer.create(<App />);
-  });
-  expect(spy).not.toHaveBeenCalled();
-});
-
-it('works with createRoot().render combo', () => {
-  const root = ReactDOM.unstable_createRoot(document.createElement('div'));
-  TestRenderer.act(() => {
-    root.render(<App />);
-  });
-  confirmWarning();
-});
-
-it('warns when using the wrong act version - test + dom: render', () => {
-  TestRenderer.act(() => {
-    TestUtils.renderIntoDocument(<App />);
-  });
-  confirmWarning();
-});
-
-it('warns when using the wrong act version - test + dom: updates', () => {
-  let setCtr;
-  function Counter(props) {
-    const [ctr, _setCtr] = React.useState(0);
-    setCtr = _setCtr;
-    return ctr;
-  }
-  TestUtils.renderIntoDocument(<Counter />);
-  TestRenderer.act(() => {
-    setCtr(1);
-  });
-  confirmWarning();
-});
-
-it('warns when using the wrong act version - dom + test: .create()', () => {
-  TestUtils.act(() => {
-    TestRenderer.create(<App />);
-  });
-  confirmWarning();
-});
-
-it('warns when using the wrong act version - dom + test: .update()', () => {
-  let root;
-  // use the right one here so we don't get the first warning
-  TestRenderer.act(() => {
-    root = TestRenderer.create(<App key="one" />);
-  });
-  TestUtils.act(() => {
-    root.update(<App key="two" />);
-  });
-  confirmWarning();
-});
-
-it('warns when using the wrong act version - dom + test: updates', () => {
-  let setCtr;
-  function Counter(props) {
-    const [ctr, _setCtr] = React.useState(0);
-    setCtr = _setCtr;
-    return ctr;
-  }
-  const root = TestRenderer.create(<Counter />);
-  TestUtils.act(() => {
-    setCtr(1);
-  });
-  confirmWarning();
-});
diff --git a/fixtures/dom/src/toWarnDev.js b/fixtures/dom/src/toWarnDev.js
new file mode 100644
index 0000000000000..faa793f416c40
--- /dev/null
+++ b/fixtures/dom/src/toWarnDev.js
@@ -0,0 +1,289 @@
+// copied from scripts/jest/matchers/toWarnDev.js
+'use strict';
+
+const jestDiff = require('jest-diff');
+const util = require('util');
+
+function shouldIgnoreConsoleError(format, args) {
+  if (__DEV__) {
+    if (typeof format === 'string') {
+      if (format.indexOf('Error: Uncaught [') === 0) {
+        // This looks like an uncaught error from invokeGuardedCallback() wrapper
+        // in development that is reported by jsdom. Ignore because it's noisy.
+        return true;
+      }
+      if (format.indexOf('The above error occurred') === 0) {
+        // This looks like an error addendum from ReactFiberErrorLogger.
+        // Ignore it too.
+        return true;
+      }
+    }
+  } else {
+    if (
+      format != null &&
+      typeof format.message === 'string' &&
+      typeof format.stack === 'string' &&
+      args.length === 0
+    ) {
+      // In production, ReactFiberErrorLogger logs error objects directly.
+      // They are noisy too so we'll try to ignore them.
+      return true;
+    }
+  }
+  // Looks legit
+  return false;
+}
+
+function normalizeCodeLocInfo(str) {
+  return str && str.replace(/at .+?:\d+/g, 'at **');
+}
+
+const createMatcherFor = consoleMethod =>
+  function matcher(callback, expectedMessages, options = {}) {
+    if (__DEV__) {
+      // Warn about incorrect usage of matcher.
+      if (typeof expectedMessages === 'string') {
+        expectedMessages = [expectedMessages];
+      } else if (!Array.isArray(expectedMessages)) {
+        throw Error(
+          `toWarnDev() requires a parameter of type string or an array of strings ` +
+            `but was given ${typeof expectedMessages}.`
+        );
+      }
+      if (
+        options != null &&
+        (typeof options !== 'object' || Array.isArray(options))
+      ) {
+        throw new Error(
+          'toWarnDev() second argument, when present, should be an object. ' +
+            'Did you forget to wrap the messages into an array?'
+        );
+      }
+      if (arguments.length > 3) {
+        // `matcher` comes from Jest, so it's more than 2 in practice
+        throw new Error(
+          'toWarnDev() received more than two arguments. ' +
+            'Did you forget to wrap the messages into an array?'
+        );
+      }
+
+      const withoutStack = options.withoutStack;
+      const warningsWithoutComponentStack = [];
+      const warningsWithComponentStack = [];
+      const unexpectedWarnings = [];
+
+      let lastWarningWithMismatchingFormat = null;
+      let lastWarningWithExtraComponentStack = null;
+
+      // Catch errors thrown by the callback,
+      // But only rethrow them if all test expectations have been satisfied.
+      // Otherwise an Error in the callback can mask a failed expectation,
+      // and result in a test that passes when it shouldn't.
+      let caughtError;
+
+      const isLikelyAComponentStack = message =>
+        typeof message === 'string' && message.includes('\n    in ');
+
+      const consoleSpy = (format, ...args) => {
+        // Ignore uncaught errors reported by jsdom
+        // and React addendums because they're too noisy.
+        if (
+          consoleMethod === 'error' &&
+          shouldIgnoreConsoleError(format, args)
+        ) {
+          return;
+        }
+
+        const message = util.format(format, ...args);
+        const normalizedMessage = normalizeCodeLocInfo(message);
+
+        // Remember if the number of %s interpolations
+        // doesn't match the number of arguments.
+        // We'll fail the test if it happens.
+        let argIndex = 0;
+        format.replace(/%s/g, () => argIndex++);
+        if (argIndex !== args.length) {
+          lastWarningWithMismatchingFormat = {
+            format,
+            args,
+            expectedArgCount: argIndex,
+          };
+        }
+
+        // Protect against accidentally passing a component stack
+        // to warning() which already injects the component stack.
+        if (
+          args.length >= 2 &&
+          isLikelyAComponentStack(args[args.length - 1]) &&
+          isLikelyAComponentStack(args[args.length - 2])
+        ) {
+          lastWarningWithExtraComponentStack = {
+            format,
+          };
+        }
+
+        for (let index = 0; index < expectedMessages.length; index++) {
+          const expectedMessage = expectedMessages[index];
+          if (
+            normalizedMessage === expectedMessage ||
+            normalizedMessage.includes(expectedMessage)
+          ) {
+            if (isLikelyAComponentStack(normalizedMessage)) {
+              warningsWithComponentStack.push(normalizedMessage);
+            } else {
+              warningsWithoutComponentStack.push(normalizedMessage);
+            }
+            expectedMessages.splice(index, 1);
+            return;
+          }
+        }
+
+        let errorMessage;
+        if (expectedMessages.length === 0) {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            this.utils.printReceived(normalizedMessage);
+        } else if (expectedMessages.length === 1) {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            jestDiff(expectedMessages[0], normalizedMessage);
+        } else {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            jestDiff(expectedMessages, [normalizedMessage]);
+        }
+
+        // Record the call stack for unexpected warnings.
+        // We don't throw an Error here though,
+        // Because it might be suppressed by ReactFiberScheduler.
+        unexpectedWarnings.push(new Error(errorMessage));
+      };
+
+      // TODO Decide whether we need to support nested toWarn* expectations.
+      // If we don't need it, add a check here to see if this is already our spy,
+      // And throw an error.
+      const originalMethod = console[consoleMethod];
+
+      // Avoid using Jest's built-in spy since it can't be removed.
+      console[consoleMethod] = consoleSpy;
+
+      try {
+        callback();
+      } catch (error) {
+        caughtError = error;
+      } finally {
+        // Restore the unspied method so that unexpected errors fail tests.
+        console[consoleMethod] = originalMethod;
+
+        // Any unexpected Errors thrown by the callback should fail the test.
+        // This should take precedence since unexpected errors could block warnings.
+        if (caughtError) {
+          throw caughtError;
+        }
+
+        // Any unexpected warnings should be treated as a failure.
+        if (unexpectedWarnings.length > 0) {
+          return {
+            message: () => unexpectedWarnings[0].stack,
+            pass: false,
+          };
+        }
+
+        // Any remaining messages indicate a failed expectations.
+        if (expectedMessages.length > 0) {
+          return {
+            message: () =>
+              `Expected warning was not recorded:\n  ${this.utils.printReceived(
+                expectedMessages[0]
+              )}`,
+            pass: false,
+          };
+        }
+
+        if (typeof withoutStack === 'number') {
+          // We're expecting a particular number of warnings without stacks.
+          if (withoutStack !== warningsWithoutComponentStack.length) {
+            return {
+              message: () =>
+                `Expected ${withoutStack} warnings without a component stack but received ${warningsWithoutComponentStack.length}:\n` +
+                warningsWithoutComponentStack.map(warning =>
+                  this.utils.printReceived(warning)
+                ),
+              pass: false,
+            };
+          }
+        } else if (withoutStack === true) {
+          // We're expecting that all warnings won't have the stack.
+          // If some warnings have it, it's an error.
+          if (warningsWithComponentStack.length > 0) {
+            return {
+              message: () =>
+                `Received warning unexpectedly includes a component stack:\n  ${this.utils.printReceived(
+                  warningsWithComponentStack[0]
+                )}\nIf this warning intentionally includes the component stack, remove ` +
+                `{withoutStack: true} from the toWarnDev() call. If you have a mix of ` +
+                `warnings with and without stack in one toWarnDev() call, pass ` +
+                `{withoutStack: N} where N is the number of warnings without stacks.`,
+              pass: false,
+            };
+          }
+        } else if (withoutStack === false || withoutStack === undefined) {
+          // We're expecting that all warnings *do* have the stack (default).
+          // If some warnings don't have it, it's an error.
+          if (warningsWithoutComponentStack.length > 0) {
+            return {
+              message: () =>
+                `Received warning unexpectedly does not include a component stack:\n  ${this.utils.printReceived(
+                  warningsWithoutComponentStack[0]
+                )}\nIf this warning intentionally omits the component stack, add ` +
+                `{withoutStack: true} to the toWarnDev() call.`,
+              pass: false,
+            };
+          }
+        } else {
+          throw Error(
+            `The second argument for toWarnDev(), when specified, must be an object. It may have a ` +
+              `property called "withoutStack" whose value may be undefined, boolean, or a number. ` +
+              `Instead received ${typeof withoutStack}.`
+          );
+        }
+
+        if (lastWarningWithMismatchingFormat !== null) {
+          return {
+            message: () =>
+              `Received ${
+                lastWarningWithMismatchingFormat.args.length
+              } arguments for a message with ${
+                lastWarningWithMismatchingFormat.expectedArgCount
+              } placeholders:\n  ${this.utils.printReceived(
+                lastWarningWithMismatchingFormat.format
+              )}`,
+            pass: false,
+          };
+        }
+
+        if (lastWarningWithExtraComponentStack !== null) {
+          return {
+            message: () =>
+              `Received more than one component stack for a warning:\n  ${this.utils.printReceived(
+                lastWarningWithExtraComponentStack.format
+              )}\nDid you accidentally pass a stack to warning() as the last argument? ` +
+              `Don't forget warning() already injects the component stack automatically.`,
+            pass: false,
+          };
+        }
+
+        return {pass: true};
+      }
+    } else {
+      // Any uncaught errors or warnings should fail tests in production mode.
+      callback();
+
+      return {pass: true};
+    }
+  };
+
+module.exports = {
+  toLowPriorityWarnDev: createMatcherFor('warn'),
+  toWarnDev: createMatcherFor('error'),
+};
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 07ea599ad3aac..edd36f7ef419e 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -6,6 +6,40 @@
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.0.0.tgz#856446641620c1c5f0ca775621d478324ebd1f52"
 
+"@jest/types@^24.8.0":
+  version "24.8.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.8.0.tgz#f31e25948c58f0abd8c845ae26fcea1491dea7ad"
+  integrity sha512-g17UxVr2YfBtaMUxn9u/4+siG1ptg9IGYAYwvpwn61nBg779RXnjE/m7CxYcIzEt0AbHZZAHSEZNhkE2WxURVg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^12.0.9"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
+
+"@types/istanbul-lib-report@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
+  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/yargs@^12.0.9":
+  version "12.0.12"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
+  integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -140,6 +174,11 @@ ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
 
+ansi-regex@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -150,6 +189,13 @@ ansi-styles@^3.0.0, ansi-styles@^3.1.0:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
 anymatch@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
@@ -249,6 +295,11 @@ arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
+art@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
+  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
+
 asap@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
@@ -287,26 +338,16 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@^1.4.0, async@^1.5.2:
+async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.4.1:
+async@^2.1.2, async@^2.1.4, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
-  dependencies:
-    lodash "^4.14.0"
-
-async@~0.2.6:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1466,6 +1507,15 @@ chalk@^2.0.0, chalk@^2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1622,6 +1672,11 @@ commander@^2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2058,6 +2113,11 @@ detect-port-alt@1.1.3:
     address "^1.0.1"
     debug "^2.6.0"
 
+diff-sequences@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
+  integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==
+
 diff@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
@@ -2658,7 +2718,7 @@ faye-websocket@~0.11.0:
 
 fb-watchman@^1.8.0:
   version "1.9.0"
-  resolved "http://registry.npmjs.org/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
+  resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
   dependencies:
     bser "^1.0.2"
 
@@ -3076,14 +3136,15 @@ handle-thing@^1.2.5:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
 handlebars@^4.0.3:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -3119,6 +3180,11 @@ has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3527,7 +3593,7 @@ is-plain-obj@^1.0.0:
 
 is-posix-bracket@^0.1.0:
   version "0.1.1"
-  resolved "http://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  resolved "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
 
 is-primitive@^2.0.0:
   version "2.0.0"
@@ -3770,6 +3836,16 @@ jest-diff@^20.0.3:
     jest-matcher-utils "^20.0.3"
     pretty-format "^20.0.3"
 
+jest-diff@^24.8.0:
+  version "24.8.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.8.0.tgz#146435e7d1e3ffdf293d53ff97e193f1d1546172"
+  integrity sha512-wxetCEl49zUpJ/bvUmIFjd/o52J+yWcoc5ZyPq4/W1LUKGEhRYDIbP1KcF6t+PvqNrGAFk4/JhtxDq/Nnzs66g==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.3.0"
+    jest-get-type "^24.8.0"
+    pretty-format "^24.8.0"
+
 jest-docblock@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
@@ -3789,6 +3865,11 @@ jest-environment-node@^20.0.3:
     jest-mock "^20.0.3"
     jest-util "^20.0.3"
 
+jest-get-type@^24.8.0:
+  version "24.8.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.8.0.tgz#a7440de30b651f5a70ea3ed7ff073a32dfe646fc"
+  integrity sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ==
+
 jest-haste-map@^20.0.4:
   version "20.0.5"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-20.0.5.tgz#abad74efb1a005974a7b6517e11010709cab9112"
@@ -4376,7 +4457,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@0.0.8, minimist@~0.0.1:
+minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -4384,6 +4465,11 @@ minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -4435,6 +4521,11 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+
 no-case@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
@@ -4690,6 +4781,7 @@ opn@5.1.0:
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   dependencies:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
@@ -5243,6 +5335,16 @@ pretty-format@^20.0.3:
     ansi-regex "^2.1.1"
     ansi-styles "^3.0.0"
 
+pretty-format@^24.8.0:
+  version "24.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.8.0.tgz#8dae7044f58db7cb8be245383b565a963e3c27f2"
+  integrity sha512-P952T7dkrDEplsR+TuY7q3VXDae5Sr7zmQb12JU/NDQa/3CH7/QW0yvqLcGN6jL+zQFKaoJcPc+yJxMTGmosqw==
+  dependencies:
+    "@jest/types" "^24.8.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
 private@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
@@ -5429,6 +5531,11 @@ react-error-overlay@^1.0.10:
     settle-promise "1.0.0"
     source-map "0.5.6"
 
+react-is@^16.8.4:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-scripts@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.11.tgz#483d49e27f417ec981ae415a4456120a2a2bc8c1"
@@ -6046,11 +6153,10 @@ source-map@0.5.6, source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
+source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 source-map@~0.2.0:
   version "0.2.0"
@@ -6248,6 +6354,13 @@ supports-color@^4.0.0, supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 svgo@^0.7.0:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
@@ -6473,15 +6586,6 @@ uglify-js@3.0.x, uglify-js@^3.0.13:
     commander "~2.11.0"
     source-map "~0.5.1"
 
-uglify-js@^2.6:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
-  dependencies:
-    async "~0.2.6"
-    source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
-    yargs "~3.10.0"
-
 uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -6491,6 +6595,14 @@ uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.1.4:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
@@ -6834,6 +6946,7 @@ wordwrap@0.0.2:
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
 wordwrap@~1.0.0:
   version "1.0.0"
diff --git a/fixtures/eslint/index.js b/fixtures/eslint/index.js
index 1052cac180fcc..d53415310560d 100644
--- a/fixtures/eslint/index.js
+++ b/fixtures/eslint/index.js
@@ -8,22 +8,19 @@ function Comment({comment, commentSource}) {
   const currentUserID = comment.viewer.id;
   const environment = RelayEnvironment.forUser(currentUserID);
   const commentID = nullthrows(comment.id);
-  useEffect(
-    () => {
-      const subscription = SubscriptionCounter.subscribeOnce(
-        `StoreSubscription_${commentID}`,
-        () =>
-          StoreSubscription.subscribe(
-            environment,
-            {
-              comment_id: commentID,
-            },
-            currentUserID,
-            commentSource
-          )
-      );
-      return () => subscription.dispose();
-    },
-    [commentID, commentSource, currentUserID, environment]
-  );
+  useEffect(() => {
+    const subscription = SubscriptionCounter.subscribeOnce(
+      `StoreSubscription_${commentID}`,
+      () =>
+        StoreSubscription.subscribe(
+          environment,
+          {
+            comment_id: commentID,
+          },
+          currentUserID,
+          commentSource
+        )
+    );
+    return () => subscription.dispose();
+  }, [commentID, commentSource, currentUserID, environment]);
 }
diff --git a/fixtures/expiration/yarn.lock b/fixtures/expiration/yarn.lock
index 0d91b17477e1d..7a5bec70bcf56 100644
--- a/fixtures/expiration/yarn.lock
+++ b/fixtures/expiration/yarn.lock
@@ -83,10 +83,6 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-
 ansi-align@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
@@ -260,7 +256,7 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@^1.4.0, async@^1.5.2:
+async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -1419,6 +1415,10 @@ commander@2.11.x, commander@~2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2818,14 +2818,14 @@ handle-thing@^1.2.5:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
 handlebars@^4.0.3:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -4179,6 +4179,10 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -5723,12 +5727,6 @@ source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -6119,7 +6117,7 @@ uglify-js@3.1.x, uglify-js@^3.0.13:
     commander "~2.11.0"
     source-map "~0.6.1"
 
-uglify-js@^2.6, uglify-js@^2.8.29:
+uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
@@ -6128,6 +6126,13 @@ uglify-js@^2.6, uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.1.4:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
diff --git a/fixtures/fiber-debugger/src/App.js b/fixtures/fiber-debugger/src/App.js
index a70e3aee5df8d..75d74c76b70cd 100644
--- a/fixtures/fiber-debugger/src/App.js
+++ b/fixtures/fiber-debugger/src/App.js
@@ -192,8 +192,7 @@ class App extends Component {
               }
             />
             <p>
-              Step {currentStep}
-              : {friendlyAction} (
+              Step {currentStep}: {friendlyAction} (
               <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
                 Edit
               </a>
diff --git a/fixtures/fiber-debugger/src/Fibers.js b/fixtures/fiber-debugger/src/Fibers.js
index bd5d1b742ceed..b6b06e59a7170 100644
--- a/fixtures/fiber-debugger/src/Fibers.js
+++ b/fixtures/fiber-debugger/src/Fibers.js
@@ -330,83 +330,76 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {
               ]}
             </div>
           </Vertex>,
-          fiber.child &&
-            show.child && (
-              <Edge
-                source={fiber.id}
-                target={fiber.child}
-                kind="child"
-                weight={1000}
-                key={`${fiber.id}-${fiber.child}-child`}>
-                child
-              </Edge>
-            ),
-          fiber.sibling &&
-            show.sibling && (
-              <Edge
-                source={fiber.id}
-                target={fiber.sibling}
-                kind="sibling"
-                weight={2000}
-                key={`${fiber.id}-${fiber.sibling}-sibling`}>
-                sibling
-              </Edge>
-            ),
-          fiber.return &&
-            show.return && (
-              <Edge
-                source={fiber.id}
-                target={fiber.return}
-                kind="return"
-                weight={1000}
-                key={`${fiber.id}-${fiber.return}-return`}>
-                return
-              </Edge>
-            ),
-          fiber.nextEffect &&
-            show.fx && (
-              <Edge
-                source={fiber.id}
-                target={fiber.nextEffect}
-                kind="fx"
-                weight={100}
-                key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>
-                nextFx
-              </Edge>
-            ),
-          fiber.firstEffect &&
-            show.fx && (
-              <Edge
-                source={fiber.id}
-                target={fiber.firstEffect}
-                kind="fx"
-                weight={100}
-                key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>
-                firstFx
-              </Edge>
-            ),
-          fiber.lastEffect &&
-            show.fx && (
-              <Edge
-                source={fiber.id}
-                target={fiber.lastEffect}
-                kind="fx"
-                weight={100}
-                key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>
-                lastFx
-              </Edge>
-            ),
-          fiber.alternate &&
-            show.alt && (
-              <Edge
-                source={fiber.id}
-                target={fiber.alternate}
-                kind="alt"
-                weight={10}
-                key={`${fiber.id}-${fiber.alternate}-alt`}>
-                alt
-              </Edge>
-            ),
+          fiber.child && show.child && (
+            <Edge
+              source={fiber.id}
+              target={fiber.child}
+              kind="child"
+              weight={1000}
+              key={`${fiber.id}-${fiber.child}-child`}>
+              child
+            </Edge>
+          ),
+          fiber.sibling && show.sibling && (
+            <Edge
+              source={fiber.id}
+              target={fiber.sibling}
+              kind="sibling"
+              weight={2000}
+              key={`${fiber.id}-${fiber.sibling}-sibling`}>
+              sibling
+            </Edge>
+          ),
+          fiber.return && show.return && (
+            <Edge
+              source={fiber.id}
+              target={fiber.return}
+              kind="return"
+              weight={1000}
+              key={`${fiber.id}-${fiber.return}-return`}>
+              return
+            </Edge>
+          ),
+          fiber.nextEffect && show.fx && (
+            <Edge
+              source={fiber.id}
+              target={fiber.nextEffect}
+              kind="fx"
+              weight={100}
+              key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>
+              nextFx
+            </Edge>
+          ),
+          fiber.firstEffect && show.fx && (
+            <Edge
+              source={fiber.id}
+              target={fiber.firstEffect}
+              kind="fx"
+              weight={100}
+              key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>
+              firstFx
+            </Edge>
+          ),
+          fiber.lastEffect && show.fx && (
+            <Edge
+              source={fiber.id}
+              target={fiber.lastEffect}
+              kind="fx"
+              weight={100}
+              key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>
+              lastFx
+            </Edge>
+          ),
+          fiber.alternate && show.alt && (
+            <Edge
+              source={fiber.id}
+              target={fiber.alternate}
+              kind="alt"
+              weight={10}
+              key={`${fiber.id}-${fiber.alternate}-alt`}>
+              alt
+            </Edge>
+          ),
         ])}
       </Graph>
     </div>
diff --git a/fixtures/fiber-debugger/yarn.lock b/fixtures/fiber-debugger/yarn.lock
index 1bbad1584acac..ffa57c1e63ee4 100644
--- a/fixtures/fiber-debugger/yarn.lock
+++ b/fixtures/fiber-debugger/yarn.lock
@@ -194,7 +194,7 @@ async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.0:
+async@^1.3.0, async@^1.4.2, async@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -1236,6 +1236,10 @@ commander@2.9.x, commander@^2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2302,14 +2306,14 @@ gzip-size@3.0.0:
     duplexer "^0.1.1"
 
 handlebars@^4.0.3:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-validator@~2.0.6:
   version "2.0.6"
@@ -3369,7 +3373,7 @@ minimatch@3.0.3, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8, minimist@~0.0.1:
+minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -3377,6 +3381,10 @@ minimist@^1.1.1, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
 "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -3413,6 +3421,10 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+
 no-case@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
@@ -4650,7 +4662,7 @@ source-map-support@^0.4.2:
   dependencies:
     source-map "^0.5.3"
 
-source-map@0.4.x, source-map@^0.4.4, source-map@~0.4.1:
+source-map@0.4.x, source-map@~0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
@@ -4660,6 +4672,10 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, sour
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
+source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
@@ -4952,7 +4968,7 @@ ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-uglify-js@2.7.x, uglify-js@^2.6, uglify-js@~2.7.3:
+uglify-js@2.7.x, uglify-js@~2.7.3:
   version "2.7.5"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
   dependencies:
@@ -4961,6 +4977,13 @@ uglify-js@2.7.x, uglify-js@^2.6, uglify-js@~2.7.3:
     uglify-to-browserify "~1.0.0"
     yargs "~3.10.0"
 
+uglify-js@^3.1.4:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
new file mode 100644
index 0000000000000..1fef79b182bef
--- /dev/null
+++ b/fixtures/flight-browser/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%; overflow: hidden">
+  <head>
+    <meta charset="utf-8">
+    <title>Flight Example</title>
+  </head>
+  <body>
+    <h1>Flight Example</h1>
+    <div id="container">
+      <p>
+        To install React, follow the instructions on
+        <a href="https://github.com/facebook/react/">GitHub</a>.
+      </p>
+      <p>
+        If you can see this, React is <strong>not</strong> working right.
+        If you checked out the source from GitHub make sure to run <code>npm run build</code>.
+      </p>
+    </div>
+    <script src="../../build/dist/react.development.js"></script>
+    <script src="../../build/dist/react-dom.development.js"></script>
+    <script src="../../build/dist/react-dom-server.browser.development.js"></script>
+    <script src="../../build/dist/react-flight-dom-webpack-server.browser.development.js"></script>
+    <script src="../../build/dist/react-flight-dom-webpack.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <script type="text/babel">
+      let Suspense = React.Suspense;
+
+      function Text({children}) {
+        return <span>{children}</span>;
+      }
+      function HTML() {
+        return (
+          <div>
+            <Text>hello</Text>
+            <Text>world</Text>
+          </div>
+        );
+      }
+
+      let resolved = false;
+      let promise = new Promise(resolve => {
+        setTimeout(() => {
+          resolved = true;
+          resolve();
+        }, 100);
+      });
+      function read() {
+        if (!resolved) {
+          throw promise;
+        }
+      }
+
+      function Title() {
+        read();
+        return 'Title';
+      }
+
+      let model = {
+        title: <Title />,
+        content: {
+          __html: <HTML />,
+        }
+      };
+
+      let stream = ReactFlightDOMServer.renderToReadableStream(model);
+      let response = new Response(stream, {
+        headers: {'Content-Type': 'text/html'},
+      });
+      display(response);
+
+      async function display(responseToDisplay) {
+        let blob = await responseToDisplay.blob();
+        let url = URL.createObjectURL(blob);
+
+        let data = ReactFlightDOMClient.readFromFetch(
+          fetch(url)
+        );
+        // The client also supports XHR streaming.
+        // var xhr = new XMLHttpRequest();
+        // xhr.open('GET', url);
+        // let data = ReactFlightDOMClient.readFromXHR(xhr);
+        // xhr.send();
+
+        renderResult(data);
+      }
+
+      function Shell({ data }) {
+        let model = data.model;
+        return <div>
+          <Suspense fallback="...">
+            <h1>{model.title}</h1>
+          </Suspense>
+          <div dangerouslySetInnerHTML={model.content} />
+        </div>;
+      }
+
+      function renderResult(data) {
+        let container = document.getElementById('container');
+        ReactDOM.render(
+          <Suspense fallback="Loading...">
+            <Shell data={data} />
+          </Suspense>,
+          container
+        );
+      }
+    </script>
+  </body>
+</html>
diff --git a/fixtures/flight/.env b/fixtures/flight/.env
new file mode 100644
index 0000000000000..7d910f1484c5e
--- /dev/null
+++ b/fixtures/flight/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/fixtures/flight/.gitignore b/fixtures/flight/.gitignore
new file mode 100644
index 0000000000000..4d29575de8048
--- /dev/null
+++ b/fixtures/flight/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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*
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
new file mode 100644
index 0000000000000..00da9b76e2def
--- /dev/null
+++ b/fixtures/flight/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "flight",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@babel/register": "^7.7.0",
+    "concurrently": "^5.0.0",
+    "express": "^4.17.1",
+    "react-scripts": "3.2.0"
+  },
+  "scripts": {
+    "prestart": "cp -r ../../build/node_modules/* ./node_modules/",
+    "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
+    "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
+    "start:client": "react-scripts start",
+    "start:server": "NODE_ENV=development node server",
+    "start:prod": "react-scripts build && NODE_ENV=production node server",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/fixtures/flight/public/index.html b/fixtures/flight/public/index.html
new file mode 100644
index 0000000000000..f4b7c286d4736
--- /dev/null
+++ b/fixtures/flight/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Flight</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/fixtures/flight/server/handler.js b/fixtures/flight/server/handler.js
new file mode 100644
index 0000000000000..bb82a5e9a41cf
--- /dev/null
+++ b/fixtures/flight/server/handler.js
@@ -0,0 +1,28 @@
+'use strict';
+
+const ReactFlightDOMServer = require('react-flight-dom-webpack/server');
+const React = require('react');
+const Stream = require('stream');
+
+function Text({children}) {
+  return <span>{children}</span>;
+}
+
+function HTML() {
+  return (
+    <div>
+      <Text>Hello</Text>
+      <Text>world</Text>
+    </div>
+  );
+}
+
+module.exports = function(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  let model = {
+    content: {
+      __html: <HTML />,
+    },
+  };
+  ReactFlightDOMServer.pipeToNodeWritable(model, res);
+};
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
new file mode 100644
index 0000000000000..2388365eee393
--- /dev/null
+++ b/fixtures/flight/server/index.js
@@ -0,0 +1,46 @@
+'use strict';
+
+const babelRegister = require('@babel/register');
+
+babelRegister({
+  ignore: [/\/(build|node_modules)\//],
+  presets: ['react-app'],
+});
+
+const express = require('express');
+const app = express();
+
+// Application
+app.get('/', function(req, res) {
+  if (process.env.NODE_ENV === 'development') {
+    for (var key in require.cache) {
+      delete require.cache[key];
+    }
+  }
+  require('./handler')(req, res);
+});
+
+app.listen(3001, () => {
+  console.log('Flight Server listening on port 3001...');
+});
+
+app.on('error', function(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
new file mode 100644
index 0000000000000..acf3af38c2adc
--- /dev/null
+++ b/fixtures/flight/src/App.js
@@ -0,0 +1,15 @@
+import React, {Suspense} from 'react';
+
+function Content({data}) {
+  return <p dangerouslySetInnerHTML={data.model.content} />;
+}
+
+function App({data}) {
+  return (
+    <Suspense fallback={<h1>Loading...</h1>}>
+      <Content data={data} />
+    </Suspense>
+  );
+}
+
+export default App;
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
new file mode 100644
index 0000000000000..b46341250cb4e
--- /dev/null
+++ b/fixtures/flight/src/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactFlightDOMClient from 'react-flight-dom-webpack';
+import App from './App';
+
+let data = ReactFlightDOMClient.readFromFetch(fetch('http://localhost:3001'));
+ReactDOM.render(<App data={data} />, document.getElementById('root'));
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
new file mode 100644
index 0000000000000..31c82f44fa2e4
--- /dev/null
+++ b/fixtures/flight/yarn.lock
@@ -0,0 +1,9863 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.44"
+
+"@babel/code-frame@7.5.5", "@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/code-frame@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/core@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.0"
+    "@babel/helpers" "^7.6.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.0"
+    "@babel/types" "^7.6.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.1.0", "@babel/core@^7.4.5":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.2.tgz#ea5b99693bcfc058116f42fa1dd54da412b29d91"
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.2"
+    "@babel/helpers" "^7.7.0"
+    "@babel/parser" "^7.7.2"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.7.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+    jsesc "^2.5.1"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/generator@^7.0.0":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.2.tgz#fde75c072575ce7abbd97322e8fef5bae67e4630"
+  dependencies:
+    "@babel/types" "^7.1.2"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af"
+  dependencies:
+    "@babel/types" "^7.7.2"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-annotate-as-pure@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.0.tgz#efc54032d43891fe267679e63f6860aa7dbf4a5e"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-builder-react-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz#fa154cb53eb918cf2a9a7ce928e29eb649c5acdb"
+  dependencies:
+    "@babel/types" "^7.0.0"
+    esutils "^2.0.0"
+
+"@babel/helper-call-delegate@^7.4.4":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.7.0.tgz#df8942452c2c1a217335ca7e393b9afc67f668dc"
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0", "@babel/helper-create-class-features-plugin@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.0.tgz#bcdc223abbfdd386f94196ae2544987f8df775e8"
+  dependencies:
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/helper-member-expression-to-functions" "^7.7.0"
+    "@babel/helper-optimise-call-expression" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.7.0"
+    "@babel/helper-split-export-declaration" "^7.7.0"
+
+"@babel/helper-create-regexp-features-plugin@^7.7.0":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.2.tgz#6f20443778c8fce2af2ff4206284afc0ced65db6"
+  dependencies:
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.6.0"
+
+"@babel/helper-define-map@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.0.tgz#60b0e9fd60def9de5054c38afde8c8ee409c7529"
+  dependencies:
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/types" "^7.7.0"
+    lodash "^4.17.13"
+
+"@babel/helper-explode-assignable-expression@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.44"
+    "@babel/template" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+
+"@babel/helper-function-name@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-function-name@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3"
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-get-function-arity@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
+"@babel/helper-get-function-arity@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-get-function-arity@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz#c604886bc97287a1d1398092bc666bc3d7d7aa2d"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-hoist-variables@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.0.tgz#b4552e4cfe5577d7de7b183e193e84e4ec538c81"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-member-expression-to-functions@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.0.tgz#472b93003a57071f95a541ea6c2b098398bcad8a"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-module-imports@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-module-imports@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.0.tgz#99c095889466e5f7b6d66d98dffc58baaf42654d"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-module-transforms@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.1.0.tgz#470d4f9676d9fad50b324cdcce5fbabbc3da5787"
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    lodash "^4.17.10"
+
+"@babel/helper-module-transforms@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.0.tgz#154a69f0c5b8fd4d39e49750ff7ac4faa3f36786"
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.0"
+    "@babel/helper-simple-access" "^7.7.0"
+    "@babel/helper-split-export-declaration" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/types" "^7.7.0"
+    lodash "^4.17.13"
+
+"@babel/helper-optimise-call-expression@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.0.tgz#4f66a216116a66164135dc618c5d8b7a959f9365"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-plugin-utils@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
+
+"@babel/helper-regex@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
+  dependencies:
+    lodash "^4.17.10"
+
+"@babel/helper-regex@^7.4.4":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
+  dependencies:
+    lodash "^4.17.13"
+
+"@babel/helper-remap-async-to-generator@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.0.tgz#4d69ec653e8bff5bce62f5d33fc1508f223c75a7"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.7.0"
+    "@babel/helper-wrap-function" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-replace-supers@^7.5.5", "@babel/helper-replace-supers@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.0.tgz#d5365c8667fe7cbd13b8ddddceb9bd7f2b387512"
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.7.0"
+    "@babel/helper-optimise-call-expression" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-simple-access@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
+  dependencies:
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-simple-access@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.0.tgz#97a8b6c52105d76031b86237dc1852b44837243d"
+  dependencies:
+    "@babel/template" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-split-export-declaration@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
+"@babel/helper-split-export-declaration@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-split-export-declaration@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300"
+  dependencies:
+    "@babel/types" "^7.7.0"
+
+"@babel/helper-wrap-function@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.0.tgz#15af3d3e98f8417a60554acbb6c14e75e0b33b74"
+  dependencies:
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/helpers@^7.6.0", "@babel/helpers@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.0.tgz#359bb5ac3b4726f7c1fde0ec75f64b3f4275d60b"
+  dependencies:
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/highlight@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/highlight@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
+
+"@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.2.tgz#ea8334dc77416bfd9473eb470fd00d8245b3943b"
+
+"@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.0.tgz#83ef2d6044496b4c15d8b4904e2219e6dccc6971"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.7.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+
+"@babel/plugin-proposal-class-properties@7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.5.5"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-proposal-decorators@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.6.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-decorators" "^7.2.0"
+
+"@babel/plugin-proposal-dynamic-import@^7.5.0", "@babel/plugin-proposal-dynamic-import@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.0.tgz#dc02a8bad8d653fb59daf085516fa416edd2aa7f"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
+"@babel/plugin-proposal-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+
+"@babel/plugin-proposal-object-rest-spread@7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+
+"@babel/plugin-proposal-object-rest-spread@^7.5.5", "@babel/plugin-proposal-object-rest-spread@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz#8ffccc8f3a6545e9f78988b6bf4fe881b88e8096"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.0.tgz#549fe1717a1bd0a2a7e63163841cb37e78179d5d"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-async-generators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-decorators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-dynamic-import@7.2.0", "@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-flow@^7.2.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.0.tgz#5c9465bcd26354d5215294ea90ab1c706a571386"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0.tgz#034d5e2b4e14ccaea2e4c137af7e4afb39375ffd"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz#37d8fbcaf216bd658ea1aebbeb8b75e88ebc549b"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-top-level-await@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.0.tgz#f5699549f50bbe8d12b1843a4e82f0a37bb65f4d"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-typescript@^7.2.0":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-arrow-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-async-to-generator@^7.5.0", "@babel/plugin-transform-async-to-generator@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.0.tgz#e2b84f11952cf5913fe3438b7d2585042772f492"
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.7.0"
+
+"@babel/plugin-transform-block-scoped-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.3.tgz#6e854e51fbbaa84351b15d4ddafe342f3a5d542a"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    lodash "^4.17.13"
+
+"@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.0.tgz#b411ecc1b8822d24b81e5d184f24149136eddd4a"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.7.0"
+    "@babel/helper-define-map" "^7.7.0"
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/helper-optimise-call-expression" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.7.0"
+    "@babel/helper-split-export-declaration" "^7.7.0"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-destructuring@7.6.0", "@babel/plugin-transform-destructuring@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.0.tgz#c5c9ecacab3a5e0c11db6981610f0c32fd698b3b"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-duplicate-keys@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-exponentiation-operator@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-flow-strip-types@7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+
+"@babel/plugin-transform-for-of@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-function-name@^7.4.4", "@babel/plugin-transform-function-name@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.0.tgz#0fa786f1eef52e3b7d4fc02e54b2129de8a04c2a"
+  dependencies:
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-member-expression-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-amd@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-commonjs@^7.6.0", "@babel/plugin-transform-modules-commonjs@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.0.tgz#3e5ffb4fd8c947feede69cbe24c9554ab4113fe3"
+  dependencies:
+    "@babel/helper-module-transforms" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.7.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-systemjs@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.0.tgz#9baf471213af9761c1617bb12fd278e629041417"
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-umd@^7.2.0", "@babel/plugin-transform-modules-umd@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.0.tgz#d62c7da16670908e1d8c68ca0b5d4c0097b69966"
+  dependencies:
+    "@babel/helper-module-transforms" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.0.tgz#358e6fd869b9a4d8f5cbc79e4ed4fc340e60dcaf"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
+
+"@babel/plugin-transform-new-target@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-object-super@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.5.5.tgz#c70021df834073c65eb613b8679cc4a381d1a9f9"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.5.5"
+
+"@babel/plugin-transform-parameters@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
+  dependencies:
+    "@babel/helper-call-delegate" "^7.4.4"
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-property-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-constant-elements@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.0.0.tgz#ab413e33e9c46a766f5326014bcbf9e2b34ef7a4"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-display-name@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-display-name@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.0.0.tgz#93759e6c023782e52c2da3b75eca60d4f10533ee"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx-self@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.0.0.tgz#a84bb70fea302d915ea81d9809e628266bb0bc11"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx-source@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.0.0.tgz#28e00584f9598c0dd279f6280eee213fa0121c3c"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.0.0.tgz#524379e4eca5363cd10c4446ba163f093da75f3e"
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+
+"@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.0.tgz#f1b20b535e7716b622c99e989259d7dd942dd9cc"
+  dependencies:
+    regenerator-transform "^0.14.0"
+
+"@babel/plugin-transform-reserved-words@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-runtime@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.0.tgz#85a3cce402b28586138e368fce20ab3019b9713e"
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.6.2.tgz#fc77cf798b24b10c46e1b51b1b88c2bf661bb8dd"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-sticky-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+
+"@babel/plugin-transform-template-literals@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-typeof-symbol@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-typescript@^7.6.0":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.2.tgz#eb9f14c516b5d36f4d6f3a9d7badae6d0fc313d4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-typescript" "^7.2.0"
+
+"@babel/plugin-transform-unicode-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz#743d9bcc44080e3cc7d49259a066efa30f9187a3"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/preset-env@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.6.0"
+    "@babel/plugin-transform-classes" "^7.5.5"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.6.0"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.4.4"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.0"
+    "@babel/plugin-transform-new-target" "^7.4.4"
+    "@babel/plugin-transform-object-super" "^7.5.5"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.4.5"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.4.4"
+    "@babel/types" "^7.6.0"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.5.0"
+
+"@babel/preset-env@^7.4.5":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.1.tgz#04a2ff53552c5885cf1083e291c8dd5490f744bb"
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.7.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.7.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.6.2"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.7.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-syntax-top-level-await" "^7.7.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.7.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.6.3"
+    "@babel/plugin-transform-classes" "^7.7.0"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.6.0"
+    "@babel/plugin-transform-dotall-regex" "^7.7.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.7.0"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.7.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.7.0"
+    "@babel/plugin-transform-modules-umd" "^7.7.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.7.0"
+    "@babel/plugin-transform-new-target" "^7.4.4"
+    "@babel/plugin-transform-object-super" "^7.5.5"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.7.0"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.6.2"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.7.0"
+    "@babel/types" "^7.7.1"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.5.0"
+
+"@babel/preset-react@7.0.0", "@babel/preset-react@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+
+"@babel/preset-typescript@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.6.0"
+
+"@babel/register@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.7.0.tgz#4e23ecf840296ef79c605baaa5c89e1a2426314b"
+  integrity sha512-HV3GJzTvSoyOMWGYn2TAh6uL6g+gqKTgEZ99Q3+X9UURT1VPT/WcU46R61XftIc5rXytcOHZ4Z0doDlsjPomIg==
+  dependencies:
+    find-cache-dir "^2.0.0"
+    lodash "^4.17.13"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/template@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    lodash "^4.2.0"
+
+"@babel/template@^7.1.0":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.1.2"
+    "@babel/types" "^7.1.2"
+
+"@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
+"@babel/traverse@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/generator" "7.0.0-beta.44"
+    "@babel/helper-function-name" "7.0.0-beta.44"
+    "@babel/helper-split-export-declaration" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.0.tgz#503ec6669387efd182c3888c4eec07bcc45d91b2"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.0.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
+"@babel/traverse@^7.4.3", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.2.tgz#ef0a65e07a2f3c550967366b3d9b62a2dcbeae09"
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.2"
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/helper-split-export-declaration" "^7.7.0"
+    "@babel/parser" "^7.7.2"
+    "@babel/types" "^7.7.2"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/types@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.2.tgz#183e7952cf6691628afdc2e2b90d03240bac80c0"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.7.0", "@babel/types@^7.7.1", "@babel/types@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+
+"@csstools/normalize.css@^9.0.1":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
+
+"@hapi/address@2.x.x":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
+
+"@hapi/bourne@1.x.x":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
+
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
+
+"@hapi/joi@^15.0.0":
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
+  dependencies:
+    "@hapi/address" "2.x.x"
+    "@hapi/bourne" "1.x.x"
+    "@hapi/hoek" "8.x.x"
+    "@hapi/topo" "3.x.x"
+
+"@hapi/topo@3.x.x":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+  dependencies:
+    "@hapi/hoek" "^8.3.0"
+
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
+"@nodelib/fs.stat@^1.1.2":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
+
+"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
+
+"@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
+
+"@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
+
+"@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
+
+"@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
+
+"@svgr/babel-plugin-transform-svg-component@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
+
+"@svgr/babel-preset@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^4.2.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^4.2.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.2.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.2.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^4.3.3"
+    "@svgr/babel-plugin-svg-em-dimensions" "^4.2.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
+    "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
+
+"@svgr/core@^4.3.2":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
+  dependencies:
+    "@svgr/plugin-jsx" "^4.3.3"
+    camelcase "^5.3.1"
+    cosmiconfig "^5.2.1"
+
+"@svgr/hast-util-to-babel-ast@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@svgr/plugin-jsx@^4.3.2", "@svgr/plugin-jsx@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
+  dependencies:
+    "@babel/core" "^7.4.5"
+    "@svgr/babel-preset" "^4.3.3"
+    "@svgr/hast-util-to-babel-ast" "^4.3.2"
+    svg-parser "^2.0.0"
+
+"@svgr/plugin-svgo@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
+  dependencies:
+    cosmiconfig "^5.2.1"
+    merge-deep "^3.0.2"
+    svgo "^1.2.2"
+
+"@svgr/webpack@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.2.tgz#319d4471c8f3d5c3af35059274834d9b5b8fb956"
+  dependencies:
+    "@babel/core" "^7.4.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.0.0"
+    "@babel/preset-env" "^7.4.5"
+    "@babel/preset-react" "^7.0.0"
+    "@svgr/core" "^4.3.2"
+    "@svgr/plugin-jsx" "^4.3.2"
+    "@svgr/plugin-svgo" "^4.3.1"
+    loader-utils "^1.2.3"
+
+"@types/babel__core@^7.1.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.0.tgz#f1ec1c104d1bb463556ecb724018ab788d0c172a"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.7.tgz#2496e9ff56196cc1429c72034e07eab6121b6f3f"
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+
+"@types/istanbul-lib-report@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/json-schema@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
+
+"@types/q@^1.5.1":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+
+"@types/yargs@^13.0.0":
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/eslint-plugin@^2.2.0":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.6.1.tgz#e34972a24f8aba0861f9ccf7130acd74fd11e079"
+  dependencies:
+    "@typescript-eslint/experimental-utils" "2.6.1"
+    eslint-utils "^1.4.2"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^2.0.1"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/experimental-utils@2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.6.1.tgz#eddaca17a399ebf93a8628923233b4f93793acfd"
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.6.1"
+    eslint-scope "^5.0.0"
+
+"@typescript-eslint/parser@^2.2.0":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.6.1.tgz#3c00116baa0d696bc334ca18ac5286b34793993c"
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.6.1"
+    "@typescript-eslint/typescript-estree" "2.6.1"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/typescript-estree@2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.6.1.tgz#fb363dd4ca23384745c5ea4b7f4c867432b00d31"
+  dependencies:
+    debug "^4.1.1"
+    glob "^7.1.4"
+    is-glob "^4.0.1"
+    lodash.unescape "4.0.1"
+    semver "^6.3.0"
+    tsutils "^3.17.1"
+
+"@webassemblyjs/ast@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+
+"@webassemblyjs/floating-point-hex-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
+
+"@webassemblyjs/helper-api-error@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
+
+"@webassemblyjs/helper-buffer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
+
+"@webassemblyjs/helper-code-frame@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/helper-fsm@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+
+"@webassemblyjs/helper-module-context@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    mamacro "^0.0.3"
+
+"@webassemblyjs/helper-wasm-bytecode@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+
+"@webassemblyjs/helper-wasm-section@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+
+"@webassemblyjs/ieee754@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
+
+"@webassemblyjs/wasm-edit@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/helper-wasm-section" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-opt" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/wasm-gen@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
+
+"@webassemblyjs/wasm-opt@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+
+"@webassemblyjs/wasm-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
+
+"@webassemblyjs/wast-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/floating-point-hex-parser" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-code-frame" "1.8.5"
+    "@webassemblyjs/helper-fsm" "1.8.5"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+    "@xtuc/long" "4.2.2"
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+
+abab@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.3.4, accepts@~1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+accepts@~1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
+acorn-globals@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.0.tgz#e3b6f8da3c1552a95ae627571f7dd6923bb54103"
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
+acorn-globals@^4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
+acorn-jsx@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
+
+acorn-walk@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.0.tgz#c957f4a1460da46af4a0388ce28b4c99355b0cbc"
+
+acorn@^5.5.3:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+
+acorn@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.2.tgz#6a459041c320ab17592c6317abbfdf4bbaa98ca4"
+
+acorn@^6.0.4, acorn@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
+
+acorn@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
+
+address@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+
+address@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+
+adjust-sourcemap-loader@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4"
+  dependencies:
+    assert "1.4.1"
+    camelcase "5.0.0"
+    loader-utils "1.2.3"
+    object-path "0.11.4"
+    regex-parser "2.2.10"
+
+ajv-errors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
+
+ajv-keywords@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
+
+ajv-keywords@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+
+ajv@^5.3.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+ajv@^6.1.0:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.4.tgz#247d5274110db653706b550fcc2b797ca28cfc59"
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^6.10.0, ajv@^6.10.2:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+alphanum-sort@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+ansi-colors@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.1.0.tgz#dcfaacc90ef9187de413ec3ef8d5eb981a98808f"
+
+ansi-escapes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+
+ansi-escapes@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+
+ansi-escapes@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228"
+  dependencies:
+    type-fest "^0.5.2"
+
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+aproba@^1.0.3, aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
+arity-n@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-flatten@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1.js@^4.0.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assert@1.4.1, assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-each@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
+async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+
+autoprefixer@^9.6.1:
+  version "9.7.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.1.tgz#9ffc44c55f5ca89253d9bb7186cefb01ef57747f"
+  dependencies:
+    browserslist "^4.7.2"
+    caniuse-lite "^1.0.30001006"
+    chalk "^2.4.2"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.21"
+    postcss-value-parser "^4.0.2"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+
+axobject-query@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+babel-code-frame@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-eslint@10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
+babel-eslint@^8.2.3:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.6.tgz#6270d0c73205628067c0f7ae1693a9e797acefd9"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/traverse" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    eslint-scope "3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
+babel-extract-comments@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
+  dependencies:
+    babylon "^6.18.0"
+
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
+babel-loader@8.0.6:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
+  dependencies:
+    find-cache-dir "^2.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    pify "^4.0.1"
+
+babel-plugin-dynamic-import-node@2.3.0, babel-plugin-dynamic-import-node@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-istanbul@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    find-up "^3.0.0"
+    istanbul-lib-instrument "^3.3.0"
+    test-exclude "^5.2.3"
+
+babel-plugin-jest-hoist@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-macros@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
+  dependencies:
+    "@babel/runtime" "^7.4.2"
+    cosmiconfig "^5.2.0"
+    resolve "^1.10.0"
+
+babel-plugin-named-asset-import@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-react-remove-prop-types@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
+
+babel-preset-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  dependencies:
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.9.0"
+
+babel-preset-react-app@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.0.2.tgz#247d37e883d6d6f4b4691e5f23711bb2dd80567d"
+  dependencies:
+    "@babel/core" "7.6.0"
+    "@babel/plugin-proposal-class-properties" "7.5.5"
+    "@babel/plugin-proposal-decorators" "7.6.0"
+    "@babel/plugin-proposal-object-rest-spread" "7.5.5"
+    "@babel/plugin-syntax-dynamic-import" "7.2.0"
+    "@babel/plugin-transform-destructuring" "7.6.0"
+    "@babel/plugin-transform-flow-strip-types" "7.4.4"
+    "@babel/plugin-transform-react-display-name" "7.2.0"
+    "@babel/plugin-transform-runtime" "7.6.0"
+    "@babel/preset-env" "7.6.0"
+    "@babel/preset-react" "7.0.0"
+    "@babel/preset-typescript" "7.6.0"
+    "@babel/runtime" "7.6.0"
+    babel-plugin-dynamic-import-node "2.3.0"
+    babel-plugin-macros "2.6.1"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babylon@7.0.0-beta.44:
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base64-js@^1.0.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+
+binary-extensions@^1.0.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
+
+bluebird@^3.5.5:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+body-parser@1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.1"
+    http-errors "~1.6.2"
+    iconv-lite "0.4.19"
+    on-finished "~2.3.0"
+    qs "6.5.1"
+    raw-body "2.3.2"
+    type-is "~1.6.15"
+
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-process-hrtime@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
+
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
+  dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  dependencies:
+    pako "~1.0.5"
+
+browserslist@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
+  dependencies:
+    caniuse-lite "^1.0.30000989"
+    electron-to-chromium "^1.3.247"
+    node-releases "^1.1.29"
+
+browserslist@^4.0.0, browserslist@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.1.2.tgz#632feb46d1cbdd6bb1a6eb660eff68f2345ae7e7"
+  dependencies:
+    caniuse-lite "^1.0.30000888"
+    electron-to-chromium "^1.3.73"
+    node-releases "^1.0.0-alpha.12"
+
+browserslist@^4.6.0, browserslist@^4.6.4, browserslist@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
+  dependencies:
+    caniuse-lite "^1.0.30001004"
+    electron-to-chromium "^1.3.295"
+    node-releases "^1.1.38"
+
+bser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+cacache@^12.0.2:
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+call-me-maybe@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase@5.0.0, camelcase@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+camelcase@^5.2.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-lite "^1.0.0"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000888:
+  version "1.0.30000889"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000889.tgz#53e266c83e725ad3bd2e4a3ea76d5031a8aa4c3e"
+
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001004, caniuse-lite@^1.0.30001006:
+  version "1.0.30001008"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001008.tgz#b8841b1df78a9f5ed9702537ef592f1f8772c0d9"
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  dependencies:
+    rsvp "^4.8.4"
+
+case-sensitive-paths-webpack-plugin@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@2.4.2, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+
+chokidar@^2.0.0, chokidar@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    lodash.debounce "^4.0.8"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.5"
+  optionalDependencies:
+    fsevents "^1.2.2"
+
+chokidar@^2.0.4:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chownr@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
+
+chownr@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
+  dependencies:
+    tslib "^1.9.0"
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+clean-css@4.2.x:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+  dependencies:
+    source-map "~0.6.0"
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+cliui@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+clone-deep@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+  dependencies:
+    for-own "^0.1.3"
+    is-plain-object "^2.0.1"
+    kind-of "^3.0.2"
+    lazy-cache "^1.0.3"
+    shallow-clone "^0.1.2"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
+coa@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.1.tgz#f3f8b0b15073e35d70263fb1042cb2c023db38af"
+  dependencies:
+    q "^1.1.2"
+
+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"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0, color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+combined-stream@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.17.x, commander@~2.17.1:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+
+commander@^2.11.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+
+common-tags@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+compose-function@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
+  dependencies:
+    arity-n "^1.0.4"
+
+compressible@~2.0.14:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.15.tgz#857a9ab0a7e5a07d8d837ed43fe2defff64fe212"
+  dependencies:
+    mime-db ">= 1.36.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.3.tgz#27e0e176aaf260f7f2c2813c3e440adb9f1993db"
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.14"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concurrently@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.0.0.tgz#99c7567d009411fbdc98299d553c4b99a978612c"
+  integrity sha512-1yDvK8mduTIdxIxV9C60KoiOySUl/lfekpdbI+U5GXaPrgdffEavFa9QZB3vh68oWOpbCC+TuvxXV9YRPMvUrA==
+  dependencies:
+    chalk "^2.4.2"
+    date-fns "^2.0.1"
+    lodash "^4.17.15"
+    read-pkg "^4.0.1"
+    rxjs "^6.5.2"
+    spawn-command "^0.0.2-1"
+    supports-color "^4.5.0"
+    tree-kill "^1.2.1"
+    yargs "^12.0.5"
+
+confusing-browser-globals@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
+
+connect-history-api-fallback@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+convert-source-map@1.6.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^0.3.3:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
+
+convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+core-js-compat@^3.1.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.0.tgz#2a47c51d3dc026d290018cacd987495f68a47c75"
+  dependencies:
+    browserslist "^4.7.2"
+    semver "^6.3.0"
+
+core-js@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
+
+core-js@^2.4.0:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+
+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"
+
+cosmiconfig@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+    require-from-string "^2.0.1"
+
+cosmiconfig@^5.0.0:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.6.tgz#dca6cf680a0bd03589aff684700858c81abeeb39"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+
+cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.1"
+    parse-json "^4.0.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+css-blank-pseudo@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
+  dependencies:
+    postcss "^7.0.5"
+
+css-color-names@0.0.4, css-color-names@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-declaration-sorter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+  dependencies:
+    postcss "^7.0.1"
+    timsort "^0.3.0"
+
+css-has-pseudo@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^5.0.0-rc.4"
+
+css-loader@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
+  dependencies:
+    camelcase "^5.2.0"
+    icss-utils "^4.1.0"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.14"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^2.0.6"
+    postcss-modules-scope "^2.1.0"
+    postcss-modules-values "^2.0.0"
+    postcss-value-parser "^3.3.0"
+    schema-utils "^1.0.0"
+
+css-prefers-color-scheme@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  dependencies:
+    postcss "^7.0.5"
+
+css-select-base-adapter@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
+
+css-select-base-adapter@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.0.tgz#0102b3d14630df86c3eb9fa9f5456270106cf990"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-select@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.0.0.tgz#7aa2921392114831f68db175c0b6a555df74bbd5"
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.1"
+
+css-tree@1.0.0-alpha.28:
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
+css-tree@1.0.0-alpha.29:
+  version "1.0.0-alpha.29"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
+css-tree@1.0.0-alpha.37:
+  version "1.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+
+css-url-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+css@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
+cssdb@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+
+cssesc@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8"
+
+cssesc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+
+cssnano-preset-default@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
+  dependencies:
+    css-declaration-sorter "^4.0.1"
+    cssnano-util-raw-cache "^4.0.1"
+    postcss "^7.0.0"
+    postcss-calc "^7.0.1"
+    postcss-colormin "^4.0.3"
+    postcss-convert-values "^4.0.1"
+    postcss-discard-comments "^4.0.2"
+    postcss-discard-duplicates "^4.0.2"
+    postcss-discard-empty "^4.0.1"
+    postcss-discard-overridden "^4.0.1"
+    postcss-merge-longhand "^4.0.11"
+    postcss-merge-rules "^4.0.3"
+    postcss-minify-font-values "^4.0.2"
+    postcss-minify-gradients "^4.0.2"
+    postcss-minify-params "^4.0.2"
+    postcss-minify-selectors "^4.0.2"
+    postcss-normalize-charset "^4.0.1"
+    postcss-normalize-display-values "^4.0.2"
+    postcss-normalize-positions "^4.0.2"
+    postcss-normalize-repeat-style "^4.0.2"
+    postcss-normalize-string "^4.0.2"
+    postcss-normalize-timing-functions "^4.0.2"
+    postcss-normalize-unicode "^4.0.1"
+    postcss-normalize-url "^4.0.1"
+    postcss-normalize-whitespace "^4.0.2"
+    postcss-ordered-values "^4.1.2"
+    postcss-reduce-initial "^4.0.3"
+    postcss-reduce-transforms "^4.0.2"
+    postcss-svgo "^4.0.2"
+    postcss-unique-selectors "^4.0.1"
+
+cssnano-util-get-arguments@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
+
+cssnano-util-get-match@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
+
+cssnano-util-raw-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
+  dependencies:
+    postcss "^7.0.0"
+
+cssnano-util-same-parent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
+
+cssnano@^4.1.10:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
+  dependencies:
+    cosmiconfig "^5.0.0"
+    cssnano-preset-default "^4.0.7"
+    is-resolvable "^1.0.0"
+    postcss "^7.0.0"
+
+csso@^3.5.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
+  dependencies:
+    css-tree "1.0.0-alpha.29"
+
+csso@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
+  dependencies:
+    css-tree "1.0.0-alpha.37"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
+
+cssom@^0.3.4:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+
+cssstyle@^1.0.0, cssstyle@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb"
+  dependencies:
+    cssom "0.3.x"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
+damerau-levenshtein@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-urls@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.0.1.tgz#d416ac3896918f29ca84d81085bc3705834da579"
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.1.0"
+    whatwg-url "^7.0.0"
+
+data-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
+date-fns@^2.0.1:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.7.0.tgz#8271d943cc4636a1f27698f1b8d6a9f1ceb74026"
+  integrity sha512-wxYp2PGoUDN5ZEACc61aOtYFvSsJUylIvCjpjDOqM1UDaKIIuMJ9fAnMYFHV3TQaDpfTVxhwNK/GiCaHKuemTA==
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.5.tgz#c2418fbfd7a29f4d4f70ff4cea604d4b64c46407"
+  dependencies:
+    ms "^2.1.1"
+
+debug@^3.2.5:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+decamelize@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
+  dependencies:
+    xregexp "4.0.0"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-gateway@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+  dependencies:
+    execa "^1.0.0"
+    ip-regex "^2.1.0"
+
+define-properties@^1.1.2, define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  dependencies:
+    object-keys "^1.0.12"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+depd@~1.1.1, depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+
+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+
+detect-port-alt@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dir-glob@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+doctrine@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  dependencies:
+    esutils "^2.0.2"
+
+dom-converter@~0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domexception@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  dependencies:
+    webidl-conversions "^4.0.2"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-prop@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv-expand@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+
+dotenv@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.295:
+  version "1.3.306"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.306.tgz#e8265301d053d5f74e36cb876486830261fbe946"
+
+electron-to-chromium@^1.3.73:
+  version "1.3.73"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.73.tgz#aa67787067d58cc3920089368b3b8d6fe0fc12f6"
+
+elliptic@^6.0.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.0"
+
+emoji-regex@^7.0.1, emoji-regex@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.12.0, es-abstract@^1.15.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.0.tgz#d3a26dc9c3283ac9750dca569586e976d9dcc06d"
+  dependencies:
+    es-to-primitive "^1.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.0"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-inspect "^1.6.0"
+    object-keys "^1.1.1"
+    string.prototype.trimleft "^2.1.0"
+    string.prototype.trimright "^2.1.0"
+
+es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1, es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.52"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.52.tgz#bb21777e919a04263736ded120a9d665f10ea63f"
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.2"
+    next-tick "~1.0.0"
+
+es6-iterator@2.0.3, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3.1.1, es6-symbol@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escodegen@^1.11.0, escodegen@^1.9.1:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.0.tgz#b27a9389481d5bfd5bec76f7bb1eb3f8f4556589"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-config-react-app@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.2.tgz#df40d73a1402986030680c040bbee520db5a32a4"
+  dependencies:
+    confusing-browser-globals "^1.0.9"
+
+eslint-import-resolver-node@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.5.0"
+
+eslint-loader@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.2.tgz#5a627316a51d6f41d357b9f6f0554e91506cdd6e"
+  dependencies:
+    fs-extra "^8.1.0"
+    loader-fs-cache "^1.0.2"
+    loader-utils "^1.2.3"
+    object-hash "^1.3.1"
+    schema-utils "^2.2.0"
+
+eslint-module-utils@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.4.1.tgz#7b4675875bf96b0dbf1b21977456e5bb1f5e018c"
+  dependencies:
+    debug "^2.6.8"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-flowtype@3.13.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz#e241ebd39c0ce519345a3f074ec1ebde4cf80f2c"
+  dependencies:
+    lodash "^4.17.15"
+
+eslint-plugin-import@2.18.2:
+  version "2.18.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
+  dependencies:
+    array-includes "^3.0.3"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.4.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.0"
+    read-pkg-up "^2.0.0"
+    resolve "^1.11.0"
+
+eslint-plugin-jsx-a11y@6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    aria-query "^3.0.0"
+    array-includes "^3.0.3"
+    ast-types-flow "^0.0.7"
+    axobject-query "^2.0.2"
+    damerau-levenshtein "^1.0.4"
+    emoji-regex "^7.0.2"
+    has "^1.0.3"
+    jsx-ast-utils "^2.2.1"
+
+eslint-plugin-react-hooks@^1.6.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+
+eslint-plugin-react@7.14.3:
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
+  dependencies:
+    array-includes "^3.0.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.1.0"
+    object.entries "^1.1.0"
+    object.fromentries "^2.0.0"
+    object.values "^1.1.0"
+    prop-types "^15.7.2"
+    resolve "^1.10.1"
+
+eslint-scope@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^1.4.2, eslint-utils@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+
+eslint-visitor-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+
+eslint@^6.1.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.6.0.tgz#4a01a2fb48d32aacef5530ee9c5a78f11a8afd04"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^1.4.3"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.1.2"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^11.7.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^7.0.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^6.1.2"
+    strip-ansi "^5.2.0"
+    strip-json-comments "^3.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.2.tgz#6c272650932b4f91c3714e5e7b5f5e2ecf47262d"
+  dependencies:
+    acorn "^7.1.0"
+    acorn-jsx "^5.1.0"
+    eslint-visitor-keys "^1.1.0"
+
+esprima@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+
+esquery@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+  dependencies:
+    estraverse "^4.0.0"
+
+esrecurse@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  dependencies:
+    estraverse "^4.1.0"
+
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+eventemitter3@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
+
+events@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+
+eventsource@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
+  dependencies:
+    original "^1.0.0"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.3.2:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
+
+execa@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-styles "^3.2.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
+express@^4.16.2:
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
+  dependencies:
+    accepts "~1.3.5"
+    array-flatten "1.1.1"
+    body-parser "1.18.2"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.1"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.3"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.2"
+    serve-static "1.13.2"
+    setprototypeof "1.1.0"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+express@^4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.2.0.tgz#8dd8d2dd21bcced3045be09621fa0cbf73908ba4"
+  dependencies:
+    type "^2.0.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+
+fast-glob@^2.0.2:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.1.2"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.3"
+    micromatch "^3.1.10"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.1:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  dependencies:
+    bser "^2.0.0"
+
+figgy-pudding@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+figures@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.1.0.tgz#4b198dd07d8d71530642864af2d45dd9e459c4ec"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  dependencies:
+    flat-cache "^2.0.1"
+
+file-loader@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
+filesize@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.4.0"
+    unpipe "~1.0.0"
+
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-cache-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^3.0.0"
+
+find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
+find-up@3.0.0, find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  dependencies:
+    locate-path "^3.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatted@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+follow-redirects@^1.0.0:
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.8.tgz#1dbfe13e45ad969f813e86c00e5296f525c885a1"
+  dependencies:
+    debug "=3.1.0"
+
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+
+for-in@^1.0.1, for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  dependencies:
+    for-in "^1.0.1"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+fork-ts-checker-webpack-plugin@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    semver "^5.6.0"
+    tapable "^1.0.0"
+    worker-rpc "^0.1.0"
+
+form-data@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "1.0.6"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+fs-extra@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-minipass@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  dependencies:
+    minipass "^2.2.1"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.0.7.tgz#382c9b443c6cbac4c57187cdda23aa3bf1ccfc2a"
+
+fsevents@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
+fsevents@^1.2.7:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
+  dependencies:
+    nan "^2.12.1"
+    node-pre-gyp "^0.12.0"
+
+function-bind@^1.1.0, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  dependencies:
+    pump "^3.0.0"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-parent@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+
+glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.3, glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-modules@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globals@^11.1.0, globals@^11.7.0:
+  version "11.8.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
+
+globby@8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "2.0.0"
+    fast-glob "^2.0.2"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+graceful-fs@^4.1.15, graceful-fs@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+gzip-size@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
+handle-thing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
+
+handlebars@^4.1.2:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.1.tgz#8a01c382c180272260d07f2d1aa3ae745715c7ba"
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.0.tgz#44657f5688a22cfd4b72486e81b3a3fb11742c29"
+  dependencies:
+    ajv "^5.3.0"
+    har-schema "^2.0.0"
+
+harmony-reflect@^1.4.6:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+  integrity sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.0, has@^1.0.1, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  dependencies:
+    function-bind "^1.1.1"
+
+hash-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+
+hmac-drbg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-entities@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
+html-minifier@^3.5.20:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.2.x"
+    commander "2.17.x"
+    he "1.2.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.4.x"
+
+html-webpack-plugin@4.0.0-beta.5:
+  version "4.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
+  dependencies:
+    html-minifier "^3.5.20"
+    loader-utils "^1.1.0"
+    lodash "^4.17.11"
+    pretty-error "^2.1.1"
+    tapable "^1.1.0"
+    util.promisify "1.0.0"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+
+http-errors@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-parser-js@>=0.4.0:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
+
+http-proxy-middleware@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy@^1.17.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+
+icss-utils@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  dependencies:
+    postcss "^7.0.14"
+
+identity-obj-proxy@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  dependencies:
+    harmony-reflect "^1.4.6"
+
+ieee754@^1.1.4:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore-walk@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  dependencies:
+    minimatch "^3.0.4"
+
+ignore@^3.3.5:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+
+immer@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
+
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  dependencies:
+    import-from "^2.1.0"
+
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
+import-fresh@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.1.0.tgz#6d33fa1dcef6df930fae003446f33415af905118"
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  dependencies:
+    resolve-from "^3.0.0"
+
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+infer-owner@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^1.3.5, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+inquirer@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
+  dependencies:
+    ansi-escapes "^3.2.0"
+    chalk "^2.4.2"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^2.0.0"
+    lodash "^4.17.12"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^2.1.0"
+    strip-ansi "^5.1.0"
+    through "^2.3.6"
+
+inquirer@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.2"
+    cli-cursor "^3.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.15"
+    mute-stream "0.0.8"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^4.1.0"
+    strip-ansi "^5.1.0"
+    through "^2.3.6"
+
+internal-ip@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  dependencies:
+    default-gateway "^4.2.0"
+    ipaddr.js "^1.9.0"
+
+invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
+ipaddr.js@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.0.tgz#eaa33d6ddd7ace8f7f6fe0c9ca0440e706738b1e"
+
+ipaddr.js@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
+  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
+
+ipaddr.js@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+
+is-absolute-url@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.0.2, is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.3, is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  dependencies:
+    ci-info "^2.0.0"
+
+is-color-stop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-glob@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-obj@^1.0.0, is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+
+is-root@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+
+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-svg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  dependencies:
+    has-symbols "^1.0.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+
+istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  dependencies:
+    "@babel/generator" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    istanbul-lib-coverage "^2.0.5"
+    semver "^6.0.0"
+
+istanbul-lib-report@^2.0.4:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+  dependencies:
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    supports-color "^6.1.0"
+
+istanbul-lib-source-maps@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    rimraf "^2.6.3"
+    source-map "^0.6.1"
+
+istanbul-reports@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
+  dependencies:
+    handlebars "^4.1.2"
+
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
+    throat "^4.0.0"
+
+jest-cli@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  dependencies:
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-docblock@^24.3.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
+  dependencies:
+    detect-newline "^2.1.0"
+
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-environment-jsdom-fourteen@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-0.1.0.tgz#aad6393a9d4b565b69a609109bf469f62bf18ccc"
+  dependencies:
+    jest-mock "^24.5.0"
+    jest-util "^24.5.0"
+    jsdom "^14.0.0"
+
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+    jsdom "^11.5.1"
+
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^24.5.0, jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  dependencies:
+    "@jest/types" "^24.9.0"
+
+jest-pnp-resolver@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
+
+jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
+jest-resolve@24.9.0, jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
+    throat "^4.0.0"
+
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
+jest-util@^24.5.0, jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
+jest-watch-typeahead@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.0.tgz#4d5356839a85421588ce452d2440bf0d25308397"
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.1"
+    jest-watcher "^24.3.0"
+    slash "^3.0.0"
+    string-length "^3.1.0"
+    strip-ansi "^5.0.0"
+
+jest-watcher@^24.3.0, jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.9.0"
+    string-length "^2.0.0"
+
+jest-worker@^24.6.0, jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
+
+jest@24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+  dependencies:
+    import-local "^2.0.0"
+    jest-cli "^24.9.0"
+
+js-levenshtein@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
+
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+
+js-yaml@^3.12.0, js-yaml@^3.9.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jsdom@^11.5.1:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
+  dependencies:
+    abab "^2.0.0"
+    acorn "^5.5.3"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle "^1.0.0"
+    data-urls "^1.0.0"
+    domexception "^1.0.1"
+    escodegen "^1.9.1"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.3.0"
+    nwsapi "^2.0.7"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.87.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.4"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-mimetype "^2.1.0"
+    whatwg-url "^6.4.1"
+    ws "^5.2.0"
+    xml-name-validator "^3.0.0"
+
+jsdom@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
+  dependencies:
+    abab "^2.0.0"
+    acorn "^6.0.4"
+    acorn-globals "^4.3.0"
+    array-equal "^1.0.0"
+    cssom "^0.3.4"
+    cssstyle "^1.1.1"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.0"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.1.3"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.5"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.5.0"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^6.1.2"
+    xml-name-validator "^3.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json3@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
+  dependencies:
+    minimist "^1.2.0"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
+  dependencies:
+    array-includes "^3.0.3"
+    object.assign "^4.1.0"
+
+killable@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  dependencies:
+    is-buffer "^1.0.2"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  dependencies:
+    invert-kv "^2.0.0"
+
+left-pad@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+loader-fs-cache@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz#54cedf6b727e1779fd8f01205f05f6e88706f086"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "0.5.1"
+
+loader-runner@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+
+loader-utils@1.2.3, loader-utils@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+
+lodash.template@^4.2.4, lodash.template@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
+lodash.unescape@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+
+"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.5, lodash@^4.2.0:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+
+loglevel@^1.4.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+
+loose-envify@^1.0.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  dependencies:
+    yallist "^3.0.2"
+
+make-dir@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  dependencies:
+    pify "^3.0.0"
+
+make-dir@^2.0.0, make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  dependencies:
+    tmpl "1.0.x"
+
+mamacro@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
+
+map-age-cleaner@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz#098fb15538fd3dbe461f12745b0ca8568d4e3f74"
+  dependencies:
+    p-defer "^1.0.0"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+md5.js@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+
+mdn-data@~1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
+  dependencies:
+    map-age-cleaner "^0.1.1"
+    mimic-fn "^1.0.0"
+    p-is-promise "^1.1.0"
+
+memory-fs@^0.4.0, memory-fs@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+merge-deep@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
+  dependencies:
+    arr-union "^3.1.0"
+    clone-deep "^0.2.4"
+    kind-of "^3.0.2"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+
+merge2@^1.2.3:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+microevent.ts@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
+
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
+  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
+
+"mime-db@>= 1.36.0 < 2", mime-db@~1.36.0:
+  version "1.36.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.36.0.tgz#5020478db3c7fe93aad7bbcc4dcf869c43363397"
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
+  version "2.1.20"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.20.tgz#930cb719d571e903738520f8470911548ca2cc19"
+  dependencies:
+    mime-db "~1.36.0"
+
+mime-types@~2.1.24:
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
+  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
+  dependencies:
+    mime-db "1.40.0"
+
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mime@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+
+mini-css-extract-plugin@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
+  dependencies:
+    loader-utils "^1.1.0"
+    normalize-url "1.9.1"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+
+minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+
+minimatch@3.0.4, minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.1.1, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+minipass@^2.2.1, minipass@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.4.tgz#4768d7605ed6194d6d576169b9e12ef71e9d9957"
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
+  dependencies:
+    minipass "^2.2.1"
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+ms@2.1.1, ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+
+nan@^2.12.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+
+nan@^2.9.2:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+needle@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
+  dependencies:
+    debug "^2.1.2"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
+neo-async@^2.5.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.2.tgz#489105ce7bc54e709d736b195f82135048c50fcc"
+
+neo-async@^2.6.0, neo-async@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+
+next-tick@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-forge@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.1"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+
+node-notifier@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-pre-gyp@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+node-pre-gyp@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
+node-releases@^1.0.0-alpha.12:
+  version "1.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.12.tgz#32e461b879ea76ac674e511d9832cf29da345268"
+  dependencies:
+    semver "^5.3.0"
+
+node-releases@^1.1.29, node-releases@^1.1.38:
+  version "1.1.39"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.39.tgz#c1011f30343aff5b633153b10ff691d278d08e8d"
+  dependencies:
+    semver "^6.3.0"
+
+nopt@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
+normalize-package-data@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+normalize-url@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+
+npm-bundled@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
+
+npm-packlist@^1.1.6:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.11.tgz#84e8c683cbe7867d34b1d357d893ce29e28a02de"
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npmlog@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+nth-check@^1.0.1, nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+nwsapi@^2.0.7:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.9.tgz#77ac0cdfdcad52b6a1151a84e73254edc33ed016"
+
+nwsapi@^2.1.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+
+object-assign@4.1.1, object-assign@^4.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"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-hash@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+
+object-inspect@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
+
+object-keys@^1.0.11, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+
+object-keys@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
+
+object-path@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.entries@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.fromentries@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.15.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+object.values@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
+object.values@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+obuf@^1.0.0, obuf@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+on-headers@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  dependencies:
+    mimic-fn "^1.0.0"
+
+onetime@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^6.3.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+  dependencies:
+    is-wsl "^1.1.0"
+
+opn@^5.1.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035"
+  dependencies:
+    is-wsl "^1.1.0"
+
+optimist@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optimize-css-assets-webpack-plugin@5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
+  dependencies:
+    cssnano "^4.1.10"
+    last-call-webpack-plugin "^3.0.0"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+original@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  dependencies:
+    url-parse "^1.4.3"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.0.1.tgz#3b014fbf01d87f60a1e5348d80fe870dc82c4620"
+  dependencies:
+    execa "^0.10.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-is-promise@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  dependencies:
+    p-try "^1.0.0"
+
+p-limit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  dependencies:
+    p-limit "^2.0.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+
+pako@~1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  dependencies:
+    no-case "^2.2.0"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  dependencies:
+    callsites "^3.0.0"
+
+parse-asn1@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-is-inside@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5, path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
+pbkdf2@^3.0.3:
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pirates@^4.0.0, pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  dependencies:
+    find-up "^1.0.0"
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  dependencies:
+    find-up "^3.0.0"
+
+pkg-up@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  dependencies:
+    find-up "^2.1.0"
+
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+
+pnp-webpack-plugin@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
+  dependencies:
+    ts-pnp "^1.1.2"
+
+portfinder@^1.0.9:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.17.tgz#a8a1691143e46c4735edefcf4fbcccedad26456a"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+postcss-attribute-case-insensitive@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz#b2a721a0d279c2f9103a36331c88981526428cc7"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0"
+
+postcss-browser-comments@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-2.0.0.tgz#dc48d6a8ddbff188a80a000b7393436cb18aed88"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-calc@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss "^7.0.5"
+    postcss-selector-parser "^5.0.0-rc.4"
+    postcss-value-parser "^3.3.1"
+
+postcss-color-functional-notation@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-gray@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-hex-alpha@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+  dependencies:
+    postcss "^7.0.14"
+    postcss-values-parser "^2.0.1"
+
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-rebeccapurple@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-colormin@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+  dependencies:
+    browserslist "^4.0.0"
+    color "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-convert-values@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-custom-media@^7.0.8:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  dependencies:
+    postcss "^7.0.14"
+
+postcss-custom-properties@^8.0.11:
+  version "8.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  dependencies:
+    postcss "^7.0.17"
+    postcss-values-parser "^2.0.1"
+
+postcss-custom-selectors@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-dir-pseudo-class@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-duplicates@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-empty@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-overridden@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-double-position-gradients@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  dependencies:
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-env-function@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-flexbugs-fixes@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-focus-visible@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-focus-within@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-font-variant@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-gap-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-image-set-function@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-initial@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.0.tgz#1772512faf11421b791fb2ca6879df5f68aa0517"
+  dependencies:
+    lodash.template "^4.2.4"
+    postcss "^7.0.2"
+
+postcss-lab-function@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-load-config@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
+  dependencies:
+    cosmiconfig "^4.0.0"
+    import-cwd "^2.0.0"
+
+postcss-loader@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^7.0.0"
+    postcss-load-config "^2.0.0"
+    schema-utils "^1.0.0"
+
+postcss-logical@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-media-minmax@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-merge-longhand@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+  dependencies:
+    css-color-names "0.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0"
+
+postcss-merge-rules@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    cssnano-util-same-parent "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+    vendors "^1.0.0"
+
+postcss-minify-font-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-gradients@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    is-color-stop "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-params@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    browserslist "^4.0.0"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  dependencies:
+    postcss "^7.0.5"
+
+postcss-modules-local-by-default@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63"
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+    postcss-value-parser "^3.3.1"
+
+postcss-modules-scope@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+
+postcss-modules-values@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^7.0.6"
+
+postcss-nesting@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-normalize-charset@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-normalize-display-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+  dependencies:
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-url@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-whitespace@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-7.0.1.tgz#eb51568d962b8aa61a8318383c8bb7e54332282e"
+  dependencies:
+    "@csstools/normalize.css" "^9.0.1"
+    browserslist "^4.1.1"
+    postcss "^7.0.2"
+    postcss-browser-comments "^2.0.0"
+
+postcss-ordered-values@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-overflow-shorthand@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-page-break@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-place@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-preset-env@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
+  dependencies:
+    autoprefixer "^9.6.1"
+    browserslist "^4.6.4"
+    caniuse-lite "^1.0.30000981"
+    css-blank-pseudo "^0.1.4"
+    css-has-pseudo "^0.10.0"
+    css-prefers-color-scheme "^3.1.1"
+    cssdb "^4.4.0"
+    postcss "^7.0.17"
+    postcss-attribute-case-insensitive "^4.0.1"
+    postcss-color-functional-notation "^2.0.1"
+    postcss-color-gray "^5.0.0"
+    postcss-color-hex-alpha "^5.0.3"
+    postcss-color-mod-function "^3.0.3"
+    postcss-color-rebeccapurple "^4.0.1"
+    postcss-custom-media "^7.0.8"
+    postcss-custom-properties "^8.0.11"
+    postcss-custom-selectors "^5.1.2"
+    postcss-dir-pseudo-class "^5.0.0"
+    postcss-double-position-gradients "^1.0.0"
+    postcss-env-function "^2.0.2"
+    postcss-focus-visible "^4.0.0"
+    postcss-focus-within "^3.0.0"
+    postcss-font-variant "^4.0.0"
+    postcss-gap-properties "^2.0.0"
+    postcss-image-set-function "^3.0.1"
+    postcss-initial "^3.0.0"
+    postcss-lab-function "^2.0.1"
+    postcss-logical "^3.0.0"
+    postcss-media-minmax "^4.0.0"
+    postcss-nesting "^7.0.0"
+    postcss-overflow-shorthand "^2.0.0"
+    postcss-page-break "^2.0.0"
+    postcss-place "^4.0.1"
+    postcss-pseudo-class-any-link "^6.0.0"
+    postcss-replace-overflow-wrap "^3.0.0"
+    postcss-selector-matches "^4.0.0"
+    postcss-selector-not "^4.0.0"
+
+postcss-pseudo-class-any-link@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-reduce-initial@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+
+postcss-reduce-transforms@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-replace-overflow-wrap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-safe-parser@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-selector-matches@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-not@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-parser@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.4:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  dependencies:
+    cssesc "^2.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^5.0.0-rc.3:
+  version "5.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0-rc.3.tgz#c4525dcc8eb90166c53dcbf0cb9317ceff5a15b5"
+  dependencies:
+    babel-eslint "^8.2.3"
+    cssesc "^1.0.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+  dependencies:
+    is-svg "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^1.0.0"
+
+postcss-unique-selectors@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    postcss "^7.0.0"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-value-parser@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+
+postcss-value-parser@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+
+postcss-values-parser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.0.tgz#1ba42cae31367c44f96721cb5eb99462bfb39705"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-values-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss@7.0.14:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.2, postcss@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.5.0"
+
+postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.21, postcss@^7.0.6:
+  version "7.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+pretty-bytes@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+
+pretty-error@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  dependencies:
+    renderkid "^2.0.1"
+    utila "~0.4"
+
+pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
+private@^0.1.6:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+progress@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
+promise@8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
+  dependencies:
+    asap "~2.0.6"
+
+prompts@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.3"
+
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+proxy-addr@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.8.0"
+
+proxy-addr@~2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
+  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.0"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+
+psl@^1.1.24:
+  version "1.1.29"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
+
+psl@^1.1.28:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
+
+public-encrypt@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
+qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
+query-string@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+querystringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
+
+raf@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  dependencies:
+    performance-now "^2.1.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.2.1, range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+
+range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.2"
+    iconv-lite "0.4.19"
+    unpipe "1.0.0"
+
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-app-polyfill@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.4.tgz#4dd2636846b585c2d842b1e44e1bc29044345874"
+  dependencies:
+    core-js "3.2.1"
+    object-assign "4.1.1"
+    promise "8.0.3"
+    raf "3.4.1"
+    regenerator-runtime "0.13.3"
+    whatwg-fetch "3.0.0"
+
+react-dev-utils@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
+  dependencies:
+    "@babel/code-frame" "7.5.5"
+    address "1.1.2"
+    browserslist "4.7.0"
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.6.1"
+    find-up "3.0.0"
+    fork-ts-checker-webpack-plugin "1.5.0"
+    global-modules "2.0.0"
+    globby "8.0.2"
+    gzip-size "5.1.1"
+    immer "1.10.0"
+    inquirer "6.5.0"
+    is-root "2.1.0"
+    loader-utils "1.2.3"
+    open "^6.3.0"
+    pkg-up "2.0.0"
+    react-error-overlay "^6.0.3"
+    recursive-readdir "2.2.2"
+    shell-quote "1.7.2"
+    sockjs-client "1.4.0"
+    strip-ansi "5.2.0"
+    text-table "0.2.0"
+
+react-error-overlay@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
+
+react-is@^16.8.1, react-is@^16.8.4:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
+
+react-scripts@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.2.0.tgz#58ccd6b4ffa27f1b4d2986cbdcaa916660e9e33c"
+  dependencies:
+    "@babel/core" "7.6.0"
+    "@svgr/webpack" "4.3.2"
+    "@typescript-eslint/eslint-plugin" "^2.2.0"
+    "@typescript-eslint/parser" "^2.2.0"
+    babel-eslint "10.0.3"
+    babel-jest "^24.9.0"
+    babel-loader "8.0.6"
+    babel-plugin-named-asset-import "^0.3.4"
+    babel-preset-react-app "^9.0.2"
+    camelcase "^5.2.0"
+    case-sensitive-paths-webpack-plugin "2.2.0"
+    css-loader "2.1.1"
+    dotenv "6.2.0"
+    dotenv-expand "5.1.0"
+    eslint "^6.1.0"
+    eslint-config-react-app "^5.0.2"
+    eslint-loader "3.0.2"
+    eslint-plugin-flowtype "3.13.0"
+    eslint-plugin-import "2.18.2"
+    eslint-plugin-jsx-a11y "6.2.3"
+    eslint-plugin-react "7.14.3"
+    eslint-plugin-react-hooks "^1.6.1"
+    file-loader "3.0.1"
+    fs-extra "7.0.1"
+    html-webpack-plugin "4.0.0-beta.5"
+    identity-obj-proxy "3.0.0"
+    is-wsl "^1.1.0"
+    jest "24.9.0"
+    jest-environment-jsdom-fourteen "0.1.0"
+    jest-resolve "24.9.0"
+    jest-watch-typeahead "0.4.0"
+    mini-css-extract-plugin "0.8.0"
+    optimize-css-assets-webpack-plugin "5.0.3"
+    pnp-webpack-plugin "1.5.0"
+    postcss-flexbugs-fixes "4.1.0"
+    postcss-loader "3.0.0"
+    postcss-normalize "7.0.1"
+    postcss-preset-env "6.7.0"
+    postcss-safe-parser "4.0.1"
+    react-app-polyfill "^1.0.4"
+    react-dev-utils "^9.1.0"
+    resolve "1.12.0"
+    resolve-url-loader "3.1.0"
+    sass-loader "7.2.0"
+    semver "6.3.0"
+    style-loader "1.0.0"
+    terser-webpack-plugin "1.4.1"
+    ts-pnp "1.1.4"
+    url-loader "2.1.0"
+    webpack "4.41.0"
+    webpack-dev-server "3.2.1"
+    webpack-manifest-plugin "2.1.1"
+    workbox-webpack-plugin "4.3.1"
+  optionalDependencies:
+    fsevents "2.0.7"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+read-pkg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
+  dependencies:
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@1.0:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^3.0.6:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.0.0, readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
+
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  dependencies:
+    util.promisify "^1.0.0"
+
+recursive-readdir@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
+  dependencies:
+    minimatch "3.0.4"
+
+regenerate-unicode-properties@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
+  dependencies:
+    regenerate "^1.4.0"
+
+regenerate@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+
+regenerator-runtime@0.13.3, regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
+regenerator-transform@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
+  dependencies:
+    private "^0.1.6"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regex-parser@2.2.10:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
+
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+
+regexpu-core@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.1.0"
+    regjsgen "^0.5.0"
+    regjsparser "^0.6.0"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.1.0"
+
+regjsgen@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
+
+regjsparser@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+renderkid@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.2.tgz#12d310f255360c07ad8fde253f6c9e9de372d2aa"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.2"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "^0.4.0"
+
+repeat-element@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+
+repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request-promise-core@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+  dependencies:
+    lodash "^4.13.1"
+
+request-promise-native@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+  dependencies:
+    request-promise-core "1.1.1"
+    stealthy-require "^1.1.0"
+    tough-cookie ">=2.3.3"
+
+request@^2.87.0, request@^2.88.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-from-string@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+
+resolve-url-loader@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
+  dependencies:
+    adjust-sourcemap-loader "2.0.0"
+    camelcase "5.0.0"
+    compose-function "3.0.3"
+    convert-source-map "1.6.0"
+    es6-iterator "2.0.3"
+    loader-utils "1.2.3"
+    postcss "7.0.14"
+    rework "1.0.1"
+    rework-visit "1.0.0"
+    source-map "0.6.1"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@1.12.0, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  dependencies:
+    path-parse "^1.0.6"
+
+resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  dependencies:
+    path-parse "^1.0.5"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+rework-visit@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
+
+rework@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
+  dependencies:
+    convert-source-map "^0.3.3"
+    css "^2.0.0"
+
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  dependencies:
+    glob "^7.1.3"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+
+run-async@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  dependencies:
+    is-promise "^2.1.0"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
+rxjs@^6.4.0, rxjs@^6.5.2:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
+safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+
+safe-buffer@~5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+sass-loader@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.2.0.tgz#e34115239309d15b2527cb62b5dfefb62a96ff7f"
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.0.1"
+    neo-async "^2.5.0"
+    pify "^4.0.1"
+    semver "^5.5.0"
+
+sax@^1.2.4, sax@~1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  dependencies:
+    xmlchars "^2.1.1"
+
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.5.0.tgz#8f254f618d402cc80257486213c8970edfd7c22f"
+  dependencies:
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+
+selfsigned@^1.9.1:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.3.tgz#d628ecf9e3735f84e8bafba936b3cf85bea43823"
+  dependencies:
+    node-forge "0.7.5"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
+
+semver@6.3.0, semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+
+semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
+
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serialize-javascript@^1.7.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+
+serve-index@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.2"
+
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  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"
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+shell-quote@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
+sisteransi@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sockjs-client@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
+    json3 "^3.3.2"
+    url-parse "^1.4.3"
+
+sockjs-client@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
+    json3 "^3.3.2"
+    url-parse "^1.4.3"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.16, source-map-support@~0.5.12:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-support@^0.5.6:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+  integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
+
+spdx-correct@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.1.tgz#434434ff9d1726b4d9f4219d1004813d80639e30"
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz#e2a303236cac54b04031fa7a5a79c7e701df852f"
+
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  dependencies:
+    debug "^4.1.0"
+    detect-node "^2.0.4"
+    hpack.js "^2.1.6"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
+
+spdy@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
+  dependencies:
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
+    http-deceiver "^1.2.7"
+    select-hose "^2.0.0"
+    spdy-transport "^3.0.0"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+    safer-buffer "^2.0.2"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+ssri@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+stable@^0.1.8, stable@~0.1.6:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+
+stack-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+
+statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+stealthy-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^4.0.0"
+
+string-length@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^5.2.0"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^5.2.0"
+
+string.prototype.trimleft@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string.prototype.trimright@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string_decoder@^1.0.0, string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-comments@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
+  dependencies:
+    babel-extract-comments "^1.0.0"
+    babel-plugin-transform-object-rest-spread "^6.26.0"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-json-comments@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
+style-loader@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.1"
+
+stylehacks@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.1.tgz#3186595d047ab0df813d213e51c8b94e0b9010f2"
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.3.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  dependencies:
+    has-flag "^3.0.0"
+
+svg-parser@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
+
+svgo@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"
+  dependencies:
+    coa "~2.0.1"
+    colors "~1.1.2"
+    css-select "^2.0.0"
+    css-select-base-adapter "~0.1.0"
+    css-tree "1.0.0-alpha.28"
+    css-url-regex "^1.1.0"
+    csso "^3.5.0"
+    js-yaml "^3.12.0"
+    mkdirp "~0.5.1"
+    object.values "^1.0.4"
+    sax "~1.2.4"
+    stable "~0.1.6"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
+
+svgo@^1.2.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  dependencies:
+    chalk "^2.4.1"
+    coa "^2.0.2"
+    css-select "^2.0.0"
+    css-select-base-adapter "^0.1.1"
+    css-tree "1.0.0-alpha.37"
+    csso "^4.0.2"
+    js-yaml "^3.13.1"
+    mkdirp "~0.5.1"
+    object.values "^1.1.0"
+    sax "~1.2.4"
+    stable "^0.1.8"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
+
+symbol-tree@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+tapable@^1.0.0, tapable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
+
+tapable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+
+tar@^4:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.6.tgz#63110f09c00b4e60ac8bcfe1bf3c8660235fbc9b"
+  dependencies:
+    chownr "^1.0.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.3.3"
+    minizlib "^1.1.0"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.2"
+
+terser-webpack-plugin@1.4.1, terser-webpack-plugin@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.7.0"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser@^4.1.2:
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.9.tgz#e4be37f80553d02645668727777687dad26bbca8"
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+test-exclude@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+  dependencies:
+    glob "^7.1.3"
+    minimatch "^3.0.4"
+    read-pkg-up "^4.0.0"
+    require-main-filename "^2.0.0"
+
+text-table@0.2.0, text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+throat@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+
+through2@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunky@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371"
+
+timers-browserify@^2.0.4:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.10.tgz#1d28e3d2aadf1d5a5996c4e9f95601cd053480ae"
+  dependencies:
+    setimmediate "^1.0.4"
+
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+tough-cookie@>=2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  dependencies:
+    psl "^1.1.24"
+    punycode "^1.4.1"
+
+tough-cookie@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  dependencies:
+    punycode "^2.1.0"
+
+tree-kill@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a"
+  integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+ts-pnp@1.1.4, ts-pnp@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
+
+tslib@^1.8.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+
+tslib@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+
+tsutils@^3.17.1:
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
+  dependencies:
+    tslib "^1.8.1"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-fest@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
+
+type-is@~1.6.15, type-is@~1.6.16:
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.18"
+
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+
+type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+uglify-js@3.4.x, uglify-js@^3.1.4:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
+
+unicode-canonical-property-names-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
+
+unicode-match-property-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^1.0.4"
+    unicode-property-aliases-ecmascript "^1.0.4"
+
+unicode-match-property-value-ecmascript@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
+
+unicode-property-aliases-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.1.tgz#5e9edc6d1ce8fb264db18a507ef9bd8544451ca6"
+  dependencies:
+    imurmurhash "^0.1.4"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+upath@^1.0.5:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+url-loader@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
+  dependencies:
+    loader-utils "^1.2.3"
+    mime "^2.4.4"
+    schema-utils "^2.0.0"
+
+url-parse@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.3.tgz#bfaee455c889023219d757e045fa6a684ec36c15"
+  dependencies:
+    querystringify "^2.0.0"
+    requires-port "^1.0.0"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  dependencies:
+    inherits "2.0.3"
+
+utila@^0.4.0, utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+
+uuid@^3.0.1, uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+
+v8-compile-cache@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+vendors@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+
+w3c-hr-time@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  dependencies:
+    browser-process-hrtime "^0.1.2"
+
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  dependencies:
+    makeerror "1.0.x"
+
+watchpack@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+
+wbuf@^1.1.0, wbuf@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+webpack-dev-middleware@^3.5.1:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  dependencies:
+    memory-fs "^0.4.1"
+    mime "^2.4.4"
+    mkdirp "^0.5.1"
+    range-parser "^1.2.1"
+    webpack-log "^2.0.0"
+
+webpack-dev-server@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.2.1.tgz#1b45ce3ecfc55b6ebe5e36dab2777c02bc508c4e"
+  dependencies:
+    ansi-html "0.0.7"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^4.1.1"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "^0.19.1"
+    import-local "^2.0.0"
+    internal-ip "^4.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    schema-utils "^1.0.0"
+    selfsigned "^1.9.1"
+    semver "^5.6.0"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.3.0"
+    spdy "^4.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.5.1"
+    webpack-log "^2.0.0"
+    yargs "12.0.2"
+
+webpack-log@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  dependencies:
+    ansi-colors "^3.0.0"
+    uuid "^3.3.2"
+
+webpack-manifest-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
+  dependencies:
+    fs-extra "^7.0.0"
+    lodash ">=3.5 <5"
+    object.entries "^1.1.0"
+    tapable "^1.0.0"
+
+webpack-sources@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@4.41.0:
+  version "4.41.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
+websocket-driver@>=0.5.1:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  dependencies:
+    http-parser-js ">=0.4.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-fetch@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+
+whatwg-mimetype@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"
+
+whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+
+whatwg-url@^6.4.1:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@^1.2.9, which@^1.3.0, which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    isexe "^2.0.0"
+
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  dependencies:
+    string-width "^1.0.2 || 2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+workbox-background-sync@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz#26821b9bf16e9e37fd1d640289edddc08afd1950"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-broadcast-update@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-build@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
+  dependencies:
+    "@babel/runtime" "^7.3.4"
+    "@hapi/joi" "^15.0.0"
+    common-tags "^1.8.0"
+    fs-extra "^4.0.2"
+    glob "^7.1.3"
+    lodash.template "^4.4.0"
+    pretty-bytes "^5.1.0"
+    stringify-object "^3.3.0"
+    strip-comments "^1.0.2"
+    workbox-background-sync "^4.3.1"
+    workbox-broadcast-update "^4.3.1"
+    workbox-cacheable-response "^4.3.1"
+    workbox-core "^4.3.1"
+    workbox-expiration "^4.3.1"
+    workbox-google-analytics "^4.3.1"
+    workbox-navigation-preload "^4.3.1"
+    workbox-precaching "^4.3.1"
+    workbox-range-requests "^4.3.1"
+    workbox-routing "^4.3.1"
+    workbox-strategies "^4.3.1"
+    workbox-streams "^4.3.1"
+    workbox-sw "^4.3.1"
+    workbox-window "^4.3.1"
+
+workbox-cacheable-response@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-core@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
+
+workbox-expiration@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-4.3.1.tgz#d790433562029e56837f341d7f553c4a78ebe921"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-google-analytics@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
+  dependencies:
+    workbox-background-sync "^4.3.1"
+    workbox-core "^4.3.1"
+    workbox-routing "^4.3.1"
+    workbox-strategies "^4.3.1"
+
+workbox-navigation-preload@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-precaching@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-range-requests@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-routing@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-strategies@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-streams@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-sw@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
+
+workbox-webpack-plugin@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-4.3.1.tgz#47ff5ea1cc074b6c40fb5a86108863a24120d4bd"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    json-stable-stringify "^1.0.1"
+    workbox-build "^4.3.1"
+
+workbox-window@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
+  dependencies:
+    workbox-core "^4.3.1"
+
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  dependencies:
+    errno "~0.1.7"
+
+worker-rpc@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
+  dependencies:
+    microevent.ts "~0.1.1"
+
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@^5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
+  dependencies:
+    async-limiter "~1.0.0"
+
+ws@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  dependencies:
+    async-limiter "~1.0.0"
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+
+xregexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+
+yargs-parser@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@12.0.2:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^2.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^10.1.0"
+
+yargs@^12.0.5:
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
+yargs@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
diff --git a/fixtures/scheduler/index.html b/fixtures/scheduler/index.html
index 4c425b95ebed7..fdf831e2792f8 100644
--- a/fixtures/scheduler/index.html
+++ b/fixtures/scheduler/index.html
@@ -119,9 +119,37 @@ <h2>Tests:</h2>
         <div id="test-9"></div>
       </div>
     </li>
+    <li>
+      <p>Runs scheduled JS work for 99% of the frame time when nothing else is using the thread.</p>
+      <p><b>NOTE:</b> Try this test both when nothing else is running and when something is using the compositor thread in another visible tab with video or <a href="https://www.shadertoy.com/view/MtffDX">WebGL content</a> (Shift+Click).</p>
+      <button onClick="runTestTen()">Run Test 10</button>
+      <div><b>Expected:</b></div>
+      <div id="test-10-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-10"></div>
+      </div>
+    </li>
+    <li>
+      <p>Runs scheduled JS work more than 95% of the frame time when inserting DOM nodes.</p>
+      <p><b>NOTE:</b> Try this test both when nothing else is running and when something is using the compositor thread in another visible tab with video or <a href="https://www.shadertoy.com/view/MtffDX">WebGL content</a> (Shift+Click).</p>
+      <button onClick="runTestEleven()">Run Test 11</button>
+      <div><b>Expected:</b></div>
+      <div id="test-11-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-11"></div>
+      </div>
+    </li>
   </ol>
-  <script src="../../build/node_modules/react/umd/react.development.js"></script>
-  <script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
+  <script src="../../build/node_modules/react/umd/react.production.min.js"></script>
+  <script src="../../build/node_modules/scheduler/umd/scheduler.production.min.js"></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
   <script type="text/babel">
 const {
@@ -267,6 +295,16 @@ <h2>Tests:</h2>
     'Using new frame time!',
     'Finished!',
   ],
+  // test 10
+  [
+    'Running work for 10 seconds...',
+    'Ran scheduled work for >99% of the time.',
+  ],
+  // test 11
+  [
+    'Running work for 10 seconds...',
+    'Ran scheduled work for >95% of the time.',
+  ],
 ];
 function runTestOne() {
   // Test 1
@@ -637,6 +675,57 @@ <h2>Tests:</h2>
   });
 }
 
+function runTestTen() {
+  clearTestResult(10);
+  updateTestResult(10, `Running work for 10 seconds...`);
+  var testStartTime = now();
+  var accumulatedWork = 0
+  function loop() {
+    var startTime = now();
+    while (!shouldYield()) {}
+    var endTime = now();
+    accumulatedWork += endTime - startTime;
+    var runTime = endTime - testStartTime;
+    if (runTime > 10000) {
+      updateTestResult(10, `Ran scheduled work for ${(100 * accumulatedWork / runTime).toFixed(2)}% of the time.`);
+      displayTestResult(10);
+      return;
+    }
+    scheduleCallback(NormalPriority, loop);
+  }
+  scheduleCallback(NormalPriority, loop);
+}
+
+function runTestEleven() {
+  clearTestResult(11);
+  updateTestResult(11, `Running work for 10 seconds...`);
+  var testStartTime = now();
+  var lastInsertion = 0;
+  var accumulatedWork = 0
+  function loop() {
+    var startTime = now();
+    var timeSinceLastDOMInteraction = startTime - lastInsertion;
+    if (timeSinceLastDOMInteraction > 15) {
+      lastInsertion = startTime;
+      var node = document.createElement('div');
+      node.textContent = startTime;
+      document.body.appendChild(node);
+      document.body.clientHeight; // force layout
+    }
+    while (!shouldYield()) {}
+    var endTime = now();
+    accumulatedWork += endTime - startTime;
+    var runTime = endTime - testStartTime;
+    if (runTime > 10000) {
+      updateTestResult(11, `Ran scheduled work for ${(100 * accumulatedWork / runTime).toFixed(2)}% of the time.`);
+      displayTestResult(11);
+      return;
+    }
+    scheduleCallback(NormalPriority, loop);
+  }
+  scheduleCallback(NormalPriority, loop);
+}
+
     </script type="text/babel">
   </body>
 </html>
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index b52c8d0ee74d4..5bad11aae5a27 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -26,7 +26,16 @@ export default class Chrome extends Component {
           <Theme.Provider value={this.state.theme}>
             {this.props.children}
             <div>
-              <ThemeToggleButton onChange={theme => this.setState({theme})} />
+              <ThemeToggleButton
+                onChange={theme => {
+                  React.unstable_withSuspenseConfig(
+                    () => {
+                      this.setState({theme});
+                    },
+                    {timeoutMs: 6000}
+                  );
+                }}
+              />
             </div>
           </Theme.Provider>
           <script
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index a70f98e94f03b..0af0c3127aa1d 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {unstable_createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 
 import App from './components/App';
 
-let root = unstable_createRoot(document, {hydrate: true});
+let root = createRoot(document, {hydrate: true});
 root.render(<App assets={window.assetManifest} />);
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 1bbb6a3c0cd12..0e85910246412 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -2999,6 +2999,11 @@ js-tokens@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0, js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -3248,6 +3253,13 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
@@ -3558,9 +3570,10 @@ 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.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"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -4071,6 +4084,15 @@ promise@7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -4160,6 +4182,11 @@ react-dev-utils@^0.5.2:
   version "0.0.0"
   uid ""
 
+react-is@^16.8.1:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
+  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+
 react-scripts@0.9.5:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.9.5.tgz#e9f05c8427e27131662a9b9d7a9786d1ff16bb3f"
@@ -4495,6 +4522,14 @@ sax@^1.2.1, sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
diff --git a/fixtures/tracing/test.js b/fixtures/tracing/test.js
index 619d60df84ddb..18753a819300b 100644
--- a/fixtures/tracing/test.js
+++ b/fixtures/tracing/test.js
@@ -1,5 +1,5 @@
-const {createElement, Component, Placeholder} = React;
-const {unstable_createRoot: createRoot} = ReactDOM;
+const {createElement, Component, Suspense} = React;
+const {createRoot} = ReactDOM;
 const {
   unstable_subscribe: subscribe,
   unstable_trace: trace,
@@ -56,8 +56,8 @@ const read = key => {
 
 const TestApp = () =>
   createElement(
-    Placeholder,
-    {delayMs: 100, fallback: createElement(PlaceholderText)},
+    Suspense,
+    {fallback: createElement(PlaceholderText)},
     createElement(SuspendingChild, {text: 'foo'}),
     createElement(SuspendingChild, {text: 'bar'}),
     createElement(SuspendingChild, {text: 'baz'})
@@ -91,13 +91,11 @@ subscribe({
 const element = document.getElementById('root');
 trace('initial_render', performance.now(), () => {
   const root = createRoot(element);
-  const batch = root.createBatch();
-  log.app('batch.render()');
-  batch.render(createElement(TestApp));
-  batch.then(
+  log.app('render()');
+  root.render(
+    createElement(TestApp),
     wrap(() => {
-      log.app('batch.commit()');
-      batch.commit();
+      log.app('committed');
     })
   );
 });
diff --git a/fixtures/unstable-fire/index.html b/fixtures/unstable-fire/index.html
deleted file mode 100644
index 3e1cd74fe3948..0000000000000
--- a/fixtures/unstable-fire/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<html>
-  <body>
-    <script src="../../build/node_modules/react/umd/react.development.js"></script>
-    <script src="../../build/node_modules/react-dom/umd/react-dom-unstable-fire.development.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
-    <div id="container"></div>
-    <script type="text/babel">
-      ReactFire.render(
-        <h1>Hello World!</h1>,
-        document.getElementById('container')
-      );
-    </script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index b09bc1df76931..c3b1a6d164716 100644
--- a/package.json
+++ b/package.json
@@ -4,37 +4,39 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/code-frame": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/parser": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-transform-arrow-functions": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.0.0",
+    "@babel/plugin-transform-block-scoped-functions": "^7.0.0",
+    "@babel/plugin-transform-block-scoping": "^7.0.0",
+    "@babel/plugin-transform-classes": "^7.0.0",
+    "@babel/plugin-transform-computed-properties": "^7.0.0",
+    "@babel/plugin-transform-destructuring": "^7.0.0",
+    "@babel/plugin-transform-for-of": "^7.0.0",
+    "@babel/plugin-transform-literals": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-object-super": "^7.0.0",
+    "@babel/plugin-transform-parameters": "^7.0.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+    "@babel/plugin-transform-spread": "^7.0.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/traverse": "^7.0.0",
+    "@mattiasbuelens/web-streams-polyfill": "0.1.0",
     "art": "^0.10.1",
-    "babel-cli": "^6.6.5",
-    "babel-code-frame": "^6.26.0",
-    "babel-core": "^6.0.0",
-    "babel-eslint": "^10.0.0",
-    "babel-jest": "^23.0.1",
-    "babel-plugin-check-es2015-constants": "^6.5.0",
-    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-eslint": "^10.0.3",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-    "babel-plugin-transform-async-to-generator": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
-    "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.23.0",
-    "babel-plugin-transform-es2015-classes": "^6.5.2",
-    "babel-plugin-transform-es2015-computed-properties": "^6.5.2",
-    "babel-plugin-transform-es2015-destructuring": "^6.5.0",
-    "babel-plugin-transform-es2015-for-of": "^6.5.2",
-    "babel-plugin-transform-es2015-literals": "^6.5.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
-    "babel-plugin-transform-es2015-object-super": "^6.5.0",
-    "babel-plugin-transform-es2015-parameters": "^6.5.0",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
-    "babel-plugin-transform-es2015-spread": "^6.5.2",
-    "babel-plugin-transform-es2015-template-literals": "^6.5.2",
-    "babel-plugin-transform-object-rest-spread": "^6.6.5",
-    "babel-plugin-transform-react-jsx-source": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-traverse": "^6.9.0",
-    "babylon": "6.18.0",
     "chalk": "^1.1.3",
     "cli-table": "^0.3.1",
     "coffee-script": "^1.8.0",
@@ -42,38 +44,41 @@
     "coveralls": "^2.11.6",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.1.1",
-    "danger": "^3.0.4",
+    "danger": "^9.1.8",
     "error-stack-parser": "^2.0.2",
-    "eslint": "^4.1.0",
+    "eslint": "^6.8.0",
     "eslint-config-fbjs": "^1.1.1",
-    "eslint-plugin-babel": "^3.3.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^2.25.0",
-    "eslint-plugin-jest": "^21.6.1",
+    "eslint-plugin-jest": "^22.15.0",
     "eslint-plugin-no-for-of-loops": "^1.0.0",
     "eslint-plugin-react": "^6.7.1",
-    "eslint-plugin-react-internal": "link:./scripts/eslint-rules/",
+    "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^0.8.3",
     "filesize": "^3.5.6",
-    "flow-bin": "^0.72.0",
+    "flow-bin": "0.89",
     "glob": "^6.0.4",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "20190301.0.0",
     "gzip-size": "^3.0.0",
     "jasmine-check": "^1.0.0-rc.0",
-    "jest": "^23.1.0",
-    "jest-diff": "^23.0.1",
+    "jest": "^24.9.0",
+    "jest-diff": "^24.9.0",
+    "jest-snapshot-serializer-raw": "^1.1.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
     "object-assign": "^4.1.1",
-    "prettier": "1.13.7",
+    "pacote": "^9.5.6",
+    "prettier": "1.19.1",
     "prop-types": "^15.6.2",
     "random-seed": "^0.3.0",
     "react-lifecycles-compat": "^3.0.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.52.1",
-    "rollup-plugin-babel": "^3.0.1",
+    "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^2.1.1",
     "rollup-plugin-prettier": "^0.3.0",
@@ -83,31 +88,33 @@
     "targz": "^1.0.1",
     "through2": "^2.0.0",
     "tmp": "~0.0.28",
-    "typescript": "~1.8.10",
-    "@mattiasbuelens/web-streams-polyfill": "0.1.0"
+    "typescript": "^3.7.4",
+    "webpack": "^4.41.2"
   },
   "devEngines": {
-    "node": "8.x || 9.x || 10.x || 11.x || 12.x"
+    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x"
   },
   "jest": {
     "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build -- react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
     "extract-errors": "yarn build --type=dev --extract-errors",
-    "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js",
-    "debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source.js --runInBand",
+    "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
+    "debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/jest/bin/jest.js --config ./scripts/jest/config.source.js --runInBand",
     "test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
     "test-persistent": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-persistent.js",
-    "test-fire": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-fire.js",
+    "debug-test-persistent": "cross-env NODE_ENV=development node --inspect-brk node_modules/jest/bin/jest.js --config ./scripts/jest/config.source-persistent.js --runInBand",
     "test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",
-    "test-fire-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source-fire.js",
     "test-prod-build": "yarn test-build-prod",
     "test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
     "test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.js",
+    "test-build-devtools": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build-devtools.js",
+    "debug-test-build-devtools": "cross-env NODE_ENV=development node --inspect-brk node_modules/jest/bin/jest.js --config ./scripts/jest/config.build-devtools.js",
     "test-dom-fixture": "cd fixtures/dom && yarn && yarn prestart && yarn test",
     "flow": "node ./scripts/tasks/flow.js",
     "flow-ci": "node ./scripts/tasks/flow-ci.js",
diff --git a/packages/babel-plugin-react-jsx/README.md b/packages/babel-plugin-react-jsx/README.md
new file mode 100644
index 0000000000000..3e2858d310c65
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/README.md
@@ -0,0 +1,5 @@
+This package is intended to eventually replace the current `@babel/plugin-transform-react-jsx`, changing the JSX transform from targeting `React.createElement(type, props, children)` to `React.jsx(types, props, key)`. 
+
+https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
+
+**This is experimental and not intended to be used directly.**
diff --git a/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
new file mode 100644
index 0000000000000..6e44eaeaec95b
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactCreateElement-test.js
@@ -0,0 +1,392 @@
+/**
+ * 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.
+ */
+/* eslint-disable quotes */
+'use strict';
+
+const babel = require('@babel/core');
+const codeFrame = require('@babel/code-frame');
+const {wrap} = require('jest-snapshot-serializer-raw');
+
+function transform(input, options) {
+  return wrap(
+    babel.transform(input, {
+      configFile: false,
+      plugins: [
+        '@babel/plugin-syntax-jsx',
+        '@babel/plugin-transform-arrow-functions',
+        ...(options && options.development
+          ? [
+              '@babel/plugin-transform-react-jsx-source',
+              '@babel/plugin-transform-react-jsx-self',
+            ]
+          : []),
+        [
+          './packages/babel-plugin-react-jsx',
+          {
+            development: __DEV__,
+            useBuiltIns: true,
+            useCreateElement: true,
+            ...options,
+          },
+        ],
+      ],
+    }).code
+  );
+}
+
+describe('transform react to jsx', () => {
+  it('fragment with no children', () => {
+    expect(transform(`var x = <></>`)).toMatchSnapshot();
+  });
+
+  it('React.Fragment to set keys and source', () => {
+    expect(
+      transform(`var x = <React.Fragment key='foo'><div /></React.Fragment>`, {
+        development: true,
+      })
+    ).toMatchSnapshot();
+  });
+
+  it('normal fragments not to set key and source', () => {
+    expect(
+      transform(`var x = <><div /></>`, {
+        development: true,
+      })
+    ).toMatchSnapshot();
+  });
+
+  it('should properly handle comments adjacent to children', () => {
+    expect(
+      transform(`
+      var x = (
+        <div>
+          {/* A comment at the beginning */}
+          {/* A second comment at the beginning */}
+          <span>
+            {/* A nested comment */}
+          </span>
+          {/* A sandwiched comment */}
+          <br />
+          {/* A comment at the end */}
+          {/* A second comment at the end */}
+        </div>
+      );
+    `)
+    ).toMatchSnapshot();
+  });
+
+  it('adds appropriate new lines when using spread attribute', () => {
+    expect(transform(`<Component {...props} sound="moo" />`)).toMatchSnapshot();
+  });
+
+  it('arrow functions', () => {
+    expect(
+      transform(`
+        var foo = function () {
+          return () => <this />;
+        };
+
+        var bar = function () {
+          return () => <this.foo />;
+        };
+
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('assignment', () => {
+    expect(
+      transform(`var div = <Component {...props} foo="bar" />`)
+    ).toMatchSnapshot();
+  });
+
+  it('concatenates adjacent string literals', () => {
+    expect(
+      transform(`
+      var x =
+        <div>
+          foo
+          {"bar"}
+          baz
+          <div>
+            buz
+            bang
+          </div>
+          qux
+          {null}
+          quack
+        </div>
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should allow constructor as prop', () => {
+    expect(transform(`<Component constructor="foo" />;`)).toMatchSnapshot();
+  });
+
+  it('should allow deeper js namespacing', () => {
+    expect(
+      transform(`<Namespace.DeepNamespace.Component />;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should allow elements as attributes', () => {
+    expect(transform(`<div attr=<div /> />`)).toMatchSnapshot();
+  });
+
+  it('should allow js namespacing', () => {
+    expect(transform(`<Namespace.Component />;`)).toMatchSnapshot();
+  });
+
+  it('should allow nested fragments', () => {
+    expect(
+      transform(`
+        <div>
+          <  >
+            <>
+              <span>Hello</span>
+              <span>world</span>
+            </>
+            <>
+              <span>Goodbye</span>
+              <span>world</span>
+            </>
+          </>
+        </div>
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should avoid wrapping in extra parens if not needed', () => {
+    expect(
+      transform(`
+        var x = <div>
+          <Component />
+        </div>;
+
+        var x = <div>
+          {props.children}
+        </div>;
+
+        var x = <Composite>
+          {props.children}
+        </Composite>;
+
+        var x = <Composite>
+          <Composite2 />
+        </Composite>;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should convert simple tags', () => {
+    expect(transform(`var x = <div></div>;`)).toMatchSnapshot();
+  });
+
+  it('should convert simple text', () => {
+    expect(transform(`var x = <div>text</div>;`)).toMatchSnapshot();
+  });
+
+  it('should disallow spread children', () => {
+    let _error;
+    const code = `<div>{...children}</div>;`;
+    try {
+      transform(code);
+    } catch (error) {
+      _error = error;
+    }
+    expect(_error).toEqual(
+      new SyntaxError(
+        'undefined: Spread children are not supported in React.' +
+          '\n' +
+          codeFrame.codeFrameColumns(
+            code,
+            {start: {line: 1, column: 6}},
+            {highlightCode: true}
+          )
+      )
+    );
+  });
+
+  it('should escape xhtml jsxattribute', () => {
+    expect(
+      transform(`
+        <div id="wôw" />;
+        <div id="\w" />;
+        <div id="w &lt; w" />;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should escape xhtml jsxtext', () => {
+    /* eslint-disable no-irregular-whitespace */
+    expect(
+      transform(`
+        <div>wow</div>;
+        <div>wôw</div>;
+
+        <div>w & w</div>;
+        <div>w &amp; w</div>;
+
+        <div>w &nbsp; w</div>;
+        <div>this should not parse as unicode: \u00a0</div>;
+        <div>this should parse as nbsp:   </div>;
+        <div>this should parse as unicode: {'\u00a0 '}</div>;
+
+        <div>w &lt; w</div>;
+      `)
+    ).toMatchSnapshot();
+    /*eslint-enable */
+  });
+
+  it('should handle attributed elements', () => {
+    expect(
+      transform(`
+        var HelloMessage = React.createClass({
+          render: function() {
+            return <div>Hello {this.props.name}</div>;
+          }
+        });
+
+        React.render(<HelloMessage name={
+          <span>
+            Sebastian
+          </span>
+        } />, mountNode);
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should handle has own property correctly', () => {
+    expect(
+      transform(`<hasOwnProperty>testing</hasOwnProperty>;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should have correct comma in nested children', () => {
+    expect(
+      transform(`
+        var x = <div>
+          <div><br /></div>
+          <Component>{foo}<br />{bar}</Component>
+          <br />
+        </div>;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should insert commas after expressions before whitespace', () => {
+    expect(
+      transform(`
+        var x =
+          <div
+            attr1={
+              "foo" + "bar"
+            }
+            attr2={
+              "foo" + "bar" +
+
+              "baz" + "bug"
+            }
+            attr3={
+              "foo" + "bar" +
+              "baz" + "bug"
+            }
+            attr4="baz">
+          </div>
+    `)
+    ).toMatchSnapshot();
+  });
+
+  it('should not add quotes to identifier names', () => {
+    expect(
+      transform(`var e = <F aaa new const var default foo-bar/>;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should not strip nbsp even couple with other whitespace', () => {
+    expect(transform(`<div>&nbsp; </div>;`)).toMatchSnapshot();
+  });
+
+  it('should not strip tags with a single child of nbsp', () => {
+    expect(transform(`<div>&nbsp;</div>;`)).toMatchSnapshot();
+  });
+
+  it('should properly handle comments between props', () => {
+    expect(
+      transform(`
+        var x = (
+          <div
+            /* a multi-line
+              comment */
+            attr1="foo">
+            <span // a double-slash comment
+              attr2="bar"
+            />
+          </div>
+        );
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should quote jsx attributes', () => {
+    expect(
+      transform(`<button data-value='a value'>Button</button>`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support xml namespaces if flag', () => {
+    expect(
+      transform('<f:image n:attr />', {throwIfNamespace: false})
+    ).toMatchSnapshot();
+  });
+
+  it('should throw error namespaces if not flag', () => {
+    let _error;
+    const code = `<f:image />`;
+    try {
+      transform(code);
+    } catch (error) {
+      _error = error;
+    }
+    expect(_error).toEqual(
+      new SyntaxError(
+        "undefined: Namespace tags are not supported by default. React's " +
+          "JSX doesn't support namespace tags. You can turn on the " +
+          "'throwIfNamespace' flag to bypass this warning." +
+          '\n' +
+          codeFrame.codeFrameColumns(
+            code,
+            {start: {line: 1, column: 2}},
+            {highlightCode: true}
+          )
+      )
+    );
+  });
+
+  it('should transform known hyphenated tags', () => {
+    expect(transform(`<font-face />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for first spread attributes', () => {
+    expect(transform(`<Component {...x} y={2} z />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for last spread attributes', () => {
+    expect(transform(`<Component y={2} z { ... x } />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for middle spread attributes', () => {
+    expect(transform(`<Component y={2} { ... x } z />`)).toMatchSnapshot();
+  });
+
+  it('useBuiltIns false uses extend instead of Object.assign', () => {
+    expect(
+      transform(`<Component y={2} {...x} />`, {useBuiltIns: false})
+    ).toMatchSnapshot();
+  });
+});
diff --git a/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactJSX-test.js b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactJSX-test.js
new file mode 100644
index 0000000000000..2ad9a6852bb9f
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/__tests__/TransformJSXToReactJSX-test.js
@@ -0,0 +1,504 @@
+/**
+ * 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.
+ */
+/* eslint-disable quotes */
+'use strict';
+
+const babel = require('@babel/core');
+const codeFrame = require('@babel/code-frame');
+const {wrap} = require('jest-snapshot-serializer-raw');
+
+function transform(input, options) {
+  return wrap(
+    babel.transform(input, {
+      configFile: false,
+      plugins: [
+        '@babel/plugin-syntax-jsx',
+        '@babel/plugin-transform-arrow-functions',
+        ...(options && options.development
+          ? [
+              '@babel/plugin-transform-react-jsx-source',
+              '@babel/plugin-transform-react-jsx-self',
+            ]
+          : []),
+        [
+          './packages/babel-plugin-react-jsx',
+          {
+            useBuiltIns: true,
+            useCreateElement: false,
+            ...options,
+          },
+        ],
+      ],
+    }).code
+  );
+}
+
+describe('transform react to jsx', () => {
+  it('fragment with no children', () => {
+    expect(transform(`var x = <></>`)).toMatchSnapshot();
+  });
+
+  it('fragments', () => {
+    expect(transform(`var x = <><div /></>`)).toMatchSnapshot();
+  });
+
+  it('fragments to set keys', () => {
+    expect(
+      transform(`var x = <React.Fragment key="foo"></React.Fragment>`)
+    ).toMatchSnapshot();
+  });
+
+  it('React.fragment to set keys and source', () => {
+    expect(
+      transform(`var x = <React.Fragment key='foo'></React.Fragment>`, {
+        development: true,
+      })
+    ).toMatchSnapshot();
+  });
+
+  it('fragments in dev mode (no key and source)', () => {
+    expect(
+      transform(`var x = <><div /></>`, {
+        development: true,
+      })
+    ).toMatchSnapshot();
+  });
+
+  it('nonStatic children', () => {
+    expect(
+      transform(
+        `var x = (
+        <div>
+          {[<span key={'0'} />, <span key={'1'} />]}
+        </div>
+      );
+      `,
+        {
+          development: true,
+        }
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('static children', () => {
+    expect(
+      transform(
+        `var x = (
+        <div>
+          <span />
+          {[<span key={'0'} />, <span key={'1'} />]}
+        </div>
+      );
+      `,
+        {
+          development: true,
+        }
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('uses jsxDEV instead of jsx in dev mode', () => {
+    expect(
+      transform(`var x = <span propOne="one">Hi</span>`, {development: true})
+    ).toMatchSnapshot();
+  });
+
+  it('properly passes in source and self', () => {
+    expect(
+      transform(`var x = <div />;`, {development: true})
+    ).toMatchSnapshot();
+  });
+
+  it('should properly handle potentially null variables', () => {
+    expect(
+      transform(`
+        var foo = null;
+        var x = <div {...foo} />;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('properly handles keys', () => {
+    expect(
+      transform(`var x = (
+        <div>
+          <div key="1" />
+          <div key="2" meow="wolf" />
+          <div key="3" />
+        </div>
+      );`)
+    ).toMatchSnapshot();
+  });
+
+  it('uses createElement when the key comes after a spread', () => {
+    expect(
+      transform(`var x = (
+        <div {...props} key="1" foo="bar" />
+      );`)
+    ).toMatchSnapshot();
+  });
+
+  it('uses jsx when the key comes before a spread', () => {
+    expect(
+      transform(`var x = (
+        <div key="1" {...props} foo="bar" />
+      );`)
+    ).toMatchSnapshot();
+  });
+
+  it('should properly handle comments adjacent to children', () => {
+    expect(
+      transform(`
+      var x = (
+        <div>
+          {/* A comment at the beginning */}
+          {/* A second comment at the beginning */}
+          <span>
+            {/* A nested comment */}
+          </span>
+          {/* A sandwiched comment */}
+          <br />
+          {/* A comment at the end */}
+          {/* A second comment at the end */}
+        </div>
+      );
+    `)
+    ).toMatchSnapshot();
+  });
+
+  it('adds appropriate new lines when using spread attribute', () => {
+    expect(transform(`<Component {...props} sound="moo" />`)).toMatchSnapshot();
+  });
+
+  it('arrow functions', () => {
+    expect(
+      transform(`
+        var foo = function () {
+          return () => <this />;
+        };
+
+        var bar = function () {
+          return () => <this.foo />;
+        };
+
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('assignment', () => {
+    expect(
+      transform(`var div = <Component {...props} foo="bar" />`)
+    ).toMatchSnapshot();
+  });
+
+  it('concatenates adjacent string literals', () => {
+    expect(
+      transform(`
+      var x =
+        <div>
+          foo
+          {"bar"}
+          baz
+          <div>
+            buz
+            bang
+          </div>
+          qux
+          {null}
+          quack
+        </div>
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should allow constructor as prop', () => {
+    expect(transform(`<Component constructor="foo" />;`)).toMatchSnapshot();
+  });
+
+  it('should allow deeper js namespacing', () => {
+    expect(
+      transform(`<Namespace.DeepNamespace.Component />;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should allow elements as attributes', () => {
+    expect(transform(`<div attr=<div /> />`)).toMatchSnapshot();
+  });
+
+  it('should allow js namespacing', () => {
+    expect(transform(`<Namespace.Component />;`)).toMatchSnapshot();
+  });
+
+  it('should allow nested fragments', () => {
+    expect(
+      transform(`
+        <div>
+          <  >
+            <>
+              <span>Hello</span>
+              <span>world</span>
+            </>
+            <>
+              <span>Goodbye</span>
+              <span>world</span>
+            </>
+          </>
+        </div>
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should avoid wrapping in extra parens if not needed', () => {
+    expect(
+      transform(`
+        var x = <div>
+          <Component />
+        </div>;
+
+        var x = <div>
+          {props.children}
+        </div>;
+
+        var x = <Composite>
+          {props.children}
+        </Composite>;
+
+        var x = <Composite>
+          <Composite2 />
+        </Composite>;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should convert simple tags', () => {
+    expect(transform(`var x = <div></div>;`)).toMatchSnapshot();
+  });
+
+  it('should convert simple text', () => {
+    expect(transform(`var x = <div>text</div>;`)).toMatchSnapshot();
+  });
+
+  it('should disallow spread children', () => {
+    let _error;
+    const code = `<div>{...children}</div>;`;
+    try {
+      transform(code);
+    } catch (error) {
+      _error = error;
+    }
+    expect(_error).toEqual(
+      new SyntaxError(
+        'undefined: Spread children are not supported in React.' +
+          '\n' +
+          codeFrame.codeFrameColumns(
+            code,
+            {start: {line: 1, column: 6}},
+            {highlightCode: true}
+          )
+      )
+    );
+  });
+
+  it('should escape xhtml jsxattribute', () => {
+    expect(
+      transform(`
+        <div id="wôw" />;
+        <div id="\w" />;
+        <div id="w &lt; w" />;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should escape xhtml jsxtext', () => {
+    /* eslint-disable no-irregular-whitespace */
+    expect(
+      transform(`
+        <div>wow</div>;
+        <div>wôw</div>;
+
+        <div>w & w</div>;
+        <div>w &amp; w</div>;
+
+        <div>w &nbsp; w</div>;
+        <div>this should not parse as unicode: \u00a0</div>;
+        <div>this should parse as nbsp:   </div>;
+        <div>this should parse as unicode: {'\u00a0 '}</div>;
+
+        <div>w &lt; w</div>;
+      `)
+    ).toMatchSnapshot();
+    /*eslint-enable */
+  });
+
+  it('should handle attributed elements', () => {
+    expect(
+      transform(`
+        var HelloMessage = React.createClass({
+          render: function() {
+            return <div>Hello {this.props.name}</div>;
+          }
+        });
+
+        React.render(<HelloMessage name={
+          <span>
+            Sebastian
+          </span>
+        } />, mountNode);
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should handle has own property correctly', () => {
+    expect(
+      transform(`<hasOwnProperty>testing</hasOwnProperty>;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should have correct comma in nested children', () => {
+    expect(
+      transform(`
+        var x = <div>
+          <div><br /></div>
+          <Component>{foo}<br />{bar}</Component>
+          <br />
+        </div>;
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should insert commas after expressions before whitespace', () => {
+    expect(
+      transform(`
+        var x =
+          <div
+            attr1={
+              "foo" + "bar"
+            }
+            attr2={
+              "foo" + "bar" +
+
+              "baz" + "bug"
+            }
+            attr3={
+              "foo" + "bar" +
+              "baz" + "bug"
+            }
+            attr4="baz">
+          </div>
+    `)
+    ).toMatchSnapshot();
+  });
+
+  it('should not add quotes to identifier names', () => {
+    expect(
+      transform(`var e = <F aaa new const var default foo-bar/>;`)
+    ).toMatchSnapshot();
+  });
+
+  it('should not strip nbsp even couple with other whitespace', () => {
+    expect(transform(`<div>&nbsp; </div>;`)).toMatchSnapshot();
+  });
+
+  it('should not strip tags with a single child of nbsp', () => {
+    expect(transform(`<div>&nbsp;</div>;`)).toMatchSnapshot();
+  });
+
+  it('should properly handle comments between props', () => {
+    expect(
+      transform(`
+        var x = (
+          <div
+            /* a multi-line
+              comment */
+            attr1="foo">
+            <span // a double-slash comment
+              attr2="bar"
+            />
+          </div>
+        );
+      `)
+    ).toMatchSnapshot();
+  });
+
+  it('should quote jsx attributes', () => {
+    expect(
+      transform(`<button data-value='a value'>Button</button>`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support xml namespaces if flag', () => {
+    expect(
+      transform('<f:image n:attr />', {throwIfNamespace: false})
+    ).toMatchSnapshot();
+  });
+
+  it('should throw error namespaces if not flag', () => {
+    let _error;
+    const code = `<f:image />`;
+    try {
+      transform(code);
+    } catch (error) {
+      _error = error;
+    }
+    expect(_error).toEqual(
+      new SyntaxError(
+        "undefined: Namespace tags are not supported by default. React's " +
+          "JSX doesn't support namespace tags. You can turn on the " +
+          "'throwIfNamespace' flag to bypass this warning." +
+          '\n' +
+          codeFrame.codeFrameColumns(
+            code,
+            {start: {line: 1, column: 2}},
+            {highlightCode: true}
+          )
+      )
+    );
+  });
+
+  it('should transform known hyphenated tags', () => {
+    expect(transform(`<font-face />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for first spread attributes', () => {
+    expect(transform(`<Component {...x} y={2} z />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for last spread attributes', () => {
+    expect(transform(`<Component y={2} z { ... x } />`)).toMatchSnapshot();
+  });
+
+  it('wraps props in react spread for middle spread attributes', () => {
+    expect(transform(`<Component y={2} { ... x } z />`)).toMatchSnapshot();
+  });
+
+  it('useBuiltIns false uses extend instead of Object.assign', () => {
+    expect(
+      transform(`<Component y={2} {...x} />`, {useBuiltIns: false})
+    ).toMatchSnapshot();
+  });
+
+  it('duplicate children prop should transform into sequence expression with actual children', () => {
+    expect(
+      transform(`<Component children={1}>2</Component>`)
+    ).toMatchSnapshot();
+  });
+  it('duplicate children prop should transform into sequence expression with next prop', () => {
+    expect(
+      transform(`<Component children={1} foo={3}>2</Component>`)
+    ).toMatchSnapshot();
+  });
+  it('duplicate children props should transform into sequence expression with next prop', () => {
+    expect(
+      transform(`<Component children={1} children={4} foo={3}>2</Component>`)
+    ).toMatchSnapshot();
+  });
+  it('duplicate children prop should transform into sequence expression with spread', () => {
+    expect(
+      transform(`<Component children={1} {...x}>2</Component>`)
+    ).toMatchSnapshot();
+  });
+});
diff --git a/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactCreateElement-test.js.snap b/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactCreateElement-test.js.snap
new file mode 100644
index 0000000000000..a74c7e1d15e82
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactCreateElement-test.js.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transform react to jsx React.Fragment to set keys and source 1`] = `
+var _jsxFileName = "";
+var x = React.createElement(React.Fragment, {
+  key: "foo",
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 1
+  },
+  __self: this
+}, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 1
+  },
+  __self: this
+}));
+`;
+
+exports[`transform react to jsx adds appropriate new lines when using spread attribute 1`] = `
+React.createElement(Component, Object.assign({}, props, {
+  sound: "moo"
+}));
+`;
+
+exports[`transform react to jsx arrow functions 1`] = `
+var foo = function () {
+  var _this = this;
+
+  return function () {
+    return React.createElement(_this, null);
+  };
+};
+
+var bar = function () {
+  var _this2 = this;
+
+  return function () {
+    return React.createElement(_this2.foo, null);
+  };
+};
+`;
+
+exports[`transform react to jsx assignment 1`] = `
+var div = React.createElement(Component, Object.assign({}, props, {
+  foo: "bar"
+}));
+`;
+
+exports[`transform react to jsx concatenates adjacent string literals 1`] = `var x = React.createElement("div", null, "foo", "bar", "baz", React.createElement("div", null, "buz bang"), "qux", null, "quack");`;
+
+exports[`transform react to jsx fragment with no children 1`] = `var x = React.createElement(React.Fragment, null);`;
+
+exports[`transform react to jsx normal fragments not to set key and source 1`] = `
+var _jsxFileName = "";
+var x = React.createElement(React.Fragment, null, React.createElement("div", {
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 1
+  },
+  __self: this
+}));
+`;
+
+exports[`transform react to jsx should allow constructor as prop 1`] = `
+React.createElement(Component, {
+  constructor: "foo"
+});
+`;
+
+exports[`transform react to jsx should allow deeper js namespacing 1`] = `React.createElement(Namespace.DeepNamespace.Component, null);`;
+
+exports[`transform react to jsx should allow elements as attributes 1`] = `
+React.createElement("div", {
+  attr: React.createElement("div", null)
+});
+`;
+
+exports[`transform react to jsx should allow js namespacing 1`] = `React.createElement(Namespace.Component, null);`;
+
+exports[`transform react to jsx should allow nested fragments 1`] = `React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement(React.Fragment, null, React.createElement("span", null, "Hello"), React.createElement("span", null, "world")), React.createElement(React.Fragment, null, React.createElement("span", null, "Goodbye"), React.createElement("span", null, "world"))));`;
+
+exports[`transform react to jsx should avoid wrapping in extra parens if not needed 1`] = `
+var x = React.createElement("div", null, React.createElement(Component, null));
+var x = React.createElement("div", null, props.children);
+var x = React.createElement(Composite, null, props.children);
+var x = React.createElement(Composite, null, React.createElement(Composite2, null));
+`;
+
+exports[`transform react to jsx should convert simple tags 1`] = `var x = React.createElement("div", null);`;
+
+exports[`transform react to jsx should convert simple text 1`] = `var x = React.createElement("div", null, "text");`;
+
+exports[`transform react to jsx should escape xhtml jsxattribute 1`] = `
+React.createElement("div", {
+  id: "w\\xF4w"
+});
+React.createElement("div", {
+  id: "w"
+});
+React.createElement("div", {
+  id: "w < w"
+});
+`;
+
+exports[`transform react to jsx should escape xhtml jsxtext 1`] = `
+React.createElement("div", null, "wow");
+React.createElement("div", null, "w\\xF4w");
+React.createElement("div", null, "w & w");
+React.createElement("div", null, "w & w");
+React.createElement("div", null, "w \\xA0 w");
+React.createElement("div", null, "this should not parse as unicode: \\xA0");
+React.createElement("div", null, "this should parse as nbsp: \\xA0 ");
+React.createElement("div", null, "this should parse as unicode: ", '  ');
+React.createElement("div", null, "w < w");
+`;
+
+exports[`transform react to jsx should handle attributed elements 1`] = `
+var HelloMessage = React.createClass({
+  render: function () {
+    return React.createElement("div", null, "Hello ", this.props.name);
+  }
+});
+React.render(React.createElement(HelloMessage, {
+  name: React.createElement("span", null, "Sebastian")
+}), mountNode);
+`;
+
+exports[`transform react to jsx should handle has own property correctly 1`] = `React.createElement("hasOwnProperty", null, "testing");`;
+
+exports[`transform react to jsx should have correct comma in nested children 1`] = `var x = React.createElement("div", null, React.createElement("div", null, React.createElement("br", null)), React.createElement(Component, null, foo, React.createElement("br", null), bar), React.createElement("br", null));`;
+
+exports[`transform react to jsx should insert commas after expressions before whitespace 1`] = `
+var x = React.createElement("div", {
+  attr1: "foo" + "bar",
+  attr2: "foo" + "bar" + "baz" + "bug",
+  attr3: "foo" + "bar" + "baz" + "bug",
+  attr4: "baz"
+});
+`;
+
+exports[`transform react to jsx should not add quotes to identifier names 1`] = `
+var e = React.createElement(F, {
+  aaa: true,
+  new: true,
+  const: true,
+  var: true,
+  default: true,
+  "foo-bar": true
+});
+`;
+
+exports[`transform react to jsx should not strip nbsp even couple with other whitespace 1`] = `React.createElement("div", null, "\\xA0 ");`;
+
+exports[`transform react to jsx should not strip tags with a single child of nbsp 1`] = `React.createElement("div", null, "\\xA0");`;
+
+exports[`transform react to jsx should properly handle comments adjacent to children 1`] = `var x = React.createElement("div", null, React.createElement("span", null), React.createElement("br", null));`;
+
+exports[`transform react to jsx should properly handle comments between props 1`] = `
+var x = React.createElement("div", {
+  /* a multi-line
+    comment */
+  attr1: "foo"
+}, React.createElement("span", {
+  // a double-slash comment
+  attr2: "bar"
+}));
+`;
+
+exports[`transform react to jsx should quote jsx attributes 1`] = `
+React.createElement("button", {
+  "data-value": "a value"
+}, "Button");
+`;
+
+exports[`transform react to jsx should support xml namespaces if flag 1`] = `
+React.createElement("f:image", {
+  "n:attr": true
+});
+`;
+
+exports[`transform react to jsx should transform known hyphenated tags 1`] = `React.createElement("font-face", null);`;
+
+exports[`transform react to jsx useBuiltIns false uses extend instead of Object.assign 1`] = `
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+React.createElement(Component, _extends({
+  y: 2
+}, x));
+`;
+
+exports[`transform react to jsx wraps props in react spread for first spread attributes 1`] = `
+React.createElement(Component, Object.assign({}, x, {
+  y: 2,
+  z: true
+}));
+`;
+
+exports[`transform react to jsx wraps props in react spread for last spread attributes 1`] = `
+React.createElement(Component, Object.assign({
+  y: 2,
+  z: true
+}, x));
+`;
+
+exports[`transform react to jsx wraps props in react spread for middle spread attributes 1`] = `
+React.createElement(Component, Object.assign({
+  y: 2
+}, x, {
+  z: true
+}));
+`;
diff --git a/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactJSX-test.js.snap b/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactJSX-test.js.snap
new file mode 100644
index 0000000000000..22b83d9ec1513
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/__tests__/__snapshots__/TransformJSXToReactJSX-test.js.snap
@@ -0,0 +1,400 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transform react to jsx React.fragment to set keys and source 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV(React.Fragment, {}, "foo", false, {
+  fileName: _jsxFileName,
+  lineNumber: 1
+}, this);
+`;
+
+exports[`transform react to jsx adds appropriate new lines when using spread attribute 1`] = `
+React.jsx(Component, Object.assign({}, props, {
+  sound: "moo"
+}));
+`;
+
+exports[`transform react to jsx arrow functions 1`] = `
+var foo = function () {
+  var _this = this;
+
+  return function () {
+    return React.jsx(_this, {});
+  };
+};
+
+var bar = function () {
+  var _this2 = this;
+
+  return function () {
+    return React.jsx(_this2.foo, {});
+  };
+};
+`;
+
+exports[`transform react to jsx assignment 1`] = `
+var div = React.jsx(Component, Object.assign({}, props, {
+  foo: "bar"
+}));
+`;
+
+exports[`transform react to jsx concatenates adjacent string literals 1`] = `
+var x = React.jsxs("div", {
+  children: ["foo", "bar", "baz", React.jsx("div", {
+    children: "buz bang"
+  }), "qux", null, "quack"]
+});
+`;
+
+exports[`transform react to jsx duplicate children prop should transform into sequence expression with actual children 1`] = `
+React.jsx(Component, {
+  children: (1, "2")
+});
+`;
+
+exports[`transform react to jsx duplicate children prop should transform into sequence expression with next prop 1`] = `
+React.jsx(Component, {
+  foo: (1, 3),
+  children: "2"
+});
+`;
+
+exports[`transform react to jsx duplicate children prop should transform into sequence expression with spread 1`] = `
+React.jsx(Component, Object.assign({}, (1, x), {
+  children: "2"
+}));
+`;
+
+exports[`transform react to jsx duplicate children props should transform into sequence expression with next prop 1`] = `
+React.jsx(Component, {
+  foo: (1, 4, 3),
+  children: "2"
+});
+`;
+
+exports[`transform react to jsx fragment with no children 1`] = `var x = React.jsx(React.Fragment, {});`;
+
+exports[`transform react to jsx fragments 1`] = `
+var x = React.jsx(React.Fragment, {
+  children: React.jsx("div", {})
+});
+`;
+
+exports[`transform react to jsx fragments in dev mode (no key and source) 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV(React.Fragment, {
+  children: React.jsxDEV("div", {}, undefined, false, {
+    fileName: _jsxFileName,
+    lineNumber: 1
+  }, this)
+}, undefined, false);
+`;
+
+exports[`transform react to jsx fragments to set keys 1`] = `var x = React.jsx(React.Fragment, {}, "foo");`;
+
+exports[`transform react to jsx nonStatic children 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV("div", {
+  children: [React.jsxDEV("span", {}, '0', false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this), React.jsxDEV("span", {}, '1', false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this)]
+}, undefined, false, {
+  fileName: _jsxFileName,
+  lineNumber: 2
+}, this);
+`;
+
+exports[`transform react to jsx properly handles keys 1`] = `
+var x = React.jsxs("div", {
+  children: [React.jsx("div", {}, "1"), React.jsx("div", {
+    meow: "wolf"
+  }, "2"), React.jsx("div", {}, "3")]
+});
+`;
+
+exports[`transform react to jsx properly passes in source and self 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV("div", {}, undefined, false, {
+  fileName: _jsxFileName,
+  lineNumber: 1
+}, this);
+`;
+
+exports[`transform react to jsx should allow constructor as prop 1`] = `
+React.jsx(Component, {
+  constructor: "foo"
+});
+`;
+
+exports[`transform react to jsx should allow deeper js namespacing 1`] = `React.jsx(Namespace.DeepNamespace.Component, {});`;
+
+exports[`transform react to jsx should allow elements as attributes 1`] = `
+React.jsx("div", {
+  attr: React.jsx("div", {})
+});
+`;
+
+exports[`transform react to jsx should allow js namespacing 1`] = `React.jsx(Namespace.Component, {});`;
+
+exports[`transform react to jsx should allow nested fragments 1`] = `
+React.jsx("div", {
+  children: React.jsxs(React.Fragment, {
+    children: [React.jsxs(React.Fragment, {
+      children: [React.jsx("span", {
+        children: "Hello"
+      }), React.jsx("span", {
+        children: "world"
+      })]
+    }), React.jsxs(React.Fragment, {
+      children: [React.jsx("span", {
+        children: "Goodbye"
+      }), React.jsx("span", {
+        children: "world"
+      })]
+    })]
+  })
+});
+`;
+
+exports[`transform react to jsx should avoid wrapping in extra parens if not needed 1`] = `
+var x = React.jsx("div", {
+  children: React.jsx(Component, {})
+});
+var x = React.jsx("div", {
+  children: props.children
+});
+var x = React.jsx(Composite, {
+  children: props.children
+});
+var x = React.jsx(Composite, {
+  children: React.jsx(Composite2, {})
+});
+`;
+
+exports[`transform react to jsx should convert simple tags 1`] = `var x = React.jsx("div", {});`;
+
+exports[`transform react to jsx should convert simple text 1`] = `
+var x = React.jsx("div", {
+  children: "text"
+});
+`;
+
+exports[`transform react to jsx should escape xhtml jsxattribute 1`] = `
+React.jsx("div", {
+  id: "w\\xF4w"
+});
+React.jsx("div", {
+  id: "w"
+});
+React.jsx("div", {
+  id: "w < w"
+});
+`;
+
+exports[`transform react to jsx should escape xhtml jsxtext 1`] = `
+React.jsx("div", {
+  children: "wow"
+});
+React.jsx("div", {
+  children: "w\\xF4w"
+});
+React.jsx("div", {
+  children: "w & w"
+});
+React.jsx("div", {
+  children: "w & w"
+});
+React.jsx("div", {
+  children: "w \\xA0 w"
+});
+React.jsx("div", {
+  children: "this should not parse as unicode: \\xA0"
+});
+React.jsx("div", {
+  children: "this should parse as nbsp: \\xA0 "
+});
+React.jsxs("div", {
+  children: ["this should parse as unicode: ", '  ']
+});
+React.jsx("div", {
+  children: "w < w"
+});
+`;
+
+exports[`transform react to jsx should handle attributed elements 1`] = `
+var HelloMessage = React.createClass({
+  render: function () {
+    return React.jsxs("div", {
+      children: ["Hello ", this.props.name]
+    });
+  }
+});
+React.render(React.jsx(HelloMessage, {
+  name: React.jsx("span", {
+    children: "Sebastian"
+  })
+}), mountNode);
+`;
+
+exports[`transform react to jsx should handle has own property correctly 1`] = `
+React.jsx("hasOwnProperty", {
+  children: "testing"
+});
+`;
+
+exports[`transform react to jsx should have correct comma in nested children 1`] = `
+var x = React.jsxs("div", {
+  children: [React.jsx("div", {
+    children: React.jsx("br", {})
+  }), React.jsxs(Component, {
+    children: [foo, React.jsx("br", {}), bar]
+  }), React.jsx("br", {})]
+});
+`;
+
+exports[`transform react to jsx should insert commas after expressions before whitespace 1`] = `
+var x = React.jsx("div", {
+  attr1: "foo" + "bar",
+  attr2: "foo" + "bar" + "baz" + "bug",
+  attr3: "foo" + "bar" + "baz" + "bug",
+  attr4: "baz"
+});
+`;
+
+exports[`transform react to jsx should not add quotes to identifier names 1`] = `
+var e = React.jsx(F, {
+  aaa: true,
+  new: true,
+  const: true,
+  var: true,
+  default: true,
+  "foo-bar": true
+});
+`;
+
+exports[`transform react to jsx should not strip nbsp even couple with other whitespace 1`] = `
+React.jsx("div", {
+  children: "\\xA0 "
+});
+`;
+
+exports[`transform react to jsx should not strip tags with a single child of nbsp 1`] = `
+React.jsx("div", {
+  children: "\\xA0"
+});
+`;
+
+exports[`transform react to jsx should properly handle comments adjacent to children 1`] = `
+var x = React.jsxs("div", {
+  children: [React.jsx("span", {}), React.jsx("br", {})]
+});
+`;
+
+exports[`transform react to jsx should properly handle comments between props 1`] = `
+var x = React.jsx("div", {
+  /* a multi-line
+    comment */
+  attr1: "foo",
+  children: React.jsx("span", {
+    // a double-slash comment
+    attr2: "bar"
+  })
+});
+`;
+
+exports[`transform react to jsx should properly handle potentially null variables 1`] = `
+var foo = null;
+var x = React.jsx("div", Object.assign({}, foo));
+`;
+
+exports[`transform react to jsx should quote jsx attributes 1`] = `
+React.jsx("button", {
+  "data-value": "a value",
+  children: "Button"
+});
+`;
+
+exports[`transform react to jsx should support xml namespaces if flag 1`] = `
+React.jsx("f:image", {
+  "n:attr": true
+});
+`;
+
+exports[`transform react to jsx should transform known hyphenated tags 1`] = `React.jsx("font-face", {});`;
+
+exports[`transform react to jsx static children 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV("div", {
+  children: [React.jsxDEV("span", {}, undefined, false, {
+    fileName: _jsxFileName,
+    lineNumber: 3
+  }, this), [React.jsxDEV("span", {}, '0', false, {
+    fileName: _jsxFileName,
+    lineNumber: 4
+  }, this), React.jsxDEV("span", {}, '1', false, {
+    fileName: _jsxFileName,
+    lineNumber: 4
+  }, this)]]
+}, undefined, true, {
+  fileName: _jsxFileName,
+  lineNumber: 2
+}, this);
+`;
+
+exports[`transform react to jsx useBuiltIns false uses extend instead of Object.assign 1`] = `
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+React.jsx(Component, _extends({
+  y: 2
+}, x));
+`;
+
+exports[`transform react to jsx uses createElement when the key comes after a spread 1`] = `
+var x = React.createElement("div", Object.assign({}, props, {
+  key: "1",
+  foo: "bar"
+}));
+`;
+
+exports[`transform react to jsx uses jsx when the key comes before a spread 1`] = `
+var x = React.jsx("div", Object.assign({}, props, {
+  foo: "bar"
+}), "1");
+`;
+
+exports[`transform react to jsx uses jsxDEV instead of jsx in dev mode 1`] = `
+var _jsxFileName = "";
+var x = React.jsxDEV("span", {
+  propOne: "one",
+  children: "Hi"
+}, undefined, false, {
+  fileName: _jsxFileName,
+  lineNumber: 1
+}, this);
+`;
+
+exports[`transform react to jsx wraps props in react spread for first spread attributes 1`] = `
+React.jsx(Component, Object.assign({}, x, {
+  y: 2,
+  z: true
+}));
+`;
+
+exports[`transform react to jsx wraps props in react spread for last spread attributes 1`] = `
+React.jsx(Component, Object.assign({
+  y: 2,
+  z: true
+}, x));
+`;
+
+exports[`transform react to jsx wraps props in react spread for middle spread attributes 1`] = `
+React.jsx(Component, Object.assign({
+  y: 2
+}, x, {
+  z: true
+}));
+`;
diff --git a/packages/babel-plugin-react-jsx/index.js b/packages/babel-plugin-react-jsx/index.js
new file mode 100644
index 0000000000000..7401bda105727
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./src/TransformJSXToReactBabelPlugin');
diff --git a/packages/babel-plugin-react-jsx/npm/index.js b/packages/babel-plugin-react-jsx/npm/index.js
new file mode 100644
index 0000000000000..af4ea6a44bb9a
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-babel.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-babel.development.js');
+}
diff --git a/packages/babel-plugin-react-jsx/package.json b/packages/babel-plugin-react-jsx/package.json
new file mode 100644
index 0000000000000..41243452d4f17
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "babel-plugin-react-jsx",
+  "version": "0.1.0",
+  "private": true,
+  "description": "@babel/plugin-transform-react-jsx",
+  "main": "index.js",
+  "dependencies": {
+    "esutils": "^2.0.0"
+    
+  },
+  "files": [
+    "README.md",
+    "index.js",
+    "build-info.json",
+    "cjs/",
+    "umd/"
+  ]
+}
diff --git a/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js b/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js
new file mode 100644
index 0000000000000..308fc7116f8c0
--- /dev/null
+++ b/packages/babel-plugin-react-jsx/src/TransformJSXToReactBabelPlugin.js
@@ -0,0 +1,658 @@
+// MIT License
+
+// Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+// © 2019 GitHub, Inc.
+'use strict';
+
+const esutils = require('esutils');
+
+function helper(babel, opts) {
+  const {types: t} = babel;
+
+  const visitor = {};
+
+  visitor.JSXNamespacedName = function(path, state) {
+    const throwIfNamespace =
+      state.opts.throwIfNamespace === undefined
+        ? true
+        : !!state.opts.throwIfNamespace;
+    if (throwIfNamespace) {
+      throw path.buildCodeFrameError(
+        `Namespace tags are not supported by default. React's JSX doesn't support namespace tags. \
+You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
+      );
+    }
+  };
+
+  visitor.JSXSpreadChild = function(path) {
+    throw path.buildCodeFrameError(
+      'Spread children are not supported in React.',
+    );
+  };
+
+  visitor.JSXElement = {
+    exit(path, file) {
+      let callExpr;
+      if (file.opts.useCreateElement || shouldUseCreateElement(path)) {
+        callExpr = buildCreateElementCall(path, file);
+      } else {
+        callExpr = buildJSXElementCall(path, file);
+      }
+
+      if (callExpr) {
+        path.replaceWith(t.inherits(callExpr, path.node));
+      }
+    },
+  };
+
+  visitor.JSXFragment = {
+    exit(path, file) {
+      if (opts.compat) {
+        throw path.buildCodeFrameError(
+          'Fragment tags are only supported in React 16 and up.',
+        );
+      }
+      let callExpr;
+      if (file.opts.useCreateElement) {
+        callExpr = buildCreateElementFragmentCall(path, file);
+      } else {
+        callExpr = buildJSXFragmentCall(path, file);
+      }
+
+      if (callExpr) {
+        path.replaceWith(t.inherits(callExpr, path.node));
+      }
+    },
+  };
+
+  return visitor;
+
+  function convertJSXIdentifier(node, parent) {
+    if (t.isJSXIdentifier(node)) {
+      if (node.name === 'this' && t.isReferenced(node, parent)) {
+        return t.thisExpression();
+      } else if (esutils.keyword.isIdentifierNameES6(node.name)) {
+        node.type = 'Identifier';
+      } else {
+        return t.stringLiteral(node.name);
+      }
+    } else if (t.isJSXMemberExpression(node)) {
+      return t.memberExpression(
+        convertJSXIdentifier(node.object, node),
+        convertJSXIdentifier(node.property, node),
+      );
+    } else if (t.isJSXNamespacedName(node)) {
+      /**
+       * If there is flag "throwIfNamespace"
+       * print XMLNamespace like string literal
+       */
+      return t.stringLiteral(`${node.namespace.name}:${node.name.name}`);
+    }
+
+    return node;
+  }
+
+  function convertAttributeValue(node) {
+    if (t.isJSXExpressionContainer(node)) {
+      return node.expression;
+    } else {
+      return node;
+    }
+  }
+
+  function convertAttribute(node, duplicateChildren) {
+    let value = convertAttributeValue(node.value || t.booleanLiteral(true));
+
+    if (t.isStringLiteral(value) && !t.isJSXExpressionContainer(node.value)) {
+      value.value = value.value.replace(/\n\s+/g, ' ');
+
+      // "raw" JSXText should not be used from a StringLiteral because it needs to be escaped.
+      if (value.extra && value.extra.raw) {
+        delete value.extra.raw;
+      }
+    }
+    if (duplicateChildren && duplicateChildren.length > 0) {
+      value = t.sequenceExpression([...duplicateChildren, value]);
+    }
+
+    if (t.isJSXNamespacedName(node.name)) {
+      node.name = t.stringLiteral(
+        node.name.namespace.name + ':' + node.name.name.name,
+      );
+    } else if (esutils.keyword.isIdentifierNameES6(node.name.name)) {
+      node.name.type = 'Identifier';
+    } else {
+      node.name = t.stringLiteral(node.name.name);
+    }
+
+    return t.inherits(t.objectProperty(node.name, value), node);
+  }
+
+  // We want to use React.createElement, even in the case of
+  // jsx, for <div {...props} key={key} /> to distinguish it
+  // from <div key={key} {...props} />. This is an intermediary
+  // step while we deprecate key spread from props. Afterwards,
+  // we will remove createElement entirely
+  function shouldUseCreateElement(path) {
+    const openingPath = path.get('openingElement');
+    const attributes = openingPath.node.attributes;
+
+    let seenPropsSpread = false;
+    for (let i = 0; i < attributes.length; i++) {
+      const attr = attributes[i];
+      if (
+        seenPropsSpread &&
+        t.isJSXAttribute(attr) &&
+        attr.name.name === 'key'
+      ) {
+        return true;
+      } else if (t.isJSXSpreadAttribute(attr)) {
+        seenPropsSpread = true;
+      }
+    }
+    return false;
+  }
+
+  // Builds JSX into:
+  // Production: React.jsx(type, arguments, key)
+  // Development: React.jsxDEV(type, arguments, key, isStaticChildren, source, self)
+  function buildJSXElementCall(path, file) {
+    if (opts.filter && !opts.filter(path.node, file)) {
+      return;
+    }
+
+    const openingPath = path.get('openingElement');
+    openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+    const tagExpr = convertJSXIdentifier(
+      openingPath.node.name,
+      openingPath.node,
+    );
+    const args = [];
+
+    let tagName;
+    if (t.isIdentifier(tagExpr)) {
+      tagName = tagExpr.name;
+    } else if (t.isLiteral(tagExpr)) {
+      tagName = tagExpr.value;
+    }
+
+    const state = {
+      tagExpr: tagExpr,
+      tagName: tagName,
+      args: args,
+    };
+
+    if (opts.pre) {
+      opts.pre(state, file);
+    }
+
+    let attribs = [];
+    let key;
+    let source;
+    let self;
+
+    // for React.jsx, key, __source (dev), and __self (dev) is passed in as
+    // a separate argument rather than in the args object. We go through the
+    // props and filter out these three keywords so we can pass them in
+    // as separate arguments later
+    for (let i = 0; i < openingPath.node.attributes.length; i++) {
+      const attr = openingPath.node.attributes[i];
+      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+        if (attr.name.name === 'key') {
+          key = convertAttribute(attr).value;
+        } else if (attr.name.name === '__source') {
+          source = convertAttribute(attr).value;
+        } else if (attr.name.name === '__self') {
+          self = convertAttribute(attr).value;
+        } else {
+          attribs.push(attr);
+        }
+      } else {
+        attribs.push(attr);
+      }
+    }
+
+    if (attribs.length || path.node.children.length) {
+      attribs = buildJSXOpeningElementAttributes(
+        attribs,
+        file,
+        path.node.children,
+      );
+    } else {
+      // attributes should never be null
+      attribs = t.objectExpression([]);
+    }
+
+    args.push(attribs);
+
+    if (!file.opts.development) {
+      if (key !== undefined) {
+        args.push(key);
+      }
+    } else {
+      // isStaticChildren, __source, and __self are only used in development
+      args.push(
+        key === undefined ? t.identifier('undefined') : key,
+        t.booleanLiteral(path.node.children.length > 1),
+        source === undefined ? t.identifier('undefined') : source,
+        self === undefined ? t.identifier('undefined') : self,
+      );
+    }
+
+    if (opts.post) {
+      opts.post(state, file);
+    }
+    return (
+      state.call ||
+      t.callExpression(
+        path.node.children.length > 1 ? state.staticCallee : state.callee,
+        args,
+      )
+    );
+  }
+
+  function isChildrenProp(prop) {
+    return (
+      t.isJSXAttribute(prop) &&
+      t.isJSXIdentifier(prop.name) &&
+      prop.name.name === 'children'
+    );
+  }
+
+  // Builds props for React.jsx. This function adds children into the props
+  // and ensures that props is always an object
+  function buildJSXOpeningElementAttributes(attribs, file, children) {
+    let _props = [];
+    const objs = [];
+
+    // In order to avoid having duplicate "children" keys, we avoid
+    // pushing the "children" prop if we have actual children. However,
+    // the children prop may have side effects, so to be certain
+    // these side effects are evaluated, we add them to the following prop
+    // as a sequence expression to preserve order. So:
+    // <div children={x++} foo={y}>{child}</div> becomes
+    // React.jsx('div', {foo: (x++, y), children: child});
+    // duplicateChildren contains the extra children prop values
+    let duplicateChildren = [];
+
+    const hasChildren = children && children.length > 0;
+
+    const useBuiltIns = file.opts.useBuiltIns || false;
+    if (typeof useBuiltIns !== 'boolean') {
+      throw new Error(
+        'transform-react-jsx currently only accepts a boolean option for ' +
+          'useBuiltIns (defaults to false)',
+      );
+    }
+
+    while (attribs.length) {
+      const prop = attribs.shift();
+      if (hasChildren && isChildrenProp(prop)) {
+        duplicateChildren.push(convertAttributeValue(prop.value));
+      } else if (t.isJSXSpreadAttribute(prop)) {
+        _props = pushProps(_props, objs);
+        if (duplicateChildren.length > 0) {
+          objs.push(
+            t.sequenceExpression([...duplicateChildren, prop.argument]),
+          );
+          duplicateChildren = [];
+        } else {
+          objs.push(prop.argument);
+        }
+      } else {
+        _props.push(convertAttribute(prop, duplicateChildren));
+        if (duplicateChildren.length > 0) {
+          duplicateChildren = [];
+        }
+      }
+    }
+
+    // In React.JSX, children is no longer a separate argument, but passed in
+    // through the argument object
+    if (hasChildren) {
+      if (children.length === 1) {
+        _props.push(
+          t.objectProperty(
+            t.identifier('children'),
+            duplicateChildren.length > 0
+              ? t.sequenceExpression([...duplicateChildren, children[0]])
+              : children[0],
+          ),
+        );
+      } else {
+        _props.push(
+          t.objectProperty(
+            t.identifier('children'),
+            duplicateChildren.length > 0
+              ? t.sequenceExpression([
+                  ...duplicateChildren,
+                  t.arrayExpression(children),
+                ])
+              : t.arrayExpression(children),
+          ),
+        );
+      }
+    }
+
+    pushProps(_props, objs);
+
+    if (objs.length === 1) {
+      // only one object
+      if (!t.isObjectExpression(objs[0])) {
+        // if the prop object isn't an object, use Object.assign or _extends
+        // to ensure that the prop will always be an object (as opposed to a variable
+        // that could be null at some point)
+        const expressionHelper = useBuiltIns
+          ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+          : file.addHelper('extends');
+
+        attribs = t.callExpression(expressionHelper, [
+          t.objectExpression([]),
+          objs[0],
+        ]);
+      } else {
+        attribs = objs[0];
+      }
+    } else {
+      // looks like we have multiple objects
+      if (!t.isObjectExpression(objs[0])) {
+        objs.unshift(t.objectExpression([]));
+      }
+
+      const expressionHelper = useBuiltIns
+        ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+        : file.addHelper('extends');
+
+      // spread it
+      attribs = t.callExpression(expressionHelper, objs);
+    }
+
+    return attribs;
+  }
+
+  // Builds JSX Fragment <></> into
+  // Production: React.jsx(type, arguments)
+  // Development: React.jsxDEV(type, { children})
+  function buildJSXFragmentCall(path, file) {
+    if (opts.filter && !opts.filter(path.node, file)) {
+      return;
+    }
+
+    const openingPath = path.get('openingElement');
+    openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+    const args = [];
+    const tagName = null;
+    const tagExpr = file.get('jsxFragIdentifier')();
+
+    const state = {
+      tagExpr: tagExpr,
+      tagName: tagName,
+      args: args,
+    };
+
+    if (opts.pre) {
+      opts.pre(state, file);
+    }
+
+    let childrenNode;
+    if (path.node.children.length > 0) {
+      if (path.node.children.length === 1) {
+        childrenNode = path.node.children[0];
+      } else {
+        childrenNode = t.arrayExpression(path.node.children);
+      }
+    }
+
+    args.push(
+      t.objectExpression(
+        childrenNode !== undefined
+          ? [t.objectProperty(t.identifier('children'), childrenNode)]
+          : [],
+      ),
+    );
+
+    if (file.opts.development) {
+      args.push(
+        t.identifier('undefined'),
+        t.booleanLiteral(path.node.children.length > 1),
+      );
+    }
+
+    if (opts.post) {
+      opts.post(state, file);
+    }
+
+    return (
+      state.call ||
+      t.callExpression(
+        path.node.children.length > 1 ? state.staticCallee : state.callee,
+        args,
+      )
+    );
+  }
+
+  // Builds JSX into:
+  // Production: React.createElement(type, arguments, children)
+  // Development: React.createElement(type, arguments, children, source, self)
+  function buildCreateElementCall(path, file) {
+    if (opts.filter && !opts.filter(path.node, file)) {
+      return;
+    }
+
+    const openingPath = path.get('openingElement');
+    openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+    const tagExpr = convertJSXIdentifier(
+      openingPath.node.name,
+      openingPath.node,
+    );
+    const args = [];
+
+    let tagName;
+    if (t.isIdentifier(tagExpr)) {
+      tagName = tagExpr.name;
+    } else if (t.isLiteral(tagExpr)) {
+      tagName = tagExpr.value;
+    }
+
+    const state = {
+      tagExpr: tagExpr,
+      tagName: tagName,
+      args: args,
+    };
+
+    if (opts.pre) {
+      opts.pre(state, file);
+    }
+
+    let attribs = openingPath.node.attributes;
+    if (attribs.length) {
+      attribs = buildCreateElementOpeningElementAttributes(attribs, file);
+    } else {
+      attribs = t.nullLiteral();
+    }
+
+    args.push(attribs, ...path.node.children);
+
+    if (opts.post) {
+      opts.post(state, file);
+    }
+
+    return state.call || t.callExpression(state.oldCallee, args);
+  }
+
+  function pushProps(_props, objs) {
+    if (!_props.length) {
+      return _props;
+    }
+
+    objs.push(t.objectExpression(_props));
+    return [];
+  }
+
+  /**
+   * The logic for this is quite terse. It's because we need to
+   * support spread elements. We loop over all attributes,
+   * breaking on spreads, we then push a new object containing
+   * all prior attributes to an array for later processing.
+   */
+  function buildCreateElementOpeningElementAttributes(attribs, file) {
+    let _props = [];
+    const objs = [];
+
+    const useBuiltIns = file.opts.useBuiltIns || false;
+    if (typeof useBuiltIns !== 'boolean') {
+      throw new Error(
+        'transform-react-jsx currently only accepts a boolean option for ' +
+          'useBuiltIns (defaults to false)',
+      );
+    }
+
+    while (attribs.length) {
+      const prop = attribs.shift();
+      if (t.isJSXSpreadAttribute(prop)) {
+        _props = pushProps(_props, objs);
+        objs.push(prop.argument);
+      } else {
+        const attr = convertAttribute(prop);
+        _props.push(attr);
+      }
+    }
+
+    pushProps(_props, objs);
+
+    if (objs.length === 1) {
+      // only one object
+      attribs = objs[0];
+    } else {
+      // looks like we have multiple objects
+      if (!t.isObjectExpression(objs[0])) {
+        objs.unshift(t.objectExpression([]));
+      }
+
+      const expressionHelper = useBuiltIns
+        ? t.memberExpression(t.identifier('Object'), t.identifier('assign'))
+        : file.addHelper('extends');
+
+      // spread it
+      attribs = t.callExpression(expressionHelper, objs);
+    }
+
+    return attribs;
+  }
+
+  function buildCreateElementFragmentCall(path, file) {
+    if (opts.filter && !opts.filter(path.node, file)) {
+      return;
+    }
+
+    const openingPath = path.get('openingElement');
+    openingPath.parent.children = t.react.buildChildren(openingPath.parent);
+
+    const args = [];
+    const tagName = null;
+    const tagExpr = file.get('jsxFragIdentifier')();
+
+    const state = {
+      tagExpr: tagExpr,
+      tagName: tagName,
+      args: args,
+    };
+
+    if (opts.pre) {
+      opts.pre(state, file);
+    }
+
+    // no attributes are allowed with <> syntax
+    args.push(t.nullLiteral(), ...path.node.children);
+
+    if (opts.post) {
+      opts.post(state, file);
+    }
+
+    return state.call || t.callExpression(state.oldCallee, args);
+  }
+}
+
+module.exports = function(babel) {
+  const {types: t} = babel;
+
+  const createIdentifierParser = id => () => {
+    return id
+      .split('.')
+      .map(name => t.identifier(name))
+      .reduce((object, property) => t.memberExpression(object, property));
+  };
+
+  const visitor = helper(babel, {
+    pre(state) {
+      const tagName = state.tagName;
+      const args = state.args;
+      if (t.react.isCompatTag(tagName)) {
+        args.push(t.stringLiteral(tagName));
+      } else {
+        args.push(state.tagExpr);
+      }
+    },
+
+    post(state, pass) {
+      state.callee = pass.get('jsxIdentifier')();
+      state.staticCallee = pass.get('jsxStaticIdentifier')();
+      state.oldCallee = pass.get('oldJSXIdentifier')();
+    },
+  });
+
+  visitor.Program = {
+    enter(path, state) {
+      state.set(
+        'oldJSXIdentifier',
+        createIdentifierParser('React.createElement'),
+      );
+      state.set(
+        'jsxIdentifier',
+        createIdentifierParser(
+          state.opts.development ? 'React.jsxDEV' : 'React.jsx',
+        ),
+      );
+      state.set(
+        'jsxStaticIdentifier',
+        createIdentifierParser(
+          state.opts.development ? 'React.jsxDEV' : 'React.jsxs',
+        ),
+      );
+      state.set('jsxFragIdentifier', createIdentifierParser('React.Fragment'));
+    },
+  };
+
+  visitor.JSXAttribute = function(path) {
+    if (t.isJSXElement(path.node.value)) {
+      path.node.value = t.jsxExpressionContainer(path.node.value);
+    }
+  };
+
+  return {
+    name: 'transform-react-jsx',
+    visitor,
+  };
+};
diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json
index 09e10b88bb15e..34b87144a92b8 100644
--- a/packages/create-subscription/package.json
+++ b/packages/create-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-subscription",
   "description": "utility for subscribing to external data sources inside React components",
-  "version": "16.8.6",
+  "version": "16.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/create-subscription/src/__tests__/createSubscription-test.internal.js b/packages/create-subscription/src/__tests__/createSubscription-test.internal.js
index 6279e08ea3544..cd924069ab393 100644
--- a/packages/create-subscription/src/__tests__/createSubscription-test.internal.js
+++ b/packages/create-subscription/src/__tests__/createSubscription-test.internal.js
@@ -60,7 +60,7 @@ describe('createSubscription', () => {
     ReactNoop.render(
       <Subscription source={observable}>
         {(value = 'default') => {
-          Scheduler.yieldValue(value);
+          Scheduler.unstable_yieldValue(value);
           return null;
         }}
       </Subscription>,
@@ -97,7 +97,7 @@ describe('createSubscription', () => {
     });
 
     function render(value = 'default') {
-      Scheduler.yieldValue(value);
+      Scheduler.unstable_yieldValue(value);
       return null;
     }
 
@@ -118,7 +118,10 @@ describe('createSubscription', () => {
       const Subscription = createSubscription({
         getCurrentValue: source => undefined,
         subscribe: (source, callback) => {
-          source.then(value => callback(value), value => callback(value));
+          source.then(
+            value => callback(value),
+            value => callback(value),
+          );
           // (Can't unsubscribe from a Promise)
           return () => {};
         },
@@ -126,9 +129,9 @@ describe('createSubscription', () => {
 
       function render(hasLoaded) {
         if (hasLoaded === undefined) {
-          Scheduler.yieldValue('loading');
+          Scheduler.unstable_yieldValue('loading');
         } else {
-          Scheduler.yieldValue(hasLoaded ? 'finished' : 'failed');
+          Scheduler.unstable_yieldValue(hasLoaded ? 'finished' : 'failed');
         }
         return null;
       }
@@ -169,7 +172,7 @@ describe('createSubscription', () => {
       });
 
       function render(value = 'default') {
-        Scheduler.yieldValue(value);
+        Scheduler.unstable_yieldValue(value);
         return null;
       }
 
@@ -196,14 +199,17 @@ describe('createSubscription', () => {
       const Subscription = createSubscription({
         getCurrentValue: source => undefined,
         subscribe: (source, callback) => {
-          source.then(value => callback(value), value => callback(value));
+          source.then(
+            value => callback(value),
+            value => callback(value),
+          );
           // (Can't unsubscribe from a Promise)
           return () => {};
         },
       });
 
       function render(hasLoaded) {
-        Scheduler.yieldValue('rendered');
+        Scheduler.unstable_yieldValue('rendered');
         return null;
       }
 
@@ -235,7 +241,7 @@ describe('createSubscription', () => {
     });
 
     function render(value = 'default') {
-      Scheduler.yieldValue(value);
+      Scheduler.unstable_yieldValue(value);
       return null;
     }
 
@@ -268,7 +274,7 @@ describe('createSubscription', () => {
     const log = [];
 
     function Child({value}) {
-      Scheduler.yieldValue('Child: ' + value);
+      Scheduler.unstable_yieldValue('Child: ' + value);
       return null;
     }
 
@@ -305,7 +311,7 @@ describe('createSubscription', () => {
         return (
           <Subscription source={this.state.observed}>
             {(value = 'default') => {
-              Scheduler.yieldValue('Subscriber: ' + value);
+              Scheduler.unstable_yieldValue('Subscriber: ' + value);
               return <Child value={value} />;
             }}
           </Subscription>
@@ -355,7 +361,7 @@ describe('createSubscription', () => {
     const log = [];
 
     function Child({value}) {
-      Scheduler.yieldValue('Child: ' + value);
+      Scheduler.unstable_yieldValue('Child: ' + value);
       return null;
     }
 
@@ -392,7 +398,7 @@ describe('createSubscription', () => {
         return (
           <Subscription source={this.state.observed}>
             {(value = 'default') => {
-              Scheduler.yieldValue('Subscriber: ' + value);
+              Scheduler.unstable_yieldValue('Subscriber: ' + value);
               return <Child value={value} />;
             }}
           </Subscription>
@@ -452,7 +458,7 @@ describe('createSubscription', () => {
           },
           () => null,
         );
-      }).toWarnDev('Subscription must specify a getCurrentValue function', {
+      }).toErrorDev('Subscription must specify a getCurrentValue function', {
         withoutStack: true,
       });
     });
@@ -465,7 +471,7 @@ describe('createSubscription', () => {
           },
           () => null,
         );
-      }).toWarnDev('Subscription must specify a subscribe function', {
+      }).toErrorDev('Subscription must specify a subscribe function', {
         withoutStack: true,
       });
     });
diff --git a/packages/create-subscription/src/createSubscription.js b/packages/create-subscription/src/createSubscription.js
index 38febd017cae8..b7750bb319ae4 100644
--- a/packages/create-subscription/src/createSubscription.js
+++ b/packages/create-subscription/src/createSubscription.js
@@ -9,7 +9,6 @@
 
 import React from 'react';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 type Unsubscribe = () => void;
 
@@ -30,29 +29,29 @@ export function createSubscription<Property, Value>(
       callback: (value: Value | void) => void,
     ) => Unsubscribe,
   |}>,
-): React$ComponentType<{
+): React$ComponentType<{|
   children: (value: Value | void) => React$Node,
   source: Property,
-}> {
+|}> {
   const {getCurrentValue, subscribe} = config;
 
-  warningWithoutStack(
-    typeof getCurrentValue === 'function',
-    'Subscription must specify a getCurrentValue function',
-  );
-  warningWithoutStack(
-    typeof subscribe === 'function',
-    'Subscription must specify a subscribe function',
-  );
+  if (__DEV__) {
+    if (typeof getCurrentValue !== 'function') {
+      console.error('Subscription must specify a getCurrentValue function');
+    }
+    if (typeof subscribe !== 'function') {
+      console.error('Subscription must specify a subscribe function');
+    }
+  }
 
-  type Props = {
+  type Props = {|
     children: (value: Value) => React$Element<any>,
     source: Property,
-  };
-  type State = {
+  |};
+  type State = {|
     source: Property,
     value: Value | void,
-  };
+  |};
 
   // Reference: https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3
   class Subscription extends React.Component<Props, State> {
diff --git a/packages/dom-event-testing-library/README.md b/packages/dom-event-testing-library/README.md
new file mode 100644
index 0000000000000..d6ad0f183c0bc
--- /dev/null
+++ b/packages/dom-event-testing-library/README.md
@@ -0,0 +1,98 @@
+# `dom-event-testing-library`
+
+A library for unit testing events via high-level interactions, e.g., `pointerdown`,
+that produce realistic and complete DOM event sequences.
+
+There are number of challenges involved in unit testing modules that work with
+DOM events.
+
+1. Gesture recognizers may need to support environments with and without support for
+   the `PointerEvent` API.
+2. Gesture recognizers may need to support various user interaction modes including
+   mouse, touch, and pen use.
+3. Gesture recognizers must account for the actual event sequences browsers produce
+   (e.g., emulated touch and mouse events.)
+4. Gesture recognizers must work with "virtual" events produced by tools like
+   screen-readers.
+
+Writing unit tests to cover all these scenarios is tedious and error prone. This
+event testing library is designed to solve these issues by allowing developers to
+more easily dispatch events in unit tests, and to more reliably test pointer
+interactions using a high-level API based on `PointerEvent`. Here's a basic example:
+
+```js
+import {
+  describeWithPointerEvent,
+  testWithPointerType,
+  createEventTarget,
+  setPointerEvent,
+  resetActivePointers
+} from 'dom-event-testing-library';
+
+describeWithPointerEvent('useTap', hasPointerEvent => {
+  beforeEach(() => {
+    // basic PointerEvent mock
+    setPointerEvent(hasPointerEvent);
+  });
+
+  afterEach(() => {
+    // clear active pointers between test runs
+    resetActivePointers();
+  });
+
+  // test all the pointer types supported by the environment
+  testWithPointerType('pointer down', pointerType => {
+    const ref = createRef(null);
+    const onTapStart = jest.fn();
+    render(() => {
+      useTap(ref, { onTapStart });
+      return <div ref={ref} />
+    });
+
+    // create an event target
+    const target = createEventTarget(ref.current);
+    // dispatch high-level pointer event
+    target.pointerdown({ pointerType });
+
+    expect(onTapStart).toBeCalled();
+  });
+});
+```
+
+This tests the interaction in multiple scenarios. In each case, a realistic DOM
+event sequence–with complete mock events–is produced. When running in a mock
+environment without the `PointerEvent` API, the test runs for both `mouse` and
+`touch` pointer types. When `touch` is the pointer type it produces emulated mouse
+events. When running in a mock environment with the `PointerEvent` API, the test
+runs for `mouse`, `touch`, and `pen` pointer types.
+
+It's important to cover all these scenarios because it's very easy to introduce
+bugs – e.g., double calling of callbacks – if not accounting for emulated mouse
+events, differences in target capturing between `touch` and `mouse` pointers, and
+the different semantics of `button` across event APIs.
+
+Default values are provided for the expected native events properties. They can
+also be customized as needed in a test.
+
+```js
+target.pointerdown({
+  button: 0,
+  buttons: 1,
+  pageX: 10,
+  pageY: 10,
+  pointerType,
+  // NOTE: use x,y instead of clientX,clientY
+  x: 10,
+  y: 10
+});
+```
+
+Tests that dispatch multiple pointer events will dispatch multi-touch native events
+on the target.
+
+```js
+// first pointer is active
+target.pointerdown({pointerId: 1, pointerType});
+// second pointer is active
+target.pointerdown({pointerId: 2, pointerType});
+```
diff --git a/packages/dom-event-testing-library/__tests__/__snapshots__/index-test.internal.js.snap b/packages/dom-event-testing-library/__tests__/__snapshots__/index-test.internal.js.snap
new file mode 100644
index 0000000000000..ddb68961a9599
--- /dev/null
+++ b/packages/dom-event-testing-library/__tests__/__snapshots__/index-test.internal.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent provides boolean to tests 1`] = `false`;
+
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: mouse 1`] = `"mouse"`;
+
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: touch 1`] = `"touch"`;
+
+exports[`describeWithPointerEvent: PointerEvent provides boolean to tests 1`] = `true`;
+
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: mouse 1`] = `"mouse"`;
+
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: pen 1`] = `"pen"`;
+
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: touch 1`] = `"touch"`;
diff --git a/packages/dom-event-testing-library/__tests__/index-test.internal.js b/packages/dom-event-testing-library/__tests__/index-test.internal.js
new file mode 100644
index 0000000000000..e383e6485a1b5
--- /dev/null
+++ b/packages/dom-event-testing-library/__tests__/index-test.internal.js
@@ -0,0 +1,361 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {defaultBrowserChromeSize} from '../constants';
+
+import {
+  createEventTarget,
+  describeWithPointerEvent,
+  testWithPointerType,
+  resetActivePointers,
+} from '../index';
+
+/**
+ * Unit test helpers
+ */
+describeWithPointerEvent('describeWithPointerEvent', pointerEvent => {
+  test('provides boolean to tests', () => {
+    expect(pointerEvent).toMatchSnapshot();
+  });
+
+  testWithPointerType('testWithPointerType', pointerType => {
+    expect(pointerType).toMatchSnapshot();
+  });
+});
+
+/**
+ * createEventTarget
+ */
+describe('createEventTarget', () => {
+  let node;
+  beforeEach(() => {
+    node = document.createElement('div');
+  });
+
+  afterEach(() => {
+    node = null;
+    resetActivePointers();
+  });
+
+  test('returns expected API', () => {
+    const target = createEventTarget(node);
+    expect(target.node).toEqual(node);
+    expect(Object.keys(target)).toMatchInlineSnapshot(`
+      Array [
+        "node",
+        "blur",
+        "click",
+        "focus",
+        "keydown",
+        "keyup",
+        "scroll",
+        "virtualclick",
+        "contextmenu",
+        "pointercancel",
+        "pointerdown",
+        "pointerhover",
+        "pointermove",
+        "pointerenter",
+        "pointerexit",
+        "pointerup",
+        "tap",
+        "setBoundingClientRect",
+      ]
+    `);
+  });
+
+  /**
+   * Simple events
+   */
+
+  describe('.blur()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('blur', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('blur', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+  });
+
+  describe('.click()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('click', e => {
+        expect(e.altKey).toEqual(false);
+        expect(e.button).toEqual(0);
+        expect(e.buttons).toEqual(0);
+        expect(e.clientX).toEqual(0);
+        expect(e.clientY).toEqual(0);
+        expect(e.ctrlKey).toEqual(false);
+        expect(e.detail).toEqual(1);
+        expect(typeof e.getModifierState).toEqual('function');
+        expect(e.metaKey).toEqual(false);
+        expect(e.movementX).toEqual(0);
+        expect(e.movementY).toEqual(0);
+        expect(e.offsetX).toEqual(0);
+        expect(e.offsetY).toEqual(0);
+        expect(e.pageX).toEqual(0);
+        expect(e.pageY).toEqual(0);
+        expect(typeof e.preventDefault).toEqual('function');
+        expect(e.screenX).toEqual(0);
+        expect(e.screenY).toEqual(defaultBrowserChromeSize);
+        expect(e.shiftKey).toEqual(false);
+        expect(typeof e.timeStamp).toEqual('number');
+      });
+      target.click();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('click', e => {
+        expect(e.altKey).toEqual(true);
+        expect(e.button).toEqual(1);
+        expect(e.buttons).toEqual(4);
+        expect(e.clientX).toEqual(10);
+        expect(e.clientY).toEqual(20);
+        expect(e.ctrlKey).toEqual(true);
+        expect(e.metaKey).toEqual(true);
+        expect(e.movementX).toEqual(1);
+        expect(e.movementY).toEqual(2);
+        expect(e.offsetX).toEqual(5);
+        expect(e.offsetY).toEqual(5);
+        expect(e.pageX).toEqual(50);
+        expect(e.pageY).toEqual(50);
+        expect(e.screenX).toEqual(10);
+        expect(e.screenY).toEqual(20 + defaultBrowserChromeSize);
+        expect(e.shiftKey).toEqual(true);
+      });
+      target.click({
+        altKey: true,
+        button: 1,
+        buttons: 4,
+        x: 10,
+        y: 20,
+        ctrlKey: true,
+        metaKey: true,
+        movementX: 1,
+        movementY: 2,
+        offsetX: 5,
+        offsetY: 5,
+        pageX: 50,
+        pageY: 50,
+        shiftKey: true,
+      });
+    });
+  });
+
+  describe('.focus()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('focus', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('focus', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+  });
+
+  describe('.keydown()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('keydown', e => {
+        expect(e.altKey).toEqual(false);
+        expect(e.ctrlKey).toEqual(false);
+        expect(typeof e.getModifierState).toEqual('function');
+        expect(e.key).toEqual('');
+        expect(e.metaKey).toEqual(false);
+        expect(typeof e.preventDefault).toEqual('function');
+        expect(e.shiftKey).toEqual(false);
+        expect(typeof e.timeStamp).toEqual('number');
+      });
+      target.keydown();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('keydown', e => {
+        expect(e.altKey).toEqual(true);
+        expect(e.ctrlKey).toEqual(true);
+        expect(e.isComposing).toEqual(true);
+        expect(e.key).toEqual('Enter');
+        expect(e.metaKey).toEqual(true);
+        expect(e.shiftKey).toEqual(true);
+      });
+      target.keydown({
+        altKey: true,
+        ctrlKey: true,
+        isComposing: true,
+        key: 'Enter',
+        metaKey: true,
+        shiftKey: true,
+      });
+    });
+  });
+
+  describe('.keyup()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('keyup', e => {
+        expect(e.altKey).toEqual(false);
+        expect(e.ctrlKey).toEqual(false);
+        expect(typeof e.getModifierState).toEqual('function');
+        expect(e.key).toEqual('');
+        expect(e.metaKey).toEqual(false);
+        expect(typeof e.preventDefault).toEqual('function');
+        expect(e.shiftKey).toEqual(false);
+        expect(typeof e.timeStamp).toEqual('number');
+      });
+      target.keydown();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('keyup', e => {
+        expect(e.altKey).toEqual(true);
+        expect(e.ctrlKey).toEqual(true);
+        expect(e.isComposing).toEqual(true);
+        expect(e.key).toEqual('Enter');
+        expect(e.metaKey).toEqual(true);
+        expect(e.shiftKey).toEqual(true);
+      });
+      target.keyup({
+        altKey: true,
+        ctrlKey: true,
+        isComposing: true,
+        key: 'Enter',
+        metaKey: true,
+        shiftKey: true,
+      });
+    });
+  });
+
+  describe('.scroll()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('scroll', e => {
+        expect(e.type).toEqual('scroll');
+      });
+      target.scroll();
+    });
+  });
+
+  describe('.virtualclick()', () => {
+    test('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('click', e => {
+        expect(e.altKey).toEqual(false);
+        expect(e.button).toEqual(0);
+        expect(e.buttons).toEqual(0);
+        expect(e.clientX).toEqual(0);
+        expect(e.clientY).toEqual(0);
+        expect(e.ctrlKey).toEqual(false);
+        expect(e.detail).toEqual(0);
+        expect(typeof e.getModifierState).toEqual('function');
+        expect(e.metaKey).toEqual(false);
+        expect(e.movementX).toEqual(0);
+        expect(e.movementY).toEqual(0);
+        expect(e.offsetX).toEqual(0);
+        expect(e.offsetY).toEqual(0);
+        expect(e.pageX).toEqual(0);
+        expect(e.pageY).toEqual(0);
+        expect(typeof e.preventDefault).toEqual('function');
+        expect(e.screenX).toEqual(0);
+        expect(e.screenY).toEqual(0);
+        expect(e.shiftKey).toEqual(false);
+        expect(typeof e.timeStamp).toEqual('number');
+      });
+      target.virtualclick();
+    });
+
+    test('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('click', e => {
+        // expect most of the custom payload to be ignored
+        expect(e.altKey).toEqual(true);
+        expect(e.button).toEqual(1);
+        expect(e.buttons).toEqual(0);
+        expect(e.clientX).toEqual(0);
+        expect(e.clientY).toEqual(0);
+        expect(e.ctrlKey).toEqual(true);
+        expect(e.detail).toEqual(0);
+        expect(e.metaKey).toEqual(true);
+        expect(e.pageX).toEqual(0);
+        expect(e.pageY).toEqual(0);
+        expect(e.screenX).toEqual(0);
+        expect(e.screenY).toEqual(0);
+        expect(e.shiftKey).toEqual(true);
+      });
+      target.virtualclick({
+        altKey: true,
+        button: 1,
+        buttons: 4,
+        x: 10,
+        y: 20,
+        ctrlKey: true,
+        metaKey: true,
+        pageX: 50,
+        pageY: 50,
+        shiftKey: true,
+      });
+    });
+  });
+
+  /**
+   * Complex event sequences
+   *
+   * ...coming soon
+   */
+
+  /**
+   * Other APIs
+   */
+
+  test('.setBoundingClientRect()', () => {
+    const target = createEventTarget(node);
+    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
+      Object {
+        "bottom": 0,
+        "height": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+        "width": 0,
+      }
+    `);
+    target.setBoundingClientRect({x: 10, y: 20, width: 100, height: 200});
+    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
+      Object {
+        "bottom": 220,
+        "height": 200,
+        "left": 10,
+        "right": 110,
+        "top": 20,
+        "width": 100,
+      }
+    `);
+  });
+});
diff --git a/packages/dom-event-testing-library/constants.js b/packages/dom-event-testing-library/constants.js
new file mode 100644
index 0000000000000..c131e5fc1c2b0
--- /dev/null
+++ b/packages/dom-event-testing-library/constants.js
@@ -0,0 +1,65 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+export const defaultPointerId = 1;
+export const defaultPointerSize = 23;
+export const defaultBrowserChromeSize = 50;
+
+/**
+ * Button property
+ * This property only guarantees to indicate which buttons are pressed during events caused by pressing or
+ * releasing one or multiple buttons. As such, it is not reliable for events such as 'mouseenter', 'mouseleave',
+ * 'mouseover', 'mouseout' or 'mousemove'. Furthermore, the semantics differ for PointerEvent, where the value
+ * for 'pointermove' will always be -1.
+ */
+
+export const buttonType = {
+  // no change since last event
+  none: -1,
+  // left-mouse
+  // touch contact
+  // pen contact
+  primary: 0,
+  // right-mouse
+  // pen barrel button
+  secondary: 2,
+  // middle mouse
+  auxiliary: 1,
+  // back mouse
+  back: 3,
+  // forward mouse
+  forward: 4,
+  // pen eraser
+  eraser: 5,
+};
+
+/**
+ * Buttons bitmask
+ */
+
+export const buttonsType = {
+  none: 0,
+  // left-mouse
+  // touch contact
+  // pen contact
+  primary: 1,
+  // right-mouse
+  // pen barrel button
+  secondary: 2,
+  // middle mouse
+  auxiliary: 4,
+  // back mouse
+  back: 8,
+  // forward mouse
+  forward: 16,
+  // pen eraser
+  eraser: 32,
+};
diff --git a/packages/dom-event-testing-library/domEnvironment.js b/packages/dom-event-testing-library/domEnvironment.js
new file mode 100644
index 0000000000000..eb08170826ec8
--- /dev/null
+++ b/packages/dom-event-testing-library/domEnvironment.js
@@ -0,0 +1,67 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+/**
+ * Change environment support for PointerEvent.
+ */
+
+const emptyFunction = function() {};
+
+export function hasPointerEvent() {
+  return global != null && global.PointerEvent != null;
+}
+
+export function setPointerEvent(bool) {
+  const pointerCaptureFn = name => id => {
+    if (typeof id !== 'number') {
+      if (__DEV__) {
+        console.error('A pointerId must be passed to "%s"', name);
+      }
+    }
+  };
+  global.PointerEvent = bool ? emptyFunction : undefined;
+  global.HTMLElement.prototype.setPointerCapture = bool
+    ? pointerCaptureFn('setPointerCapture')
+    : undefined;
+  global.HTMLElement.prototype.releasePointerCapture = bool
+    ? pointerCaptureFn('releasePointerCapture')
+    : undefined;
+}
+
+/**
+ * Change environment host platform.
+ */
+
+const platformGetter = jest.spyOn(global.navigator, 'platform', 'get');
+
+export const platform = {
+  clear() {
+    platformGetter.mockClear();
+  },
+  get() {
+    return global.navigator.platform === 'MacIntel' ? 'mac' : 'windows';
+  },
+  set(name: 'mac' | 'windows') {
+    switch (name) {
+      case 'mac': {
+        platformGetter.mockReturnValue('MacIntel');
+        break;
+      }
+      case 'windows': {
+        platformGetter.mockReturnValue('Win32');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  },
+};
diff --git a/packages/dom-event-testing-library/domEventSequences.js b/packages/dom-event-testing-library/domEventSequences.js
new file mode 100644
index 0000000000000..f8b063eca01c2
--- /dev/null
+++ b/packages/dom-event-testing-library/domEventSequences.js
@@ -0,0 +1,361 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonType,
+  buttonsType,
+  defaultPointerId,
+  defaultPointerSize,
+  defaultBrowserChromeSize,
+} from './constants';
+import * as domEvents from './domEvents';
+import {hasPointerEvent, platform} from './domEnvironment';
+import * as touchStore from './touchStore';
+
+/**
+ * Converts a PointerEvent payload to a Touch
+ */
+function createTouch(target, payload) {
+  const {
+    height = defaultPointerSize,
+    pageX,
+    pageY,
+    pointerId,
+    pressure = 1,
+    twist = 0,
+    width = defaultPointerSize,
+    x = 0,
+    y = 0,
+  } = payload;
+
+  return {
+    clientX: x,
+    clientY: y,
+    force: pressure,
+    identifier: pointerId,
+    pageX: pageX || x,
+    pageY: pageY || y,
+    radiusX: width / 2,
+    radiusY: height / 2,
+    rotationAngle: twist,
+    target,
+    screenX: x,
+    screenY: y + defaultBrowserChromeSize,
+  };
+}
+
+/**
+ * Converts a PointerEvent to a TouchEvent
+ */
+function createTouchEventPayload(target, touch, payload) {
+  const {
+    altKey = false,
+    ctrlKey = false,
+    metaKey = false,
+    preventDefault,
+    shiftKey = false,
+    timeStamp,
+  } = payload;
+
+  return {
+    altKey,
+    changedTouches: [touch],
+    ctrlKey,
+    metaKey,
+    preventDefault,
+    shiftKey,
+    targetTouches: touchStore.getTargetTouches(target),
+    timeStamp,
+    touches: touchStore.getTouches(),
+  };
+}
+
+function getPointerType(payload) {
+  let pointerType = 'mouse';
+  if (payload != null && payload.pointerType != null) {
+    pointerType = payload.pointerType;
+  }
+  return pointerType;
+}
+
+/**
+ * Pointer events sequences.
+ *
+ * Creates representative browser event sequences for high-level gestures based on pointers.
+ * This allows unit tests to be written in terms of simple pointer interactions while testing
+ * that the responses to those interactions account for the complex sequence of events that
+ * browsers produce as a result.
+ *
+ * Every time a new pointer touches the surface a 'touchstart' event should be dispatched.
+ * - 'changedTouches' contains the new touch.
+ * - 'targetTouches' contains all the active pointers for the target.
+ * - 'touches' contains all the active pointers on the surface.
+ *
+ * Every time an existing pointer moves a 'touchmove' event should be dispatched.
+ * - 'changedTouches' contains the updated touch.
+ *
+ * Every time an existing pointer leaves the surface a 'touchend' event should be dispatched.
+ * - 'changedTouches' contains the released touch.
+ * - 'targetTouches' contains any of the remaining active pointers for the target.
+ */
+
+export function contextmenu(
+  target,
+  defaultPayload,
+  {pointerType = 'mouse', modified} = {},
+) {
+  const dispatch = arg => target.dispatchEvent(arg);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    pointerType,
+    ...defaultPayload,
+  };
+
+  const preventDefault = payload.preventDefault;
+
+  if (pointerType === 'touch') {
+    if (hasPointerEvent()) {
+      dispatch(
+        domEvents.pointerdown({
+          ...payload,
+          button: buttonType.primary,
+          buttons: buttonsType.primary,
+        }),
+      );
+    }
+    const touch = createTouch(target, payload);
+    touchStore.addTouch(touch);
+    const touchEventPayload = createTouchEventPayload(target, touch, payload);
+    dispatch(domEvents.touchstart(touchEventPayload));
+    dispatch(
+      domEvents.contextmenu({
+        button: buttonType.primary,
+        buttons: buttonsType.none,
+        preventDefault,
+      }),
+    );
+    touchStore.removeTouch(touch);
+  } else if (pointerType === 'mouse') {
+    if (modified === true) {
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      const ctrlKey = true;
+      if (hasPointerEvent()) {
+        dispatch(
+          domEvents.pointerdown({button, buttons, ctrlKey, pointerType}),
+        );
+      }
+      dispatch(domEvents.mousedown({button, buttons, ctrlKey}));
+      if (platform.get() === 'mac') {
+        dispatch(
+          domEvents.contextmenu({button, buttons, ctrlKey, preventDefault}),
+        );
+      }
+    } else {
+      const button = buttonType.secondary;
+      const buttons = buttonsType.secondary;
+      if (hasPointerEvent()) {
+        dispatch(domEvents.pointerdown({button, buttons, pointerType}));
+      }
+      dispatch(domEvents.mousedown({button, buttons}));
+      dispatch(domEvents.contextmenu({button, buttons, preventDefault}));
+    }
+  }
+}
+
+export function pointercancel(target, defaultPayload) {
+  const dispatchEvent = arg => target.dispatchEvent(arg);
+  const pointerType = getPointerType(defaultPayload);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    pointerType,
+    ...defaultPayload,
+  };
+
+  if (hasPointerEvent()) {
+    dispatchEvent(domEvents.pointercancel(payload));
+  } else {
+    if (pointerType === 'mouse') {
+      dispatchEvent(domEvents.dragstart(payload));
+    } else {
+      const touch = createTouch(target, payload);
+      touchStore.removeTouch(touch);
+      const touchEventPayload = createTouchEventPayload(target, touch, payload);
+      dispatchEvent(domEvents.touchcancel(touchEventPayload));
+    }
+  }
+}
+
+export function pointerdown(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+  const pointerType = getPointerType(defaultPayload);
+
+  const payload = {
+    button: buttonType.primary,
+    buttons: buttonsType.primary,
+    pointerId: defaultPointerId,
+    pointerType,
+    ...defaultPayload,
+  };
+
+  if (pointerType === 'mouse') {
+    if (hasPointerEvent()) {
+      dispatch(domEvents.pointerover(payload));
+      dispatch(domEvents.pointerenter(payload));
+    }
+    dispatch(domEvents.mouseover(payload));
+    dispatch(domEvents.mouseenter(payload));
+    if (hasPointerEvent()) {
+      dispatch(domEvents.pointerdown(payload));
+    }
+    dispatch(domEvents.mousedown(payload));
+    if (document.activeElement !== target) {
+      dispatch(domEvents.focus());
+    }
+  } else {
+    if (hasPointerEvent()) {
+      dispatch(domEvents.pointerover(payload));
+      dispatch(domEvents.pointerenter(payload));
+      dispatch(domEvents.pointerdown(payload));
+    }
+    const touch = createTouch(target, payload);
+    touchStore.addTouch(touch);
+    const touchEventPayload = createTouchEventPayload(target, touch, payload);
+    dispatch(domEvents.touchstart(touchEventPayload));
+    if (hasPointerEvent()) {
+      dispatch(domEvents.gotpointercapture(payload));
+    }
+  }
+}
+
+export function pointerenter(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    ...defaultPayload,
+  };
+
+  if (hasPointerEvent()) {
+    dispatch(domEvents.pointerover(payload));
+    dispatch(domEvents.pointerenter(payload));
+  }
+  dispatch(domEvents.mouseover(payload));
+  dispatch(domEvents.mouseenter(payload));
+}
+
+export function pointerexit(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    ...defaultPayload,
+  };
+
+  if (hasPointerEvent()) {
+    dispatch(domEvents.pointerout(payload));
+    dispatch(domEvents.pointerleave(payload));
+  }
+  dispatch(domEvents.mouseout(payload));
+  dispatch(domEvents.mouseleave(payload));
+}
+
+export function pointerhover(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    ...defaultPayload,
+  };
+
+  if (hasPointerEvent()) {
+    dispatch(domEvents.pointermove(payload));
+  }
+  dispatch(domEvents.mousemove(payload));
+}
+
+export function pointermove(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+  const pointerType = getPointerType(defaultPayload);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    pointerType,
+    ...defaultPayload,
+  };
+
+  if (hasPointerEvent()) {
+    dispatch(
+      domEvents.pointermove({
+        pressure: pointerType === 'touch' ? 1 : 0.5,
+        ...payload,
+      }),
+    );
+  } else {
+    if (pointerType === 'mouse') {
+      dispatch(domEvents.mousemove(payload));
+    } else {
+      const touch = createTouch(target, payload);
+      touchStore.updateTouch(touch);
+      const touchEventPayload = createTouchEventPayload(target, touch, payload);
+      dispatch(domEvents.touchmove(touchEventPayload));
+    }
+  }
+}
+
+export function pointerup(target, defaultPayload) {
+  const dispatch = arg => target.dispatchEvent(arg);
+  const pointerType = getPointerType(defaultPayload);
+
+  const payload = {
+    pointerId: defaultPointerId,
+    pointerType,
+    ...defaultPayload,
+  };
+
+  if (pointerType === 'mouse') {
+    if (hasPointerEvent()) {
+      dispatch(domEvents.pointerup(payload));
+    }
+    dispatch(domEvents.mouseup(payload));
+    dispatch(domEvents.click(payload));
+  } else {
+    if (hasPointerEvent()) {
+      dispatch(domEvents.pointerup(payload));
+      dispatch(domEvents.lostpointercapture(payload));
+      dispatch(domEvents.pointerout(payload));
+      dispatch(domEvents.pointerleave(payload));
+    }
+    const touch = createTouch(target, payload);
+    touchStore.removeTouch(touch);
+    const touchEventPayload = createTouchEventPayload(target, touch, payload);
+    dispatch(domEvents.touchend(touchEventPayload));
+    dispatch(domEvents.mouseover(payload));
+    dispatch(domEvents.mousemove(payload));
+    dispatch(domEvents.mousedown(payload));
+    if (document.activeElement !== target) {
+      dispatch(domEvents.focus());
+    }
+    dispatch(domEvents.mouseup(payload));
+    dispatch(domEvents.click(payload));
+  }
+}
+
+/**
+ * This function should be called after each test to ensure the touchStore is cleared
+ * in cases where the mock pointers weren't released before the test completed
+ * (e.g., a test failed or ran a partial gesture).
+ */
+export function resetActivePointers() {
+  touchStore.clear();
+}
diff --git a/packages/dom-event-testing-library/domEvents.js b/packages/dom-event-testing-library/domEvents.js
new file mode 100644
index 0000000000000..8c9aff78d3dc1
--- /dev/null
+++ b/packages/dom-event-testing-library/domEvents.js
@@ -0,0 +1,434 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonType,
+  buttonsType,
+  defaultPointerSize,
+  defaultBrowserChromeSize,
+} from './constants';
+
+/**
+ * Native event object mocks for higher-level events.
+ *
+ * 1. Each event type defines the exact object that it accepts. This ensures
+ * that no arbitrary properties can be assigned to events, and the properties
+ * that don't exist on specific event types (e.g., 'pointerType') are not added
+ * to the respective native event.
+ *
+ * 2. Properties that cannot be relied on due to inconsistent browser support (e.g., 'x' and 'y') are not
+ * added to the native event. Others that shouldn't be arbitrarily customized (e.g., 'screenX')
+ * are automatically inferred from associated values.
+ *
+ * 3. PointerEvent and TouchEvent fields are normalized (e.g., 'rotationAngle' -> 'twist')
+ */
+
+function emptyFunction() {}
+
+function createEvent(type, data = {}) {
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(type, true, true);
+  if (data != null) {
+    Object.keys(data).forEach(key => {
+      const value = data[key];
+      if (key === 'timeStamp' && !value) {
+        return;
+      }
+      Object.defineProperty(event, key, {value});
+    });
+  }
+  return event;
+}
+
+function createGetModifierState(keyArg, data) {
+  if (keyArg === 'Alt') {
+    return data.altKey || false;
+  }
+  if (keyArg === 'Control') {
+    return data.ctrlKey || false;
+  }
+  if (keyArg === 'Meta') {
+    return data.metaKey || false;
+  }
+  if (keyArg === 'Shift') {
+    return data.shiftKey || false;
+  }
+}
+
+function createPointerEvent(
+  type,
+  {
+    altKey = false,
+    button = buttonType.none,
+    buttons = buttonsType.none,
+    ctrlKey = false,
+    detail = 1,
+    height,
+    metaKey = false,
+    movementX = 0,
+    movementY = 0,
+    offsetX = 0,
+    offsetY = 0,
+    pageX,
+    pageY,
+    pointerId,
+    pressure = 0,
+    preventDefault = emptyFunction,
+    pointerType = 'mouse',
+    screenX,
+    screenY,
+    shiftKey = false,
+    tangentialPressure = 0,
+    tiltX = 0,
+    tiltY = 0,
+    timeStamp,
+    twist = 0,
+    width,
+    x = 0,
+    y = 0,
+  } = {},
+) {
+  const modifierState = {altKey, ctrlKey, metaKey, shiftKey};
+  const isMouse = pointerType === 'mouse';
+
+  return createEvent(type, {
+    altKey,
+    button,
+    buttons,
+    clientX: x,
+    clientY: y,
+    ctrlKey,
+    detail,
+    getModifierState(keyArg) {
+      return createGetModifierState(keyArg, modifierState);
+    },
+    height: isMouse ? 1 : height != null ? height : defaultPointerSize,
+    metaKey,
+    movementX,
+    movementY,
+    offsetX,
+    offsetY,
+    pageX: pageX || x,
+    pageY: pageY || y,
+    pointerId,
+    pointerType,
+    pressure,
+    preventDefault,
+    releasePointerCapture: emptyFunction,
+    screenX: screenX === 0 ? screenX : x,
+    screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,
+    setPointerCapture: emptyFunction,
+    shiftKey,
+    tangentialPressure,
+    tiltX,
+    tiltY,
+    timeStamp,
+    twist,
+    width: isMouse ? 1 : width != null ? width : defaultPointerSize,
+  });
+}
+
+function createKeyboardEvent(
+  type,
+  {
+    altKey = false,
+    ctrlKey = false,
+    isComposing = false,
+    key = '',
+    metaKey = false,
+    preventDefault = emptyFunction,
+    shiftKey = false,
+  } = {},
+) {
+  const modifierState = {altKey, ctrlKey, metaKey, shiftKey};
+
+  return createEvent(type, {
+    altKey,
+    ctrlKey,
+    getModifierState(keyArg) {
+      return createGetModifierState(keyArg, modifierState);
+    },
+    isComposing,
+    key,
+    metaKey,
+    preventDefault,
+    shiftKey,
+  });
+}
+
+function createMouseEvent(
+  type,
+  {
+    altKey = false,
+    button = buttonType.none,
+    buttons = buttonsType.none,
+    ctrlKey = false,
+    detail = 1,
+    metaKey = false,
+    movementX = 0,
+    movementY = 0,
+    offsetX = 0,
+    offsetY = 0,
+    pageX,
+    pageY,
+    preventDefault = emptyFunction,
+    screenX,
+    screenY,
+    shiftKey = false,
+    timeStamp,
+    x = 0,
+    y = 0,
+  } = {},
+) {
+  const modifierState = {altKey, ctrlKey, metaKey, shiftKey};
+
+  return createEvent(type, {
+    altKey,
+    button,
+    buttons,
+    clientX: x,
+    clientY: y,
+    ctrlKey,
+    detail,
+    getModifierState(keyArg) {
+      return createGetModifierState(keyArg, modifierState);
+    },
+    metaKey,
+    movementX,
+    movementY,
+    offsetX,
+    offsetY,
+    pageX: pageX || x,
+    pageY: pageY || y,
+    preventDefault,
+    screenX: screenX === 0 ? screenX : x,
+    screenY: screenY === 0 ? screenY : y + defaultBrowserChromeSize,
+    shiftKey,
+    timeStamp,
+  });
+}
+
+function createTouchEvent(type, payload) {
+  return createEvent(type, {
+    ...payload,
+    detail: 0,
+    sourceCapabilities: {
+      firesTouchEvents: true,
+    },
+  });
+}
+
+/**
+ * Mock event objects
+ */
+
+export function blur({relatedTarget} = {}) {
+  return new FocusEvent('blur', {relatedTarget});
+}
+
+export function click(payload) {
+  return createMouseEvent('click', {
+    button: buttonType.primary,
+    ...payload,
+  });
+}
+
+export function contextmenu(payload) {
+  return createMouseEvent('contextmenu', {
+    ...payload,
+    detail: 0,
+  });
+}
+
+export function dragstart(payload) {
+  return createMouseEvent('dragstart', {
+    ...payload,
+    detail: 0,
+  });
+}
+
+export function focus({relatedTarget} = {}) {
+  return new FocusEvent('focus', {relatedTarget});
+}
+
+export function scroll() {
+  return createEvent('scroll');
+}
+
+export function virtualclick(payload) {
+  return createMouseEvent('click', {
+    button: 0,
+    ...payload,
+    buttons: 0,
+    detail: 0,
+    height: 1,
+    pageX: 0,
+    pageY: 0,
+    pressure: 0,
+    screenX: 0,
+    screenY: 0,
+    width: 1,
+    x: 0,
+    y: 0,
+  });
+}
+
+/**
+ * Key events
+ */
+
+export function keydown(payload) {
+  return createKeyboardEvent('keydown', payload);
+}
+
+export function keyup(payload) {
+  return createKeyboardEvent('keyup', payload);
+}
+
+/**
+ * Pointer events
+ */
+
+export function gotpointercapture(payload) {
+  return createPointerEvent('gotpointercapture', payload);
+}
+
+export function lostpointercapture(payload) {
+  return createPointerEvent('lostpointercapture', payload);
+}
+
+export function pointercancel(payload) {
+  return createPointerEvent('pointercancel', {
+    ...payload,
+    buttons: 0,
+    detail: 0,
+    height: 1,
+    pageX: 0,
+    pageY: 0,
+    pressure: 0,
+    screenX: 0,
+    screenY: 0,
+    width: 1,
+    x: 0,
+    y: 0,
+  });
+}
+
+export function pointerdown(payload) {
+  const isTouch = payload != null && payload.pointerType === 'touch';
+  return createPointerEvent('pointerdown', {
+    button: buttonType.primary,
+    buttons: buttonsType.primary,
+    pressure: isTouch ? 1 : 0.5,
+    ...payload,
+  });
+}
+
+export function pointerenter(payload) {
+  return createPointerEvent('pointerenter', payload);
+}
+
+export function pointerleave(payload) {
+  return createPointerEvent('pointerleave', payload);
+}
+
+export function pointermove(payload) {
+  return createPointerEvent('pointermove', {
+    ...payload,
+    button: buttonType.none,
+  });
+}
+
+export function pointerout(payload) {
+  return createPointerEvent('pointerout', payload);
+}
+
+export function pointerover(payload) {
+  return createPointerEvent('pointerover', payload);
+}
+
+export function pointerup(payload) {
+  return createPointerEvent('pointerup', {
+    button: buttonType.primary,
+    ...payload,
+    buttons: buttonsType.none,
+    pressure: 0,
+  });
+}
+
+/**
+ * Mouse events
+ */
+
+export function mousedown(payload) {
+  // The value of 'button' and 'buttons' for 'mousedown' must not be none.
+  const button =
+    payload == null || payload.button === buttonType.none
+      ? buttonType.primary
+      : payload.button;
+  const buttons =
+    payload == null || payload.buttons === buttonsType.none
+      ? buttonsType.primary
+      : payload.buttons;
+  return createMouseEvent('mousedown', {
+    ...payload,
+    button,
+    buttons,
+  });
+}
+
+export function mouseenter(payload) {
+  return createMouseEvent('mouseenter', payload);
+}
+
+export function mouseleave(payload) {
+  return createMouseEvent('mouseleave', payload);
+}
+
+export function mousemove(payload) {
+  return createMouseEvent('mousemove', payload);
+}
+
+export function mouseout(payload) {
+  return createMouseEvent('mouseout', payload);
+}
+
+export function mouseover(payload) {
+  return createMouseEvent('mouseover', payload);
+}
+
+export function mouseup(payload) {
+  return createMouseEvent('mouseup', {
+    button: buttonType.primary,
+    ...payload,
+    buttons: buttonsType.none,
+  });
+}
+
+/**
+ * Touch events
+ */
+
+export function touchcancel(payload) {
+  return createTouchEvent('touchcancel', payload);
+}
+
+export function touchend(payload) {
+  return createTouchEvent('touchend', payload);
+}
+
+export function touchmove(payload) {
+  return createTouchEvent('touchmove', payload);
+}
+
+export function touchstart(payload) {
+  return createTouchEvent('touchstart', payload);
+}
diff --git a/packages/dom-event-testing-library/index.js b/packages/dom-event-testing-library/index.js
new file mode 100644
index 0000000000000..0b5ac81a60eaf
--- /dev/null
+++ b/packages/dom-event-testing-library/index.js
@@ -0,0 +1,119 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {buttonType, buttonsType} from './constants';
+import * as domEvents from './domEvents';
+import * as domEventSequences from './domEventSequences';
+import {hasPointerEvent, setPointerEvent, platform} from './domEnvironment';
+import {describeWithPointerEvent, testWithPointerType} from './testHelpers';
+
+const createEventTarget = node => ({
+  node,
+  /**
+   * Simple events abstraction.
+   */
+  blur(payload) {
+    node.dispatchEvent(domEvents.blur(payload));
+  },
+  click(payload) {
+    node.dispatchEvent(domEvents.click(payload));
+  },
+  focus(payload) {
+    node.dispatchEvent(domEvents.focus(payload));
+    node.focus();
+  },
+  keydown(payload) {
+    node.dispatchEvent(domEvents.keydown(payload));
+  },
+  keyup(payload) {
+    node.dispatchEvent(domEvents.keyup(payload));
+  },
+  scroll(payload) {
+    node.dispatchEvent(domEvents.scroll(payload));
+  },
+  virtualclick(payload) {
+    node.dispatchEvent(domEvents.virtualclick(payload));
+  },
+  /**
+   * PointerEvent abstraction.
+   * Dispatches the expected sequence of PointerEvents, MouseEvents, and
+   * TouchEvents for a given environment.
+   */
+  contextmenu(payload, options) {
+    domEventSequences.contextmenu(node, payload, options);
+  },
+  // node no longer receives events for the pointer
+  pointercancel(payload) {
+    domEventSequences.pointercancel(node, payload);
+  },
+  // node dispatches down events
+  pointerdown(payload) {
+    domEventSequences.pointerdown(node, payload);
+  },
+  // node dispatches move events (pointer is not down)
+  pointerhover(payload) {
+    domEventSequences.pointerhover(node, payload);
+  },
+  // node dispatches move events (pointer is down)
+  pointermove(payload) {
+    domEventSequences.pointermove(node, payload);
+  },
+  // node dispatches enter & over events
+  pointerenter(payload) {
+    domEventSequences.pointerenter(node, payload);
+  },
+  // node dispatches exit & leave events
+  pointerexit(payload) {
+    domEventSequences.pointerexit(node, payload);
+  },
+  // node dispatches up events
+  pointerup(payload) {
+    domEventSequences.pointerup(node, payload);
+  },
+  /**
+   * Gesture abstractions.
+   * Helpers for event sequences expected in a gesture.
+   * target.tap({ pointerType: 'touch' })
+   */
+  tap(payload) {
+    domEventSequences.pointerdown(payload);
+    domEventSequences.pointerup(payload);
+  },
+  /**
+   * Utilities
+   */
+  setBoundingClientRect({x, y, width, height}) {
+    node.getBoundingClientRect = function() {
+      return {
+        width,
+        height,
+        left: x,
+        right: x + width,
+        top: y,
+        bottom: y + height,
+      };
+    };
+  },
+});
+
+const resetActivePointers = domEventSequences.resetActivePointers;
+
+export {
+  buttonType,
+  buttonsType,
+  createEventTarget,
+  describeWithPointerEvent,
+  platform,
+  hasPointerEvent,
+  resetActivePointers,
+  setPointerEvent,
+  testWithPointerType,
+};
diff --git a/packages/dom-event-testing-library/package.json b/packages/dom-event-testing-library/package.json
new file mode 100644
index 0000000000000..bade785d4664d
--- /dev/null
+++ b/packages/dom-event-testing-library/package.json
@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "dom-event-testing-library",
+  "version": "0.0.0"
+}
diff --git a/packages/dom-event-testing-library/testHelpers.js b/packages/dom-event-testing-library/testHelpers.js
new file mode 100644
index 0000000000000..1e1058bdb97ce
--- /dev/null
+++ b/packages/dom-event-testing-library/testHelpers.js
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {hasPointerEvent, setPointerEvent} from './domEnvironment';
+
+export function describeWithPointerEvent(message, describeFn) {
+  const pointerEvent = 'PointerEvent';
+  const fallback = 'MouseEvent/TouchEvent';
+  describe.each`
+    value    | name
+    ${true}  | ${pointerEvent}
+    ${false} | ${fallback}
+  `(`${message}: $name`, entry => {
+    const hasPointerEvents = entry.value;
+    setPointerEvent(hasPointerEvents);
+    describeFn(hasPointerEvents);
+  });
+}
+
+export function testWithPointerType(message, testFn) {
+  const table = hasPointerEvent()
+    ? ['mouse', 'touch', 'pen']
+    : ['mouse', 'touch'];
+  test.each(table)(`${message}: %s`, pointerType => {
+    testFn(pointerType);
+  });
+}
diff --git a/packages/dom-event-testing-library/touchStore.js b/packages/dom-event-testing-library/touchStore.js
new file mode 100644
index 0000000000000..f8c8becd4085d
--- /dev/null
+++ b/packages/dom-event-testing-library/touchStore.js
@@ -0,0 +1,82 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+/**
+ * Touch events state machine.
+ *
+ * Keeps track of the active pointers and allows them to be reflected in touch events.
+ */
+
+const activeTouches = new Map();
+
+export function addTouch(touch) {
+  const identifier = touch.identifier;
+  const target = touch.target;
+  if (!activeTouches.has(target)) {
+    activeTouches.set(target, new Map());
+  }
+  if (activeTouches.get(target).get(identifier)) {
+    // Do not allow existing touches to be overwritten
+    console.error(
+      'Touch with identifier %s already exists. Did not record touch start.',
+      identifier,
+    );
+  } else {
+    activeTouches.get(target).set(identifier, touch);
+  }
+}
+
+export function updateTouch(touch) {
+  const identifier = touch.identifier;
+  const target = touch.target;
+  if (activeTouches.get(target) != null) {
+    activeTouches.get(target).set(identifier, touch);
+  } else {
+    console.error(
+      'Touch with identifier %s does not exist. Cannot record touch move without a touch start.',
+      identifier,
+    );
+  }
+}
+
+export function removeTouch(touch) {
+  const identifier = touch.identifier;
+  const target = touch.target;
+  if (activeTouches.get(target) != null) {
+    if (activeTouches.get(target).has(identifier)) {
+      activeTouches.get(target).delete(identifier);
+    } else {
+      console.error(
+        'Touch with identifier %s does not exist. Cannot record touch end without a touch start.',
+        identifier,
+      );
+    }
+  }
+}
+
+export function getTouches() {
+  const touches = [];
+  activeTouches.forEach((_, target) => {
+    touches.push(...getTargetTouches(target));
+  });
+  return touches;
+}
+
+export function getTargetTouches(target) {
+  if (activeTouches.get(target) != null) {
+    return Array.from(activeTouches.get(target).values());
+  }
+  return [];
+}
+
+export function clear() {
+  activeTouches.clear();
+}
diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md
index 2fc149a7e35a9..bda6fe8fdc83a 100644
--- a/packages/eslint-plugin-react-hooks/README.md
+++ b/packages/eslint-plugin-react-hooks/README.md
@@ -6,7 +6,7 @@ It is a part of the [Hooks API](https://reactjs.org/docs/hooks-intro.html) for R
 
 ## Installation
 
-**Note: If you're using Create React App, please wait for a corresponding release of `react-scripts` that includes this rule instead of adding it directly.**
+**Note: If you're using Create React App, please use `react-scripts` >= 3 instead of adding it directly.**
 
 Assuming you already have ESLint installed, run:
 
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 8abfe2c9f862c..aa25e13ba5121 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -12,7 +12,7 @@ const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
 const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['exhaustive-deps'];
 
 ESLintTester.setDefaultConfig({
-  parser: 'babel-eslint',
+  parser: require.resolve('babel-eslint'),
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
@@ -521,7 +521,6 @@ const tests = {
       // Valid because the ref is captured.
       code: `
         function useMyThing(myRef) {
-          const myRef = useRef();
           useEffect(() => {
             const handleMove = () => {};
             const node = myRef.current;
@@ -1014,6 +1013,38 @@ const tests = {
         }
       `,
     },
+    // Ignore Generic Type Variables for arrow functions
+    {
+      code: `
+        function Example({ prop }) {
+          const bar = useEffect(<T>(a: T): Hello => {
+            prop();
+          }, [prop]);
+        }
+      `,
+    },
+    // Ignore arguments keyword for arrow functions.
+    {
+      code: `
+        function Example() {
+          useEffect(() => {
+            arguments
+          }, [])
+        }
+      `,
+    },
+    {
+      code: `
+        function Example() {
+          useEffect(() => {
+            const bar = () => {
+              arguments;
+            };
+            bar();
+          }, [])
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -3123,6 +3154,37 @@ const tests = {
           `and use that variable in the cleanup function.`,
       ],
     },
+    {
+      code: `
+        function MyComponent() {
+          const myRef = useRef();
+          useLayoutEffect_SAFE_FOR_SSR(() => {
+            const handleMove = () => {};
+            myRef.current.addEventListener('mousemove', handleMove);
+            return () => myRef.current.removeEventListener('mousemove', handleMove);
+          });
+          return <div ref={myRef} />;
+        }
+      `,
+      output: `
+        function MyComponent() {
+          const myRef = useRef();
+          useLayoutEffect_SAFE_FOR_SSR(() => {
+            const handleMove = () => {};
+            myRef.current.addEventListener('mousemove', handleMove);
+            return () => myRef.current.removeEventListener('mousemove', handleMove);
+          });
+          return <div ref={myRef} />;
+        }
+      `,
+      errors: [
+        `The ref value 'myRef.current' will likely have changed by the time ` +
+          `this effect cleanup function runs. If this ref points to a node ` +
+          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+          `and use that variable in the cleanup function.`,
+      ],
+      options: [{additionalHooks: 'useLayoutEffect_SAFE_FOR_SSR'}],
+    },
     {
       // Autofix ignores constant primitives (leaving the ones that are there).
       code: `
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
index 4a5623dcd4d61..662e9cc39b963 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -12,15 +12,24 @@ const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
 const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['rules-of-hooks'];
 
 ESLintTester.setDefaultConfig({
-  parser: 'babel-eslint',
+  parser: require.resolve('babel-eslint'),
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
   },
 });
 
-const eslintTester = new ESLintTester();
-eslintTester.run('react-hooks', ReactHooksESLintRule, {
+// ***************************************************
+// For easier local testing, you can add to any case:
+// {
+//   skip: true,
+//   --or--
+//   only: true,
+//   ...
+// }
+// ***************************************************
+
+const tests = {
   valid: [
     `
       // Valid because components can use hooks.
@@ -95,7 +104,7 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
       useHook2 = () => { useState(); };
       ({useHook: () => { useState(); }});
       ({useHook() { useState(); }});
-      const {useHook = () => { useState(); }} = {};
+      const {useHook3 = () => { useState(); }} = {};
       ({useHook = () => { useState(); }} = {});
     `,
     `
@@ -132,6 +141,46 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
         return useHook1(useHook2());
       }
     `,
+    `
+      // Valid because hooks can be used in anonymous arrow-function arguments
+      // to forwardRef.
+      const FancyButton = React.forwardRef((props, ref) => {
+        useHook();
+        return <button {...props} ref={ref} />
+      });
+    `,
+    `
+      // Valid because hooks can be used in anonymous function arguments to
+      // forwardRef.
+      const FancyButton = React.forwardRef(function (props, ref) {
+        useHook();
+        return <button {...props} ref={ref} />
+      });
+    `,
+    `
+      // Valid because hooks can be used in anonymous function arguments to
+      // forwardRef.
+      const FancyButton = forwardRef(function (props, ref) {
+        useHook();
+        return <button {...props} ref={ref} />
+      });
+    `,
+    `
+      // Valid because hooks can be used in anonymous function arguments to
+      // React.memo.
+      const MemoizedFunction = React.memo(props => {
+        useHook();
+        return <button {...props} />
+      });
+    `,
+    `
+      // Valid because hooks can be used in anonymous function arguments to
+      // memo.
+      const MemoizedFunction = memo(function (props) {
+        useHook();
+        return <button {...props} />
+      });
+    `,
     `
       // Valid because classes can call functions.
       // We don't consider these to be hooks.
@@ -223,21 +272,20 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
       (class {i() { useState(); }});
     `,
     `
-      // Currently valid although we *could* consider these invalid.
-      // It doesn't make a lot of difference because it would crash early.
+      // Valid because they're not matching use[A-Z].
+      fooState();
       use();
       _use();
-      useState();
       _useState();
-      use42();
-      useHook();
       use_hook();
-      React.useState();
     `,
     `
-      // Regression test for the popular "history" library
-      const {createHistory, useBasename} = require('history-2.1.2');
-      const browserHistory = useBasename(createHistory)({
+      // This is grey area.
+      // Currently it's valid (although React.useCallback would fail here).
+      // We could also get stricter and disallow it, just like we did
+      // with non-namespace use*() top-level calls.
+      const History = require('history-2.1.2');
+      const browserHistory = History.useBasename(History.createHistory)({
         basename: '/',
       });
     `,
@@ -254,6 +302,24 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
         });
       }
     `,
+    `
+      // This is valid because "use"-prefixed functions called in
+      // unnamed function arguments are not assumed to be hooks.
+      React.unknownFunction((foo, bar) => {
+        if (foo) {
+          useNotAHook(bar)
+        }
+      });
+    `,
+    `
+      // This is valid because "use"-prefixed functions called in
+      // unnamed function arguments are not assumed to be hooks.
+      unknownFunction(function(foo, bar) {
+        if (foo) {
+          useNotAHook(bar)
+        }
+      });
+    `,
     `
       // Regression test for incorrectly flagged valid code.
       function RegressionTest() {
@@ -429,6 +495,32 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
       `,
       errors: [genericError('useHookInsideCallback')],
     },
+    {
+      code: `
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
+          useEffect(() => {
+            useHookInsideCallback();
+          });
+          return <button {...props} ref={ref} />
+        });
+      `,
+      errors: [genericError('useHookInsideCallback')],
+    },
+    {
+      code: `
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        const ComponentWithHookInsideCallback = React.memo(props => {
+          useEffect(() => {
+            useHookInsideCallback();
+          });
+          return <button {...props} />
+        });
+      `,
+      errors: [genericError('useHookInsideCallback')],
+    },
     {
       code: `
         // Invalid because it's a common misunderstanding.
@@ -669,8 +761,112 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
         conditionalError('useState'),
       ],
     },
+    {
+      code: `
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook({ bar }) {
+          let foo1 = bar && useState();
+          let foo2 = bar || useState();
+          let foo3 = bar ?? useState();
+        }
+      `,
+      errors: [
+        conditionalError('useState'),
+        conditionalError('useState'),
+        // TODO: ideally this *should* warn, but ESLint
+        // doesn't plan full support for ?? until it advances.
+        // conditionalError('useState'),
+      ],
+    },
+    {
+      code: `
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        const FancyButton = React.forwardRef((props, ref) => {
+          if (props.fancy) {
+            useCustomHook();
+          }
+          return <button ref={ref}>{props.children}</button>;
+        });
+      `,
+      errors: [conditionalError('useCustomHook')],
+    },
+    {
+      code: `
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        const FancyButton = forwardRef(function(props, ref) {
+          if (props.fancy) {
+            useCustomHook();
+          }
+          return <button ref={ref}>{props.children}</button>;
+        });
+      `,
+      errors: [conditionalError('useCustomHook')],
+    },
+    {
+      code: `
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        const MemoizedButton = memo(function(props) {
+          if (props.fancy) {
+            useCustomHook();
+          }
+          return <button>{props.children}</button>;
+        });
+      `,
+      errors: [conditionalError('useCustomHook')],
+    },
+    {
+      code: `
+        // This is invalid because "use"-prefixed functions used in named
+        // functions are assumed to be hooks.
+        React.unknownFunction(function notAComponent(foo, bar) {
+          useProbablyAHook(bar)
+        });
+      `,
+      errors: [functionError('useProbablyAHook', 'notAComponent')],
+    },
+    {
+      code: `
+        // Invalid because it's dangerous.
+        // Normally, this would crash, but not if you use inline requires.
+        // This *must* be invalid.
+        // It's expected to have some false positives, but arguably
+        // they are confusing anyway due to the use*() convention
+        // already being associated with Hooks.
+        useState();
+        if (foo) {
+          const foo = React.useCallback(() => {});
+        }
+        useCustomHook();
+      `,
+      errors: [
+        topLevelError('useState'),
+        topLevelError('React.useCallback'),
+        topLevelError('useCustomHook'),
+      ],
+    },
+    {
+      code: `
+        // Technically this is a false positive.
+        // We *could* make it valid (and it used to be).
+        //
+        // However, top-level Hook-like calls can be very dangerous
+        // in environments with inline requires because they can mask
+        // the runtime error by accident.
+        // So we prefer to disallow it despite the false positive.
+
+        const {createHistory, useBasename} = require('history-2.1.2');
+        const browserHistory = useBasename(createHistory)({
+          basename: '/',
+        });
+      `,
+      errors: [topLevelError('useBasename')],
+    },
   ],
-});
+};
 
 function conditionalError(hook, hasPreviousFinalizer = false) {
   return {
@@ -695,8 +891,8 @@ function loopError(hook) {
 function functionError(hook, fn) {
   return {
     message:
-      `React Hook "${hook}" is called in function "${fn}" which is neither ` +
-      'a React function component or a custom React Hook function.',
+      `React Hook "${hook}" is called in function "${fn}" that is neither ` +
+      'a React function component nor a custom React Hook function.',
   };
 }
 
@@ -708,3 +904,42 @@ function genericError(hook) {
       'Hook function.',
   };
 }
+
+function topLevelError(hook) {
+  return {
+    message:
+      `React Hook "${hook}" cannot be called at the top level. React Hooks ` +
+      'must be called in a React function component or a custom React ' +
+      'Hook function.',
+  };
+}
+
+// For easier local testing
+if (!process.env.CI) {
+  let only = [];
+  let skipped = [];
+  [...tests.valid, ...tests.invalid].forEach(t => {
+    if (t.skip) {
+      delete t.skip;
+      skipped.push(t);
+    }
+    if (t.only) {
+      delete t.only;
+      only.push(t);
+    }
+  });
+  const predicate = t => {
+    if (only.length > 0) {
+      return only.indexOf(t) !== -1;
+    }
+    if (skipped.length > 0) {
+      return skipped.indexOf(t) === -1;
+    }
+    return true;
+  };
+  tests.valid = tests.valid.filter(predicate);
+  tests.invalid = tests.invalid.filter(predicate);
+}
+
+const eslintTester = new ESLintTester();
+eslintTester.run('react-hooks', ReactHooksESLintRule, tests);
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 9adf1a1174761..6f523bcd5b6fc 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "1.6.0",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -29,6 +29,6 @@
   },
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
-    "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
   }
 }
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index f859983f7a3e6..9ec5e562641eb 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -81,7 +81,7 @@ export default {
       // Get the reactive hook node.
       const reactiveHook = node.parent.callee;
       const reactiveHookName = getNodeWithoutReactNamespace(reactiveHook).name;
-      const isEffect = reactiveHookName.endsWith('Effect');
+      const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
 
       // Get the declared dependencies for this reactive hook. If there is no
       // second argument then the reactive callback will re-run on every render.
@@ -397,13 +397,19 @@ export default {
             });
           }
 
-          // Ignore references to the function itself as it's not defined yet.
           const def = reference.resolved.defs[0];
-          if (
-            def != null &&
-            def.node != null &&
-            def.node.init === node.parent
-          ) {
+
+          if (def == null) {
+            continue;
+          }
+
+          // Ignore references to the function itself as it's not defined yet.
+          if (def.node != null && def.node.init === node.parent) {
+            continue;
+          }
+
+          // Ignore Flow type parameters
+          if (def.type === 'TypeParameter') {
             continue;
           }
 
@@ -607,21 +613,15 @@ export default {
                   context.report({
                     node: declaredDependencyNode,
                     message:
-                      `The ${
-                        declaredDependencyNode.raw
-                      } literal is not a valid dependency ` +
+                      `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
                       `because it never changes. ` +
-                      `Did you mean to include ${
-                        declaredDependencyNode.value
-                      } in the array instead?`,
+                      `Did you mean to include ${declaredDependencyNode.value} in the array instead?`,
                   });
                 } else {
                   context.report({
                     node: declaredDependencyNode,
                     message:
-                      `The ${
-                        declaredDependencyNode.raw
-                      } literal is not a valid dependency ` +
+                      `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
                       'because it never changes. You can safely remove it.',
                   });
                 }
@@ -691,22 +691,16 @@ export default {
         bareFunctions.forEach(({fn, suggestUseCallback}) => {
           let message =
             `The '${fn.name.name}' function makes the dependencies of ` +
-            `${reactiveHookName} Hook (at line ${
-              declaredDependenciesNode.loc.start.line
-            }) ` +
+            `${reactiveHookName} Hook (at line ${declaredDependenciesNode.loc.start.line}) ` +
             `change on every render.`;
           if (suggestUseCallback) {
             message +=
               ` To fix this, ` +
-              `wrap the '${
-                fn.name.name
-              }' definition into its own useCallback() Hook.`;
+              `wrap the '${fn.name.name}' definition into its own useCallback() Hook.`;
           } else {
             message +=
               ` Move it inside the ${reactiveHookName} callback. ` +
-              `Alternatively, wrap the '${
-                fn.name.name
-              }' definition into its own useCallback() Hook.`;
+              `Alternatively, wrap the '${fn.name.name}' definition into its own useCallback() Hook.`;
           }
           // TODO: What if the function needs to change on every render anyway?
           // Should we suggest removing effect deps as an appropriate fix too?
@@ -1144,7 +1138,7 @@ function collectRecommendations({
   let unnecessaryDependencies = new Set();
   let duplicateDependencies = new Set();
   declaredDependencies.forEach(({key}) => {
-    // Does this declared dep satsify a real need?
+    // Does this declared dep satisfy a real need?
     if (satisfyingDependencies.has(key)) {
       if (suggestedDependencies.indexOf(key) === -1) {
         // Good one.
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index 405a6641a335d..dbcc9c3de59bb 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -54,6 +54,41 @@ function isComponentName(node) {
   }
 }
 
+function isReactFunction(node, functionName) {
+  return (
+    node.name === functionName ||
+    (node.type === 'MemberExpression' &&
+      node.object.name === 'React' &&
+      node.property.name === functionName)
+  );
+}
+
+/**
+ * Checks if the node is a callback argument of forwardRef. This render function
+ * should follow the rules of hooks.
+ */
+
+function isForwardRefCallback(node) {
+  return !!(
+    node.parent &&
+    node.parent.callee &&
+    isReactFunction(node.parent.callee, 'forwardRef')
+  );
+}
+
+/**
+ * Checks if the node is a callback argument of React.memo. This anonymous
+ * functional component should follow the rules of hooks.
+ */
+
+function isMemoCallback(node) {
+  return !!(
+    node.parent &&
+    node.parent.callee &&
+    isReactFunction(node.parent.callee, 'memo')
+  );
+}
+
 function isInsideComponentOrHook(node) {
   while (node) {
     const functionName = getFunctionName(node);
@@ -62,6 +97,9 @@ function isInsideComponentOrHook(node) {
         return true;
       }
     }
+    if (isForwardRefCallback(node) || isMemoCallback(node)) {
+      return true;
+    }
     node = node.parent;
   }
   return false;
@@ -290,7 +328,8 @@ export default {
         // `undefined` then we know either that we have an anonymous function
         // expression or our code path is not in a function. In both cases we
         // will want to error since neither are React function components or
-        // hook functions.
+        // hook functions - unless it is an anonymous function argument to
+        // forwardRef or memo.
         const codePathFunctionName = getFunctionName(codePathNode);
 
         // This is a valid code path for React hooks if we are directly in a React
@@ -301,7 +340,7 @@ export default {
         const isDirectlyInsideComponentOrHook = codePathFunctionName
           ? isComponentName(codePathFunctionName) ||
             isHook(codePathFunctionName)
-          : false;
+          : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode);
 
         // Compute the earliest finalizer level using information from the
         // cache. We expect all reachable final segments to have a cache entry
@@ -428,13 +467,16 @@ export default {
               const message =
                 `React Hook "${context.getSource(hook)}" is called in ` +
                 `function "${context.getSource(codePathFunctionName)}" ` +
-                'which is neither a React function component or a custom ' +
+                'that is neither a React function component nor a custom ' +
                 'React Hook function.';
               context.report({node: hook, message});
             } else if (codePathNode.type === 'Program') {
-              // For now, ignore if it's in top level scope.
-              // We could warn here but there are false positives related
-              // configuring libraries like `history`.
+              // These are dangerous if you have inline requires enabled.
+              const message =
+                `React Hook "${context.getSource(hook)}" cannot be called ` +
+                'at the top level. React Hooks must be called in a ' +
+                'React function component or a custom React Hook function.';
+              context.report({node: hook, message});
             } else {
               // Assume in all other cases the user called a hook in some
               // random function callback. This should usually be true for
diff --git a/packages/events/ReactGenericBatching.js b/packages/events/ReactGenericBatching.js
deleted file mode 100644
index 7169b795c6dad..0000000000000
--- a/packages/events/ReactGenericBatching.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * 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.
- */
-
-import {
-  needsStateRestore,
-  restoreStateIfNeeded,
-} from './ReactControlledComponent';
-
-// Used as a way to call batchedUpdates when we don't have a reference to
-// the renderer. Such as when we're dispatching events or if third party
-// libraries need to call batchedUpdates. Eventually, this API will go away when
-// everything is batched by default. We'll then have a similar API to opt-out of
-// scheduled work and instead do synchronous work.
-
-// Defaults
-let batchedUpdatesImpl = function(fn, bookkeeping) {
-  return fn(bookkeeping);
-};
-let discreteUpdatesImpl = function(fn, a, b, c) {
-  return fn(a, b, c);
-};
-let flushDiscreteUpdatesImpl = function() {};
-let batchedEventUpdatesImpl = batchedUpdatesImpl;
-
-let isBatching = false;
-
-function batchedUpdatesFinally() {
-  // Here we wait until all updates have propagated, which is important
-  // when using controlled components within layers:
-  // https://github.com/facebook/react/issues/1698
-  // Then we restore state of any controlled component.
-  isBatching = false;
-  const controlledComponentsHavePendingUpdates = needsStateRestore();
-  if (controlledComponentsHavePendingUpdates) {
-    // If a controlled event was fired, we may need to restore the state of
-    // the DOM node back to the controlled value. This is necessary when React
-    // bails out of the update without touching the DOM.
-    flushDiscreteUpdatesImpl();
-    restoreStateIfNeeded();
-  }
-}
-
-export function batchedUpdates(fn, bookkeeping) {
-  if (isBatching) {
-    // If we are currently inside another batch, we need to wait until it
-    // fully completes before restoring state.
-    return fn(bookkeeping);
-  }
-  isBatching = true;
-  try {
-    return batchedUpdatesImpl(fn, bookkeeping);
-  } finally {
-    batchedUpdatesFinally();
-  }
-}
-
-export function batchedEventUpdates(fn, bookkeeping) {
-  if (isBatching) {
-    // If we are currently inside another batch, we need to wait until it
-    // fully completes before restoring state.
-    return fn(bookkeeping);
-  }
-  isBatching = true;
-  try {
-    return batchedEventUpdatesImpl(fn, bookkeeping);
-  } finally {
-    batchedUpdatesFinally();
-  }
-}
-
-export function discreteUpdates(fn, a, b, c) {
-  return discreteUpdatesImpl(fn, a, b, c);
-}
-
-export function flushDiscreteUpdates() {
-  return flushDiscreteUpdatesImpl();
-}
-
-export function setBatchingImplementation(
-  _batchedUpdatesImpl,
-  _discreteUpdatesImpl,
-  _flushDiscreteUpdatesImpl,
-  _batchedEventUpdatesImpl,
-) {
-  batchedUpdatesImpl = _batchedUpdatesImpl;
-  discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
-  batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
-}
diff --git a/packages/jest-mock-scheduler/package.json b/packages/jest-mock-scheduler/package.json
index 29ec728fe0844..d53fe97f25139 100644
--- a/packages/jest-mock-scheduler/package.json
+++ b/packages/jest-mock-scheduler/package.json
@@ -19,8 +19,8 @@
   },
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
-    "jest": "^23.0.1",
-    "scheduler": "^0.11.0"
+    "jest": "^23.0.1 || ^24.0.0",
+    "scheduler": "^0.15.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index c160bcaebfdc7..f79d8c48ab498 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-react",
-  "version": "0.6.6",
+  "version": "0.10.0",
   "description": "Jest matchers and utilities for testing React components.",
   "main": "index.js",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
-    "jest": "^23.0.1",
+    "jest": "^23.0.1 || ^24.0.0",
     "react": "^16.0.0",
     "react-test-renderer": "^16.0.0"
   },
diff --git a/packages/events/EventBatching.js b/packages/legacy-events/EventBatching.js
similarity index 100%
rename from packages/events/EventBatching.js
rename to packages/legacy-events/EventBatching.js
diff --git a/packages/events/EventPluginHub.js b/packages/legacy-events/EventPluginHub.js
similarity index 94%
rename from packages/events/EventPluginHub.js
rename to packages/legacy-events/EventPluginHub.js
index 297d0cbdcc44a..8d503640fcd1b 100644
--- a/packages/events/EventPluginHub.js
+++ b/packages/legacy-events/EventPluginHub.js
@@ -22,6 +22,7 @@ import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {AnyNativeEvent} from './PluginModuleType';
 import type {TopLevelType} from './TopLevelEventTypes';
+import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 
 function isInteractive(tag) {
   return (
@@ -133,7 +134,8 @@ function extractPluginEvents(
   topLevelType: TopLevelType,
   targetInst: null | Fiber,
   nativeEvent: AnyNativeEvent,
-  nativeEventTarget: EventTarget,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
 ): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
   let events = null;
   for (let i = 0; i < plugins.length; i++) {
@@ -145,6 +147,7 @@ function extractPluginEvents(
         targetInst,
         nativeEvent,
         nativeEventTarget,
+        eventSystemFlags,
       );
       if (extractedEvents) {
         events = accumulateInto(events, extractedEvents);
@@ -158,13 +161,15 @@ export function runExtractedPluginEventsInBatch(
   topLevelType: TopLevelType,
   targetInst: null | Fiber,
   nativeEvent: AnyNativeEvent,
-  nativeEventTarget: EventTarget,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
 ) {
   const events = extractPluginEvents(
     topLevelType,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   );
   runEventsInBatch(events);
 }
diff --git a/packages/events/EventPluginRegistry.js b/packages/legacy-events/EventPluginRegistry.js
similarity index 99%
rename from packages/events/EventPluginRegistry.js
rename to packages/legacy-events/EventPluginRegistry.js
index e1a670dc32267..64c2a9a1e03e8 100644
--- a/packages/events/EventPluginRegistry.js
+++ b/packages/legacy-events/EventPluginRegistry.js
@@ -16,7 +16,7 @@ import type {
 
 import invariant from 'shared/invariant';
 
-type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>};
+type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>, ...};
 type EventPluginOrder = null | Array<PluginName>;
 
 /**
diff --git a/packages/events/EventPluginUtils.js b/packages/legacy-events/EventPluginUtils.js
similarity index 91%
rename from packages/events/EventPluginUtils.js
rename to packages/legacy-events/EventPluginUtils.js
index 2e9b7e9d16e5e..abba8e9a3dabe 100644
--- a/packages/events/EventPluginUtils.js
+++ b/packages/legacy-events/EventPluginUtils.js
@@ -7,7 +7,6 @@
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 export let getFiberCurrentPropsFromNode = null;
 export let getInstanceFromNode = null;
@@ -22,11 +21,12 @@ export function setComponentTree(
   getInstanceFromNode = getInstanceFromNodeImpl;
   getNodeFromInstance = getNodeFromInstanceImpl;
   if (__DEV__) {
-    warningWithoutStack(
-      getNodeFromInstance && getInstanceFromNode,
-      'EventPluginUtils.setComponentTree(...): Injected ' +
-        'module is missing getNodeFromInstance or getInstanceFromNode.',
-    );
+    if (!getNodeFromInstance || !getInstanceFromNode) {
+      console.error(
+        'EventPluginUtils.setComponentTree(...): Injected ' +
+          'module is missing getNodeFromInstance or getInstanceFromNode.',
+      );
+    }
   }
 }
 
@@ -40,20 +40,19 @@ if (__DEV__) {
     const listenersLen = listenersIsArr
       ? dispatchListeners.length
       : dispatchListeners
-        ? 1
-        : 0;
+      ? 1
+      : 0;
 
     const instancesIsArr = Array.isArray(dispatchInstances);
     const instancesLen = instancesIsArr
       ? dispatchInstances.length
       : dispatchInstances
-        ? 1
-        : 0;
+      ? 1
+      : 0;
 
-    warningWithoutStack(
-      instancesIsArr === listenersIsArr && instancesLen === listenersLen,
-      'EventPluginUtils: Invalid `event`.',
-    );
+    if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {
+      console.error('EventPluginUtils: Invalid `event`.');
+    }
   };
 }
 
diff --git a/packages/events/EventPropagators.js b/packages/legacy-events/EventPropagators.js
similarity index 97%
rename from packages/events/EventPropagators.js
rename to packages/legacy-events/EventPropagators.js
index 5163c2b7a3fd2..dfaacdab4ddfc 100644
--- a/packages/events/EventPropagators.js
+++ b/packages/legacy-events/EventPropagators.js
@@ -10,7 +10,6 @@ import {
   traverseTwoPhase,
   traverseEnterLeave,
 } from 'shared/ReactTreeTraversal';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {getListener} from './EventPluginHub';
 import accumulateInto from './accumulateInto';
@@ -46,7 +45,9 @@ function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
  */
 function accumulateDirectionalDispatches(inst, phase, event) {
   if (__DEV__) {
-    warningWithoutStack(inst, 'Dispatching inst must not be null');
+    if (!inst) {
+      console.error('Dispatching inst must not be null');
+    }
   }
   const listener = listenerAtPhase(inst, event, phase);
   if (listener) {
diff --git a/packages/events/EventSystemFlags.js b/packages/legacy-events/EventSystemFlags.js
similarity index 85%
rename from packages/events/EventSystemFlags.js
rename to packages/legacy-events/EventSystemFlags.js
index be5e3544a2ea4..a3d51f3197b75 100644
--- a/packages/events/EventSystemFlags.js
+++ b/packages/legacy-events/EventSystemFlags.js
@@ -14,3 +14,5 @@ export const RESPONDER_EVENT_SYSTEM = 1 << 1;
 export const IS_PASSIVE = 1 << 2;
 export const IS_ACTIVE = 1 << 3;
 export const PASSIVE_NOT_SUPPORTED = 1 << 4;
+export const IS_REPLAYED = 1 << 5;
+export const IS_FIRST_ANCESTOR = 1 << 6;
diff --git a/packages/events/PluginModuleType.js b/packages/legacy-events/PluginModuleType.js
similarity index 77%
rename from packages/events/PluginModuleType.js
rename to packages/legacy-events/PluginModuleType.js
index cd7a07661ab4e..04ec9e67357e5 100644
--- a/packages/events/PluginModuleType.js
+++ b/packages/legacy-events/PluginModuleType.js
@@ -13,8 +13,9 @@ import type {
   ReactSyntheticEvent,
 } from './ReactSyntheticEventType';
 import type {TopLevelType} from './TopLevelEventTypes';
+import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 
-export type EventTypes = {[key: string]: DispatchConfig};
+export type EventTypes = {[key: string]: DispatchConfig, ...};
 
 export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
 
@@ -26,7 +27,9 @@ export type PluginModule<NativeEvent> = {
     topLevelType: TopLevelType,
     targetInst: null | Fiber,
     nativeTarget: NativeEvent,
-    nativeEventTarget: EventTarget,
+    nativeEventTarget: null | EventTarget,
+    eventSystemFlags: EventSystemFlags,
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
+  ...
 };
diff --git a/packages/events/ReactControlledComponent.js b/packages/legacy-events/ReactControlledComponent.js
similarity index 88%
rename from packages/events/ReactControlledComponent.js
rename to packages/legacy-events/ReactControlledComponent.js
index b988a326bc317..830f2a1b1cf4c 100644
--- a/packages/events/ReactControlledComponent.js
+++ b/packages/legacy-events/ReactControlledComponent.js
@@ -33,8 +33,12 @@ function restoreStateOfTarget(target) {
     'setRestoreImplementation() needs to be called to handle a target for controlled ' +
       'events. This error is likely caused by a bug in React. Please file an issue.',
   );
-  const props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
-  restoreImpl(internalInstance.stateNode, internalInstance.type, props);
+  const stateNode = internalInstance.stateNode;
+  // Guard against Fiber being unmounted.
+  if (stateNode) {
+    const props = getFiberCurrentPropsFromNode(stateNode);
+    restoreImpl(internalInstance.stateNode, internalInstance.type, props);
+  }
 }
 
 export function setRestoreImplementation(
diff --git a/packages/legacy-events/ReactGenericBatching.js b/packages/legacy-events/ReactGenericBatching.js
new file mode 100644
index 0000000000000..e5f536ee15c8f
--- /dev/null
+++ b/packages/legacy-events/ReactGenericBatching.js
@@ -0,0 +1,140 @@
+/**
+ * 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.
+ */
+
+import {
+  needsStateRestore,
+  restoreStateIfNeeded,
+} from './ReactControlledComponent';
+
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
+
+// Used as a way to call batchedUpdates when we don't have a reference to
+// the renderer. Such as when we're dispatching events or if third party
+// libraries need to call batchedUpdates. Eventually, this API will go away when
+// everything is batched by default. We'll then have a similar API to opt-out of
+// scheduled work and instead do synchronous work.
+
+// Defaults
+let batchedUpdatesImpl = function(fn, bookkeeping) {
+  return fn(bookkeeping);
+};
+let discreteUpdatesImpl = function(fn, a, b, c) {
+  return fn(a, b, c);
+};
+let flushDiscreteUpdatesImpl = function() {};
+let batchedEventUpdatesImpl = batchedUpdatesImpl;
+
+let isInsideEventHandler = false;
+let isBatchingEventUpdates = false;
+
+function finishEventHandler() {
+  // Here we wait until all updates have propagated, which is important
+  // when using controlled components within layers:
+  // https://github.com/facebook/react/issues/1698
+  // Then we restore state of any controlled component.
+  const controlledComponentsHavePendingUpdates = needsStateRestore();
+  if (controlledComponentsHavePendingUpdates) {
+    // If a controlled event was fired, we may need to restore the state of
+    // the DOM node back to the controlled value. This is necessary when React
+    // bails out of the update without touching the DOM.
+    flushDiscreteUpdatesImpl();
+    restoreStateIfNeeded();
+  }
+}
+
+export function batchedUpdates(fn, bookkeeping) {
+  if (isInsideEventHandler) {
+    // If we are currently inside another batch, we need to wait until it
+    // fully completes before restoring state.
+    return fn(bookkeeping);
+  }
+  isInsideEventHandler = true;
+  try {
+    return batchedUpdatesImpl(fn, bookkeeping);
+  } finally {
+    isInsideEventHandler = false;
+    finishEventHandler();
+  }
+}
+
+export function batchedEventUpdates(fn, a, b) {
+  if (isBatchingEventUpdates) {
+    // If we are currently inside another batch, we need to wait until it
+    // fully completes before restoring state.
+    return fn(a, b);
+  }
+  isBatchingEventUpdates = true;
+  try {
+    return batchedEventUpdatesImpl(fn, a, b);
+  } finally {
+    isBatchingEventUpdates = false;
+    finishEventHandler();
+  }
+}
+
+// This is for the React Flare event system
+export function executeUserEventHandler(fn: any => void, value: any): void {
+  const previouslyInEventHandler = isInsideEventHandler;
+  try {
+    isInsideEventHandler = true;
+    const type = typeof value === 'object' && value !== null ? value.type : '';
+    invokeGuardedCallbackAndCatchFirstError(type, fn, undefined, value);
+  } finally {
+    isInsideEventHandler = previouslyInEventHandler;
+  }
+}
+
+export function discreteUpdates(fn, a, b, c) {
+  const prevIsInsideEventHandler = isInsideEventHandler;
+  isInsideEventHandler = true;
+  try {
+    return discreteUpdatesImpl(fn, a, b, c);
+  } finally {
+    isInsideEventHandler = prevIsInsideEventHandler;
+    if (!isInsideEventHandler) {
+      finishEventHandler();
+    }
+  }
+}
+
+let lastFlushedEventTimeStamp = 0;
+export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {
+  // event.timeStamp isn't overly reliable due to inconsistencies in
+  // how different browsers have historically provided the time stamp.
+  // Some browsers provide high-resolution time stamps for all events,
+  // some provide low-resolution time stamps for all events. FF < 52
+  // even mixes both time stamps together. Some browsers even report
+  // negative time stamps or time stamps that are 0 (iOS9) in some cases.
+  // Given we are only comparing two time stamps with equality (!==),
+  // we are safe from the resolution differences. If the time stamp is 0
+  // we bail-out of preventing the flush, which can affect semantics,
+  // such as if an earlier flush removes or adds event listeners that
+  // are fired in the subsequent flush. However, this is the same
+  // behaviour as we had before this change, so the risks are low.
+  if (
+    !isInsideEventHandler &&
+    (!enableDeprecatedFlareAPI ||
+      timeStamp === 0 ||
+      lastFlushedEventTimeStamp !== timeStamp)
+  ) {
+    lastFlushedEventTimeStamp = timeStamp;
+    flushDiscreteUpdatesImpl();
+  }
+}
+
+export function setBatchingImplementation(
+  _batchedUpdatesImpl,
+  _discreteUpdatesImpl,
+  _flushDiscreteUpdatesImpl,
+  _batchedEventUpdatesImpl,
+) {
+  batchedUpdatesImpl = _batchedUpdatesImpl;
+  discreteUpdatesImpl = _discreteUpdatesImpl;
+  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
+  batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
+}
diff --git a/packages/events/ReactSyntheticEventType.js b/packages/legacy-events/ReactSyntheticEventType.js
similarity index 76%
rename from packages/events/ReactSyntheticEventType.js
rename to packages/legacy-events/ReactSyntheticEventType.js
index 07ddf270f2ec3..922d49d5c30f8 100644
--- a/packages/events/ReactSyntheticEventType.js
+++ b/packages/legacy-events/ReactSyntheticEventType.js
@@ -9,19 +9,20 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {EventPriority} from 'shared/ReactTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
-export type DispatchConfig = {
+export type DispatchConfig = {|
   dependencies: Array<TopLevelType>,
-  phasedRegistrationNames?: {
+  phasedRegistrationNames?: {|
     bubbled: string,
     captured: string,
-  },
+  |},
   registrationName?: string,
-  isInteractive?: boolean,
-};
+  eventPriority: EventPriority,
+|};
 
-export type ReactSyntheticEvent = {
+export type ReactSyntheticEvent = {|
   dispatchConfig: DispatchConfig,
   getPooled: (
     dispatchConfig: DispatchConfig,
@@ -30,4 +31,4 @@ export type ReactSyntheticEvent = {
     nativeEventTarget: EventTarget,
   ) => ReactSyntheticEvent,
   isPersistent: () => boolean,
-} & SyntheticEvent<>;
+|} & SyntheticEvent<>;
diff --git a/packages/events/ResponderEventPlugin.js b/packages/legacy-events/ResponderEventPlugin.js
similarity index 97%
rename from packages/events/ResponderEventPlugin.js
rename to packages/legacy-events/ResponderEventPlugin.js
index 4db54cae8777d..a5d4fe0251e53 100644
--- a/packages/events/ResponderEventPlugin.js
+++ b/packages/legacy-events/ResponderEventPlugin.js
@@ -350,10 +350,10 @@ function setResponderAndExtractTransfer(
   const shouldSetEventType = isStartish(topLevelType)
     ? eventTypes.startShouldSetResponder
     : isMoveish(topLevelType)
-      ? eventTypes.moveShouldSetResponder
-      : topLevelType === TOP_SELECTION_CHANGE
-        ? eventTypes.selectionChangeShouldSetResponder
-        : eventTypes.scrollShouldSetResponder;
+    ? eventTypes.moveShouldSetResponder
+    : topLevelType === TOP_SELECTION_CHANGE
+    ? eventTypes.selectionChangeShouldSetResponder
+    : eventTypes.scrollShouldSetResponder;
 
   // TODO: stop one short of the current responder.
   const bubbleShouldSetFrom = !responderInst
@@ -507,6 +507,7 @@ const ResponderEventPlugin = {
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     if (isStartish(topLevelType)) {
       trackedTouchCount += 1;
@@ -514,9 +515,11 @@ const ResponderEventPlugin = {
       if (trackedTouchCount >= 0) {
         trackedTouchCount -= 1;
       } else {
-        console.error(
-          'Ended a touch event which was not counted in `trackedTouchCount`.',
-        );
+        if (__DEV__) {
+          console.warn(
+            'Ended a touch event which was not counted in `trackedTouchCount`.',
+          );
+        }
         return null;
       }
     }
@@ -547,10 +550,10 @@ const ResponderEventPlugin = {
     const incrementalTouch = isResponderTouchStart
       ? eventTypes.responderStart
       : isResponderTouchMove
-        ? eventTypes.responderMove
-        : isResponderTouchEnd
-          ? eventTypes.responderEnd
-          : null;
+      ? eventTypes.responderMove
+      : isResponderTouchEnd
+      ? eventTypes.responderEnd
+      : null;
 
     if (incrementalTouch) {
       const gesture = ResponderSyntheticEvent.getPooled(
@@ -574,8 +577,8 @@ const ResponderEventPlugin = {
     const finalTouch = isResponderTerminate
       ? eventTypes.responderTerminate
       : isResponderRelease
-        ? eventTypes.responderRelease
-        : null;
+      ? eventTypes.responderRelease
+      : null;
     if (finalTouch) {
       const finalEvent = ResponderSyntheticEvent.getPooled(
         finalTouch,
diff --git a/packages/events/ResponderSyntheticEvent.js b/packages/legacy-events/ResponderSyntheticEvent.js
similarity index 100%
rename from packages/events/ResponderSyntheticEvent.js
rename to packages/legacy-events/ResponderSyntheticEvent.js
diff --git a/packages/events/ResponderTopLevelEventTypes.js b/packages/legacy-events/ResponderTopLevelEventTypes.js
similarity index 100%
rename from packages/events/ResponderTopLevelEventTypes.js
rename to packages/legacy-events/ResponderTopLevelEventTypes.js
diff --git a/packages/events/ResponderTouchHistoryStore.js b/packages/legacy-events/ResponderTouchHistoryStore.js
similarity index 86%
rename from packages/events/ResponderTouchHistoryStore.js
rename to packages/legacy-events/ResponderTouchHistoryStore.js
index 552f9efee00f5..643e2c130a4e9 100644
--- a/packages/events/ResponderTouchHistoryStore.js
+++ b/packages/legacy-events/ResponderTouchHistoryStore.js
@@ -8,7 +8,6 @@
  */
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
 
@@ -17,7 +16,7 @@ import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
  * should typically only see IDs in the range of 1-20 because IDs get recycled
  * when touches end and start again.
  */
-type TouchRecord = {
+type TouchRecord = {|
   touchActive: boolean,
   startPageX: number,
   startPageY: number,
@@ -28,7 +27,7 @@ type TouchRecord = {
   previousPageX: number,
   previousPageY: number,
   previousTimeStamp: number,
-};
+|};
 
 const MAX_TOUCH_BANK = 20;
 const touchBank: Array<TouchRecord> = [];
@@ -47,10 +46,12 @@ type Touch = {
   pageX: number,
   pageY: number,
   timestamp: number,
+  ...
 };
 type TouchEvent = {
   changedTouches: Array<Touch>,
   touches: Array<Touch>,
+  ...
 };
 
 function timestampForTouch(touch: Touch): number {
@@ -95,13 +96,14 @@ function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
 function getTouchIdentifier({identifier}: Touch): number {
   invariant(identifier != null, 'Touch object is missing identifier.');
   if (__DEV__) {
-    warningWithoutStack(
-      identifier <= MAX_TOUCH_BANK,
-      'Touch identifier %s is greater than maximum supported %s which causes ' +
-        'performance issues backfilling array locations for all of the indices.',
-      identifier,
-      MAX_TOUCH_BANK,
-    );
+    if (identifier > MAX_TOUCH_BANK) {
+      console.error(
+        'Touch identifier %s is greater than maximum supported %s which causes ' +
+          'performance issues backfilling array locations for all of the indices.',
+        identifier,
+        MAX_TOUCH_BANK,
+      );
+    }
   }
   return identifier;
 }
@@ -129,12 +131,15 @@ function recordTouchMove(touch: Touch): void {
     touchRecord.currentTimeStamp = timestampForTouch(touch);
     touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
   } else {
-    console.error(
-      'Cannot record touch move without a touch start.\n' + 'Touch Move: %s\n',
-      'Touch Bank: %s',
-      printTouch(touch),
-      printTouchBank(),
-    );
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch move without a touch start.\n' +
+          'Touch Move: %s\n' +
+          'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
   }
 }
 
@@ -150,12 +155,15 @@ function recordTouchEnd(touch: Touch): void {
     touchRecord.currentTimeStamp = timestampForTouch(touch);
     touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
   } else {
-    console.error(
-      'Cannot record touch end without a touch start.\n' + 'Touch End: %s\n',
-      'Touch Bank: %s',
-      printTouch(touch),
-      printTouchBank(),
-    );
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch end without a touch start.\n' +
+          'Touch End: %s\n' +
+          'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
   }
 }
 
@@ -200,10 +208,9 @@ const ResponderTouchHistoryStore = {
         }
         if (__DEV__) {
           const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
-          warningWithoutStack(
-            activeRecord != null && activeRecord.touchActive,
-            'Cannot find single active touch.',
-          );
+          if (activeRecord == null || !activeRecord.touchActive) {
+            console.error('Cannot find single active touch.');
+          }
         }
       }
     }
diff --git a/packages/events/SyntheticEvent.js b/packages/legacy-events/SyntheticEvent.js
similarity index 94%
rename from packages/events/SyntheticEvent.js
rename to packages/legacy-events/SyntheticEvent.js
index 78812c15db561..ca7a5cf4074f2 100644
--- a/packages/events/SyntheticEvent.js
+++ b/packages/legacy-events/SyntheticEvent.js
@@ -8,7 +8,6 @@
 /* eslint valid-typeof: 0 */
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 const EVENT_POOL_SIZE = 10;
 
@@ -283,17 +282,17 @@ function getPooledWarningPropertyDefinition(propName, getVal) {
   }
 
   function warn(action, result) {
-    const warningCondition = false;
-    warningWithoutStack(
-      warningCondition,
-      "This synthetic event is reused for performance reasons. If you're seeing this, " +
-        "you're %s `%s` on a released/nullified synthetic event. %s. " +
-        'If you must keep the original synthetic event around, use event.persist(). ' +
-        'See https://fb.me/react-event-pooling for more information.',
-      action,
-      propName,
-      result,
-    );
+    if (__DEV__) {
+      console.error(
+        "This synthetic event is reused for performance reasons. If you're seeing this, " +
+          "you're %s `%s` on a released/nullified synthetic event. %s. " +
+          'If you must keep the original synthetic event around, use event.persist(). ' +
+          'See https://fb.me/react-event-pooling for more information.',
+        action,
+        propName,
+        result,
+      );
+    }
   }
 }
 
diff --git a/packages/events/TopLevelEventTypes.js b/packages/legacy-events/TopLevelEventTypes.js
similarity index 100%
rename from packages/events/TopLevelEventTypes.js
rename to packages/legacy-events/TopLevelEventTypes.js
diff --git a/packages/events/__tests__/EventPluginRegistry-test.internal.js b/packages/legacy-events/__tests__/EventPluginRegistry-test.internal.js
similarity index 99%
rename from packages/events/__tests__/EventPluginRegistry-test.internal.js
rename to packages/legacy-events/__tests__/EventPluginRegistry-test.internal.js
index c11554ed68283..c56f2e5748166 100644
--- a/packages/events/__tests__/EventPluginRegistry-test.internal.js
+++ b/packages/legacy-events/__tests__/EventPluginRegistry-test.internal.js
@@ -19,7 +19,7 @@ describe('EventPluginRegistry', () => {
     // The public API surface of this is covered by other tests so
     // if `EventPluginRegistry` is ever deleted, these tests should be
     // safe to remove too.
-    EventPluginRegistry = require('events/EventPluginRegistry');
+    EventPluginRegistry = require('legacy-events/EventPluginRegistry');
 
     createPlugin = function(properties) {
       return Object.assign({extractEvents: function() {}}, properties);
diff --git a/packages/events/__tests__/ResponderEventPlugin-test.internal.js b/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js
similarity index 99%
rename from packages/events/__tests__/ResponderEventPlugin-test.internal.js
rename to packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js
index 84d132993889e..a290784c95c2e 100644
--- a/packages/events/__tests__/ResponderEventPlugin-test.internal.js
+++ b/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js
@@ -10,6 +10,7 @@
 'use strict';
 
 const {HostComponent} = require('shared/ReactWorkTags');
+const {PLUGIN_EVENT_SYSTEM} = require('legacy-events/EventSystemFlags');
 
 let EventBatching;
 let EventPluginUtils;
@@ -78,12 +79,12 @@ const _touchConfig = function(
     topType === 'topTouchStart'
       ? allTouchObjects
       : topType === 'topTouchMove'
-        ? allTouchObjects
-        : topType === 'topTouchEnd'
-          ? antiSubsequence(allTouchObjects, changedIndices)
-          : topType === 'topTouchCancel'
-            ? antiSubsequence(allTouchObjects, changedIndices)
-            : null;
+      ? allTouchObjects
+      : topType === 'topTouchEnd'
+      ? antiSubsequence(allTouchObjects, changedIndices)
+      : topType === 'topTouchCancel'
+      ? antiSubsequence(allTouchObjects, changedIndices)
+      : null;
 
   return {
     nativeEvent: touchEvent(
@@ -316,6 +317,7 @@ const run = function(config, hierarchyConfig, nativeEventConfig) {
     nativeEventConfig.targetInst,
     nativeEventConfig.nativeEvent,
     nativeEventConfig.target,
+    PLUGIN_EVENT_SYSTEM,
   );
 
   // At this point the negotiation events have been dispatched as part of the
@@ -403,8 +405,8 @@ describe('ResponderEventPlugin', () => {
     jest.resetModules();
 
     const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies');
-    EventBatching = require('events/EventBatching');
-    EventPluginUtils = require('events/EventPluginUtils');
+    EventBatching = require('legacy-events/EventBatching');
+    EventPluginUtils = require('legacy-events/EventPluginUtils');
     ResponderEventPlugin =
       ReactDOMUnstableNativeDependencies.ResponderEventPlugin;
 
diff --git a/packages/events/__tests__/accumulate-test.internal.js b/packages/legacy-events/__tests__/accumulate-test.internal.js
similarity index 95%
rename from packages/events/__tests__/accumulate-test.internal.js
rename to packages/legacy-events/__tests__/accumulate-test.internal.js
index b5efd6bfa171a..7038502ffe708 100644
--- a/packages/events/__tests__/accumulate-test.internal.js
+++ b/packages/legacy-events/__tests__/accumulate-test.internal.js
@@ -13,7 +13,7 @@ let accumulate;
 
 describe('accumulate', () => {
   beforeEach(() => {
-    accumulate = require('events/accumulate').default;
+    accumulate = require('legacy-events/accumulate').default;
   });
 
   it('throws if the second item is null', () => {
diff --git a/packages/events/__tests__/accumulateInto-test.internal.js b/packages/legacy-events/__tests__/accumulateInto-test.internal.js
similarity index 94%
rename from packages/events/__tests__/accumulateInto-test.internal.js
rename to packages/legacy-events/__tests__/accumulateInto-test.internal.js
index 863df06f9e5d1..0a1b11d360f35 100644
--- a/packages/events/__tests__/accumulateInto-test.internal.js
+++ b/packages/legacy-events/__tests__/accumulateInto-test.internal.js
@@ -13,7 +13,7 @@ let accumulateInto;
 
 describe('accumulateInto', () => {
   beforeEach(() => {
-    accumulateInto = require('events/accumulateInto').default;
+    accumulateInto = require('legacy-events/accumulateInto').default;
   });
 
   it('throws if the second item is null', () => {
diff --git a/packages/events/accumulate.js b/packages/legacy-events/accumulate.js
similarity index 100%
rename from packages/events/accumulate.js
rename to packages/legacy-events/accumulate.js
diff --git a/packages/events/accumulateInto.js b/packages/legacy-events/accumulateInto.js
similarity index 100%
rename from packages/events/accumulateInto.js
rename to packages/legacy-events/accumulateInto.js
diff --git a/packages/events/forEachAccumulated.js b/packages/legacy-events/forEachAccumulated.js
similarity index 100%
rename from packages/events/forEachAccumulated.js
rename to packages/legacy-events/forEachAccumulated.js
diff --git a/packages/events/forks/ResponderTopLevelEventTypes.dom.js b/packages/legacy-events/forks/ResponderTopLevelEventTypes.dom.js
similarity index 100%
rename from packages/events/forks/ResponderTopLevelEventTypes.dom.js
rename to packages/legacy-events/forks/ResponderTopLevelEventTypes.dom.js
diff --git a/packages/events/package.json b/packages/legacy-events/package.json
similarity index 61%
rename from packages/events/package.json
rename to packages/legacy-events/package.json
index 66aeb11363975..8460cb438a8a5 100644
--- a/packages/events/package.json
+++ b/packages/legacy-events/package.json
@@ -1,5 +1,5 @@
 {
   "private": true,
-  "name": "events",
+  "name": "legacy-events",
   "version": "0.0.0"
 }
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index 6bbb6addc4f5d..863bb025dd96f 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "16.8.6",
+  "version": "16.12.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.2",
-    "scheduler": "^0.14.0"
+    "scheduler": "^0.18.0"
   },
   "peerDependencies": {
     "react": "^16.0.0"
diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index bf97e65031ffa..9b2c5382e1db3 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -66,7 +66,7 @@ class Surface extends React.Component {
 
     this._surface = Mode.Surface(+width, +height, this._tagRef);
 
-    this._mountNode = createContainer(this._surface, LegacyRoot, false);
+    this._mountNode = createContainer(this._surface, LegacyRoot, false, null);
     updateContainer(this.props.children, this._mountNode, this);
   }
 
diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 458c3f0f8260e..62bdb3398664b 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,22 +7,13 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
-import * as Scheduler from 'scheduler';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
-
-// Intentionally not named imports because Rollup would
-// use dynamic dispatch for CommonJS interop named imports.
-const {
-  unstable_now: now,
-  unstable_scheduleCallback: scheduleDeferredCallback,
-  unstable_shouldYield: shouldYield,
-  unstable_cancelCallback: cancelDeferredCallback,
-} = Scheduler;
-
-export {now, scheduleDeferredCallback, shouldYield, cancelDeferredCallback};
+import type {
+  ReactEventResponder,
+  ReactEventResponderInstance,
+} from 'shared/ReactTypes';
 
 const pooledTransform = new Transform();
 
@@ -341,14 +332,6 @@ export function getChildHostContext() {
   return NO_CONTEXT;
 }
 
-export function getChildHostContextForEventComponent() {
-  return NO_CONTEXT;
-}
-
-export function getChildHostContextForEventTarget() {
-  return NO_CONTEXT;
-}
-
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
@@ -362,6 +345,9 @@ export function shouldSetTextContent(type, props) {
 // The ART renderer is secondary to the React DOM renderer.
 export const isPrimaryRenderer = false;
 
+// The ART renderer shouldn't trigger missing act() warnings
+export const warnsIfNotActing = false;
+
 export const supportsMutation = true;
 
 export function appendChild(parentInstance, child) {
@@ -440,45 +426,46 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+export function DEPRECATED_mountResponderInstance(
+  responder: ReactEventResponder<any, any>,
+  responderInstance: ReactEventResponderInstance<any, any>,
+  props: Object,
+  state: Object,
+  instance: Object,
 ) {
   throw new Error('Not yet implemented.');
 }
 
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-) {
+export function DEPRECATED_unmountResponderInstance(
+  responderInstance: ReactEventResponderInstance<any, any>,
+): void {
   throw new Error('Not yet implemented.');
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
+export function getFundamentalComponentInstance(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
 
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null {
+export function mountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
 
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
-): boolean {
+export function shouldUpdateFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
 
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
-): void {
+export function updateFundamentalComponent(fundamentalInstance) {
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}
+
+export function beforeRemoveInstance(instance) {
+  // noop
+}
diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
index 647587c4684ce..758415ef38044 100644
--- a/packages/react-art/src/__tests__/ReactART-test.js
+++ b/packages/react-art/src/__tests__/ReactART-test.js
@@ -214,7 +214,9 @@ describe('ReactART', () => {
         const chars = this.props.chars.split('');
         return (
           <Surface>
-            {chars.map(text => <Shape key={text} title={text} />)}
+            {chars.map(text => (
+              <Shape key={text} title={text} />
+            ))}
           </Surface>
         );
       }
@@ -359,7 +361,7 @@ describe('ReactART', () => {
     const CurrentRendererContext = React.createContext(null);
 
     function Yield(props) {
-      Scheduler.yieldValue(props.value);
+      Scheduler.unstable_yieldValue(props.value);
       return null;
     }
 
@@ -420,7 +422,7 @@ describe('ReactARTComponents', () => {
       ReactTestRenderer.create(
         <Circle stroke="green" strokeWidth={3} fill="blue" />,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
         'but its value is `undefined`.' +
         '\n    in Circle (at **)',
@@ -437,7 +439,7 @@ describe('ReactARTComponents', () => {
   it('should warn if width/height is missing on a Rectangle component', () => {
     expect(() =>
       ReactTestRenderer.create(<Rectangle stroke="green" fill="blue" />),
-    ).toWarnDev([
+    ).toErrorDev([
       'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
         'but its value is `undefined`.' +
         '\n    in Rectangle (at **)',
@@ -462,7 +464,7 @@ describe('ReactARTComponents', () => {
   });
 
   it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
-    expect(() => ReactTestRenderer.create(<Wedge fill="blue" />)).toWarnDev([
+    expect(() => ReactTestRenderer.create(<Wedge fill="blue" />)).toErrorDev([
       'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
         'but its value is `undefined`.' +
         '\n    in Wedge (at **)',
diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js
index 0b150dee7c27b..5046b3f2bc9fe 100644
--- a/packages/react-cache/src/LRU.js
+++ b/packages/react-cache/src/LRU.js
@@ -77,7 +77,7 @@ export function createLRU<T>(limit: number) {
     }
   }
 
-  function add(value: T, onDelete: () => mixed): Entry<T> {
+  function add(value: Object, onDelete: () => mixed): Entry<Object> {
     const entry = {
       value,
       onDelete,
diff --git a/packages/react-cache/src/ReactCache.js b/packages/react-cache/src/ReactCache.js
index e757e27907f72..ec8d93d7cd85f 100644
--- a/packages/react-cache/src/ReactCache.js
+++ b/packages/react-cache/src/ReactCache.js
@@ -8,17 +8,15 @@
  */
 
 import React from 'react';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {createLRU} from './LRU';
 
 type Thenable<T> = {
   then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,
+  ...
 };
 
-type Suspender = {
-  then(resolve: () => mixed, reject: () => mixed): mixed,
-};
+type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
 
 type PendingResult = {|
   status: 0,
@@ -40,6 +38,7 @@ type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
 type Resource<I, V> = {
   read(I): V,
   preload(I): void,
+  ...
 };
 
 const Pending = 0;
@@ -64,18 +63,21 @@ function readContext(Context, observedBits) {
 
 function identityHashFn(input) {
   if (__DEV__) {
-    warningWithoutStack(
-      typeof input === 'string' ||
-        typeof input === 'number' ||
-        typeof input === 'boolean' ||
-        input === undefined ||
-        input === null,
-      'Invalid key type. Expected a string, number, symbol, or boolean, ' +
-        'but instead received: %s' +
-        '\n\nTo use non-primitive values as keys, you must pass a hash ' +
-        'function as the second argument to createResource().',
-      input,
-    );
+    if (
+      typeof input !== 'string' &&
+      typeof input !== 'number' &&
+      typeof input !== 'boolean' &&
+      input !== undefined &&
+      input !== null
+    ) {
+      console.error(
+        'Invalid key type. Expected a string, number, symbol, or boolean, ' +
+          'but instead received: %s' +
+          '\n\nTo use non-primitive values as keys, you must pass a hash ' +
+          'function as the second argument to createResource().',
+        input,
+      );
+    }
   }
   return input;
 }
diff --git a/packages/react-cache/src/__tests__/ReactCache-test.internal.js b/packages/react-cache/src/__tests__/ReactCache-test.internal.js
index f8a599b360dcd..0a459fc9d3a3a 100644
--- a/packages/react-cache/src/__tests__/ReactCache-test.internal.js
+++ b/packages/react-cache/src/__tests__/ReactCache-test.internal.js
@@ -33,52 +33,59 @@ describe('ReactCache', () => {
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
 
-    TextResource = createResource(([text, ms = 0]) => {
-      let listeners = null;
-      let status = 'pending';
-      let value = null;
-      return {
-        then(resolve, reject) {
-          switch (status) {
-            case 'pending': {
-              if (listeners === null) {
-                listeners = [{resolve, reject}];
-                setTimeout(() => {
-                  if (textResourceShouldFail) {
-                    Scheduler.yieldValue(`Promise rejected [${text}]`);
-                    status = 'rejected';
-                    value = new Error('Failed to load: ' + text);
-                    listeners.forEach(listener => listener.reject(value));
-                  } else {
-                    Scheduler.yieldValue(`Promise resolved [${text}]`);
-                    status = 'resolved';
-                    value = text;
-                    listeners.forEach(listener => listener.resolve(value));
-                  }
-                }, ms);
-              } else {
-                listeners.push({resolve, reject});
+    TextResource = createResource(
+      ([text, ms = 0]) => {
+        let listeners = null;
+        let status = 'pending';
+        let value = null;
+        return {
+          then(resolve, reject) {
+            switch (status) {
+              case 'pending': {
+                if (listeners === null) {
+                  listeners = [{resolve, reject}];
+                  setTimeout(() => {
+                    if (textResourceShouldFail) {
+                      Scheduler.unstable_yieldValue(
+                        `Promise rejected [${text}]`,
+                      );
+                      status = 'rejected';
+                      value = new Error('Failed to load: ' + text);
+                      listeners.forEach(listener => listener.reject(value));
+                    } else {
+                      Scheduler.unstable_yieldValue(
+                        `Promise resolved [${text}]`,
+                      );
+                      status = 'resolved';
+                      value = text;
+                      listeners.forEach(listener => listener.resolve(value));
+                    }
+                  }, ms);
+                } else {
+                  listeners.push({resolve, reject});
+                }
+                break;
+              }
+              case 'resolved': {
+                resolve(value);
+                break;
+              }
+              case 'rejected': {
+                reject(value);
+                break;
               }
-              break;
-            }
-            case 'resolved': {
-              resolve(value);
-              break;
-            }
-            case 'rejected': {
-              reject(value);
-              break;
             }
-          }
-        },
-      };
-    }, ([text, ms]) => text);
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
 
     textResourceShouldFail = false;
   });
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return props.text;
   }
 
@@ -86,13 +93,13 @@ describe('ReactCache', () => {
     const text = props.text;
     try {
       TextResource.read([props.text, props.ms]);
-      Scheduler.yieldValue(text);
+      Scheduler.unstable_yieldValue(text);
       return text;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend! [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error! [${text}]`);
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
       }
       throw promise;
     }
@@ -156,7 +163,7 @@ describe('ReactCache', () => {
     });
 
     function App() {
-      Scheduler.yieldValue('App');
+      Scheduler.unstable_yieldValue('App');
       return BadTextResource.read(['Hi', 100]);
     }
 
@@ -172,15 +179,12 @@ describe('ReactCache', () => {
     if (__DEV__) {
       expect(() => {
         expect(Scheduler).toFlushAndYield(['App', 'Loading...']);
-      }).toWarnDev(
-        [
-          'Invalid key type. Expected a string, number, symbol, or ' +
-            'boolean, but instead received: Hi,100\n\n' +
-            'To use non-primitive values as keys, you must pass a hash ' +
-            'function as the second argument to createResource().',
-        ],
-        {withoutStack: true},
-      );
+      }).toErrorDev([
+        'Invalid key type. Expected a string, number, symbol, or ' +
+          'boolean, but instead received: Hi,100\n\n' +
+          'To use non-primitive values as keys, you must pass a hash ' +
+          'function as the second argument to createResource().',
+      ]);
     } else {
       expect(Scheduler).toFlushAndYield(['App', 'Loading...']);
     }
@@ -296,38 +300,41 @@ describe('ReactCache', () => {
 
   it('if a thenable resolves multiple times, does not update the first cached value', () => {
     let resolveThenable;
-    const BadTextResource = createResource(([text, ms = 0]) => {
-      let listeners = null;
-      let value = null;
-      return {
-        then(resolve, reject) {
-          if (value !== null) {
-            resolve(value);
-          } else {
-            if (listeners === null) {
-              listeners = [resolve];
-              resolveThenable = v => {
-                listeners.forEach(listener => listener(v));
-              };
+    const BadTextResource = createResource(
+      ([text, ms = 0]) => {
+        let listeners = null;
+        let value = null;
+        return {
+          then(resolve, reject) {
+            if (value !== null) {
+              resolve(value);
             } else {
-              listeners.push(resolve);
+              if (listeners === null) {
+                listeners = [resolve];
+                resolveThenable = v => {
+                  listeners.forEach(listener => listener(v));
+                };
+              } else {
+                listeners.push(resolve);
+              }
             }
-          }
-        },
-      };
-    }, ([text, ms]) => text);
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
 
     function BadAsyncText(props) {
       const text = props.text;
       try {
         const actualText = BadTextResource.read([props.text, props.ms]);
-        Scheduler.yieldValue(actualText);
+        Scheduler.unstable_yieldValue(actualText);
         return actualText;
       } catch (promise) {
         if (typeof promise.then === 'function') {
-          Scheduler.yieldValue(`Suspend! [${text}]`);
+          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
         } else {
-          Scheduler.yieldValue(`Error! [${text}]`);
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
         }
         throw promise;
       }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 12e3021d8afdf..26011eb8940df 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -7,10 +7,16 @@
  * @flow
  */
 
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactProviderType,
+  ReactEventResponder,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
-import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
+import type {Hook, TimeoutConfig} from 'react-reconciler/src/ReactFiberHooks';
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
+import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -19,6 +25,7 @@ import {
   SimpleMemoComponent,
   ContextProvider,
   ForwardRef,
+  Chunk,
 } from 'shared/ReactWorkTags';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
@@ -29,6 +36,7 @@ type HookLogEntry = {
   primitive: string,
   stackError: Error,
   value: mixed,
+  ...
 };
 
 let hookLog: Array<HookLogEntry> = [];
@@ -109,8 +117,8 @@ function useState<S>(
     hook !== null
       ? hook.memoizedState
       : typeof initialState === 'function'
-        ? initialState()
-        : initialState;
+      ? initialState()
+      : initialState;
   hookLog.push({primitive: 'State', stackError: new Error(), value: state});
   return [state, (action: BasicStateAction<S>) => {}];
 }
@@ -135,7 +143,7 @@ function useReducer<S, I, A>(
   return [state, (action: A) => {}];
 }
 
-function useRef<T>(initialValue: T): {current: T} {
+function useRef<T>(initialValue: T): {|current: T|} {
   let hook = nextHook();
   let ref = hook !== null ? hook.memoizedState : {current: initialValue};
   hookLog.push({
@@ -167,7 +175,7 @@ function useEffect(
 }
 
 function useImperativeHandle<T>(
-  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   inputs: Array<mixed> | void | null,
 ): void {
@@ -215,6 +223,44 @@ function useMemo<T>(
   return value;
 }
 
+function useResponder(
+  responder: ReactEventResponder<any, any>,
+  listenerProps: Object,
+): ReactEventResponderListener<any, any> {
+  // Don't put the actual event responder object in, just its displayName
+  const value = {
+    responder: responder.displayName || 'EventResponder',
+    props: listenerProps,
+  };
+  hookLog.push({primitive: 'Responder', stackError: new Error(), value});
+  return {
+    responder,
+    props: listenerProps,
+  };
+}
+
+function useTransition(
+  config: SuspenseConfig | null | void,
+): [(() => void) => void, boolean] {
+  nextHook();
+  hookLog.push({
+    primitive: 'Transition',
+    stackError: new Error(),
+    value: config,
+  });
+  return [callback => {}, false];
+}
+
+function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
+  nextHook();
+  hookLog.push({
+    primitive: 'DeferredValue',
+    stackError: new Error(),
+    value,
+  });
+  return value;
+}
+
 const Dispatcher: DispatcherType = {
   readContext,
   useCallback,
@@ -227,18 +273,22 @@ const Dispatcher: DispatcherType = {
   useReducer,
   useRef,
   useState,
+  useResponder,
+  useTransition,
+  useDeferredValue,
 };
 
 // Inspect
 
-type HooksNode = {
+export type HooksNode = {
   id: number | null,
   isStateEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
+  ...
 };
-type HooksTree = Array<HooksNode>;
+export type HooksTree = Array<HooksNode>;
 
 // Don't assume
 //
@@ -576,7 +626,8 @@ export function inspectHooksOfFiber(
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
-    fiber.tag !== ForwardRef
+    fiber.tag !== ForwardRef &&
+    fiber.tag !== Chunk
   ) {
     throw new Error(
       'Unknown Fiber. Needs to be a function component to inspect hooks.',
diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
index 81d91e7455aff..7a9384ea68ea7 100644
--- a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -180,7 +180,7 @@ describe('React hooks DevTools integration', () => {
     }
   });
 
-  it('should support overriding suspense in sync mode', () => {
+  it('should support overriding suspense in legacy mode', () => {
     if (__DEV__) {
       // Lock the first render
       setSuspenseHandler(() => true);
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
new file mode 100644
index 0000000000000..3e1c67087c12a
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactDebugTools;
+
+describe('ReactHooksInspection', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+  });
+
+  it('should inspect a simple useResponder hook', () => {
+    const TestResponder = React.DEPRECATED_createResponder('TestResponder', {});
+
+    function Foo(props) {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        preventDefault: false,
+      });
+      return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
+    }
+    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(tree).toEqual([
+      {
+        isStateEditable: false,
+        id: 0,
+        name: 'Responder',
+        value: {props: {preventDefault: false}, responder: 'TestResponder'},
+        subHooks: [],
+      },
+    ]);
+  });
+});
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 5c092f5853288..a3542d86ceba3 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -146,7 +146,10 @@ describe('ReactHooksInspectionIntegration', () => {
         </div>
       );
     }
-    let renderer = ReactTestRenderer.create(<Foo prop="prop" />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<Foo prop="prop" />);
+    });
 
     let childFiber = renderer.root.findByType(Foo)._currentFiber();
 
@@ -620,7 +623,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
     await LazyFoo;
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
 
     let childFiber = renderer.root._currentFiber();
     let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
new file mode 100644
index 0000000000000..73d05c351f159
--- /dev/null
+++ b/packages/react-devtools-core/README.md
@@ -0,0 +1,53 @@
+# `react-devtools-core`
+
+A standalone React DevTools implementation.
+
+This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**
+
+## API
+
+### `react-devtools-core`
+
+This is similar requiring the `react-devtools` package, but provides several configurable options. Unlike `react-devtools`, requiring `react-devtools-core` doesn't connect immediately but instead exports a function:
+
+```js
+const { connectToDevTools } = require("react-devtools-core");
+connectToDevTools(config);
+```
+
+Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.  
+Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
+
+The `config` object may contain:
+* `host: string` (defaults to "localhost") - Websocket will connect to this host.
+* `port: number` (defaults to `8097`) - Websocket will connect to this port.
+* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
+* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
+* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
+
+## `react-devtools-core/standalone`
+
+Renders the DevTools interface into a DOM node.
+
+```js
+require("react-devtools-core/standalone")
+  .setContentDOMNode(document.getElementById("container"))
+  .setStatusListener(status => {
+    // This callback is optional...
+  })
+  .startServer(port);
+```
+
+Reference the `react-devtools` package for a complete integration example.
+
+## Development
+
+Watch for changes made to the backend entry point and rebuild:
+```sh
+yarn start:backend
+```
+
+Watch for changes made to the standalone UI entry point and rebuild:
+```sh
+yarn start:standalone
+```
\ No newline at end of file
diff --git a/packages/react-devtools-core/backend.js b/packages/react-devtools-core/backend.js
new file mode 100644
index 0000000000000..2c2a32d45125b
--- /dev/null
+++ b/packages/react-devtools-core/backend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/backend');
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
new file mode 100644
index 0000000000000..56bdb32c1d1d4
--- /dev/null
+++ b/packages/react-devtools-core/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "react-devtools-core",
+  "version": "4.4.0",
+  "description": "Use react-devtools outside of the browser",
+  "license": "MIT",
+  "main": "./dist/backend.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-devtools-core"
+  },
+  "files": [
+    "dist",
+    "backend.js",
+    "build-info.json",
+    "standalone.js"
+  ],
+  "scripts": {
+    "build": "yarn build:backend && yarn build:standalone",
+    "build:backend": "cross-env NODE_ENV=production webpack --config webpack.backend.js",
+    "build:standalone": "cross-env NODE_ENV=production webpack --config webpack.standalone.js",
+    "prepublish": "yarn run build",
+    "start:backend": "cross-env NODE_ENV=development webpack --config webpack.backend.js --watch",
+    "start:standalone": "cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch"
+  },
+  "dependencies": {
+    "es6-symbol": "^3",
+    "shell-quote": "^1.6.1",
+    "ws": "^7"
+  },
+  "devDependencies": {
+    "cross-env": "^3.1.4"
+  }
+}
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
new file mode 100644
index 0000000000000..6b95b4c79114a
--- /dev/null
+++ b/packages/react-devtools-core/src/backend.js
@@ -0,0 +1,282 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Agent from 'react-devtools-shared/src/backend/agent';
+import Bridge from 'react-devtools-shared/src/bridge';
+import {installHook} from 'react-devtools-shared/src/hook';
+import {initBackend} from 'react-devtools-shared/src/backend';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import {getDefaultComponentFilters} from 'react-devtools-shared/src/utils';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {ComponentFilter} from 'react-devtools-shared/src/types';
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
+import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+
+type ConnectOptions = {
+  host?: string,
+  nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
+  port?: number,
+  resolveRNStyle?: ResolveNativeStyle,
+  isAppActive?: () => boolean,
+  websocket?: ?WebSocket,
+  ...
+};
+
+installHook(window);
+
+const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();
+
+function debug(methodName: string, ...args) {
+  if (__DEBUG__) {
+    console.log(
+      `%c[core/backend] %c${methodName}`,
+      'color: teal; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+}
+
+export function connectToDevTools(options: ?ConnectOptions) {
+  const {
+    host = 'localhost',
+    nativeStyleEditorValidAttributes,
+    port = 8097,
+    websocket,
+    resolveRNStyle = null,
+    isAppActive = () => true,
+  } = options || {};
+
+  let retryTimeoutID: TimeoutID | null = null;
+
+  function scheduleRetry() {
+    if (retryTimeoutID === null) {
+      // Two seconds because RN had issues with quick retries.
+      retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);
+    }
+  }
+
+  if (!isAppActive()) {
+    // If the app is in background, maybe retry later.
+    // Don't actually attempt to connect until we're in foreground.
+    scheduleRetry();
+    return;
+  }
+
+  let bridge: BackendBridge | null = null;
+
+  const messageListeners = [];
+  const uri = 'ws://' + host + ':' + port;
+
+  // If existing websocket is passed, use it.
+  // This is necessary to support our custom integrations.
+  // See D6251744.
+  const ws = websocket ? websocket : new window.WebSocket(uri);
+  ws.onclose = handleClose;
+  ws.onerror = handleFailed;
+  ws.onmessage = handleMessage;
+  ws.onopen = function() {
+    bridge = new Bridge({
+      listen(fn) {
+        messageListeners.push(fn);
+        return () => {
+          const index = messageListeners.indexOf(fn);
+          if (index >= 0) {
+            messageListeners.splice(index, 1);
+          }
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        if (ws.readyState === ws.OPEN) {
+          if (__DEBUG__) {
+            debug('wall.send()', event, payload);
+          }
+
+          ws.send(JSON.stringify({event, payload}));
+        } else {
+          if (__DEBUG__) {
+            debug(
+              'wall.send()',
+              'Shutting down bridge because of closed WebSocket connection',
+            );
+          }
+
+          if (bridge !== null) {
+            bridge.shutdown();
+          }
+
+          scheduleRetry();
+        }
+      },
+    });
+    bridge.addListener(
+      'inspectElement',
+      ({id, rendererID}: {id: number, rendererID: number, ...}) => {
+        const renderer = agent.rendererInterfaces[rendererID];
+        if (renderer != null) {
+          // Send event for RN to highlight.
+          const nodes: ?Array<HTMLElement> = renderer.findNativeNodesForFiberID(
+            id,
+          );
+          if (nodes != null && nodes[0] != null) {
+            agent.emit('showNativeHighlight', nodes[0]);
+          }
+        }
+      },
+    );
+    bridge.addListener(
+      'updateComponentFilters',
+      (componentFilters: Array<ComponentFilter>) => {
+        // Save filter changes in memory, in case DevTools is reloaded.
+        // In that case, the renderer will already be using the updated values.
+        // We'll lose these in between backend reloads but that can't be helped.
+        savedComponentFilters = componentFilters;
+      },
+    );
+
+    // The renderer interface doesn't read saved component filters directly,
+    // because they are generally stored in localStorage within the context of the extension.
+    // Because of this it relies on the extension to pass filters.
+    // In the case of the standalone DevTools being used with a website,
+    // saved filters are injected along with the backend script tag so we shouldn't override them here.
+    // This injection strategy doesn't work for React Native though.
+    // Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution.
+    // So for now we just fall back to using the default filters...
+    if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {
+      bridge.send('overrideComponentFilters', savedComponentFilters);
+    }
+
+    // TODO (npm-packages) Warn if "isBackendStorageAPISupported"
+    const agent = new Agent(bridge);
+    agent.addListener('shutdown', () => {
+      // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
+      // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
+      hook.emit('shutdown');
+    });
+
+    initBackend(hook, agent, window);
+
+    // Setup React Native style editor if the environment supports it.
+    if (resolveRNStyle != null || hook.resolveRNStyle != null) {
+      setupNativeStyleEditor(
+        bridge,
+        agent,
+        ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),
+        nativeStyleEditorValidAttributes ||
+          hook.nativeStyleEditorValidAttributes ||
+          null,
+      );
+    } else {
+      // Otherwise listen to detect if the environment later supports it.
+      // For example, Flipper does not eagerly inject these values.
+      // Instead it relies on the React Native Inspector to lazily inject them.
+      let lazyResolveRNStyle;
+      let lazyNativeStyleEditorValidAttributes;
+
+      const initAfterTick = () => {
+        if (bridge !== null) {
+          setupNativeStyleEditor(
+            bridge,
+            agent,
+            lazyResolveRNStyle,
+            lazyNativeStyleEditorValidAttributes,
+          );
+        }
+      };
+
+      if (!hook.hasOwnProperty('resolveRNStyle')) {
+        Object.defineProperty(
+          hook,
+          'resolveRNStyle',
+          ({
+            enumerable: false,
+            get() {
+              return lazyResolveRNStyle;
+            },
+            set(value) {
+              lazyResolveRNStyle = value;
+              initAfterTick();
+            },
+          }: Object),
+        );
+      }
+      if (!hook.hasOwnProperty('nativeStyleEditorValidAttributes')) {
+        Object.defineProperty(
+          hook,
+          'nativeStyleEditorValidAttributes',
+          ({
+            enumerable: false,
+            get() {
+              return lazyNativeStyleEditorValidAttributes;
+            },
+            set(value) {
+              lazyNativeStyleEditorValidAttributes = value;
+              initAfterTick();
+            },
+          }: Object),
+        );
+      }
+    }
+  };
+
+  function handleClose() {
+    if (__DEBUG__) {
+      debug('WebSocket.onclose');
+    }
+
+    if (bridge !== null) {
+      bridge.emit('shutdown');
+    }
+
+    scheduleRetry();
+  }
+
+  function handleFailed() {
+    if (__DEBUG__) {
+      debug('WebSocket.onerror');
+    }
+
+    scheduleRetry();
+  }
+
+  function handleMessage(event) {
+    let data;
+    try {
+      if (typeof event.data === 'string') {
+        data = JSON.parse(event.data);
+        if (__DEBUG__) {
+          debug('WebSocket.onmessage', data);
+        }
+      } else {
+        throw Error();
+      }
+    } catch (e) {
+      console.error(
+        '[React DevTools] Failed to parse JSON: ' + (event.data: any),
+      );
+      return;
+    }
+    messageListeners.forEach(fn => {
+      try {
+        fn(data);
+      } catch (error) {
+        // jsc doesn't play so well with tracebacks that go into eval'd code,
+        // so the stack trace here will stop at the `eval()` call. Getting the
+        // message that caused the error is the best we can do for now.
+        console.log('[React DevTools] Error calling listener', data);
+        console.log('error:', error);
+        throw error;
+      }
+    });
+  }
+}
diff --git a/packages/react-devtools-core/src/editor.js b/packages/react-devtools-core/src/editor.js
new file mode 100644
index 0000000000000..bbe3fa63d9857
--- /dev/null
+++ b/packages/react-devtools-core/src/editor.js
@@ -0,0 +1,190 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {existsSync} from 'fs';
+import {basename, join, isAbsolute} from 'path';
+import {execSync, spawn} from 'child_process';
+import {parse} from 'shell-quote';
+
+function isTerminalEditor(editor: string): boolean {
+  switch (editor) {
+    case 'vim':
+    case 'emacs':
+    case 'nano':
+      return true;
+    default:
+      return false;
+  }
+}
+
+// Map from full process name to binary that starts the process
+// We can't just re-use full process name, because it will spawn a new instance
+// of the app every time
+const COMMON_EDITORS = {
+  '/Applications/Atom.app/Contents/MacOS/Atom': 'atom',
+  '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta':
+    '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta',
+  '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text':
+    '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl',
+  '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2':
+    '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl',
+  '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code',
+};
+
+function getArgumentsForLineNumber(
+  editor: string,
+  filePath: string,
+  lineNumber: number,
+): Array<string> {
+  switch (basename(editor)) {
+    case 'vim':
+    case 'mvim':
+      return [filePath, '+' + lineNumber];
+    case 'atom':
+    case 'Atom':
+    case 'Atom Beta':
+    case 'subl':
+    case 'sublime':
+    case 'wstorm':
+    case 'appcode':
+    case 'charm':
+    case 'idea':
+      return [filePath + ':' + lineNumber];
+    case 'joe':
+    case 'emacs':
+    case 'emacsclient':
+      return ['+' + lineNumber, filePath];
+    case 'rmate':
+    case 'mate':
+    case 'mine':
+      return ['--line', lineNumber + '', filePath];
+    case 'code':
+      return ['-g', filePath + ':' + lineNumber];
+    default:
+      // For all others, drop the lineNumber until we have
+      // a mapping above, since providing the lineNumber incorrectly
+      // can result in errors or confusing behavior.
+      return [filePath];
+  }
+}
+
+function guessEditor(): Array<string> {
+  // Explicit config always wins
+  if (process.env.REACT_EDITOR) {
+    return parse(process.env.REACT_EDITOR);
+  }
+
+  // Using `ps x` on OSX we can find out which editor is currently running.
+  // Potentially we could use similar technique for Windows and Linux
+  if (process.platform === 'darwin') {
+    try {
+      const output = execSync('ps x').toString();
+      const processNames = Object.keys(COMMON_EDITORS);
+      for (let i = 0; i < processNames.length; i++) {
+        const processName = processNames[i];
+        if (output.indexOf(processName) !== -1) {
+          return [COMMON_EDITORS[processName]];
+        }
+      }
+    } catch (error) {
+      // Ignore...
+    }
+  }
+
+  // Last resort, use old skool env vars
+  if (process.env.VISUAL) {
+    return [process.env.VISUAL];
+  } else if (process.env.EDITOR) {
+    return [process.env.EDITOR];
+  }
+
+  return [];
+}
+
+let childProcess = null;
+
+export function getValidFilePath(
+  maybeRelativePath: string,
+  absoluteProjectRoots: Array<string>,
+): string | null {
+  // We use relative paths at Facebook with deterministic builds.
+  // This is why our internal tooling calls React DevTools with absoluteProjectRoots.
+  // If the filename is absolute then we don't need to care about this.
+  if (isAbsolute(maybeRelativePath)) {
+    if (existsSync(maybeRelativePath)) {
+      return maybeRelativePath;
+    }
+  } else {
+    for (let i = 0; i < absoluteProjectRoots.length; i++) {
+      const projectRoot = absoluteProjectRoots[i];
+      const joinedPath = join(projectRoot, maybeRelativePath);
+      if (existsSync(joinedPath)) {
+        return joinedPath;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function doesFilePathExist(
+  maybeRelativePath: string,
+  absoluteProjectRoots: Array<string>,
+): boolean {
+  return getValidFilePath(maybeRelativePath, absoluteProjectRoots) !== null;
+}
+
+export function launchEditor(
+  maybeRelativePath: string,
+  lineNumber: number,
+  absoluteProjectRoots: Array<string>,
+) {
+  const filePath = getValidFilePath(maybeRelativePath, absoluteProjectRoots);
+  if (filePath === null) {
+    return;
+  }
+
+  // Sanitize lineNumber to prevent malicious use on win32
+  // via: https://github.com/nodejs/node/blob/c3bb4b1aa5e907d489619fb43d233c3336bfc03d/lib/child_process.js#L333
+  if (lineNumber && isNaN(lineNumber)) {
+    return;
+  }
+
+  let [editor, ...args] = guessEditor();
+  if (!editor) {
+    return;
+  }
+
+  if (lineNumber) {
+    args = args.concat(getArgumentsForLineNumber(editor, filePath, lineNumber));
+  } else {
+    args.push(filePath);
+  }
+
+  if (childProcess && isTerminalEditor(editor)) {
+    // There's an existing editor process already and it's attached
+    // to the terminal, so go kill it. Otherwise two separate editor
+    // instances attach to the stdin/stdout which gets confusing.
+    childProcess.kill('SIGKILL');
+  }
+
+  if (process.platform === 'win32') {
+    // On Windows, launch the editor in a shell because spawn can only
+    // launch .exe files.
+    childProcess = spawn('cmd.exe', ['/C', editor].concat(args), {
+      stdio: 'inherit',
+    });
+  } else {
+    childProcess = spawn(editor, args, {stdio: 'inherit'});
+  }
+  childProcess.on('error', function() {});
+  childProcess.on('exit', function(errorCode) {
+    childProcess = null;
+  });
+}
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
new file mode 100644
index 0000000000000..065316a9fe71a
--- /dev/null
+++ b/packages/react-devtools-core/src/standalone.js
@@ -0,0 +1,332 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {createElement} from 'react';
+import {
+  // $FlowFixMe Flow does not yet know about flushSync()
+  flushSync,
+  // $FlowFixMe Flow does not yet know about createRoot()
+  createRoot,
+} from 'react-dom';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
+import {Server} from 'ws';
+import {join} from 'path';
+import {readFileSync} from 'fs';
+import {installHook} from 'react-devtools-shared/src/hook';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {doesFilePathExist, launchEditor} from './editor';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+installHook(window);
+
+export type StatusListener = (message: string) => void;
+
+let node: HTMLElement = ((null: any): HTMLElement);
+let nodeWaitingToConnectHTML: string = '';
+let projectRoots: Array<string> = [];
+let statusListener: StatusListener = (message: string) => {};
+
+function setContentDOMNode(value: HTMLElement) {
+  node = value;
+
+  // Save so we can restore the exact waiting message between sessions.
+  nodeWaitingToConnectHTML = node.innerHTML;
+
+  return DevtoolsUI;
+}
+
+function setProjectRoots(value: Array<string>) {
+  projectRoots = value;
+}
+
+function setStatusListener(value: StatusListener) {
+  statusListener = value;
+  return DevtoolsUI;
+}
+
+let bridge: FrontendBridge | null = null;
+let store: Store | null = null;
+let root = null;
+
+const log = (...args) => console.log('[React DevTools]', ...args);
+log.warn = (...args) => console.warn('[React DevTools]', ...args);
+log.error = (...args) => console.error('[React DevTools]', ...args);
+
+function debug(methodName: string, ...args) {
+  if (__DEBUG__) {
+    console.log(
+      `%c[core/standalone] %c${methodName}`,
+      'color: teal; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+}
+
+function safeUnmount() {
+  flushSync(() => {
+    if (root !== null) {
+      root.unmount();
+    }
+  });
+  root = null;
+}
+
+function reload() {
+  safeUnmount();
+
+  node.innerHTML = '';
+
+  setTimeout(() => {
+    root = createRoot(node);
+    root.render(
+      createElement(DevTools, {
+        bridge: ((bridge: any): FrontendBridge),
+        canViewElementSourceFunction,
+        showTabBar: true,
+        store: ((store: any): Store),
+        warnIfLegacyBackendDetected: true,
+        viewElementSourceFunction,
+      }),
+    );
+  }, 100);
+}
+
+function canViewElementSourceFunction(
+  inspectedElement: InspectedElement,
+): boolean {
+  if (
+    inspectedElement.canViewSource === false ||
+    inspectedElement.source === null
+  ) {
+    return false;
+  }
+
+  const {source} = inspectedElement;
+
+  return doesFilePathExist(source.fileName, projectRoots);
+}
+
+function viewElementSourceFunction(
+  id: number,
+  inspectedElement: InspectedElement,
+): void {
+  const {source} = inspectedElement;
+  if (source !== null) {
+    launchEditor(source.fileName, source.lineNumber, projectRoots);
+  } else {
+    log.error('Cannot inspect element', id);
+  }
+}
+
+function onDisconnected() {
+  safeUnmount();
+
+  node.innerHTML = nodeWaitingToConnectHTML;
+}
+
+function onError({code, message}) {
+  safeUnmount();
+
+  if (code === 'EADDRINUSE') {
+    node.innerHTML = `
+      <div class="box">
+        <div class="box-header">
+          Another instance of DevTools is running.
+        </div>
+        <div class="box-content">
+          Only one copy of DevTools can be used at a time.
+        </div>
+      </div>
+    `;
+  } else {
+    node.innerHTML = `
+      <div class="box">
+        <div class="box-header">
+          Unknown error
+        </div>
+        <div class="box-content">
+          ${message}
+        </div>
+      </div>
+    `;
+  }
+}
+
+function initialize(socket: WebSocket) {
+  const listeners = [];
+  socket.onmessage = event => {
+    let data;
+    try {
+      if (typeof event.data === 'string') {
+        data = JSON.parse(event.data);
+
+        if (__DEBUG__) {
+          debug('WebSocket.onmessage', data);
+        }
+      } else {
+        throw Error();
+      }
+    } catch (e) {
+      log.error('Failed to parse JSON', event.data);
+      return;
+    }
+    listeners.forEach(fn => {
+      try {
+        fn(data);
+      } catch (error) {
+        log.error('Error calling listener', data);
+        throw error;
+      }
+    });
+  };
+
+  bridge = new Bridge({
+    listen(fn) {
+      listeners.push(fn);
+      return () => {
+        const index = listeners.indexOf(fn);
+        if (index >= 0) {
+          listeners.splice(index, 1);
+        }
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      if (socket.readyState === socket.OPEN) {
+        socket.send(JSON.stringify({event, payload}));
+      }
+    },
+  });
+  ((bridge: any): FrontendBridge).addListener('shutdown', () => {
+    socket.close();
+  });
+
+  store = new Store(bridge, {supportsNativeInspection: false});
+
+  log('Connected');
+  reload();
+}
+
+let startServerTimeoutID: TimeoutID | null = null;
+
+function connectToSocket(socket: WebSocket) {
+  socket.onerror = err => {
+    onDisconnected();
+    log.error('Error with websocket connection', err);
+  };
+  socket.onclose = () => {
+    onDisconnected();
+    log('Connection to RN closed');
+  };
+  initialize(socket);
+
+  return {
+    close: function() {
+      onDisconnected();
+    },
+  };
+}
+
+function startServer(port?: number = 8097) {
+  const httpServer = require('http').createServer();
+  const server = new Server({server: httpServer});
+  let connected: WebSocket | null = null;
+  server.on('connection', (socket: WebSocket) => {
+    if (connected !== null) {
+      connected.close();
+      log.warn(
+        'Only one connection allowed at a time.',
+        'Closing the previous connection',
+      );
+    }
+    connected = socket;
+    socket.onerror = error => {
+      connected = null;
+      onDisconnected();
+      log.error('Error with websocket connection', error);
+    };
+    socket.onclose = () => {
+      connected = null;
+      onDisconnected();
+      log('Connection to RN closed');
+    };
+    initialize(socket);
+  });
+
+  server.on('error', event => {
+    onError(event);
+    log.error('Failed to start the DevTools server', event);
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.on('request', (request, response) => {
+    // Serve a file that immediately sets up the connection.
+    const backendFile = readFileSync(join(__dirname, 'backend.js'));
+
+    // The renderer interface doesn't read saved component filters directly,
+    // because they are generally stored in localStorage within the context of the extension.
+    // Because of this it relies on the extension to pass filters, so include them wth the response here.
+    // This will ensure that saved filters are shared across different web pages.
+    const savedPreferencesString = `
+      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+        getSavedComponentFilters(),
+      )};
+      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+        getAppendComponentStack(),
+      )};`;
+
+    response.end(
+      savedPreferencesString +
+        '\n;' +
+        backendFile.toString() +
+        '\n;' +
+        'ReactDevToolsBackend.connectToDevTools();',
+    );
+  });
+
+  httpServer.on('error', event => {
+    onError(event);
+    statusListener('Failed to start the server.');
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.listen(port, () => {
+    statusListener('The server is listening on the port ' + port + '.');
+  });
+
+  return {
+    close: function() {
+      connected = null;
+      onDisconnected();
+      if (startServerTimeoutID !== null) {
+        clearTimeout(startServerTimeoutID);
+      }
+      server.close();
+      httpServer.close();
+    },
+  };
+}
+
+const DevtoolsUI = {
+  connectToSocket,
+  setContentDOMNode,
+  setProjectRoots,
+  setStatusListener,
+  startServer,
+};
+
+export default DevtoolsUI;
diff --git a/packages/react-devtools-core/standalone.js b/packages/react-devtools-core/standalone.js
new file mode 100644
index 0000000000000..fe55aa11d5d41
--- /dev/null
+++ b/packages/react-devtools-core/standalone.js
@@ -0,0 +1 @@
+module.exports = require('./dist/standalone');
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
new file mode 100644
index 0000000000000..ecd066af867a6
--- /dev/null
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -0,0 +1,66 @@
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+
+    // This name is important; standalone references it in order to connect.
+    library: 'ReactDevToolsBackend',
+    libraryTarget: 'umd',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: true,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
new file mode 100644
index 0000000000000..a1882f20cf8ac
--- /dev/null
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -0,0 +1,92 @@
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  target: 'electron-main',
+  entry: {
+    standalone: './src/standalone.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    library: '[name]',
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  node: {
+    // Don't replace __dirname!
+    // This would break the standalone DevTools ability to load the backend.
+    // see https://github.com/facebook/react-devtools/issues/1269
+    __dirname: false,
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: false,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              // WARNING It's important that we disable CSS source maps for production builds.
+              // This causes style-loader to insert styles via a <style> tag rather than URL.createObjectURL,
+              // which in turn avoids a nasty Electron/Chromium bug that breaks DevTools in Nuclide.
+              // (Calls to URL.createObjectURL seem to crash the webview process.)
+              sourceMap: __DEV__,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-extensions/.circleci/config.yml b/packages/react-devtools-extensions/.circleci/config.yml
new file mode 100644
index 0000000000000..ebec77b77e72d
--- /dev/null
+++ b/packages/react-devtools-extensions/.circleci/config.yml
@@ -0,0 +1,58 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.12.0
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          name: Restore node_modules cache
+          keys:
+            - v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v1-node-{{ arch }}-{{ .Branch }}-
+            - v1-node-{{ arch }}-
+
+      - run:
+          name: Nodejs Version
+          command: node --version
+
+      - run:
+          name: Install Packages
+          command: yarn install --frozen-lockfile
+
+      - save_cache:
+          name: Save node_modules cache
+          key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          paths:
+            - node_modules
+
+      - run:
+          name: Check formatting
+          command: yarn prettier:ci
+
+      - run:
+          name: Check lint
+          command: yarn lint:ci
+
+      - run:
+          name: Check Flow
+          command: yarn flow
+
+      - run:
+          name: Test Packages
+          command: yarn test
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md
new file mode 100644
index 0000000000000..cef2bc9c6db3b
--- /dev/null
+++ b/packages/react-devtools-extensions/README.md
@@ -0,0 +1,37 @@
+This is the source code for the React DevTools browser extension.
+
+## Installation
+
+The easiest way to install this extension is as a browser add-on:
+* [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+* [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+
+## Local development
+You can also build and install this extension from source.
+
+### Prerequisite steps
+DevTools depends on local versions of several NPM packages<sup>1</sup> also in this workspace. You'll need to either build or download those packages first.
+
+<sup>1</sup> Note that at this time, an _experimental_ build is required because DevTools depends on the `createRoot` API.
+
+#### Build from source
+To build dependencies from source, run the following command from the root of the repository:
+```sh
+yarn build-for-devtools
+```
+#### Download from CI
+To use the latest build from CI, run the following command from the root of the repository:
+```sh
+./scripts/release/download-experimental-build.js
+```
+### Build steps
+Once the above packages have been built or downloaded, you can build the extension by running:
+```sh
+cd packages/react-devtools-extensions/
+
+yarn build:chrome # => packages/react-devtools-extensions/chrome/build
+yarn run test:chrome # Test Chrome extension
+
+yarn build:firefox # => packages/react-devtools-extensions/firefox/build
+yarn run test:firefox # Test Firefox extension
+```
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
new file mode 100644
index 0000000000000..a38e909dd4630
--- /dev/null
+++ b/packages/react-devtools-extensions/build.js
@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const archiver = require('archiver');
+const {execSync} = require('child_process');
+const {readFileSync, writeFileSync, createWriteStream} = require('fs');
+const {copy, ensureDir, move, remove} = require('fs-extra');
+const {join} = require('path');
+const {getGitCommit} = require('./utils');
+
+// These files are copied along with Webpack-bundled files
+// to produce the final web extension
+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
+
+const preProcess = async (destinationPath, tempPath) => {
+  await remove(destinationPath); // Clean up from previously completed builds
+  await remove(tempPath); // Clean up from any previously failed builds
+  await ensureDir(tempPath); // Create temp dir for this new build
+};
+
+const build = async (tempPath, manifestPath) => {
+  const binPath = join(tempPath, 'bin');
+  const zipPath = join(tempPath, 'zip');
+
+  const webpackPath = join(
+    __dirname,
+    '..',
+    '..',
+    'node_modules',
+    '.bin',
+    'webpack',
+  );
+  execSync(
+    `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: process.env,
+      stdio: 'inherit',
+    },
+  );
+  execSync(
+    `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: process.env,
+      stdio: 'inherit',
+    },
+  );
+
+  // Make temp dir
+  await ensureDir(zipPath);
+
+  const copiedManifestPath = join(zipPath, 'manifest.json');
+
+  // Copy unbuilt source files to zip dir to be packaged:
+  await copy(binPath, join(zipPath, 'build'));
+  await copy(manifestPath, copiedManifestPath);
+  await Promise.all(
+    STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
+  );
+
+  const commit = getGitCommit();
+  const dateString = new Date().toLocaleDateString();
+  const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  const versionDateString = `${manifest.version} (${dateString})`;
+  if (manifest.version_name) {
+    manifest.version_name = versionDateString;
+  }
+  manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
+
+  writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
+
+  // Pack the extension
+  const archive = archiver('zip', {zlib: {level: 9}});
+  const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));
+  await new Promise((resolve, reject) => {
+    archive
+      .directory(zipPath, false)
+      .on('error', err => reject(err))
+      .pipe(zipStream);
+    archive.finalize();
+    zipStream.on('close', () => resolve());
+  });
+};
+
+const postProcess = async (tempPath, destinationPath) => {
+  const unpackedSourcePath = join(tempPath, 'zip');
+  const packedSourcePath = join(tempPath, 'ReactDevTools.zip');
+  const packedDestPath = join(destinationPath, 'ReactDevTools.zip');
+  const unpackedDestPath = join(destinationPath, 'unpacked');
+
+  await move(unpackedSourcePath, unpackedDestPath); // Copy built files to destination
+  await move(packedSourcePath, packedDestPath); // Copy built files to destination
+  await remove(tempPath); // Clean up temp directory and files
+};
+
+const main = async buildId => {
+  const root = join(__dirname, buildId);
+  const manifestPath = join(root, 'manifest.json');
+  const destinationPath = join(root, 'build');
+
+  try {
+    const tempPath = join(__dirname, 'build', buildId);
+    await preProcess(destinationPath, tempPath);
+    await build(tempPath, manifestPath);
+
+    const builtUnpackedPath = join(destinationPath, 'unpacked');
+    await postProcess(tempPath, destinationPath);
+
+    return builtUnpackedPath;
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+
+  return null;
+};
+
+module.exports = main;
diff --git a/packages/react-devtools-extensions/chrome/README.md b/packages/react-devtools-extensions/chrome/README.md
new file mode 100644
index 0000000000000..dd77d072c8282
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/README.md
@@ -0,0 +1,12 @@
+# The Chrome extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:chrome` from the root directory.
+
+## Testing in Chrome
+
+You can test a local build of the web extension like so:
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.
diff --git a/packages/react-devtools-extensions/chrome/build.js b/packages/react-devtools-extensions/chrome/build.js
new file mode 100644
index 0000000000000..1cadb6c824fb8
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/build.js
@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {execSync} = require('child_process');
+const {existsSync} = require('fs');
+const {isAbsolute, join, relative} = require('path');
+const {argv} = require('yargs');
+const build = require('../build');
+
+const main = async () => {
+  const {crx, keyPath} = argv;
+
+  if (crx) {
+    if (!keyPath || !existsSync(keyPath)) {
+      console.error('Must specify a key file (.pem) to build CRX');
+      process.exit(1);
+    }
+  }
+
+  await build('chrome');
+
+  if (crx) {
+    const cwd = join(__dirname, 'build');
+
+    let safeKeyPath = keyPath;
+    if (!isAbsolute(keyPath)) {
+      safeKeyPath = join(relative(cwd, process.cwd()), keyPath);
+    }
+
+    const crxPath = join(
+      __dirname,
+      '..',
+      '..',
+      '..',
+      'node_modules',
+      '.bin',
+      'crx'
+    );
+
+    execSync(
+      `${crxPath} pack ./unpacked -o ReactDevTools.crx -p ${safeKeyPath}`,
+      {
+        cwd,
+      }
+    );
+  }
+
+  console.log(chalk.green('\nThe Chrome extension has been built!'));
+  console.log(chalk.green('You can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:chrome');
+};
+
+main();
diff --git a/packages/react-devtools-extensions/chrome/deploy.js b/packages/react-devtools-extensions/chrome/deploy.js
new file mode 100644
index 0000000000000..b8c276ec0ecb1
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/deploy.js
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const deploy = require('../deploy');
+
+const main = async () => await deploy('chrome');
+
+main();
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
new file mode 100644
index 0000000000000..06fa869de54a8
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -0,0 +1,52 @@
+{
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Chrome Developer Tools.",
+  "version": "4.4.0",
+  "version_name": "4.4.0",
+
+  "minimum_chrome_version": "49",
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html"
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/react_devtools_backend.js",
+    "build/renderer.js"
+  ],
+
+  "background": {
+    "scripts": ["build/background.js"],
+    "persistent": false
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/injectGlobalHook.js"],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/packages/react-devtools-extensions/chrome/now.json b/packages/react-devtools-extensions/chrome/now.json
new file mode 100644
index 0000000000000..e541ec866d001
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-chrome",
+  "alias": ["react-devtools-experimental-chrome"],
+  "files": ["index.html", "ReactDevTools.zip"]
+}
diff --git a/packages/react-devtools-extensions/chrome/test.js b/packages/react-devtools-extensions/chrome/test.js
new file mode 100644
index 0000000000000..12cc838b20907
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/test.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chromeLaunch = require('chrome-launch');
+const {resolve} = require('path');
+
+const EXTENSION_PATH = resolve('./chrome/build/unpacked');
+const START_URL = 'https://facebook.github.io/react/';
+
+chromeLaunch(START_URL, {
+  args: [`--load-extension=${EXTENSION_PATH}`],
+});
diff --git a/packages/react-devtools-extensions/deploy.chrome.html b/packages/react-devtools-extensions/deploy.chrome.html
new file mode 100644
index 0000000000000..eb70be0024e98
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.chrome.html
@@ -0,0 +1,8 @@
+<ol>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
+  <li>Double-click to extract</li>
+  <li>Navigate to <code>chrome://extensions/</code></li>
+  <li>Enable "Developer mode"</li>
+  <li>Click "LOAD UNPACKED"</li>
+  <li>Select extracted extension folder (<code>ReactDevTools</code>)</li>
+</ol>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/deploy.firefox.html b/packages/react-devtools-extensions/deploy.firefox.html
new file mode 100644
index 0000000000000..d2879a17c4932
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.firefox.html
@@ -0,0 +1,7 @@
+<ol>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
+  <li>Extract/unzip</li>
+  <li>Visit <code>about:debugging</code></li>
+  <li>Click "Load Temporary Add-on"</li>
+  <li>Select the <code>manifest.json</code> file inside of the extracted extension folder (<code>ReactDevTools</code>)</li>
+</ol>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/deploy.html b/packages/react-devtools-extensions/deploy.html
new file mode 100644
index 0000000000000..f6fa5b2de8938
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.html
@@ -0,0 +1,40 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>React DevTools pre-release</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+        sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <h1>
+    React DevTools pre-release
+  </h1>
+
+  <h3>
+    Created on <strong>%date%</strong> from
+    <a href="http://github.com/facebook/react/commit/%commit%"><code>%commit%</code></a>
+  </h3>
+
+  <p>
+    This is a preview build of the <a href="https://github.com/facebook/react">React DevTools extension</a>.
+  </p>
+
+  <h2>Installation instructions</h2>
+  %installation%
+  <p>
+    If you already have the React DevTools extension installed, you will need to temporarily disable or remove it in order to install this prerelease build.
+  </p>
+
+  <h2>Bug reports</h2>
+  <p>
+    Please report bugs as <a href="https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools">GitHub issues</a>.
+    Please include all of the info required to reproduce the bug (e.g. links, code, instructions).
+  </p>
+</body>
+</html>
diff --git a/packages/react-devtools-extensions/deploy.js b/packages/react-devtools-extensions/deploy.js
new file mode 100644
index 0000000000000..c9bfdaf6af73f
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.js
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec, execSync} = require('child_process');
+const {readFileSync, writeFileSync} = require('fs');
+const {join} = require('path');
+
+const main = async buildId => {
+  const root = join(__dirname, buildId);
+  const buildPath = join(root, 'build');
+
+  execSync(`node ${join(root, './build')}`, {
+    cwd: __dirname,
+    env: {
+      ...process.env,
+      NODE_ENV: 'production',
+    },
+    stdio: 'inherit',
+  });
+
+  await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {
+    cwd: root,
+  });
+
+  const file = readFileSync(join(root, 'now.json'));
+  const json = JSON.parse(file);
+  const alias = json.alias[0];
+
+  const commit = execSync('git rev-parse HEAD')
+    .toString()
+    .trim()
+    .substr(0, 7);
+
+  let date = new Date();
+  date = `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`;
+
+  const installationInstructions =
+    buildId === 'chrome'
+      ? readFileSync(join(__dirname, 'deploy.chrome.html'))
+      : readFileSync(join(__dirname, 'deploy.firefox.html'));
+
+  let html = readFileSync(join(__dirname, 'deploy.html')).toString();
+  html = html.replace(/%commit%/g, commit);
+  html = html.replace(/%date%/g, date);
+  html = html.replace(/%installation%/, installationInstructions);
+
+  writeFileSync(join(buildPath, 'index.html'), html);
+
+  await exec(`now deploy && now alias ${alias}`, {
+    cwd: buildPath,
+    stdio: 'inherit',
+  });
+
+  console.log(`Deployed to https://${alias}.now.sh`);
+};
+
+module.exports = main;
diff --git a/packages/react-devtools-extensions/firefox/README.md b/packages/react-devtools-extensions/firefox/README.md
new file mode 100644
index 0000000000000..c4bbc8d2de6c6
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/README.md
@@ -0,0 +1,12 @@
+# The Firefox extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:firefox` from the root directory.
+
+## Testing in Firefox
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.
+
+You can test upcoming releases of Firefox by downloading the Beta or Nightly build from the [Firefox releases](https://www.mozilla.org/en-US/firefox/channel/desktop/) page and then following the on-screen instructions after building.
diff --git a/packages/react-devtools-extensions/firefox/build.js b/packages/react-devtools-extensions/firefox/build.js
new file mode 100644
index 0000000000000..65cd0187c0977
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/build.js
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const build = require('../build');
+
+const main = async () => {
+  await build('firefox');
+
+  console.log(chalk.green('\nThe Firefox extension has been built!'));
+  console.log(chalk.green('You can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:firefox');
+  console.log(
+    chalk.gray('\n# You can also test against upcoming Firefox releases.')
+  );
+  console.log(
+    chalk.gray(
+      '# First download a release from https://www.mozilla.org/en-US/firefox/channel/desktop/'
+    )
+  );
+  console.log(
+    chalk.gray(
+      '# And then tell web-ext which release to use (eg firefoxdeveloperedition, nightly, beta):'
+    )
+  );
+  console.log('WEB_EXT_FIREFOX=nightly yarn run test:firefox');
+  console.log(chalk.gray('\n# You can test against older versions too:'));
+  console.log(
+    'WEB_EXT_FIREFOX=/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox-bin yarn run test:firefox'
+  );
+};
+
+main();
+
+module.exports = {main};
diff --git a/packages/react-devtools-extensions/firefox/deploy.js b/packages/react-devtools-extensions/firefox/deploy.js
new file mode 100644
index 0000000000000..49d83ead46123
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/deploy.js
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const deploy = require('../deploy');
+
+const main = async () => await deploy('firefox');
+
+main();
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
new file mode 100644
index 0000000000000..73669435ae368
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Firefox Developer Tools.",
+  "version": "4.4.0",
+
+  "applications": {
+    "gecko": {
+      "id": "@react-devtools",
+      "strict_min_version": "54.0"
+    }
+  },
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html",
+    "browser_style": true
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/react_devtools_backend.js",
+    "build/renderer.js"
+  ],
+
+  "background": {
+    "scripts": ["build/background.js"]
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*", "clipboardWrite"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/injectGlobalHook.js"],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/packages/react-devtools-extensions/firefox/now.json b/packages/react-devtools-extensions/firefox/now.json
new file mode 100644
index 0000000000000..5e61bb442f567
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-firefox",
+  "alias": ["react-devtools-experimental-firefox"],
+  "files": ["index.html", "ReactDevTools.zip"]
+}
diff --git a/packages/react-devtools-extensions/firefox/test.js b/packages/react-devtools-extensions/firefox/test.js
new file mode 100644
index 0000000000000..754c2f05e79b7
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/test.js
@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {Finder} = require('firefox-profile');
+const {resolve} = require('path');
+
+const EXTENSION_PATH = resolve('./firefox/build/unpacked');
+const START_URL = 'https://facebook.github.io/react/';
+
+const main = async () => {
+  const finder = new Finder();
+
+  // Use default Firefox profile for testing purposes.
+  // This prevents users from having to re-login-to sites before testing.
+  const findPathPromise = new Promise((resolvePromise, rejectPromise) => {
+    finder.getPath('default', (error, profile) => {
+      if (error) {
+        rejectPromise(error);
+      } else {
+        resolvePromise(profile);
+      }
+    });
+  });
+
+  const options = [
+    `--source-dir=${EXTENSION_PATH}`,
+    `--start-url=${START_URL}`,
+    '--browser-console',
+  ];
+
+  try {
+    const path = await findPathPromise;
+    const trimmedPath = path.replace(' ', '\\ ');
+    options.push(`--firefox-profile=${trimmedPath}`);
+  } catch (err) {
+    console.warn('Could not find default profile, using temporary profile.');
+  }
+
+  try {
+    await exec(`web-ext run ${options.join(' ')}`);
+  } catch (err) {
+    console.error('`web-ext run` failed', err.stdout, err.stderr);
+  }
+};
+
+main();
diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js
new file mode 100644
index 0000000000000..f8cd1b90be611
--- /dev/null
+++ b/packages/react-devtools-extensions/flow-typed/jest.js
@@ -0,0 +1,1190 @@
+'use strict';
+
+type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
+  (...args: TArguments): TReturn,
+  /**
+   * An object for introspecting mock calls
+   */
+  mock: {
+    /**
+     * An array that represents all calls that have been made into this mock
+     * function. Each call is represented by an array of arguments that were
+     * passed during the call.
+     */
+    calls: Array<TArguments>,
+    /**
+     * An array that contains all the object instances that have been
+     * instantiated from this mock function.
+     */
+    instances: Array<TReturn>,
+    /**
+     * An array that contains all the object results that have been
+     * returned by this mock function call
+     */
+    results: Array<{isThrow: boolean, value: TReturn}>,
+  },
+  /**
+   * Resets all information stored in the mockFn.mock.calls and
+   * mockFn.mock.instances arrays. Often this is useful when you want to clean
+   * up a mock's usage data between two assertions.
+   */
+  mockClear(): void,
+  /**
+   * Resets all information stored in the mock. This is useful when you want to
+   * completely restore a mock back to its initial state.
+   */
+  mockReset(): void,
+  /**
+   * Removes the mock and restores the initial implementation. This is useful
+   * when you want to mock functions in certain test cases and restore the
+   * original implementation in others. Beware that mockFn.mockRestore only
+   * works when mock was created with jest.spyOn. Thus you have to take care of
+   * restoration yourself when manually assigning jest.fn().
+   */
+  mockRestore(): void,
+  /**
+   * Accepts a function that should be used as the implementation of the mock.
+   * The mock itself will still record all calls that go into and instances
+   * that come from itself -- the only difference is that the implementation
+   * will also be executed when the mock is called.
+   */
+  mockImplementation(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Accepts a function that will be used as an implementation of the mock for
+   * one call to the mocked function. Can be chained so that multiple function
+   * calls produce different results.
+   */
+  mockImplementationOnce(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Accepts a string to use in test result output in place of "jest.fn()" to
+   * indicate which mock function is being referenced.
+   */
+  mockName(name: string): JestMockFn<TArguments, TReturn>,
+  /**
+   * Just a simple sugar function for returning `this`
+   */
+  mockReturnThis(): void,
+  /**
+   * Accepts a value that will be returned whenever the mock function is called.
+   */
+  mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,
+  /**
+   * Sugar for only returning a value once inside your mock
+   */
+  mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>,
+  /**
+   * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))
+   */
+  mockResolvedValue(value: TReturn): JestMockFn<TArguments, Promise<TReturn>>,
+  /**
+   * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))
+   */
+  mockResolvedValueOnce(
+    value: TReturn
+  ): JestMockFn<TArguments, Promise<TReturn>>,
+  /**
+   * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))
+   */
+  mockRejectedValue(value: TReturn): JestMockFn<TArguments, Promise<any>>,
+  /**
+   * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))
+   */
+  mockRejectedValueOnce(value: TReturn): JestMockFn<TArguments, Promise<any>>,
+};
+
+type JestAsymmetricEqualityType = {
+  /**
+   * A custom Jasmine equality tester
+   */
+  asymmetricMatch(value: mixed): boolean,
+};
+
+type JestCallsType = {
+  allArgs(): mixed,
+  all(): mixed,
+  any(): boolean,
+  count(): number,
+  first(): mixed,
+  mostRecent(): mixed,
+  reset(): void,
+};
+
+type JestClockType = {
+  install(): void,
+  mockDate(date: Date): void,
+  tick(milliseconds?: number): void,
+  uninstall(): void,
+};
+
+type JestMatcherResult = {
+  message?: string | (() => string),
+  pass: boolean,
+};
+
+type JestMatcher = (
+  actual: any,
+  expected: any
+) => JestMatcherResult | Promise<JestMatcherResult>;
+
+type JestPromiseType = {
+  /**
+   * Use rejects to unwrap the reason of a rejected promise so any other
+   * matcher can be chained. If the promise is fulfilled the assertion fails.
+   */
+  // eslint-disable-next-line no-use-before-define
+  rejects: JestExpectType,
+  /**
+   * Use resolves to unwrap the value of a fulfilled promise so any other
+   * matcher can be chained. If the promise is rejected the assertion fails.
+   */
+  // eslint-disable-next-line no-use-before-define
+  resolves: JestExpectType,
+};
+
+/**
+ * Jest allows functions and classes to be used as test names in test() and
+ * describe()
+ */
+type JestTestName = string | Function;
+
+/**
+ *  Plugin: jest-styled-components
+ */
+
+type JestStyledComponentsMatcherValue =
+  | string
+  | JestAsymmetricEqualityType
+  | RegExp
+  | typeof undefined;
+
+type JestStyledComponentsMatcherOptions = {
+  media?: string,
+  modifier?: string,
+  supports?: string,
+};
+
+type JestStyledComponentsMatchersType = {
+  toHaveStyleRule(
+    property: string,
+    value: JestStyledComponentsMatcherValue,
+    options?: JestStyledComponentsMatcherOptions
+  ): void,
+};
+
+/**
+ *  Plugin: jest-enzyme
+ */
+type EnzymeMatchersType = {
+  // 5.x
+  toBeEmpty(): void,
+  toBePresent(): void,
+  // 6.x
+  toBeChecked(): void,
+  toBeDisabled(): void,
+  toBeEmptyRender(): void,
+  toContainMatchingElement(selector: string): void,
+  toContainMatchingElements(n: number, selector: string): void,
+  toContainExactlyOneMatchingElement(selector: string): void,
+  toContainReact(element: React$Element<any>): void,
+  toExist(): void,
+  toHaveClassName(className: string): void,
+  toHaveHTML(html: string): void,
+  toHaveProp: ((propKey: string, propValue?: any) => void) &
+    ((props: {}) => void),
+  toHaveRef(refName: string): void,
+  toHaveState: ((stateKey: string, stateValue?: any) => void) &
+    ((state: {}) => void),
+  toHaveStyle: ((styleKey: string, styleValue?: any) => void) &
+    ((style: {}) => void),
+  toHaveTagName(tagName: string): void,
+  toHaveText(text: string): void,
+  toHaveValue(value: any): void,
+  toIncludeText(text: string): void,
+  toMatchElement(
+    element: React$Element<any>,
+    options?: {|ignoreProps?: boolean, verbose?: boolean|}
+  ): void,
+  toMatchSelector(selector: string): void,
+  // 7.x
+  toHaveDisplayName(name: string): void,
+};
+
+// DOM testing library extensions https://github.com/kentcdodds/dom-testing-library#custom-jest-matchers
+type DomTestingLibraryType = {
+  toBeDisabled(): void,
+  toBeEmpty(): void,
+  toBeInTheDocument(): void,
+  toBeVisible(): void,
+  toContainElement(element: HTMLElement | null): void,
+  toContainHTML(htmlText: string): void,
+  toHaveAttribute(name: string, expectedValue?: string): void,
+  toHaveClass(...classNames: string[]): void,
+  toHaveFocus(): void,
+  toHaveFormValues(expectedValues: {[name: string]: any}): void,
+  toHaveStyle(css: string): void,
+  toHaveTextContent(
+    content: string | RegExp,
+    options?: {normalizeWhitespace: boolean}
+  ): void,
+  toBeInTheDOM(): void,
+};
+
+// Jest JQuery Matchers: https://github.com/unindented/custom-jquery-matchers
+type JestJQueryMatchersType = {
+  toExist(): void,
+  toHaveLength(len: number): void,
+  toHaveId(id: string): void,
+  toHaveClass(className: string): void,
+  toHaveTag(tag: string): void,
+  toHaveAttr(key: string, val?: any): void,
+  toHaveProp(key: string, val?: any): void,
+  toHaveText(text: string | RegExp): void,
+  toHaveData(key: string, val?: any): void,
+  toHaveValue(val: any): void,
+  toHaveCss(css: {[key: string]: any}): void,
+  toBeChecked(): void,
+  toBeDisabled(): void,
+  toBeEmpty(): void,
+  toBeHidden(): void,
+  toBeSelected(): void,
+  toBeVisible(): void,
+  toBeFocused(): void,
+  toBeInDom(): void,
+  toBeMatchedBy(sel: string): void,
+  toHaveDescendant(sel: string): void,
+  toHaveDescendantWithText(sel: string, text: string | RegExp): void,
+};
+
+// Jest Extended Matchers: https://github.com/jest-community/jest-extended
+type JestExtendedMatchersType = {
+  /**
+   * Note: Currently unimplemented
+   * Passing assertion
+   *
+   * @param {String} message
+   */
+  //  pass(message: string): void;
+
+  /**
+   * Note: Currently unimplemented
+   * Failing assertion
+   *
+   * @param {String} message
+   */
+  //  fail(message: string): void;
+
+  /**
+   * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.
+   */
+  toBeEmpty(): void,
+
+  /**
+   * Use .toBeOneOf when checking if a value is a member of a given Array.
+   * @param {Array.<*>} members
+   */
+  toBeOneOf(members: any[]): void,
+
+  /**
+   * Use `.toBeNil` when checking a value is `null` or `undefined`.
+   */
+  toBeNil(): void,
+
+  /**
+   * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.
+   * @param {Function} predicate
+   */
+  toSatisfy(predicate: (n: any) => boolean): void,
+
+  /**
+   * Use `.toBeArray` when checking if a value is an `Array`.
+   */
+  toBeArray(): void,
+
+  /**
+   * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.
+   * @param {Number} x
+   */
+  toBeArrayOfSize(x: number): void,
+
+  /**
+   * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.
+   * @param {Array.<*>} members
+   */
+  toIncludeAllMembers(members: any[]): void,
+
+  /**
+   * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.
+   * @param {Array.<*>} members
+   */
+  toIncludeAnyMembers(members: any[]): void,
+
+  /**
+   * Use `.toSatisfyAll` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean` for all values in an array.
+   * @param {Function} predicate
+   */
+  toSatisfyAll(predicate: (n: any) => boolean): void,
+
+  /**
+   * Use `.toBeBoolean` when checking if a value is a `Boolean`.
+   */
+  toBeBoolean(): void,
+
+  /**
+   * Use `.toBeTrue` when checking a value is equal (===) to `true`.
+   */
+  toBeTrue(): void,
+
+  /**
+   * Use `.toBeFalse` when checking a value is equal (===) to `false`.
+   */
+  toBeFalse(): void,
+
+  /**
+   * Use .toBeDate when checking if a value is a Date.
+   */
+  toBeDate(): void,
+
+  /**
+   * Use `.toBeFunction` when checking if a value is a `Function`.
+   */
+  toBeFunction(): void,
+
+  /**
+   * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.
+   *
+   * Note: Required Jest version >22
+   * Note: Your mock functions will have to be asynchronous to cause the timestamps inside of Jest to occur in a differentJS event loop, otherwise the mock timestamps will all be the same
+   *
+   * @param {Mock} mock
+   */
+  toHaveBeenCalledBefore(mock: JestMockFn<any, any>): void,
+
+  /**
+   * Use `.toBeNumber` when checking if a value is a `Number`.
+   */
+  toBeNumber(): void,
+
+  /**
+   * Use `.toBeNaN` when checking a value is `NaN`.
+   */
+  toBeNaN(): void,
+
+  /**
+   * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.
+   */
+  toBeFinite(): void,
+
+  /**
+   * Use `.toBePositive` when checking if a value is a positive `Number`.
+   */
+  toBePositive(): void,
+
+  /**
+   * Use `.toBeNegative` when checking if a value is a negative `Number`.
+   */
+  toBeNegative(): void,
+
+  /**
+   * Use `.toBeEven` when checking if a value is an even `Number`.
+   */
+  toBeEven(): void,
+
+  /**
+   * Use `.toBeOdd` when checking if a value is an odd `Number`.
+   */
+  toBeOdd(): void,
+
+  /**
+   * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).
+   *
+   * @param {Number} start
+   * @param {Number} end
+   */
+  toBeWithin(start: number, end: number): void,
+
+  /**
+   * Use `.toBeObject` when checking if a value is an `Object`.
+   */
+  toBeObject(): void,
+
+  /**
+   * Use `.toContainKey` when checking if an object contains the provided key.
+   *
+   * @param {String} key
+   */
+  toContainKey(key: string): void,
+
+  /**
+   * Use `.toContainKeys` when checking if an object has all of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainAllKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.
+   *
+   * @param {Array.<String>} keys
+   */
+  toContainAnyKeys(keys: string[]): void,
+
+  /**
+   * Use `.toContainValue` when checking if an object contains the provided value.
+   *
+   * @param {*} value
+   */
+  toContainValue(value: any): void,
+
+  /**
+   * Use `.toContainValues` when checking if an object contains all of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainValues(values: any[]): void,
+
+  /**
+   * Use `.toContainAllValues` when checking if an object only contains all of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainAllValues(values: any[]): void,
+
+  /**
+   * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.
+   *
+   * @param {Array.<*>} values
+   */
+  toContainAnyValues(values: any[]): void,
+
+  /**
+   * Use `.toContainEntry` when checking if an object contains the provided entry.
+   *
+   * @param {Array.<String, String>} entry
+   */
+  toContainEntry(entry: [string, string]): void,
+
+  /**
+   * Use `.toContainEntries` when checking if an object contains all of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainAllEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.
+   *
+   * @param {Array.<Array.<String, String>>} entries
+   */
+  toContainAnyEntries(entries: [string, string][]): void,
+
+  /**
+   * Use `.toBeExtensible` when checking if an object is extensible.
+   */
+  toBeExtensible(): void,
+
+  /**
+   * Use `.toBeFrozen` when checking if an object is frozen.
+   */
+  toBeFrozen(): void,
+
+  /**
+   * Use `.toBeSealed` when checking if an object is sealed.
+   */
+  toBeSealed(): void,
+
+  /**
+   * Use `.toBeString` when checking if a value is a `String`.
+   */
+  toBeString(): void,
+
+  /**
+   * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.
+   *
+   * @param {String} string
+   */
+  toEqualCaseInsensitive(string: string): void,
+
+  /**
+   * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.
+   *
+   * @param {String} prefix
+   */
+  toStartWith(prefix: string): void,
+
+  /**
+   * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.
+   *
+   * @param {String} suffix
+   */
+  toEndWith(suffix: string): void,
+
+  /**
+   * Use `.toInclude` when checking if a `String` includes the given `String` substring.
+   *
+   * @param {String} substring
+   */
+  toInclude(substring: string): void,
+
+  /**
+   * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.
+   *
+   * @param {String} substring
+   * @param {Number} times
+   */
+  toIncludeRepeated(substring: string, times: number): void,
+
+  /**
+   * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.
+   *
+   * @param {Array.<String>} substring
+   */
+  toIncludeMultiple(substring: string[]): void,
+};
+
+interface JestExpectType {
+  not: JestExpectType &
+    EnzymeMatchersType &
+    DomTestingLibraryType &
+    JestJQueryMatchersType &
+    JestStyledComponentsMatchersType &
+    JestExtendedMatchersType;
+  /**
+   * If you have a mock function, you can use .lastCalledWith to test what
+   * arguments it was last called with.
+   */
+  lastCalledWith(...args: Array<any>): void;
+  /**
+   * toBe just checks that a value is what you expect. It uses === to check
+   * strict equality.
+   */
+  toBe(value: any): void;
+  /**
+   * Use .toBeCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toBeCalledWith(...args: Array<any>): void;
+  /**
+   * Using exact equality with floating point numbers is a bad idea. Rounding
+   * means that intuitive things fail.
+   */
+  toBeCloseTo(num: number, delta: any): void;
+  /**
+   * Use .toBeDefined to check that a variable is not undefined.
+   */
+  toBeDefined(): void;
+  /**
+   * Use .toBeFalsy when you don't care what a value is, you just want to
+   * ensure a value is false in a boolean context.
+   */
+  toBeFalsy(): void;
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThan.
+   */
+  toBeGreaterThan(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
+   */
+  toBeGreaterThanOrEqual(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeLessThan.
+   */
+  toBeLessThan(number: number): void;
+  /**
+   * To compare floating point numbers, you can use toBeLessThanOrEqual.
+   */
+  toBeLessThanOrEqual(number: number): void;
+  /**
+   * Use .toBeInstanceOf(Class) to check that an object is an instance of a
+   * class.
+   */
+  toBeInstanceOf(cls: Class<*>): void;
+  /**
+   * .toBeNull() is the same as .toBe(null) but the error messages are a bit
+   * nicer.
+   */
+  toBeNull(): void;
+  /**
+   * Use .toBeTruthy when you don't care what a value is, you just want to
+   * ensure a value is true in a boolean context.
+   */
+  toBeTruthy(): void;
+  /**
+   * Use .toBeUndefined to check that a variable is undefined.
+   */
+  toBeUndefined(): void;
+  /**
+   * Use .toContain when you want to check that an item is in a list. For
+   * testing the items in the list, this uses ===, a strict equality check.
+   */
+  toContain(item: any): void;
+  /**
+   * Use .toContainEqual when you want to check that an item is in a list. For
+   * testing the items in the list, this matcher recursively checks the
+   * equality of all fields, rather than checking for object identity.
+   */
+  toContainEqual(item: any): void;
+  /**
+   * Use .toEqual when you want to check that two objects have the same value.
+   * This matcher recursively checks the equality of all fields, rather than
+   * checking for object identity.
+   */
+  toEqual(value: any): void;
+  /**
+   * Use .toHaveBeenCalled to ensure that a mock function got called.
+   */
+  toHaveBeenCalled(): void;
+  toBeCalled(): void;
+  /**
+   * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
+   * number of times.
+   */
+  toHaveBeenCalledTimes(number: number): void;
+  toBeCalledTimes(number: number): void;
+  /**
+   *
+   */
+  toHaveBeenNthCalledWith(nthCall: number, ...args: Array<any>): void;
+  nthCalledWith(nthCall: number, ...args: Array<any>): void;
+  /**
+   *
+   */
+  toHaveReturned(): void;
+  toReturn(): void;
+  /**
+   *
+   */
+  toHaveReturnedTimes(number: number): void;
+  toReturnTimes(number: number): void;
+  /**
+   *
+   */
+  toHaveReturnedWith(value: any): void;
+  toReturnWith(value: any): void;
+  /**
+   *
+   */
+  toHaveLastReturnedWith(value: any): void;
+  lastReturnedWith(value: any): void;
+  /**
+   *
+   */
+  toHaveNthReturnedWith(nthCall: number, value: any): void;
+  nthReturnedWith(nthCall: number, value: any): void;
+  /**
+   * Use .toHaveBeenCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toHaveBeenCalledWith(...args: Array<any>): void;
+  toBeCalledWith(...args: Array<any>): void;
+  /**
+   * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
+   * with specific arguments.
+   */
+  toHaveBeenLastCalledWith(...args: Array<any>): void;
+  lastCalledWith(...args: Array<any>): void;
+  /**
+   * Check that an object has a .length property and it is set to a certain
+   * numeric value.
+   */
+  toHaveLength(number: number): void;
+  /**
+   *
+   */
+  toHaveProperty(propPath: string, value?: any): void;
+  /**
+   * Use .toMatch to check that a string matches a regular expression or string.
+   */
+  toMatch(regexpOrString: RegExp | string): void;
+  /**
+   * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
+   */
+  toMatchObject(object: Object | Array<Object>): void;
+  /**
+   * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.
+   */
+  toStrictEqual(value: any): void;
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(propertyMatchers?: any, name?: string): void;
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(name: string): void;
+
+  toMatchInlineSnapshot(snapshot?: string): void;
+  toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;
+  /**
+   * Use .toThrow to test that a function throws when it is called.
+   * If you want to test that a specific error gets thrown, you can provide an
+   * argument to toThrow. The argument can be a string for the error message,
+   * a class for the error, or a regex that should match the error.
+   *
+   * Alias: .toThrowError
+   */
+  toThrow(message?: string | Error | Class<Error> | RegExp): void;
+  toThrowError(message?: string | Error | Class<Error> | RegExp): void;
+  /**
+   * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
+   * matching the most recent snapshot when it is called.
+   */
+  toThrowErrorMatchingSnapshot(): void;
+  toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;
+}
+
+type JestObjectType = {
+  /**
+   *  Disables automatic mocking in the module loader.
+   *
+   *  After this method is called, all `require()`s will return the real
+   *  versions of each module (rather than a mocked version).
+   */
+  disableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of disableAutomock
+   */
+  autoMockOff(): JestObjectType,
+  /**
+   * Enables automatic mocking in the module loader.
+   */
+  enableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of enableAutomock
+   */
+  autoMockOn(): JestObjectType,
+  /**
+   * Clears the mock.calls and mock.instances properties of all mocks.
+   * Equivalent to calling .mockClear() on every mocked function.
+   */
+  clearAllMocks(): JestObjectType,
+  /**
+   * Resets the state of all mocks. Equivalent to calling .mockReset() on every
+   * mocked function.
+   */
+  resetAllMocks(): JestObjectType,
+  /**
+   * Restores all mocks back to their original value.
+   */
+  restoreAllMocks(): JestObjectType,
+  /**
+   * Removes any pending timers from the timer system.
+   */
+  clearAllTimers(): void,
+  /**
+   * Returns the number of fake timers still left to run.
+   */
+  getTimerCount(): number,
+  /**
+   * The same as `mock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  doMock(moduleName: string, moduleFactory?: any): JestObjectType,
+  /**
+   * The same as `unmock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  dontMock(moduleName: string): JestObjectType,
+  /**
+   * Returns a new, unused mock function. Optionally takes a mock
+   * implementation.
+   */
+  fn<TArguments: $ReadOnlyArray<*>, TReturn>(
+    implementation?: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Determines if the given function is a mocked function.
+   */
+  isMockFunction(fn: Function): boolean,
+  /**
+   * Given the name of a module, use the automatic mocking system to generate a
+   * mocked version of the module for you.
+   */
+  genMockFromModule(moduleName: string): any,
+  /**
+   * Mocks a module with an auto-mocked version when it is being required.
+   *
+   * The second argument can be used to specify an explicit module factory that
+   * is being run instead of using Jest's automocking feature.
+   *
+   * The third argument can be used to create virtual mocks -- mocks of modules
+   * that don't exist anywhere in the system.
+   */
+  mock(
+    moduleName: string,
+    moduleFactory?: any,
+    options?: Object
+  ): JestObjectType,
+  /**
+   * Returns the actual module instead of a mock, bypassing all checks on
+   * whether the module should receive a mock implementation or not.
+   */
+  requireActual(moduleName: string): any,
+  /**
+   * Returns a mock module instead of the actual module, bypassing all checks
+   * on whether the module should be required normally or not.
+   */
+  requireMock(moduleName: string): any,
+  /**
+   * Resets the module registry - the cache of all required modules. This is
+   * useful to isolate modules where local state might conflict between tests.
+   */
+  resetModules(): JestObjectType,
+
+  /**
+   * Creates a sandbox registry for the modules that are loaded inside the
+   * callback function. This is useful to isolate specific modules for every
+   * test so that local module state doesn't conflict between tests.
+   */
+  isolateModules(fn: () => void): JestObjectType,
+
+  /**
+   * Exhausts the micro-task queue (usually interfaced in node via
+   * process.nextTick).
+   */
+  runAllTicks(): void,
+  /**
+   * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
+   * setInterval(), and setImmediate()).
+   */
+  runAllTimers(): void,
+  /**
+   * Exhausts all tasks queued by setImmediate().
+   */
+  runAllImmediates(): void,
+  /**
+   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+   * or setInterval() and setImmediate()).
+   */
+  advanceTimersByTime(msToRun: number): void,
+  /**
+   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+   * or setInterval() and setImmediate()).
+   *
+   * Renamed to `advanceTimersByTime`.
+   */
+  runTimersToTime(msToRun: number): void,
+  /**
+   * Executes only the macro-tasks that are currently pending (i.e., only the
+   * tasks that have been queued by setTimeout() or setInterval() up to this
+   * point)
+   */
+  runOnlyPendingTimers(): void,
+  /**
+   * Explicitly supplies the mock object that the module system should return
+   * for the specified module. Note: It is recommended to use jest.mock()
+   * instead.
+   */
+  setMock(moduleName: string, moduleExports: any): JestObjectType,
+  /**
+   * Indicates that the module system should never return a mocked version of
+   * the specified module from require() (e.g. that it should always return the
+   * real module).
+   */
+  unmock(moduleName: string): JestObjectType,
+  /**
+   * Instructs Jest to use fake versions of the standard timer functions
+   * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
+   * setImmediate and clearImmediate).
+   */
+  useFakeTimers(): JestObjectType,
+  /**
+   * Instructs Jest to use the real versions of the standard timer functions.
+   */
+  useRealTimers(): JestObjectType,
+  /**
+   * Creates a mock function similar to jest.fn but also tracks calls to
+   * object[methodName].
+   */
+  spyOn(
+    object: Object,
+    methodName: string,
+    accessType?: 'get' | 'set'
+  ): JestMockFn<any, any>,
+  /**
+   * Set the default timeout interval for tests and before/after hooks in milliseconds.
+   * Note: The default timeout interval is 5 seconds if this method is not called.
+   */
+  setTimeout(timeout: number): JestObjectType,
+};
+
+type JestSpyType = {
+  calls: JestCallsType,
+};
+
+/** Runs this function after every test inside this context */
+declare function afterEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before every test inside this context */
+declare function beforeEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function after all tests have finished inside this context */
+declare function afterAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before any tests have started inside this context */
+declare function beforeAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+
+/** A context for grouping tests together */
+declare var describe: {
+  /**
+   * Creates a block that groups together several related tests in one "test suite"
+   */
+  (name: JestTestName, fn: () => void): void,
+
+  /**
+   * Only run this describe block
+   */
+  only(name: JestTestName, fn: () => void): void,
+
+  /**
+   * Skip running this describe block
+   */
+  skip(name: JestTestName, fn: () => void): void,
+
+  /**
+   * each runs this test against array of argument arrays per each run
+   *
+   * @param {table} table of Test
+   */
+  each(
+    ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+  ): (
+    name: JestTestName,
+    fn?: (...args: Array<any>) => ?Promise<mixed>,
+    timeout?: number
+  ) => void,
+};
+
+/** An individual test unit */
+declare var it: {
+  /**
+   * An individual test unit
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  (
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * Only run this test
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  only(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): {
+    each(
+      ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+    ): (
+      name: JestTestName,
+      fn?: (...args: Array<any>) => ?Promise<mixed>,
+      timeout?: number
+    ) => void,
+  },
+
+  /**
+   * Skip running this test
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  skip(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * Highlight planned tests in the summary output
+   *
+   * @param {String} Name of Test to do
+   */
+  todo(name: string): void,
+
+  /**
+   * Run the test concurrently
+   *
+   * @param {JestTestName} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  concurrent(
+    name: JestTestName,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+
+  /**
+   * each runs this test against array of argument arrays per each run
+   *
+   * @param {table} table of Test
+   */
+  each(
+    ...table: Array<Array<mixed> | mixed> | [Array<string>, string]
+  ): (
+    name: JestTestName,
+    fn?: (...args: Array<any>) => ?Promise<mixed>,
+    timeout?: number
+  ) => void,
+};
+
+declare function fit(
+  name: JestTestName,
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** An individual test unit */
+declare var test: typeof it;
+/** A disabled group of tests */
+declare var xdescribe: typeof describe;
+/** A focused group of tests */
+declare var fdescribe: typeof describe;
+/** A disabled individual test */
+declare var xit: typeof it;
+/** A disabled individual test */
+declare var xtest: typeof it;
+
+type JestPrettyFormatColors = {
+  comment: {close: string, open: string},
+  content: {close: string, open: string},
+  prop: {close: string, open: string},
+  tag: {close: string, open: string},
+  value: {close: string, open: string},
+};
+
+type JestPrettyFormatIndent = string => string;
+// eslint-disable-next-line no-unused-vars
+type JestPrettyFormatRefs = Array<any>;
+type JestPrettyFormatPrint = any => string;
+// eslint-disable-next-line no-unused-vars
+type JestPrettyFormatStringOrNull = string | null;
+
+type JestPrettyFormatOptions = {|
+  callToJSON: boolean,
+  edgeSpacing: string,
+  escapeRegex: boolean,
+  highlight: boolean,
+  indent: number,
+  maxDepth: number,
+  min: boolean,
+  // eslint-disable-next-line no-use-before-define
+  plugins: JestPrettyFormatPlugins,
+  printFunctionName: boolean,
+  spacing: string,
+  theme: {|
+    comment: string,
+    content: string,
+    prop: string,
+    tag: string,
+    value: string,
+  |},
+|};
+
+type JestPrettyFormatPlugin = {
+  print: (
+    val: any,
+    serialize: JestPrettyFormatPrint,
+    indent: JestPrettyFormatIndent,
+    opts: JestPrettyFormatOptions,
+    colors: JestPrettyFormatColors
+  ) => string,
+  test: any => boolean,
+};
+
+type JestPrettyFormatPlugins = Array<JestPrettyFormatPlugin>;
+
+/** The expect function is used every time you want to test a value */
+declare var expect: {
+  /** The object that you want to make assertions against */
+  (
+    value: any
+  ): JestExpectType &
+    JestPromiseType &
+    EnzymeMatchersType &
+    DomTestingLibraryType &
+    JestJQueryMatchersType &
+    JestStyledComponentsMatchersType &
+    JestExtendedMatchersType,
+
+  /** Add additional Jasmine matchers to Jest's roster */
+  extend(matchers: {[name: string]: JestMatcher}): void,
+  /** Add a module that formats application-specific data structures. */
+  addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,
+  assertions(expectedAssertions: number): void,
+  hasAssertions(): void,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): any,
+  arrayContaining(value: Array<mixed>): Array<mixed>,
+  objectContaining(value: Object): Object,
+  /** Matches any received string that contains the exact expected string. */
+  stringContaining(value: string): string,
+  stringMatching(value: string | RegExp): string,
+  not: {
+    arrayContaining: (value: $ReadOnlyArray<mixed>) => Array<mixed>,
+    objectContaining: (value: {}) => Object,
+    stringContaining: (value: string) => string,
+    stringMatching: (value: string | RegExp) => string,
+  },
+};
+
+// TODO handle return type
+// http://jasmine.github.io/2.4/introduction.html#section-Spies
+declare function spyOn(value: mixed, method: string): Object;
+
+/** Holds all functions related to manipulating test runner */
+declare var jest: JestObjectType;
+
+/**
+ * The global Jasmine object, this is generally not exposed as the public API,
+ * using features inside here could break in later versions of Jest.
+ */
+declare var jasmine: {
+  DEFAULT_TIMEOUT_INTERVAL: number,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): any,
+  arrayContaining(value: Array<mixed>): Array<mixed>,
+  clock(): JestClockType,
+  createSpy(name: string): JestSpyType,
+  createSpyObj(
+    baseName: string,
+    methodNames: Array<string>
+  ): {[methodName: string]: JestSpyType},
+  objectContaining(value: Object): Object,
+  stringMatching(value: string): string,
+};
diff --git a/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js b/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
new file mode 100644
index 0000000000000..cd2ae506d2ef5
--- /dev/null
+++ b/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -0,0 +1,84 @@
+// flow-typed signature: b6bb53397d83d2d821e258cc73818d1b
+// flow-typed version: 9c71eca8ef/react-test-renderer_v16.x.x/flow_>=v0.47.x
+
+// Type definitions for react-test-renderer 16.x.x
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
+
+'use strict';
+
+type ReactComponentInstance = React$Component<any>;
+
+type ReactTestRendererJSON = {
+  type: string,
+  props: {[propName: string]: any},
+  children: null | ReactTestRendererJSON[],
+};
+
+type ReactTestRendererTree = ReactTestRendererJSON & {
+  nodeType: 'component' | 'host',
+  instance: ?ReactComponentInstance,
+  rendered: null | ReactTestRendererTree,
+};
+
+type ReactTestInstance = {
+  instance: ?ReactComponentInstance,
+  type: string,
+  props: {[propName: string]: any},
+  parent: null | ReactTestInstance,
+  children: Array<ReactTestInstance | string>,
+
+  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
+  findByType(type: React$ElementType): ReactTestInstance,
+  findByProps(props: {[propName: string]: any}): ReactTestInstance,
+
+  findAll(
+    predicate: (node: ReactTestInstance) => boolean,
+    options?: {deep: boolean}
+  ): ReactTestInstance[],
+  findAllByType(
+    type: React$ElementType,
+    options?: {deep: boolean}
+  ): ReactTestInstance[],
+  findAllByProps(
+    props: {[propName: string]: any},
+    options?: {deep: boolean}
+  ): ReactTestInstance[],
+};
+
+type TestRendererOptions = {
+  createNodeMock(element: React$Element<any>): any,
+};
+
+declare module 'react-test-renderer' {
+  // eslint-disable-next-line no-inner-declarations
+  declare export type ReactTestRenderer = {
+    toJSON(): null | ReactTestRendererJSON,
+    toTree(): null | ReactTestRendererTree,
+    unmount(nextElement?: React$Element<any>): void,
+    update(nextElement: React$Element<any>): void,
+    getInstance(): ?ReactComponentInstance,
+    root: ReactTestInstance,
+  };
+
+  declare type Thenable = {
+    then(resolve: () => mixed, reject?: () => mixed): mixed,
+  };
+
+  declare function create(
+    nextElement: React$Element<any>,
+    options?: TestRendererOptions
+  ): ReactTestRenderer;
+
+  declare function act(callback: () => ?Thenable): Thenable;
+}
+
+declare module 'react-test-renderer/shallow' {
+  declare export default class ShallowRenderer {
+    static createRenderer(): ShallowRenderer;
+    getMountedInstance(): ReactTestInstance;
+    getRenderOutput<E: React$Element<any>>(): E;
+    getRenderOutput(): React$Element<any>;
+    render(element: React$Element<any>, context?: any): void;
+    unmount(): void;
+  }
+}
diff --git a/packages/react-devtools-extensions/icons/128-deadcode.png b/packages/react-devtools-extensions/icons/128-deadcode.png
new file mode 100644
index 0000000000000..b6ecc88e13ac0
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-deadcode.png differ
diff --git a/packages/react-devtools-extensions/icons/128-development.png b/packages/react-devtools-extensions/icons/128-development.png
new file mode 100644
index 0000000000000..b6ecc88e13ac0
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-development.png differ
diff --git a/packages/react-devtools-extensions/icons/128-disabled.png b/packages/react-devtools-extensions/icons/128-disabled.png
new file mode 100644
index 0000000000000..67b1c9a31a6df
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-disabled.png differ
diff --git a/packages/react-devtools-extensions/icons/128-outdated.png b/packages/react-devtools-extensions/icons/128-outdated.png
new file mode 100644
index 0000000000000..05792b762878c
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-outdated.png differ
diff --git a/packages/react-devtools-extensions/icons/128-production.png b/packages/react-devtools-extensions/icons/128-production.png
new file mode 100644
index 0000000000000..b9327946441f5
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-production.png differ
diff --git a/packages/react-devtools-extensions/icons/128-unminified.png b/packages/react-devtools-extensions/icons/128-unminified.png
new file mode 100644
index 0000000000000..b6ecc88e13ac0
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-unminified.png differ
diff --git a/packages/react-devtools-extensions/icons/16-deadcode.png b/packages/react-devtools-extensions/icons/16-deadcode.png
new file mode 100644
index 0000000000000..33d99798e07b2
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-deadcode.png differ
diff --git a/packages/react-devtools-extensions/icons/16-development.png b/packages/react-devtools-extensions/icons/16-development.png
new file mode 100644
index 0000000000000..33d99798e07b2
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-development.png differ
diff --git a/packages/react-devtools-extensions/icons/16-disabled.png b/packages/react-devtools-extensions/icons/16-disabled.png
new file mode 100644
index 0000000000000..2f0317ea3fd6b
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-disabled.png differ
diff --git a/packages/react-devtools-extensions/icons/16-outdated.png b/packages/react-devtools-extensions/icons/16-outdated.png
new file mode 100644
index 0000000000000..aa42bfe0b4e0c
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-outdated.png differ
diff --git a/packages/react-devtools-extensions/icons/16-production.png b/packages/react-devtools-extensions/icons/16-production.png
new file mode 100644
index 0000000000000..1c253dca5d56d
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-production.png differ
diff --git a/packages/react-devtools-extensions/icons/16-unminified.png b/packages/react-devtools-extensions/icons/16-unminified.png
new file mode 100644
index 0000000000000..33d99798e07b2
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-unminified.png differ
diff --git a/packages/react-devtools-extensions/icons/32-deadcode.png b/packages/react-devtools-extensions/icons/32-deadcode.png
new file mode 100644
index 0000000000000..c4a6bda3e6a6d
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-deadcode.png differ
diff --git a/packages/react-devtools-extensions/icons/32-development.png b/packages/react-devtools-extensions/icons/32-development.png
new file mode 100644
index 0000000000000..c4a6bda3e6a6d
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-development.png differ
diff --git a/packages/react-devtools-extensions/icons/32-disabled.png b/packages/react-devtools-extensions/icons/32-disabled.png
new file mode 100644
index 0000000000000..7c75045323888
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-disabled.png differ
diff --git a/packages/react-devtools-extensions/icons/32-outdated.png b/packages/react-devtools-extensions/icons/32-outdated.png
new file mode 100644
index 0000000000000..6eae901bf0588
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-outdated.png differ
diff --git a/packages/react-devtools-extensions/icons/32-production.png b/packages/react-devtools-extensions/icons/32-production.png
new file mode 100644
index 0000000000000..9192719e5b50f
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-production.png differ
diff --git a/packages/react-devtools-extensions/icons/32-unminified.png b/packages/react-devtools-extensions/icons/32-unminified.png
new file mode 100644
index 0000000000000..c4a6bda3e6a6d
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-unminified.png differ
diff --git a/packages/react-devtools-extensions/icons/48-deadcode.png b/packages/react-devtools-extensions/icons/48-deadcode.png
new file mode 100644
index 0000000000000..f3224021a560c
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-deadcode.png differ
diff --git a/packages/react-devtools-extensions/icons/48-development.png b/packages/react-devtools-extensions/icons/48-development.png
new file mode 100644
index 0000000000000..f3224021a560c
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-development.png differ
diff --git a/packages/react-devtools-extensions/icons/48-disabled.png b/packages/react-devtools-extensions/icons/48-disabled.png
new file mode 100644
index 0000000000000..372b6e00e88a8
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-disabled.png differ
diff --git a/packages/react-devtools-extensions/icons/48-outdated.png b/packages/react-devtools-extensions/icons/48-outdated.png
new file mode 100644
index 0000000000000..342fedea1ed50
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-outdated.png differ
diff --git a/packages/react-devtools-extensions/icons/48-production.png b/packages/react-devtools-extensions/icons/48-production.png
new file mode 100644
index 0000000000000..9aac93a622bfa
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-production.png differ
diff --git a/packages/react-devtools-extensions/icons/48-unminified.png b/packages/react-devtools-extensions/icons/48-unminified.png
new file mode 100644
index 0000000000000..f3224021a560c
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-unminified.png differ
diff --git a/packages/react-devtools-extensions/icons/deadcode.svg b/packages/react-devtools-extensions/icons/deadcode.svg
new file mode 100644
index 0000000000000..ccd6e669061f7
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/deadcode.svg
@@ -0,0 +1 @@
+<svg id="Development" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#d94a38;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}.cls-4{font-size:12px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>development</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><g id="Ring-2" data-name="Ring"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g></g><g id="Ring_Blockers" data-name="Ring Blockers"><circle class="cls-1" cx="417" cy="672" r="45"/><circle class="cls-1" cx="699" cy="513" r="45"/><circle class="cls-1" cx="797" cy="634" r="45"/><circle class="cls-1" cx="479" cy="818" r="45"/><g id="Layer_14" data-name="Layer 14"><rect class="cls-1" x="420" y="621" width="377" height="188"/><rect class="cls-1" x="500" y="530" width="312" height="405"/></g></g><g id="Bug"><g id="Legs"><path class="cls-3" d="M702,496a17,17,0,0,0-21,13l-19,78,34,8,19-78A17,17,0,0,0,702,496Z"/><text class="cls-4" transform="translate(512 512)">780</text><text class="cls-4" transform="translate(512 512)">780</text><path class="cls-3" d="M813,626a17,17,0,0,0-23-9l-73,32,14,32,73-32A17,17,0,0,0,813,626Z"/><path class="cls-3" d="M834,756l-77-20-9,34,77,20a18,18,0,0,0,9-34Z"/><path class="cls-3" d="M425,656a17,17,0,1,0-10,33l76,23,10-33Z"/><path class="cls-3" d="M532,756l-64,48a18,18,0,1,0,21,28l64-48Z"/><path class="cls-3" d="M584,836l-21,77a17,17,0,1,0,34,9l21-77Z"/></g><g id="Body"><path class="cls-3" d="M762,690h0l-51-92h0A125,125,0,0,0,492,721h0l51,92h0A125,125,0,0,0,762,690Z"/></g><g id="Line"><path class="cls-1" d="M613,649h0a17,17,0,0,0-30,18h0L711,887l30-18Z"/></g><g id="Head_Ring" data-name="Head Ring"><circle class="cls-1" cx="511" cy="509" r="113"/></g><g id="Head"><circle class="cls-3" cx="512" cy="512" r="80"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/icons/development.svg b/packages/react-devtools-extensions/icons/development.svg
new file mode 100644
index 0000000000000..ccd6e669061f7
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/development.svg
@@ -0,0 +1 @@
+<svg id="Development" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#d94a38;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}.cls-4{font-size:12px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>development</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><g id="Ring-2" data-name="Ring"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g></g><g id="Ring_Blockers" data-name="Ring Blockers"><circle class="cls-1" cx="417" cy="672" r="45"/><circle class="cls-1" cx="699" cy="513" r="45"/><circle class="cls-1" cx="797" cy="634" r="45"/><circle class="cls-1" cx="479" cy="818" r="45"/><g id="Layer_14" data-name="Layer 14"><rect class="cls-1" x="420" y="621" width="377" height="188"/><rect class="cls-1" x="500" y="530" width="312" height="405"/></g></g><g id="Bug"><g id="Legs"><path class="cls-3" d="M702,496a17,17,0,0,0-21,13l-19,78,34,8,19-78A17,17,0,0,0,702,496Z"/><text class="cls-4" transform="translate(512 512)">780</text><text class="cls-4" transform="translate(512 512)">780</text><path class="cls-3" d="M813,626a17,17,0,0,0-23-9l-73,32,14,32,73-32A17,17,0,0,0,813,626Z"/><path class="cls-3" d="M834,756l-77-20-9,34,77,20a18,18,0,0,0,9-34Z"/><path class="cls-3" d="M425,656a17,17,0,1,0-10,33l76,23,10-33Z"/><path class="cls-3" d="M532,756l-64,48a18,18,0,1,0,21,28l64-48Z"/><path class="cls-3" d="M584,836l-21,77a17,17,0,1,0,34,9l21-77Z"/></g><g id="Body"><path class="cls-3" d="M762,690h0l-51-92h0A125,125,0,0,0,492,721h0l51,92h0A125,125,0,0,0,762,690Z"/></g><g id="Line"><path class="cls-1" d="M613,649h0a17,17,0,0,0-30,18h0L711,887l30-18Z"/></g><g id="Head_Ring" data-name="Head Ring"><circle class="cls-1" cx="511" cy="509" r="113"/></g><g id="Head"><circle class="cls-3" cx="512" cy="512" r="80"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/icons/disabled.svg b/packages/react-devtools-extensions/icons/disabled.svg
new file mode 100644
index 0000000000000..73c2bb51cdbbc
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/disabled.svg
@@ -0,0 +1 @@
+<svg id="Disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#aaa;}.cls-2{fill:#fff;}</style></defs><title>disabled</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g><g id="Circle"><circle class="cls-2" cx="510" cy="510" r="80"/></g></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/icons/outdated.svg b/packages/react-devtools-extensions/icons/outdated.svg
new file mode 100644
index 0000000000000..03b83c1eb559b
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/outdated.svg
@@ -0,0 +1 @@
+<svg id="Outdated" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#202020;}.cls-2{fill:#fff;}.cls-3{fill:#f9f453;}</style></defs><title>outdated</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M510,325C261,325,60,408,60,510S261,695,510,695s450-83,450-185S759,325,510,325Zm0,330c-225,0-407-65-407-145S285,365,510,365s408,65,408,145S735,655,510,655Z"/><path class="cls-2" d="M670,417C546,202,373,69,285,120s-59,267,65,482S647,951,735,900,794,633,670,417ZM384,583C272,388,237,197,306,157s217,86,329,280,148,385,78,425S497,777,384,583Z"/><g id="BLOCKER"><rect class="cls-1" x="564" y="572" width="315" height="397.12" transform="translate(652 -283) rotate(39)"/><rect class="cls-1" x="685" y="369" width="283" height="360.81" transform="translate(255 -262) rotate(21)"/></g><path class="cls-2" d="M670,603c124-215,153-431,65-482S474,202,350,417,197,849,285,900,546,818,670,603ZM384,437C497,243,644,117,714,157s34,231-78,425S376,903,306,863,272,632,384,437Z"/></g><g id="Circle"><circle class="cls-2" cx="512" cy="512" r="80"/></g><g id="Shield"><path class="cls-3" d="M960,887a24,24,0,0,0-5-15h0L807,605h0v-2h0a25,25,0,0,0-43,3h0L613,876h0a24,24,0,0,0-3,11,25,25,0,0,0,24,25H936A25,25,0,0,0,960,887ZM810,848a15,15,0,0,1-15,15H775a15,15,0,0,1-15-15V828a15,15,0,0,1,15-15h20a15,15,0,0,1,15,15Zm0-74a15,15,0,0,1-15,15H775a15,15,0,0,1-15-15V705a15,15,0,0,1,15-15h20a15,15,0,0,1,15,15Z"/></g></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/icons/production.svg b/packages/react-devtools-extensions/icons/production.svg
new file mode 100644
index 0000000000000..1e974f5131012
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/production.svg
@@ -0,0 +1 @@
+<svg id="Production" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#202020;}.cls-2{fill:#59c9f1;}</style></defs><title>production</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g><g id="Circle"><circle class="cls-2" cx="510" cy="510" r="80"/></g></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/main.html b/packages/react-devtools-extensions/main.html
new file mode 100644
index 0000000000000..f1c96d4a7a094
--- /dev/null
+++ b/packages/react-devtools-extensions/main.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="./build/main.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
new file mode 100644
index 0000000000000..ce42fc7799f87
--- /dev/null
+++ b/packages/react-devtools-extensions/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-devtools-extensions",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox",
+    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox",
+    "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
+    "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
+    "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
+    "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "test:chrome": "node ./chrome/test",
+    "test:firefox": "node ./firefox/test"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "archiver": "^3.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "child-process-promise": "^2.2.1",
+    "chrome-launch": "^1.1.4",
+    "crx": "^5.0.0",
+    "css-loader": "^1.0.1",
+    "firefox-profile": "^1.0.2",
+    "node-libs-browser": "0.5.3",
+    "nullthrows": "^1.0.0",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "web-ext": "^3.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.3.1"
+  }
+}
diff --git a/packages/react-devtools-extensions/panel.html b/packages/react-devtools-extensions/panel.html
new file mode 100644
index 0000000000000..60fd1bdf13ff2
--- /dev/null
+++ b/packages/react-devtools-extensions/panel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html style="display: flex">
+    <head>
+        <meta charset="utf8">
+        <style>
+            html {
+                display: flex;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                flex: 1;
+                display: flex;
+            }
+            #container {
+                display: flex;
+                flex: 1;
+                width: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">Unable to find React on the page.</div>
+        <script src="./build/panel.js"></script>
+    </body>
+</html>
diff --git a/packages/react-devtools-extensions/popups/deadcode.html b/packages/react-devtools-extensions/popups/deadcode.html
new file mode 100644
index 0000000000000..cdd4c278e86cc
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/deadcode.html
@@ -0,0 +1,32 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page includes an extra development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  The React build on this page includes both development and production versions because dead code elimination has not been applied correctly.
+  <br />
+  <br />
+  This makes its size larger, and causes React to run slower.
+  <br />
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up dead code elimination</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/packages/react-devtools-extensions/popups/development.html b/packages/react-devtools-extensions/popups/development.html
new file mode 100644
index 0000000000000..3d092a5eb69f8
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/development.html
@@ -0,0 +1,28 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 101px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  Note that the development build is not suitable for production.
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">use the production build</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/packages/react-devtools-extensions/popups/disabled.html b/packages/react-devtools-extensions/popups/disabled.html
new file mode 100644
index 0000000000000..2be9e4fb85a5f
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/disabled.html
@@ -0,0 +1,21 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 410px;
+    min-height: 33px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page doesn&rsquo;t appear to be using React.</b>
+  <br />
+  If this seems wrong, follow the <a href="https://github.com/facebook/react/tree/master/packages/react-devtools#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
+</p>
diff --git a/packages/react-devtools-extensions/popups/outdated.html b/packages/react-devtools-extensions/popups/outdated.html
new file mode 100644
index 0000000000000..8f3f3f9508766
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/outdated.html
@@ -0,0 +1,29 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 117px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using an outdated version of React. &#8987;</b>
+</p>
+<p>
+  We recommend updating React to ensure that you receive important bugfixes and performance improvements.
+  <br />
+  <br />
+  You can find the upgrade instructions on the <a href="https://facebook.github.io/react/blog/">React blog</a>.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/packages/react-devtools-extensions/popups/production.html b/packages/react-devtools-extensions/popups/production.html
new file mode 100644
index 0000000000000..7b92841c6c75c
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/production.html
@@ -0,0 +1,21 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 39px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the production build of React. &#x2705;</b>
+  <br />
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/packages/react-devtools-extensions/popups/shared.js b/packages/react-devtools-extensions/popups/shared.js
new file mode 100644
index 0000000000000..ddb0456e5bbf3
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/shared.js
@@ -0,0 +1,24 @@
+/* globals chrome */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Make links work
+  const links = document.getElementsByTagName('a');
+  for (let i = 0; i < links.length; i++) {
+    (function() {
+      const ln = links[i];
+      const location = ln.href;
+      ln.onclick = function() {
+        chrome.tabs.create({active: true, url: location});
+      };
+    })();
+  }
+
+  // Work around https://bugs.chromium.org/p/chromium/issues/detail?id=428044
+  document.body.style.opacity = 0;
+  document.body.style.transition = 'opacity ease-out .4s';
+  requestAnimationFrame(function() {
+    document.body.style.opacity = 1;
+  });
+});
diff --git a/packages/react-devtools-extensions/popups/unminified.html b/packages/react-devtools-extensions/popups/unminified.html
new file mode 100644
index 0000000000000..c53885f5098c3
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/unminified.html
@@ -0,0 +1,31 @@
+<script src="shared.js"></script>
+<style>
+  html, body {
+    font-size: 14px;
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  body {
+    margin: 8px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using an unminified build of React. &#x1f6a7;</b>
+</p>
+<p>
+  The React build on this page appears to be unminified.
+  <br />
+  This makes its size larger, and causes React to run slower.
+  <br />
+  <br />
+  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up minification</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
new file mode 100644
index 0000000000000..6a8fe9c3e5cae
--- /dev/null
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -0,0 +1,83 @@
+// Do not use imports or top-level requires here!
+// Running module factories is intentionally delayed until we know the hook exists.
+// This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
+
+/** @flow */
+
+'use strict';
+
+function welcome(event) {
+  if (
+    event.source !== window ||
+    event.data.source !== 'react-devtools-content-script'
+  ) {
+    return;
+  }
+
+  window.removeEventListener('message', welcome);
+
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+}
+
+window.addEventListener('message', welcome);
+
+function setup(hook) {
+  const Agent = require('react-devtools-shared/src/backend/agent').default;
+  const Bridge = require('react-devtools-shared/src/bridge').default;
+  const {initBackend} = require('react-devtools-shared/src/backend');
+  const setupNativeStyleEditor = require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor')
+    .default;
+
+  const bridge = new Bridge({
+    listen(fn) {
+      const listener = event => {
+        if (
+          event.source !== window ||
+          !event.data ||
+          event.data.source !== 'react-devtools-content-script' ||
+          !event.data.payload
+        ) {
+          return;
+        }
+        fn(event.data.payload);
+      };
+      window.addEventListener('message', listener);
+      return () => {
+        window.removeEventListener('message', listener);
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      window.postMessage(
+        {
+          source: 'react-devtools-bridge',
+          payload: {event, payload},
+        },
+        '*',
+        transferable,
+      );
+    },
+  });
+
+  const agent = new Agent(bridge);
+  agent.addListener('shutdown', () => {
+    // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
+    // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
+    hook.emit('shutdown');
+  });
+
+  initBackend(hook, agent, window);
+
+  // Let the frontend know that the backend has attached listeners and is ready for messages.
+  // This covers the case of of syncing saved values after reloading/navigating while DevTools remain open.
+  bridge.send('extensionBackendInitialized');
+
+  // Setup React Native style editor if a renderer like react-native-web has injected it.
+  if (hook.resolveRNStyle) {
+    setupNativeStyleEditor(
+      bridge,
+      agent,
+      hook.resolveRNStyle,
+      hook.nativeStyleEditorValidAttributes,
+    );
+  }
+}
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
new file mode 100644
index 0000000000000..389ca1310a910
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background.js
@@ -0,0 +1,115 @@
+/* global chrome */
+
+'use strict';
+
+const ports = {};
+
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
+
+chrome.runtime.onConnect.addListener(function(port) {
+  let tab = null;
+  let name = null;
+  if (isNumeric(port.name)) {
+    tab = port.name;
+    name = 'devtools';
+    installContentScript(+port.name);
+  } else {
+    tab = port.sender.tab.id;
+    name = 'content-script';
+  }
+
+  if (!ports[tab]) {
+    ports[tab] = {
+      devtools: null,
+      'content-script': null,
+    };
+  }
+  ports[tab][name] = port;
+
+  if (ports[tab].devtools && ports[tab]['content-script']) {
+    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
+  }
+});
+
+function isNumeric(str: string): boolean {
+  return +str + '' === str;
+}
+
+function installContentScript(tabId: number) {
+  chrome.tabs.executeScript(
+    tabId,
+    {file: '/build/contentScript.js'},
+    function() {},
+  );
+}
+
+function doublePipe(one, two) {
+  one.onMessage.addListener(lOne);
+  function lOne(message) {
+    two.postMessage(message);
+  }
+  two.onMessage.addListener(lTwo);
+  function lTwo(message) {
+    one.postMessage(message);
+  }
+  function shutdown() {
+    one.onMessage.removeListener(lOne);
+    two.onMessage.removeListener(lTwo);
+    one.disconnect();
+    two.disconnect();
+  }
+  one.onDisconnect.addListener(shutdown);
+  two.onDisconnect.addListener(shutdown);
+}
+
+function setIconAndPopup(reactBuildType, tabId) {
+  chrome.browserAction.setIcon({
+    tabId: tabId,
+    path: {
+      '16': 'icons/16-' + reactBuildType + '.png',
+      '32': 'icons/32-' + reactBuildType + '.png',
+      '48': 'icons/48-' + reactBuildType + '.png',
+      '128': 'icons/128-' + reactBuildType + '.png',
+    },
+  });
+  chrome.browserAction.setPopup({
+    tabId: tabId,
+    popup: 'popups/' + reactBuildType + '.html',
+  });
+}
+
+// Listen to URL changes on the active tab and reset the DevTools icon.
+// This prevents non-disabled icons from sticking in Firefox.
+// Don't listen to this event in Chrome though.
+// It fires more frequently, often after onMessage() has been called.
+if (IS_FIREFOX) {
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (tab.active && changeInfo.status === 'loading') {
+      setIconAndPopup('disabled', tabId);
+    }
+  });
+}
+
+chrome.runtime.onMessage.addListener((request, sender) => {
+  if (sender.tab) {
+    // This is sent from the hook content script.
+    // It tells us a renderer has attached.
+    if (request.hasDetectedReact) {
+      // We use browserAction instead of pageAction because this lets us
+      // display a custom default popup when React is *not* detected.
+      // It is specified in the manifest.
+      let reactBuildType = request.reactBuildType;
+      if (sender.url.indexOf('facebook.github.io/react') !== -1) {
+        // Cheat: We use the development version on the website because
+        // it is better for interactive examples. However we're going
+        // to get misguided bug reports if the extension highlights it
+        // as using the dev version. We're just going to special case
+        // our own documentation and cheat. It is acceptable to use dev
+        // version of React in React docs, but not in any other case.
+        reactBuildType = 'production';
+      }
+
+      setIconAndPopup(reactBuildType, sender.tab.id);
+    }
+  }
+});
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
new file mode 100644
index 0000000000000..c914c6e7b3dfc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -0,0 +1,79 @@
+/* global chrome */
+
+'use strict';
+
+let backendDisconnected: boolean = false;
+let backendInitialized: boolean = false;
+
+function sayHelloToBackend() {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      hello: true,
+    },
+    '*',
+  );
+}
+
+function handleMessageFromDevtools(message) {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      payload: message,
+    },
+    '*',
+  );
+}
+
+function handleMessageFromPage(evt) {
+  if (
+    evt.source === window &&
+    evt.data &&
+    evt.data.source === 'react-devtools-bridge'
+  ) {
+    backendInitialized = true;
+
+    port.postMessage(evt.data.payload);
+  }
+}
+
+function handleDisconnect() {
+  backendDisconnected = true;
+
+  window.removeEventListener('message', handleMessageFromPage);
+
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      payload: {
+        type: 'event',
+        event: 'shutdown',
+      },
+    },
+    '*',
+  );
+}
+
+// proxy from main page to devtools (via the background page)
+const port = chrome.runtime.connect({
+  name: 'content-script',
+});
+port.onMessage.addListener(handleMessageFromDevtools);
+port.onDisconnect.addListener(handleDisconnect);
+
+window.addEventListener('message', handleMessageFromPage);
+
+sayHelloToBackend();
+
+// The backend waits to install the global hook until notified by the content script.
+// In the event of a page reload, the content script might be loaded before the backend is injected.
+// Because of this we need to poll the backend until it has been initialized.
+if (!backendInitialized) {
+  const intervalID = setInterval(() => {
+    if (backendInitialized || backendDisconnected) {
+      clearInterval(intervalID);
+    } else {
+      sayHelloToBackend();
+    }
+  }, 500);
+}
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
new file mode 100644
index 0000000000000..8785d97fc5ec8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -0,0 +1,115 @@
+/* global chrome */
+
+import nullthrows from 'nullthrows';
+import {installHook} from 'react-devtools-shared/src/hook';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+
+function injectCode(code) {
+  const script = document.createElement('script');
+  script.textContent = code;
+
+  // This script runs before the <head> element is created,
+  // so we add the script to <html> instead.
+  nullthrows(document.documentElement).appendChild(script);
+  nullthrows(script.parentNode).removeChild(script);
+}
+
+let lastDetectionResult;
+
+// We want to detect when a renderer attaches, and notify the "background page"
+// (which is shared between tabs and can highlight the React icon).
+// Currently we are in "content script" context, so we can't listen to the hook directly
+// (it will be injected directly into the page).
+// So instead, the hook will use postMessage() to pass message to us here.
+// And when this happens, we'll send a message to the "background page".
+window.addEventListener('message', function(evt) {
+  if (evt.source !== window || !evt.data) {
+    return;
+  }
+  if (evt.data.source === 'react-devtools-detector') {
+    lastDetectionResult = {
+      hasDetectedReact: true,
+      reactBuildType: evt.data.reactBuildType,
+    };
+    chrome.runtime.sendMessage(lastDetectionResult);
+  } else if (evt.data.source === 'react-devtools-inject-backend') {
+    const script = document.createElement('script');
+    script.src = chrome.runtime.getURL('build/react_devtools_backend.js');
+    document.documentElement.appendChild(script);
+    script.parentNode.removeChild(script);
+  }
+});
+
+// NOTE: Firefox WebExtensions content scripts are still alive and not re-injected
+// while navigating the history to a document that has not been destroyed yet,
+// replay the last detection result if the content script is active and the
+// document has been hidden and shown again.
+window.addEventListener('pageshow', function(evt) {
+  if (!lastDetectionResult || evt.target !== window.document) {
+    return;
+  }
+  chrome.runtime.sendMessage(lastDetectionResult);
+});
+
+const detectReact = `
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
+  window.postMessage({
+    source: 'react-devtools-detector',
+    reactBuildType: evt.reactBuildType,
+  }, '*');
+});
+`;
+const saveNativeValues = `
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
+`;
+
+// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
+if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
+  const rendererURL = chrome.runtime.getURL('build/renderer.js');
+  let rendererCode;
+
+  // We need to inject in time to catch the initial mount.
+  // This means we need to synchronously read the renderer code itself,
+  // and synchronously inject it into the page.
+  // There are very few ways to actually do this.
+  // This seems to be the best approach.
+  const request = new XMLHttpRequest();
+  request.addEventListener('load', function() {
+    rendererCode = this.responseText;
+  });
+  request.open('GET', rendererURL, false);
+  request.send();
+  injectCode(rendererCode);
+}
+
+// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
+// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
+if (document.contentType === 'text/html') {
+  injectCode(
+    ';(' +
+      installHook.toString() +
+      '(window))' +
+      saveNativeValues +
+      detectReact,
+  );
+}
+
+if (typeof exportFunction === 'function') {
+  // eslint-disable-next-line no-undef
+  exportFunction(
+    text => {
+      // Call clipboard.writeText from the extension content script
+      // (as it has the clipboardWrite permission) and return a Promise
+      // accessible to the webpage js code.
+      return new window.Promise((resolve, reject) =>
+        window.navigator.clipboard.writeText(text).then(resolve, reject),
+      );
+    },
+    window.wrappedJSObject.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+    {defineAs: 'clipboardCopyText'},
+  );
+}
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
new file mode 100644
index 0000000000000..fb920df93807e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main.js
@@ -0,0 +1,382 @@
+/* global chrome */
+
+import {createElement} from 'react';
+import {createRoot, flushSync} from 'react-dom';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {getBrowserName, getBrowserTheme} from './utils';
+import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
+import {
+  localStorageGetItem,
+  localStorageRemoveItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+
+const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
+  'React::DevTools::supportsProfiling';
+
+const isChrome = getBrowserName() === 'Chrome';
+
+let panelCreated = false;
+
+// The renderer interface can't read saved component filters directly,
+// because they are stored in localStorage within the context of the extension.
+// Instead it relies on the extension to pass filters through.
+function syncSavedPreferences() {
+  const componentFilters = getSavedComponentFilters();
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+      componentFilters,
+    )};`,
+  );
+
+  const appendComponentStack = getAppendComponentStack();
+  chrome.devtools.inspectedWindow.eval(
+    `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
+      appendComponentStack,
+    )};`,
+  );
+}
+
+syncSavedPreferences();
+
+function createPanelIfReactLoaded() {
+  if (panelCreated) {
+    return;
+  }
+
+  chrome.devtools.inspectedWindow.eval(
+    'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
+    function(pageHasReact, error) {
+      if (!pageHasReact || panelCreated) {
+        return;
+      }
+
+      panelCreated = true;
+
+      clearInterval(loadCheckInterval);
+
+      let bridge = null;
+      let store = null;
+
+      let profilingData = null;
+
+      let componentsPortalContainer = null;
+      let profilerPortalContainer = null;
+
+      let cloneStyleTags = null;
+      let mostRecentOverrideTab = null;
+      let render = null;
+      let root = null;
+
+      const tabId = chrome.devtools.inspectedWindow.tabId;
+
+      function initBridgeAndStore() {
+        const port = chrome.runtime.connect({
+          name: '' + tabId,
+        });
+        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+        // so it makes no sense to handle it here.
+
+        bridge = new Bridge({
+          listen(fn) {
+            const listener = message => fn(message);
+            // Store the reference so that we unsubscribe from the same object.
+            const portOnMessage = port.onMessage;
+            portOnMessage.addListener(listener);
+            return () => {
+              portOnMessage.removeListener(listener);
+            };
+          },
+          send(event: string, payload: any, transferable?: Array<any>) {
+            port.postMessage({event, payload}, transferable);
+          },
+        });
+        bridge.addListener('reloadAppForProfiling', () => {
+          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+          chrome.devtools.inspectedWindow.eval('window.location.reload();');
+        });
+        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+          setBrowserSelectionFromReact();
+        });
+
+        // This flag lets us tip the Store off early that we expect to be profiling.
+        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+        // after a user has clicked the "reload and profile" button.
+        let isProfiling = false;
+        let supportsProfiling = false;
+        if (
+          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+        ) {
+          supportsProfiling = true;
+          isProfiling = true;
+          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+        }
+
+        if (store !== null) {
+          profilingData = store.profilerStore.profilingData;
+        }
+
+        bridge.addListener('extensionBackendInitialized', () => {
+          // Initialize the renderer's trace-updates setting.
+          // This handles the case of navigating to a new page after the DevTools have already been shown.
+          bridge.send(
+            'setTraceUpdatesEnabled',
+            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
+              'true',
+          );
+        });
+
+        store = new Store(bridge, {
+          isProfiling,
+          supportsReloadAndProfile: isChrome,
+          supportsProfiling,
+          supportsTraceUpdates: true,
+        });
+        store.profilerStore.profilingData = profilingData;
+
+        // Initialize the backend only once the Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        chrome.devtools.inspectedWindow.eval(
+          `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
+          function(response, evalError) {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
+
+        const viewAttributeSourceFunction = (id, path) => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to find the specified attribute,
+            // and store it as a global variable on the window.
+            bridge.send('viewAttributeSource', {id, path, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the attribute,
+              // assuming the renderer found a match.
+              chrome.devtools.inspectedWindow.eval(`
+                if (window.$attribute != null) {
+                  inspect(window.$attribute);
+                }
+              `);
+            }, 100);
+          }
+        };
+
+        const viewElementSourceFunction = id => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to determine the component function,
+            // and store it as a global variable on the window
+            bridge.send('viewElementSource', {id, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the component function,
+              // or a render method if it is a Class (ideally Class instance, not type)
+              // assuming the renderer found one.
+              chrome.devtools.inspectedWindow.eval(`
+                if (window.$type != null) {
+                  if (
+                    window.$type &&
+                    window.$type.prototype &&
+                    window.$type.prototype.isReactComponent
+                  ) {
+                    // inspect Component.render, not constructor
+                    inspect(window.$type.prototype.render);
+                  } else {
+                    // inspect Functional Component
+                    inspect(window.$type);
+                  }
+                }
+              `);
+            }, 100);
+          }
+        };
+
+        root = createRoot(document.createElement('div'));
+
+        render = (overrideTab = mostRecentOverrideTab) => {
+          mostRecentOverrideTab = overrideTab;
+
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserTheme: getBrowserTheme(),
+              componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
+              overrideTab,
+              profilerPortalContainer,
+              showTabBar: false,
+              store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
+              viewElementSourceFunction,
+            }),
+          );
+        };
+
+        render();
+      }
+
+      cloneStyleTags = () => {
+        const linkTags = [];
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (let linkTag of document.getElementsByTagName('link')) {
+          if (linkTag.rel === 'stylesheet') {
+            const newLinkTag = document.createElement('link');
+            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+            for (let attribute of linkTag.attributes) {
+              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
+            }
+            linkTags.push(newLinkTag);
+          }
+        }
+        return linkTags;
+      };
+
+      initBridgeAndStore();
+
+      function ensureInitialHTMLIsCleared(container) {
+        if (container._hasInitialHTMLBeenCleared) {
+          return;
+        }
+        container.innerHTML = '';
+        container._hasInitialHTMLBeenCleared = true;
+      }
+
+      function setBrowserSelectionFromReact() {
+        // This is currently only called on demand when you press "view DOM".
+        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+        // we could make this happen automatically when you select another component.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
+      }
+
+      function setReactSelectionFromBrowser() {
+        // When the user chooses a different node in the browser Elements tab,
+        // copy it over to the hook object so that we can sync the selection.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            } else if (didSelectionChange) {
+              // Remember to sync the selection next time we show Components tab.
+              needsToSyncElementSelection = true;
+            }
+          },
+        );
+      }
+
+      setReactSelectionFromBrowser();
+      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+        setReactSelectionFromBrowser();
+      });
+
+      let currentPanel = null;
+      let needsToSyncElementSelection = false;
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛ Components' : 'Components',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (needsToSyncElementSelection) {
+              needsToSyncElementSelection = false;
+              bridge.send('syncSelectionFromNativeElementsPanel');
+            }
+
+            if (currentPanel === panel) {
+              return;
+            }
+
+            currentPanel = panel;
+            componentsPortalContainer = panel.container;
+
+            if (componentsPortalContainer != null) {
+              ensureInitialHTMLIsCleared(componentsPortalContainer);
+              render('components');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+          extensionPanel.onHidden.addListener(panel => {
+            // TODO: Stop highlighting and stuff.
+          });
+        },
+      );
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛ Profiler' : 'Profiler',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (currentPanel === panel) {
+              return;
+            }
+
+            currentPanel = panel;
+            profilerPortalContainer = panel.container;
+
+            if (profilerPortalContainer != null) {
+              ensureInitialHTMLIsCleared(profilerPortalContainer);
+              render('profiler');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+        },
+      );
+
+      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+
+      // Re-initialize DevTools panel when a new page is loaded.
+      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        // Re-initialize saved filters on navigation,
+        // since global values stored on window get reset in this case.
+        syncSavedPreferences();
+
+        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+        // We can revisit this in the future as a small optimization.
+        flushSync(() => {
+          root.unmount(() => {
+            initBridgeAndStore();
+          });
+        });
+      });
+    },
+  );
+}
+
+// Load (or reload) the DevTools extension when the user navigates to a new page.
+function checkPageForReact() {
+  syncSavedPreferences();
+  createPanelIfReactLoaded();
+}
+
+chrome.devtools.network.onNavigated.addListener(checkPageForReact);
+
+// Check to see if React has loaded once per second in case React is added
+// after page load
+const loadCheckInterval = setInterval(function() {
+  createPanelIfReactLoaded();
+}, 1000);
+
+createPanelIfReactLoaded();
diff --git a/packages/react-devtools-extensions/src/panel.js b/packages/react-devtools-extensions/src/panel.js
new file mode 100644
index 0000000000000..de7d8a68fc5ff
--- /dev/null
+++ b/packages/react-devtools-extensions/src/panel.js
@@ -0,0 +1,19 @@
+// Portal target container.
+window.container = document.getElementById('container');
+
+let hasInjectedStyles = false;
+
+// DevTools styles are injected into the top-level document head (where the main React app is rendered).
+// This method copies those styles to the child window where each panel (e.g. Elements, Profiler) is portaled.
+window.injectStyles = getLinkTags => {
+  if (!hasInjectedStyles) {
+    hasInjectedStyles = true;
+
+    const linkTags = getLinkTags();
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (let linkTag of linkTags) {
+      document.head.appendChild(linkTag);
+    }
+  }
+};
diff --git a/packages/react-devtools-extensions/src/renderer.js b/packages/react-devtools-extensions/src/renderer.js
new file mode 100644
index 0000000000000..933fd5d6b8a6a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/renderer.js
@@ -0,0 +1,26 @@
+/**
+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
+ * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.
+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
+ * The normal case (not a reload-and-profile) will not make use of this entry point though.
+ *
+ * @flow
+ */
+
+import {attach} from 'react-devtools-shared/src/backend/renderer';
+
+Object.defineProperty(
+  window,
+  '__REACT_DEVTOOLS_ATTACH__',
+  ({
+    enumerable: false,
+    // This property needs to be configurable to allow third-party integrations
+    // to attach their own renderer. Note that using third-party integrations
+    // is not officially supported. Use at your own risk.
+    configurable: true,
+    get() {
+      return attach;
+    },
+  }: Object),
+);
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
new file mode 100644
index 0000000000000..4fc27de2ee6a1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -0,0 +1,30 @@
+/* global chrome */
+
+const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
+
+export type BrowserName = 'Chrome' | 'Firefox';
+
+export function getBrowserName(): BrowserName {
+  return IS_CHROME ? 'Chrome' : 'Firefox';
+}
+
+export type BrowserTheme = 'dark' | 'light';
+
+export function getBrowserTheme(): BrowserTheme {
+  if (IS_CHROME) {
+    // chrome.devtools.panels added in Chrome 18.
+    // chrome.devtools.panels.themeName added in Chrome 54.
+    return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
+  } else {
+    // chrome.devtools.panels.themeName added in Firefox 55.
+    // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/themeName
+    if (chrome.devtools && chrome.devtools.panels) {
+      switch (chrome.devtools.panels.themeName) {
+        case 'dark':
+          return 'dark';
+        default:
+          return 'light';
+      }
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
new file mode 100644
index 0000000000000..a4846f8b0ea71
--- /dev/null
+++ b/packages/react-devtools-extensions/utils.js
@@ -0,0 +1,35 @@
+const {execSync} = require('child_process');
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
+const GITHUB_URL = 'https://github.com/facebook/react';
+
+function getGitCommit() {
+  try {
+    return execSync('git show -s --format=%h')
+      .toString()
+      .trim();
+  } catch (error) {
+    // Mozilla runs this command from a git archive.
+    // In that context, there is no Git revision.
+    return null;
+  }
+}
+
+function getVersionString() {
+  const packageVersion = JSON.parse(
+    readFileSync(
+      resolve(__dirname, '..', 'react-devtools-core', './package.json'),
+    ),
+  ).version;
+
+  const commit = getGitCommit();
+
+  return `${packageVersion}-${commit}`;
+}
+
+module.exports = {
+  GITHUB_URL,
+  getGitCommit,
+  getVersionString,
+};
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
new file mode 100644
index 0000000000000..d7de389f8ce08
--- /dev/null
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -0,0 +1,61 @@
+'use strict';
+
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {GITHUB_URL, getVersionString} = require('./utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: 'react_devtools_backend.js',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: true,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
new file mode 100644
index 0000000000000..e6aa905e6c0fa
--- /dev/null
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -0,0 +1,83 @@
+'use strict';
+
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {GITHUB_URL, getVersionString} = require('./utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  entry: {
+    background: './src/background.js',
+    contentScript: './src/contentScript.js',
+    injectGlobalHook: './src/injectGlobalHook.js',
+    main: './src/main.js',
+    panel: './src/panel.js',
+    renderer: './src/renderer.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__: false,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
new file mode 100644
index 0000000000000..203c9814ef72d
--- /dev/null
+++ b/packages/react-devtools-inline/README.md
@@ -0,0 +1,180 @@
+# `react-devtools-inline`
+
+React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https://codesandbox.io/), [StackBlitz](https://stackblitz.com/)).
+
+This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.**
+
+## Usage
+
+This package exports two entry points: a frontend (to be run in the main `window`) and a backend (to be installed and run within an `iframe`<sup>1</sup>).
+
+The frontend and backend can be initialized in any order, but **the backend must not be activated until after the frontend has been initialized**. Because of this, the simplest sequence is:
+
+1. Frontend (DevTools interface) initialized in the main `window`.
+1. Backend initialized in an `iframe`.
+1. Backend activated.
+
+<sup>1</sup> Sandboxed iframes are supported.
+
+## API
+
+### `react-devtools-inline/backend`
+
+* **`initialize(contentWindow)`** -
+Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
+* **`activate(contentWindow)`** -
+Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
+
+```js
+import { activate, initialize } from 'react-devtools-inline/backend';
+
+// This should be the iframe the React application is running in.
+const iframe = document.getElementById(frameID);
+const contentWindow = iframe.contentWindow;
+
+// Call this before importing React (or any other packages that might import React).
+initialize(contentWindow);
+
+// Initialize the frontend...
+
+// Call this only once the frontend has been initialized.
+activate(contentWindow);
+```
+
+<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
+
+### `react-devtools-inline/frontend`
+
+* **`initialize(contentWindow)`** -
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
+
+```js
+import { initialize } from 'react-devtools-inline/frontend';
+
+// This should be the iframe the backend hook has been installed in.
+const iframe = document.getElementById(frameID);
+const contentWindow = iframe.contentWindow;
+
+// This returns a React component that can be rendered into your app.
+// <DevTools {...props} />
+const DevTools = initialize(contentWindow);
+```
+
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.createRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
+
+## Examples
+
+### Configuring a same-origin `iframe`
+
+The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions.
+
+```js
+import {
+  activate as activateBackend,
+  initialize as initializeBackend
+} from 'react-devtools-inline/backend';
+import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
+
+// The React app you want to inspect with DevTools is running within this iframe:
+const iframe = document.getElementById('target');
+const { contentWindow } = iframe;
+
+// Installs the global hook into the iframe.
+// This must be called before React is loaded into that frame.
+initializeBackend(contentWindow);
+
+// React application can be injected into <iframe> at any time now...
+// Note that this would need to be done via <script> tag injection,
+// as setting the src of the <iframe> would load a new page (withou the injected backend).
+
+// Initialize DevTools UI to listen to the hook we just installed.
+// This returns a React component we can render anywhere in the parent window.
+const DevTools = initializeFrontend(contentWindow);
+
+// <DevTools /> interface can be rendered in the parent window at any time now...
+// Be sure to use either ReactDOM.createRoot()
+// or ReactDOM.createSyncRoot() to render this component.
+
+// Let the backend know the frontend is ready and listening.
+activateBackend(contentWindow);
+```
+
+### Configuring a sandboxed `iframe`
+
+Sandboxed `iframe`s are also supported but require more complex initialization.
+
+**`iframe.html`**
+```js
+import { activate, initialize } from "react-devtools-inline/backend";
+
+// The DevTooks hook needs to be installed before React is even required!
+// The safest way to do this is probably to install it in a separate script tag.
+initialize(window);
+
+// Wait for the frontend to let us know that it's ready.
+function onMessage({ data }) {
+  switch (data.type) {
+    case "activate-backend":
+      window.removeEventListener("message", onMessage);
+
+      activate(window);
+      break;
+    default:
+      break;
+  }
+}
+
+window.addEventListener("message", onMessage);
+```
+
+**`main-window.html`**
+```js
+import { initialize } from "react-devtools-inline/frontend";
+
+const iframe = document.getElementById("target");
+const { contentWindow } = iframe;
+
+// Initialize DevTools UI to listen to the iframe.
+// This returns a React component we can render anywhere in the main window.
+// Be sure to use either ReactDOM.createRoot()
+// or ReactDOM.createSyncRoot() to render this component.
+const DevTools = initialize(contentWindow);
+
+// Let the backend know to initialize itself.
+// We can't do this directly because the iframe is sandboxed.
+// Only initialize the backend once the DevTools frontend has been initialized.
+iframe.onload = () => {
+  contentWindow.postMessage(
+    {
+      type: "activate-backend"
+    },
+    "*"
+  );
+};
+```
+
+## Local development
+You can also build and test this package from source.
+
+### Prerequisite steps
+DevTools depends on local versions of several NPM packages<sup>1</sup> also in this workspace. You'll need to either build or download those packages first.
+
+<sup>1</sup> Note that at this time, an _experimental_ build is required because DevTools depends on the `createRoot` API.
+
+#### Build from source
+To build dependencies from source, run the following command from the root of the repository:
+```sh
+yarn build-for-devtools
+```
+#### Download from CI
+To use the latest build from CI, run the following command from the root of the repository:
+```sh
+./scripts/release/download-experimental-build.js
+```
+### Build steps
+Once the above packages have been built or downloaded, you can watch for changes made to the source code and automatically rebuild by running:
+```sh
+yarn start
+```
+
+To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).
\ No newline at end of file
diff --git a/packages/react-devtools-inline/backend.js b/packages/react-devtools-inline/backend.js
new file mode 100644
index 0000000000000..2c2a32d45125b
--- /dev/null
+++ b/packages/react-devtools-inline/backend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/backend');
diff --git a/packages/react-devtools-inline/frontend.js b/packages/react-devtools-inline/frontend.js
new file mode 100644
index 0000000000000..a86be22376f39
--- /dev/null
+++ b/packages/react-devtools-inline/frontend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/frontend');
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
new file mode 100644
index 0000000000000..502e547e67e1a
--- /dev/null
+++ b/packages/react-devtools-inline/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "react-devtools-inline",
+  "version": "4.4.0",
+  "description": "Embed react-devtools within a website",
+  "license": "MIT",
+  "main": "./dist/backend.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-devtools-inline"
+  },
+  "files": [
+    "dist",
+    "backend.js",
+    "build-info.json",
+    "frontend.js"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "prepublish": "yarn run build",
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
+  },
+  "dependencies": {
+    "es6-symbol": "^3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.3.1"
+  }
+}
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
new file mode 100644
index 0000000000000..0528e2018d1c1
--- /dev/null
+++ b/packages/react-devtools-inline/src/backend.js
@@ -0,0 +1,96 @@
+/** @flow */
+
+import Agent from 'react-devtools-shared/src/backend/agent';
+import Bridge from 'react-devtools-shared/src/bridge';
+import {initBackend} from 'react-devtools-shared/src/backend';
+import {installHook} from 'react-devtools-shared/src/hook';
+import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import {
+  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
+  MESSAGE_TYPE_SAVED_PREFERENCES,
+} from './constants';
+
+function startActivation(contentWindow: window) {
+  const {parent} = contentWindow;
+
+  const onMessage = ({data}) => {
+    switch (data.type) {
+      case MESSAGE_TYPE_SAVED_PREFERENCES:
+        // This is the only message we're listening for,
+        // so it's safe to cleanup after we've received it.
+        contentWindow.removeEventListener('message', onMessage);
+
+        const {appendComponentStack, componentFilters} = data;
+
+        contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+        contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+
+        // TRICKY
+        // The backend entry point may be required in the context of an iframe or the parent window.
+        // If it's required within the parent window, store the saved values on it as well,
+        // since the injected renderer interface will read from window.
+        // Technically we don't need to store them on the contentWindow in this case,
+        // but it doesn't really hurt anything to store them there too.
+        if (contentWindow !== window) {
+          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+          window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+        }
+
+        finishActivation(contentWindow);
+        break;
+      default:
+        break;
+    }
+  };
+
+  contentWindow.addEventListener('message', onMessage);
+
+  // The backend may be unable to read saved preferences directly,
+  // because they are stored in localStorage within the context of the extension (on the frontend).
+  // Instead it relies on the extension to pass preferences through.
+  // Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().
+  parent.postMessage({type: MESSAGE_TYPE_GET_SAVED_PREFERENCES}, '*');
+}
+
+function finishActivation(contentWindow: window) {
+  const {parent} = contentWindow;
+
+  const bridge = new Bridge({
+    listen(fn) {
+      const onMessage = event => {
+        fn(event.data);
+      };
+      contentWindow.addEventListener('message', onMessage);
+      return () => {
+        contentWindow.removeEventListener('message', onMessage);
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      parent.postMessage({event, payload}, '*', transferable);
+    },
+  });
+
+  const agent = new Agent(bridge);
+
+  const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  initBackend(hook, agent, contentWindow);
+
+  // Setup React Native style editor if a renderer like react-native-web has injected it.
+  if (hook.resolveRNStyle) {
+    setupNativeStyleEditor(
+      bridge,
+      agent,
+      hook.resolveRNStyle,
+      hook.nativeStyleEditorValidAttributes,
+    );
+  }
+}
+
+export function activate(contentWindow: window): void {
+  startActivation(contentWindow);
+}
+
+export function initialize(contentWindow: window): void {
+  installHook(contentWindow);
+}
diff --git a/packages/react-devtools-inline/src/constants.js b/packages/react-devtools-inline/src/constants.js
new file mode 100644
index 0000000000000..cfa443cc04806
--- /dev/null
+++ b/packages/react-devtools-inline/src/constants.js
@@ -0,0 +1,6 @@
+/** @flow */
+
+export const MESSAGE_TYPE_GET_SAVED_PREFERENCES =
+  'React::DevTools::getSavedPreferences';
+export const MESSAGE_TYPE_SAVED_PREFERENCES =
+  'React::DevTools::savedPreferences';
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
new file mode 100644
index 0000000000000..86f3300d4b1c2
--- /dev/null
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -0,0 +1,75 @@
+/** @flow */
+
+import React, {forwardRef} from 'react';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
+import {
+  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
+  MESSAGE_TYPE_SAVED_PREFERENCES,
+} from './constants';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
+
+export function initialize(
+  contentWindow: window,
+): React.AbstractComponent<Props, mixed> {
+  const onGetSavedPreferencesMessage = ({data, source}) => {
+    if (source === 'react-devtools-content-script') {
+      // Ignore messages from the DevTools browser extension.
+    }
+
+    switch (data.type) {
+      case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
+        // This is the only message we're listening for,
+        // so it's safe to cleanup after we've received it.
+        window.removeEventListener('message', onGetSavedPreferencesMessage);
+
+        // The renderer interface can't read saved preferences directly,
+        // because they are stored in localStorage within the context of the extension.
+        // Instead it relies on the extension to pass them through.
+        contentWindow.postMessage(
+          {
+            type: MESSAGE_TYPE_SAVED_PREFERENCES,
+            appendComponentStack: getAppendComponentStack(),
+            componentFilters: getSavedComponentFilters(),
+          },
+          '*',
+        );
+        break;
+      default:
+        break;
+    }
+  };
+
+  window.addEventListener('message', onGetSavedPreferencesMessage);
+
+  const bridge: FrontendBridge = new Bridge({
+    listen(fn) {
+      const onMessage = ({data}) => {
+        fn(data);
+      };
+      window.addEventListener('message', onMessage);
+      return () => {
+        window.removeEventListener('message', onMessage);
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      contentWindow.postMessage({event, payload}, '*', transferable);
+    },
+  });
+
+  const store: Store = new Store(bridge, {supportsTraceUpdates: true});
+
+  const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
+    <DevTools ref={ref} bridge={bridge} store={store} {...props} />
+  ));
+  ForwardRef.displayName = 'DevTools';
+
+  return ForwardRef;
+}
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
new file mode 100644
index 0000000000000..7e24e54a0558f
--- /dev/null
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -0,0 +1,79 @@
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = true; // NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: false,
+  entry: {
+    backend: './src/backend.js',
+    frontend: './src/frontend.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    library: '[name]',
+    libraryTarget: 'commonjs2',
+  },
+  externals: {
+    react: 'react',
+    // TODO: Once this package is published, remove the external
+    // 'react-debug-tools': 'react-debug-tools',
+    'react-dom': 'react-dom',
+    'react-is': 'react-is',
+    scheduler: 'scheduler',
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-shared/babel.config.js b/packages/react-devtools-shared/babel.config.js
new file mode 100644
index 0000000000000..2d77461af8941
--- /dev/null
+++ b/packages/react-devtools-shared/babel.config.js
@@ -0,0 +1,46 @@
+const chromeManifest = require('../react-devtools-extensions/chrome/manifest.json');
+const firefoxManifest = require('../react-devtools-extensions/firefox/manifest.json');
+
+const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);
+const minFirefoxVersion = parseInt(
+  firefoxManifest.applications.gecko.strict_min_version,
+  10,
+);
+validateVersion(minChromeVersion);
+validateVersion(minFirefoxVersion);
+
+function validateVersion(version) {
+  if (version > 0 && version < 200) {
+    return;
+  }
+  throw new Error('Suspicious browser version in manifest: ' + version);
+}
+
+module.exports = api => {
+  const isTest = api.env('test');
+  const targets = {};
+  if (isTest) {
+    targets.node = 'current';
+  } else {
+    targets.chrome = minChromeVersion.toString();
+    targets.firefox = minFirefoxVersion.toString();
+
+    // This targets RN/Hermes.
+    targets.ie = '11';
+  }
+  const plugins = [
+    ['@babel/plugin-transform-flow-strip-types'],
+    ['@babel/plugin-proposal-class-properties', {loose: false}],
+  ];
+  if (process.env.NODE_ENV !== 'production') {
+    plugins.push(['@babel/plugin-transform-react-jsx-source']);
+  }
+  return {
+    plugins,
+    presets: [
+      ['@babel/preset-env', {targets}],
+      '@babel/preset-react',
+      '@babel/preset-flow',
+    ],
+  };
+};
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
new file mode 100644
index 0000000000000..19db444fe627f
--- /dev/null
+++ b/packages/react-devtools-shared/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "name": "react-devtools-shared",
+  "version": "0.0.0",
+  "devDependencies": {
+    "react-15": "npm:react@^15",
+    "react-dom-15": "npm:react-dom@^15"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "@reach/menu-button": "^0.1.17",
+    "@reach/tooltip": "^0.2.2",
+    "clipboard-js": "^0.3.6",
+    "events": "^3.0.0",
+    "local-storage-fallback": "^4.1.1",
+    "lodash.throttle": "^4.1.1",
+    "memoize-one": "^3.1.1",
+    "react-virtualized-auto-sizer": "^1.0.2"
+  }
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__mocks__/cssMock.js b/packages/react-devtools-shared/src/__tests__/__mocks__/cssMock.js
new file mode 100644
index 0000000000000..f053ebf7976e3
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__mocks__/cssMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
new file mode 100644
index 0000000000000..0c7b024dffb81
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -0,0 +1,605 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "set_of_sets": {
+      "0": {},
+      "1": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should dehydrate complex nested values when requested: 2: Inspect props.set_of_sets.0 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "set_of_sets": {
+      "0": {
+        "0": 1,
+        "1": 2,
+        "2": 3
+      },
+      "1": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {},
+      "c": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 1,
+        "b": {
+          "value": 1
+        }
+      },
+      "c": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 1,
+        "b": {
+          "value": 1
+        }
+      },
+      "c": {
+        "value": 1,
+        "d": {
+          "value": 1,
+          "e": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "value": 2,
+        "b": {
+          "value": 2
+        }
+      },
+      "c": {
+        "value": 2,
+        "d": {
+          "value": 2,
+          "e": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should inspect hooks for components that only use context: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "Context",
+      "value": true,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {}
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {}
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": {}
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {}
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {}
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {}
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {
+          "bar": {}
+        }
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": {
+        "foo": {
+          "bar": {
+            "baz": "hi"
+          }
+        }
+      },
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `
+{
+  "id": 3,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 0,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `
+{
+  "id": 3,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 0,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 2,
+    "b": "def"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "value": 1,
+      "a": {}
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "value": 2,
+      "a": {
+        "value": 2,
+        "b": {
+          "value": 2
+        }
+      }
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should poll for updates for the currently selected element: 2: updated state 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "a": 2,
+    "b": "def"
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "anonymous_fn": {},
+    "array_buffer": {},
+    "array_of_arrays": [
+      {}
+    ],
+    "big_int": {},
+    "bound_fn": {},
+    "data_view": {},
+    "date": {},
+    "fn": {},
+    "html_element": {},
+    "immutable": {
+      "0": {},
+      "1": {},
+      "2": {}
+    },
+    "map": {
+      "0": {},
+      "1": {}
+    },
+    "map_of_maps": {
+      "0": {},
+      "1": {}
+    },
+    "object_of_objects": {
+      "inner": {}
+    },
+    "react_element": {},
+    "regexp": {},
+    "set": {
+      "0": "abc",
+      "1": 123
+    },
+    "set_of_sets": {
+      "0": {},
+      "1": {}
+    },
+    "symbol": {},
+    "typed_array": {
+      "0": 100,
+      "1": -100,
+      "2": 0
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "data": {
+      "_number": 42,
+      "number": 42
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should support objects with no prototype: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "object": {
+      "string": "abc",
+      "number": 123,
+      "boolean": true
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "object": {
+      "name": "blah",
+      "hasOwnProperty": true
+    }
+  },
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": null,
+  "props": {
+    "boolean_false": false,
+    "boolean_true": true,
+    "infinity": null,
+    "integer_zero": 0,
+    "integer_one": 1,
+    "float": 1.23,
+    "string": "abc",
+    "string_empty": "",
+    "nan": null,
+    "value_null": null
+  },
+  "state": null
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
new file mode 100644
index 0000000000000..0699eb5b18dc5
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+      <Child>
+      <Child>
+`;
+
+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "hocDisplayNames": null,
+    "id": 7,
+    "type": 5,
+  },
+  Object {
+    "displayName": "Parent",
+    "hocDisplayNames": null,
+    "id": 9,
+    "type": 5,
+  },
+  Object {
+    "displayName": "Child",
+    "hocDisplayNames": null,
+    "id": 8,
+    "type": 5,
+  },
+]
+`;
+
+exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "hocDisplayNames": null,
+    "id": 2,
+    "type": 5,
+  },
+  Object {
+    "displayName": "Parent",
+    "hocDisplayNames": null,
+    "id": 3,
+    "type": 5,
+  },
+  Object {
+    "displayName": "Child",
+    "hocDisplayNames": null,
+    "id": 4,
+    "type": 5,
+  },
+]
+`;
+
+exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Parent" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "hocDisplayNames": null,
+    "id": 2,
+    "type": 5,
+  },
+  Object {
+    "displayName": "Parent",
+    "hocDisplayNames": null,
+    "id": 3,
+    "type": 5,
+  },
+]
+`;
+
+exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
+[root]
+    <Grandparent>
+`;
+
+exports[`OwnersListContext should include the current element even if there are no other owners: owners for "Grandparent" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "hocDisplayNames": null,
+    "id": 5,
+    "type": 5,
+  },
+]
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
new file mode 100644
index 0000000000000..927f3180b4219
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `
+[root]
+  ▾ <GrandParent>
+    ▾ <Parent>
+        <Child>
+`;
+
+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `
+[root]
+  ▾ <GrandParent>
+      <Parent>
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
new file mode 100644
index 0000000000000..2ccf1f16affca
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -0,0 +1,4019 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
+Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 16,
+  "fiberActualDurations": Map {
+    1 => 16,
+    2 => 16,
+    3 => 1,
+    5 => 1,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 1,
+    5 => 1,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 16,
+}
+`;
+
+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
+Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 15,
+  "fiberActualDurations": Map {
+    1 => 15,
+    2 => 15,
+    3 => 5,
+    4 => 2,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 3,
+    4 => 2,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 15,
+}
+`;
+
+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 3,
+  "fiberActualDurations": Map {
+    5 => 3,
+    3 => 3,
+  },
+  "fiberSelfDurations": Map {
+    5 => 3,
+    3 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 18,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 12,
+  "fiberActualDurations": Map {
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 10,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 12,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+  },
+  "duration": 13,
+  "fiberActualDurations": Map {
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 13,
+    1 => 13,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    4 => 1,
+    6 => 2,
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 25,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+  },
+  "duration": 10,
+  "fiberActualDurations": Map {
+    3 => 0,
+    2 => 10,
+    1 => 10,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 35,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+  },
+  "duration": 10,
+  "fiberActualDurations": Map {
+    2 => 10,
+    1 => 10,
+  },
+  "fiberSelfDurations": Map {
+    2 => 10,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 45,
+}
+`;
+
+exports[`ProfilingCache should collect data for each commit: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 12,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              12,
+            ],
+            Array [
+              2,
+              12,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              5,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              5,
+              1,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 12,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              6,
+              2,
+            ],
+            Array [
+              2,
+              13,
+            ],
+            Array [
+              1,
+              13,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              6,
+              2,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 25,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 35,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 45,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          17,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          49,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          12000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          12000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          5,
+          2,
+          2,
+          2,
+          4,
+          4,
+          4,
+          1000,
+          1,
+          5,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          5,
+          1000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          4,
+          6,
+          5,
+          4,
+          1,
+          14000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          2,
+          6,
+          4,
+          4,
+          2,
+          11000,
+          3,
+          2,
+          2,
+          3,
+          5,
+          4,
+          1,
+          11000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          1,
+          3,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 3 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
+Array [
+  0,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
+Array [
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
+Array [
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              11,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 11,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              1,
+              11,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 22,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              6,
+              2,
+            ],
+            Array [
+              2,
+              13,
+            ],
+            Array [
+              1,
+              13,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              6,
+              2,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 35,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          11000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          11000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          4,
+          1000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          49,
+          1,
+          5,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          5,
+          1000,
+          4,
+          2,
+          12000,
+          3,
+          2,
+          3,
+          3,
+          5,
+          4,
+          4,
+          1,
+          12000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          5,
+          6,
+          4,
+          4,
+          1,
+          14000,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "changeDescriptions": Map {
+        3 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        4 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        10 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 13,
+      "fiberActualDurations": Map {
+        3 => 0,
+        4 => 1,
+        10 => 2,
+        2 => 13,
+        1 => 13,
+      },
+      "fiberSelfDurations": Map {
+        3 => 0,
+        4 => 1,
+        10 => 2,
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "timestamp": 13,
+    },
+    Object {
+      "changeDescriptions": Map {
+        3 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 10,
+      "fiberActualDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        3 => 0,
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "timestamp": 34,
+    },
+    Object {
+      "changeDescriptions": Map {
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 10,
+      "fiberActualDurations": Map {
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        2 => 10,
+        1 => 0,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "timestamp": 44,
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    1 => 12,
+    2 => 12,
+    3 => 0,
+    4 => 1,
+    5 => 1,
+  },
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [
+    Array [
+      1,
+      1,
+      8,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      50,
+      1,
+      10,
+      5,
+      2,
+      2,
+      1,
+      2,
+      4,
+      10,
+      2000,
+      4,
+      2,
+      14000,
+      3,
+      2,
+      4,
+      3,
+      4,
+      10,
+      5,
+      4,
+      1,
+      14000,
+    ],
+    Array [
+      1,
+      1,
+      0,
+      2,
+      2,
+      10,
+      4,
+      4,
+      2,
+      11000,
+      3,
+      2,
+      2,
+      3,
+      5,
+      4,
+      1,
+      11000,
+    ],
+    Array [
+      1,
+      1,
+      0,
+      2,
+      1,
+      3,
+    ],
+  ],
+  "rootID": 1,
+  "snapshots": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "0",
+      "type": 5,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "1",
+      "type": 5,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "changeDescriptions": Map {
+        12 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        13 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        14 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      },
+      "duration": 11,
+      "fiberActualDurations": Map {
+        11 => 11,
+        12 => 11,
+        13 => 0,
+        14 => 1,
+      },
+      "fiberSelfDurations": Map {
+        11 => 0,
+        12 => 10,
+        13 => 0,
+        14 => 1,
+      },
+      "interactionIDs": Array [],
+      "priorityLevel": "Immediate",
+      "timestamp": 24,
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {},
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [
+    Array [
+      1,
+      11,
+      15,
+      6,
+      80,
+      97,
+      114,
+      101,
+      110,
+      116,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      48,
+      1,
+      11,
+      11,
+      1,
+      1,
+      4,
+      11,
+      11000,
+      1,
+      12,
+      5,
+      11,
+      0,
+      1,
+      0,
+      4,
+      12,
+      11000,
+      1,
+      13,
+      5,
+      12,
+      12,
+      2,
+      3,
+      4,
+      13,
+      0,
+      1,
+      14,
+      8,
+      12,
+      12,
+      2,
+      0,
+      4,
+      14,
+      1000,
+    ],
+  ],
+  "rootID": 11,
+  "snapshots": Map {},
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
+Object {
+  "commitData": Array [],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    6 => 11,
+    7 => 11,
+    8 => 0,
+    9 => 1,
+  },
+  "interactionCommits": Map {},
+  "interactions": Map {},
+  "operations": Array [],
+  "rootID": 6,
+  "snapshots": Map {
+    6 => Object {
+      "children": Array [
+        7,
+      ],
+      "displayName": null,
+      "id": 6,
+      "key": null,
+      "type": 11,
+    },
+    7 => Object {
+      "children": Array [
+        8,
+        9,
+      ],
+      "displayName": "Parent",
+      "id": 7,
+      "key": null,
+      "type": 5,
+    },
+    8 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 8,
+      "key": "0",
+      "type": 5,
+    },
+    9 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 9,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              10,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 13,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              10,
+              2,
+            ],
+            Array [
+              2,
+              13,
+            ],
+            Array [
+              1,
+              13,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+            Array [
+              10,
+              2,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 13,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 34,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "fiberActualDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 44,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
+          1,
+          12,
+        ],
+        Array [
+          2,
+          12,
+        ],
+        Array [
+          3,
+          0,
+        ],
+        Array [
+          4,
+          1,
+        ],
+        Array [
+          5,
+          1,
+        ],
+      ],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          10,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          10,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          3,
+          4,
+          10,
+          5,
+          4,
+          1,
+          14000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          2,
+          10,
+          4,
+          4,
+          2,
+          11000,
+          3,
+          2,
+          2,
+          3,
+          5,
+          4,
+          1,
+          11000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          1,
+          3,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [
+        Array [
+          1,
+          Object {
+            "children": Array [
+              2,
+            ],
+            "displayName": null,
+            "id": 1,
+            "key": null,
+            "type": 11,
+          },
+        ],
+        Array [
+          2,
+          Object {
+            "children": Array [
+              3,
+              4,
+              5,
+            ],
+            "displayName": "Parent",
+            "id": 2,
+            "key": null,
+            "type": 5,
+          },
+        ],
+        Array [
+          3,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 3,
+            "key": "0",
+            "type": 5,
+          },
+        ],
+        Array [
+          4,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 4,
+            "key": "1",
+            "type": 5,
+          },
+        ],
+        Array [
+          5,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 5,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              12,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              13,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              14,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              11,
+              11,
+            ],
+            Array [
+              12,
+              11,
+            ],
+            Array [
+              13,
+              0,
+            ],
+            Array [
+              14,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              11,
+              0,
+            ],
+            Array [
+              12,
+              10,
+            ],
+            Array [
+              13,
+              0,
+            ],
+            Array [
+              14,
+              1,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 24,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          11,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          11,
+          11,
+          1,
+          1,
+          4,
+          11,
+          11000,
+          1,
+          12,
+          5,
+          11,
+          0,
+          1,
+          0,
+          4,
+          12,
+          11000,
+          1,
+          13,
+          5,
+          12,
+          12,
+          2,
+          3,
+          4,
+          13,
+          0,
+          1,
+          14,
+          8,
+          12,
+          12,
+          2,
+          0,
+          4,
+          14,
+          1000,
+        ],
+      ],
+      "rootID": 11,
+      "snapshots": Array [],
+    },
+    Object {
+      "commitData": Array [],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
+          6,
+          11,
+        ],
+        Array [
+          7,
+          11,
+        ],
+        Array [
+          8,
+          0,
+        ],
+        Array [
+          9,
+          1,
+        ],
+      ],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [],
+      "rootID": 6,
+      "snapshots": Array [
+        Array [
+          6,
+          Object {
+            "children": Array [
+              7,
+            ],
+            "displayName": null,
+            "id": 6,
+            "key": null,
+            "type": 11,
+          },
+        ],
+        Array [
+          7,
+          Object {
+            "children": Array [
+              8,
+              9,
+            ],
+            "displayName": "Parent",
+            "id": 7,
+            "key": null,
+            "type": 5,
+          },
+        ],
+        Array [
+          8,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 8,
+            "key": "0",
+            "type": 5,
+          },
+        ],
+        Array [
+          9,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "id": 9,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
+  ],
+  "version": 4,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 2 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    3 => 0,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    3 => 0,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 4 1`] = `
+Object {
+  "changeDescriptions": Map {
+    3 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+      ],
+      "displayName": "Component",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          27,
+          16,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          46,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          9,
+          67,
+          111,
+          109,
+          112,
+          111,
+          110,
+          101,
+          110,
+          116,
+          1,
+          1,
+          11,
+          1,
+          1,
+          1,
+          2,
+          2,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          0,
+          1,
+          3,
+          5,
+          2,
+          0,
+          2,
+          0,
+          4,
+          3,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = `
+Object {
+  "changeDescriptions": Map {
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    4 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    6 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": true,
+      "props": null,
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "fiberSelfDurations": Map {
+    1 => 0,
+    2 => 0,
+    3 => 0,
+    4 => 0,
+    5 => 0,
+    6 => 0,
+    7 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 1 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    4 => Object {
+      "context": true,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": true,
+      "isFirstMount": false,
+      "props": Array [
+        "count",
+      ],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [
+        "count",
+      ],
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": Array [
+        "count",
+      ],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 2 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "foo",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 3 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "foo",
+        "bar",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 4 1`] = `
+Object {
+  "changeDescriptions": Map {
+    5 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    4 => Object {
+      "context": false,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    7 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    6 => Object {
+      "context": Array [],
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+    2 => Object {
+      "context": null,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [
+        "bar",
+      ],
+      "state": Array [],
+    },
+  },
+  "duration": 0,
+  "fiberActualDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    5 => 0,
+    4 => 0,
+    7 => 0,
+    6 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "interactionIDs": Array [],
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+}
+`;
+
+exports[`ProfilingCache should record changed props/state/context/hooks: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": true,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": true,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [
+                  "count",
+                ],
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": Array [
+                  "count",
+                ],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "foo",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "foo",
+                  "bar",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": false,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": Array [],
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "bar",
+                ],
+                "state": Array [],
+              },
+            ],
+          ],
+          "duration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              5,
+              0,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              7,
+              0,
+            ],
+            Array [
+              6,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [],
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+        },
+      ],
+      "displayName": "LegacyContextProvider",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [],
+      "interactions": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          110,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          16,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          46,
+          80,
+          114,
+          111,
+          118,
+          105,
+          100,
+          101,
+          114,
+          21,
+          77,
+          111,
+          100,
+          101,
+          114,
+          110,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          26,
+          70,
+          117,
+          110,
+          99,
+          116,
+          105,
+          111,
+          110,
+          67,
+          111,
+          109,
+          112,
+          111,
+          110,
+          101,
+          110,
+          116,
+          87,
+          105,
+          116,
+          104,
+          72,
+          111,
+          111,
+          107,
+          115,
+          21,
+          76,
+          101,
+          103,
+          97,
+          99,
+          121,
+          67,
+          111,
+          110,
+          116,
+          101,
+          120,
+          116,
+          67,
+          111,
+          110,
+          115,
+          117,
+          109,
+          101,
+          114,
+          1,
+          1,
+          11,
+          1,
+          1,
+          1,
+          2,
+          1,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          0,
+          1,
+          3,
+          2,
+          2,
+          2,
+          2,
+          0,
+          4,
+          3,
+          0,
+          1,
+          4,
+          1,
+          3,
+          2,
+          3,
+          0,
+          4,
+          4,
+          0,
+          1,
+          5,
+          5,
+          4,
+          4,
+          4,
+          0,
+          4,
+          5,
+          0,
+          1,
+          6,
+          1,
+          3,
+          2,
+          5,
+          0,
+          4,
+          6,
+          0,
+          1,
+          7,
+          5,
+          6,
+          6,
+          4,
+          0,
+          4,
+          7,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
+
+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
+Array [
+  Object {
+    "__count": 1,
+    "id": 0,
+    "name": "mount: one child",
+    "timestamp": 0,
+  },
+  Object {
+    "__count": 0,
+    "id": 1,
+    "name": "update: two children",
+    "timestamp": 11,
+  },
+]
+`;
+
+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              11,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              4,
+              1,
+            ],
+          ],
+          "interactionIDs": Array [
+            0,
+          ],
+          "priorityLevel": "Immediate",
+          "timestamp": 11,
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              3,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "fiberActualDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              1,
+              11,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "interactionIDs": Array [
+            1,
+          ],
+          "priorityLevel": "Immediate",
+          "timestamp": 22,
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "interactionCommits": Array [
+        Array [
+          0,
+          Array [
+            0,
+          ],
+        ],
+        Array [
+          1,
+          Array [
+            1,
+          ],
+        ],
+      ],
+      "interactions": Array [
+        Array [
+          0,
+          Object {
+            "__count": 1,
+            "id": 0,
+            "name": "mount: one child",
+            "timestamp": 0,
+          },
+        ],
+        Array [
+          1,
+          Object {
+            "__count": 0,
+            "id": 1,
+            "name": "update: two children",
+            "timestamp": 11,
+          },
+        ],
+      ],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          1,
+          11,
+          1,
+          1,
+          4,
+          1,
+          11000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          11000,
+          1,
+          3,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          3,
+          0,
+          1,
+          4,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          4,
+          1000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          49,
+          1,
+          5,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          5,
+          1000,
+          4,
+          2,
+          12000,
+          3,
+          2,
+          3,
+          3,
+          5,
+          4,
+          4,
+          1,
+          12000,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "version": 4,
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
new file mode 100644
index 0000000000000..8399be81c6dde
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -0,0 +1,452 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 15,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 15,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 3,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
+Object {
+  "baseDuration": 15,
+  "depth": 2,
+  "idToDepthMap": Map {
+    2 => 1,
+    5 => 2,
+    4 => 2,
+    3 => 2,
+  },
+  "maxSelfDuration": 10,
+  "renderPathNodes": Set {
+    1,
+    2,
+  },
+  "rows": Array [
+    Array [
+      Object {
+        "actualDuration": 15,
+        "didRender": true,
+        "id": 2,
+        "label": "Parent (10ms of 15ms)",
+        "name": "Parent",
+        "offset": 0,
+        "selfDuration": 10,
+        "treeBaseDuration": 15,
+      },
+    ],
+    Array [
+      Object {
+        "actualDuration": 0,
+        "didRender": true,
+        "id": 5,
+        "label": "Child (Memo) key=\\"third\\" (<0.1ms of <0.1ms)",
+        "name": "Child",
+        "offset": 15,
+        "selfDuration": 0,
+        "treeBaseDuration": 0,
+      },
+      Object {
+        "actualDuration": 2,
+        "didRender": true,
+        "id": 4,
+        "label": "Child (Memo) key=\\"second\\" (2ms of 2ms)",
+        "name": "Child",
+        "offset": 13,
+        "selfDuration": 2,
+        "treeBaseDuration": 2,
+      },
+      Object {
+        "actualDuration": 3,
+        "didRender": true,
+        "id": 3,
+        "label": "Child (Memo) key=\\"first\\" (3ms of 3ms)",
+        "name": "Child",
+        "offset": 10,
+        "selfDuration": 3,
+        "treeBaseDuration": 3,
+      },
+    ],
+  ],
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 15,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 15,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 3,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
+Object {
+  "baseDuration": 15,
+  "depth": 2,
+  "idToDepthMap": Map {
+    2 => 1,
+    5 => 2,
+    4 => 2,
+    3 => 2,
+  },
+  "maxSelfDuration": 10,
+  "renderPathNodes": Set {
+    1,
+  },
+  "rows": Array [
+    Array [
+      Object {
+        "actualDuration": 10,
+        "didRender": true,
+        "id": 2,
+        "label": "Parent (10ms of 10ms)",
+        "name": "Parent",
+        "offset": 0,
+        "selfDuration": 10,
+        "treeBaseDuration": 15,
+      },
+    ],
+    Array [
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 5,
+        "label": "Child (Memo) key=\\"third\\"",
+        "name": "Child",
+        "offset": 15,
+        "selfDuration": 0,
+        "treeBaseDuration": 0,
+      },
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 4,
+        "label": "Child (Memo) key=\\"second\\"",
+        "name": "Child",
+        "offset": 13,
+        "selfDuration": 0,
+        "treeBaseDuration": 2,
+      },
+      Object {
+        "actualDuration": 0,
+        "didRender": false,
+        "id": 3,
+        "label": "Child (Memo) key=\\"first\\"",
+        "name": "Child",
+        "offset": 10,
+        "selfDuration": 0,
+        "treeBaseDuration": 3,
+      },
+    ],
+  ],
+}
+`;
+
+exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
+Object {
+  "interactions": Array [
+    Object {
+      "__count": 1,
+      "id": 0,
+      "name": "mount",
+      "timestamp": 0,
+    },
+    Object {
+      "__count": 0,
+      "id": 1,
+      "name": "update",
+      "timestamp": 15,
+    },
+  ],
+  "lastInteractionTime": 25,
+  "maxCommitDuration": 15,
+}
+`;
+
+exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
+Object {
+  "interactions": Array [
+    Object {
+      "__count": 1,
+      "id": 0,
+      "name": "mount",
+      "timestamp": 0,
+    },
+    Object {
+      "__count": 0,
+      "id": 1,
+      "name": "update",
+      "timestamp": 15,
+    },
+  ],
+  "lastInteractionTime": 25,
+  "maxCommitDuration": 15,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 15,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 15,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 3,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `
+Object {
+  "maxValue": 10,
+  "nodes": Array [
+    Object {
+      "id": 2,
+      "label": "Parent (10ms)",
+      "name": "Parent",
+      "value": 10,
+    },
+    Object {
+      "id": 3,
+      "label": "Child (Memo) key=\\"first\\" (3ms)",
+      "name": "Child",
+      "value": 3,
+    },
+    Object {
+      "id": 4,
+      "label": "Child (Memo) key=\\"second\\" (2ms)",
+      "name": "Child",
+      "value": 2,
+    },
+    Object {
+      "id": 5,
+      "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
+      "name": "Child",
+      "value": 0,
+    },
+  ],
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 15,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 15,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "first",
+      "parentID": 2,
+      "treeBaseDuration": 3,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "second",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": "third",
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `
+Object {
+  "maxValue": 10,
+  "nodes": Array [
+    Object {
+      "id": 2,
+      "label": "Parent (10ms)",
+      "name": "Parent",
+      "value": 10,
+    },
+  ],
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
new file mode 100644
index 0000000000000..6f8573b08e79f
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 12,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 12,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 16,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+        5,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 16,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "1",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 5,
+      "key": "2",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 14,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+        4,
+      ],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 14,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 3,
+      "key": "0",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "id": 4,
+      "key": "1",
+      "parentID": 2,
+      "treeBaseDuration": 2,
+      "type": 8,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 10,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [],
+      "displayName": "Parent",
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 10,
+      "type": 5,
+    },
+  },
+  "rootID": 1,
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
new file mode 100644
index 0000000000000..92d1efcb203f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -0,0 +1,629 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading>
+`;
+
+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Inside">
+`;
+
+exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 1: loading 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <SuspenseList>
+        <Component key="A">
+      ▾ <Suspense>
+          <Loading>
+`;
+
+exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <SuspenseList>
+        <Component key="A">
+      ▾ <Suspense>
+          <Component key="B">
+        <Component key="C">
+`;
+
+exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▾ <Parent>
+        <Child>
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+      <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+[root]
+  ▾ <Parent key="B">
+      <Child key="0">
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▾ <Parent key="A">
+      <Child key="0">
+      <Child key="1">
+      <Child key="2">
+      <Child key="3">
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+        <Child key="2">
+        <Child key="3">
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Foo key="foo">
+        <Component key="0">
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading>
+`;
+
+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Inside">
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `
+[root]
+  ▸ <SuspenseTree>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+      ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+        <Fallback>
+`;
+
+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `
+[root]
+  ▾ <SuspenseTree>
+    ▾ <Suspense>
+      ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▸ <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+            <Nested>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <Parent>
+    ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▸ <Parent key="A">
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▸ <Parent>
+  ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
+[root]
+  ▸ <Parent>
+  ▸ <Parent>
+`;
+
+exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▸ <Bar key="bar">
+    ▸ <Foo key="foo">
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Bar key="bar">
+        <Component key="0">
+        <Component key="1">
+    ▾ <Foo key="foo">
+        <Component key="0">
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
+[root]
+    <Component>
+`;
+
+exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `
+[root]
+    <Root>
+`;
+
+exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
+
+exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
+[root]
+    <Child key="123">
+`;
+
+exports[`Store should show the right display names for special component types 1`] = `
+[root]
+  ▾ <App>
+      <MyComponent>
+      <MyComponent> [ForwardRef]
+    ▾ <Anonymous> [ForwardRef]
+        <MyComponent>
+      <Custom> [ForwardRef]
+      <MyComponent> [Memo]
+    ▾ <MyComponent> [Memo]
+        <MyComponent> [ForwardRef]
+    ▾ <Suspense>
+        <MyComponent>
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
new file mode 100644
index 0000000000000..884b6cbcec85d
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store component filters should filter HOCs: 1: mount 1`] = `
+[root]
+  ▾ <Component> [Bar][Foo]
+    ▾ <Component> [Foo]
+      ▾ <Component>
+          <div>
+`;
+
+exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `
+[root]
+  ▾ <Component> [Bar][Foo]
+    ▾ <Component> [Foo]
+      ▾ <Component>
+          <div>
+`;
+
+exports[`Store component filters should filter by display name: 1: mount 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+  ▾ <Bar>
+      <Text>
+  ▾ <Baz>
+      <Text>
+`;
+
+exports[`Store component filters should filter by display name: 2: filter "Foo" 1`] = `
+[root]
+    <Text>
+  ▾ <Bar>
+      <Text>
+  ▾ <Baz>
+      <Text>
+`;
+
+exports[`Store component filters should filter by display name: 3: filter "Ba" 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+    <Text>
+    <Text>
+`;
+
+exports[`Store component filters should filter by display name: 4: filter "B.z" 1`] = `
+[root]
+  ▾ <Foo>
+      <Text>
+  ▾ <Bar>
+      <Text>
+    <Text>
+`;
+
+exports[`Store component filters should filter by path: 1: mount 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;
+
+exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
+
+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+      <div>
+`;
+
+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `
+[root]
+  ▾ <Root>
+      <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component>
+          <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `
+[root]
+  ▾ <Root>
+      <Component>
+`;
+
+exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `
+[root]
+  ▾ <div>
+    ▾ <Component>
+        <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `
+[root]
+  ▾ <div>
+      <div>
+`;
+
+exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component>
+          <div>
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
new file mode 100644
index 0000000000000..28069711fd680
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate key="intermediate">
+        <Leaf key="leaf">
+      ▾ <Wrapper key="wrapper">
+          <Leaf>
+      <Leaf key="leaf">
+`;
+
+exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate key=\\"intermediate\\">
+        <Leaf>
+      <Leaf key=\\"leaf\\">"
+`;
+
+exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `
+"  ▾ <Intermediate key=\\"intermediate\\">
+      <Leaf key=\\"leaf\\">
+    ▾ <Wrapper key=\\"wrapper\\">"
+`;
+
+exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf>
+`;
+
+exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate>
+        <Leaf>"
+`;
+
+exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
+"  ▾ <Intermediate>
+    ▾ <Wrapper>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+    ▾ <Intermediate>
+        <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf>
+    ▾ <Intermediate>
+      ▾ <Wrapper>
+          <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf>
+    ▾ <Intermediate>
+        <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf>"
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `
+[root]
+    <Root>
+`;
+
+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `"    <Root>"`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf key="A">
+      <Leaf key="B">
+      <Leaf key="C">
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf key=\\"A\\">
+      <Leaf key=\\"B\\">
+      <Leaf key=\\"C\\">"
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `
+[root]
+  ▾ <Root>
+      <Leaf key="C">
+      <Leaf key="B">
+      <Leaf key="A">
+`;
+
+exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `
+"  ▾ <Root>
+      <Leaf key=\\"C\\">
+      <Leaf key=\\"B\\">
+      <Leaf key=\\"A\\">"
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap
new file mode 100644
index 0000000000000..76ce00a1098ea
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap
@@ -0,0 +1,493 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <C key="c">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <B key="b">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <C key="c">
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <B key="b">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+      ▾ <MaybeSuspend>
+          <A key="a">
+          <Z>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+        <C key="c">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <B key="b">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 17`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 18`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 19`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <C key="c">
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 20`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 21`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 22`] = `
+[root]
+  ▾ <Root>
+      <X>
+      <Suspense>
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 23`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <B key="b">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 24`] = `
+[root]
+  ▾ <Root>
+      <X>
+    ▾ <Suspense>
+        <A key="a">
+      <Y>
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test with different tree operations (Legacy Mode): 1: abcde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+      <C key="c">
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle a stress test with different tree operations (Legacy Mode): 2: abxde 1`] = `
+[root]
+  ▾ <Parent>
+      <A key="a">
+      <B key="b">
+    ▾ <C key="c">
+        <X>
+      <D key="d">
+      <E key="e">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 1`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 2`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 3`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 4`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 5`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 6`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 7`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 8`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 9`] = `
+[root]
+  ▾ <Root>
+      <D key="d">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 10`] = `
+[root]
+  ▾ <Root>
+      <E key="e">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 11`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <B key="b">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 12`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <A key="a">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 13`] = `
+[root]
+  ▾ <Root>
+      <B key="b">
+      <C key="c">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 14`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <B key="b">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 15`] = `
+[root]
+  ▾ <Root>
+      <A key="a">
+      <C key="c">
+`;
+
+exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 16`] = `
+[root]
+  ▾ <Root>
+      <C key="c">
+      <A key="a">
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
new file mode 100644
index 0000000000000..3130bd29239f9
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
@@ -0,0 +1,1204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `
+[root]
+  ▾ <Parent>
+    ▾ <Suspense>
+      ▾ <Child>
+        ▾ <Suspense>
+            <Grandchild>
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 5,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 3,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [
+        6,
+      ],
+      "depth": 1,
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 4,
+      "type": 12,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 2,
+      "displayName": "Grandchild",
+      "hocDisplayNames": null,
+      "id": 6,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 5,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 4,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 3,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [
+        6,
+      ],
+      "depth": 1,
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 4,
+      "type": 12,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 2,
+      "displayName": "Grandchild",
+      "hocDisplayNames": null,
+      "id": 6,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 4,
+      "parentID": 5,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 4,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 5,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Parent>
+      <Child>
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 0,
+      "parentID": 2,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 1,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 2,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 0,
+      "parentID": 1,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 2,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 0,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child key="0">
+        <Child key="1">
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": "0",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": "1",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 2,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": "0",
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 1,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": Array [
+    Object {
+      "children": Array [
+        4,
+        5,
+      ],
+      "depth": 0,
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 3,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 2,
+      "parentID": 2,
+      "type": 5,
+      "weight": 3,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+    Object {
+      "children": Array [],
+      "depth": 1,
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 5,
+      "isCollapsed": false,
+      "key": null,
+      "ownerID": 3,
+      "parentID": 3,
+      "type": 5,
+      "weight": 1,
+    },
+  ],
+  "ownerID": 3,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+    <Baz>
+    <Qux> [withHOC]
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    2,
+  ],
+  "searchText": "f",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "y",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    5,
+  ],
+  "searchText": "w",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Bar>
+    <Baz>
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 3,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+  ],
+  "searchText": "ba",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `
+[root]
+    <Foo>
+    <Baz>
+    <Bar>
+    <Baz>
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for "ba" 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 2,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 1,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 2,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": 0,
+  "searchResults": Array [
+    3,
+    4,
+    5,
+  ],
+  "searchText": "ba",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 2,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 0,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `
+Object {
+  "inspectedElementID": 8,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 8,
+  "selectedElementIndex": 6,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `
+Object {
+  "inspectedElementID": 6,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 6,
+  "selectedElementIndex": 4,
+}
+`;
+
+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 7,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <Parent>
+        <Child>
+        <Child>
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `
+Object {
+  "inspectedElementID": null,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": null,
+  "selectedElementIndex": null,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `
+Object {
+  "inspectedElementID": 3,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 3,
+  "selectedElementIndex": 1,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `
+Object {
+  "inspectedElementID": 4,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 4,
+  "selectedElementIndex": 2,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `
+Object {
+  "inspectedElementID": 5,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 5,
+  "selectedElementIndex": 3,
+}
+`;
+
+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `
+Object {
+  "inspectedElementID": 2,
+  "numElements": 4,
+  "ownerFlatTree": null,
+  "ownerID": null,
+  "searchIndex": null,
+  "searchResults": Array [],
+  "searchText": "",
+  "selectedElementID": 2,
+  "selectedElementIndex": 0,
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js
new file mode 100644
index 0000000000000..3d24997b60fe7
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js
@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('Bridge', () => {
+  let Bridge;
+
+  beforeEach(() => {
+    Bridge = require('react-devtools-shared/src/bridge').default;
+  });
+
+  it('should shutdown properly', () => {
+    const wall = {
+      listen: jest.fn(() => () => {}),
+      send: jest.fn(),
+    };
+    const bridge = new Bridge(wall);
+
+    // Check that we're wired up correctly.
+    bridge.send('reloadAppForProfiling');
+    jest.runAllTimers();
+    expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');
+
+    // Should flush pending messages and then shut down.
+    wall.send.mockClear();
+    bridge.send('update', '1');
+    bridge.send('update', '2');
+    bridge.shutdown();
+    jest.runAllTimers();
+    expect(wall.send).toHaveBeenCalledWith('update', '1');
+    expect(wall.send).toHaveBeenCalledWith('update', '2');
+    expect(wall.send).toHaveBeenCalledWith('shutdown');
+
+    // Verify that the Bridge doesn't send messages after shutdown.
+    spyOn(console, 'warn');
+    wall.send.mockClear();
+    bridge.send('should not send');
+    jest.runAllTimers();
+    expect(wall.send).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalledWith(
+      'Cannot send message "should not send" through a Bridge that has been shutdown.',
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
new file mode 100644
index 0000000000000..c858a755f9eef
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -0,0 +1,344 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('console', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let fakeConsole;
+  let mockError;
+  let mockInfo;
+  let mockLog;
+  let mockWarn;
+  let patchConsole;
+  let unpatchConsole;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    const Console = require('react-devtools-shared/src/backend/console');
+    patchConsole = Console.patch;
+    unpatchConsole = Console.unpatch;
+
+    // Patch a fake console so we can verify with tests below.
+    // Patching the real console is too complicated,
+    // because Jest itself has hooks into it as does our test env setup.
+    mockError = jest.fn();
+    mockInfo = jest.fn();
+    mockLog = jest.fn();
+    mockWarn = jest.fn();
+    fakeConsole = {
+      error: mockError,
+      info: mockInfo,
+      log: mockLog,
+      warn: mockWarn,
+    };
+
+    Console.dangerous_setTargetConsoleForTesting(fakeConsole);
+
+    // Note the Console module only patches once,
+    // so it's important to patch the test console before injection.
+    patchConsole();
+
+    const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
+      inject(internals);
+
+      Console.registerRenderer(internals);
+    };
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const utils = require('./utils');
+    act = utils.act;
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
+  it('should not patch console methods that do not receive component stacks', () => {
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.info).toBe(mockInfo);
+    expect(fakeConsole.log).toBe(mockLog);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+  });
+
+  it('should only patch the console once', () => {
+    const {error, warn} = fakeConsole;
+
+    patchConsole();
+
+    expect(fakeConsole.error).toBe(error);
+    expect(fakeConsole.warn).toBe(warn);
+  });
+
+  it('should un-patch when requested', () => {
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+
+    unpatchConsole();
+
+    expect(fakeConsole.error).toBe(mockError);
+    expect(fakeConsole.warn).toBe(mockWarn);
+  });
+
+  it('should pass through logs when there is no current fiber', () => {
+    expect(mockLog).toHaveBeenCalledTimes(0);
+    expect(mockWarn).toHaveBeenCalledTimes(0);
+    expect(mockError).toHaveBeenCalledTimes(0);
+    fakeConsole.log('log');
+    fakeConsole.warn('warn');
+    fakeConsole.error('error');
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
+
+  it('should not append multiple stacks', () => {
+    const Child = () => {
+      fakeConsole.warn('warn\n    in Child (at fake.js:123)');
+      fakeConsole.error('error', '\n    in Child (at fake.js:123)');
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe(
+      'warn\n    in Child (at fake.js:123)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[0][1]).toBe('\n    in Child (at fake.js:123)');
+  });
+
+  it('should append component stacks to errors and warnings logged during render', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = () => {
+      fakeConsole.error('error');
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from effects', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = () => {
+      React.useLayoutEffect(() => {
+        fakeConsole.error('active error');
+        fakeConsole.log('active log');
+        fakeConsole.warn('active warn');
+      });
+      React.useEffect(() => {
+        fakeConsole.error('passive error');
+        fakeConsole.log('passive log');
+        fakeConsole.warn('passive warn');
+      });
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('active log');
+    expect(mockLog.mock.calls[1]).toHaveLength(1);
+    expect(mockLog.mock.calls[1][0]).toBe('passive log');
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('active warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('active error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('passive error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from commit hooks', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any> {
+      componentDidMount() {
+        fakeConsole.error('didMount error');
+        fakeConsole.log('didMount log');
+        fakeConsole.warn('didMount warn');
+      }
+      componentDidUpdate() {
+        fakeConsole.error('didUpdate error');
+        fakeConsole.log('didUpdate log');
+        fakeConsole.warn('didUpdate warn');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Parent />, container));
+    act(() => ReactDOM.render(<Parent />, container));
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('didMount log');
+    expect(mockLog.mock.calls[1]).toHaveLength(1);
+    expect(mockLog.mock.calls[1][0]).toBe('didUpdate log');
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('didMount error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+  });
+
+  it('should append component stacks to errors and warnings logged from gDSFP', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = () => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any, any> {
+      state = {};
+      static getDerivedStateFromProps() {
+        fakeConsole.error('error');
+        fakeConsole.log('log');
+        fakeConsole.warn('warn');
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
+      '\n    in Child (at **)\n    in Parent (at **)',
+    );
+  });
+
+  it('should append stacks after being uninstalled and reinstalled', () => {
+    const Child = () => {
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return null;
+    };
+
+    unpatchConsole();
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+
+    patchConsole();
+    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
+      '\n    in Child (at **)',
+    );
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
+      '\n    in Child (at **)',
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
new file mode 100644
index 0000000000000..82a2c5bb19306
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -0,0 +1,1475 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type {
+  CopyInspectedElementPath,
+  GetInspectedElementPath,
+  StoreAsGlobal,
+} from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('InspectedElementContext', () => {
+  let React;
+  let ReactDOM;
+  let PropTypes;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let meta;
+  let utils;
+
+  let BridgeContext;
+  let InspectedElementContext;
+  let InspectedElementContextController;
+  let StoreContext;
+  let TestUtils;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    meta = require('react-devtools-shared/src/hydration').meta;
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    PropTypes = require('prop-types');
+    TestUtils = require('react-dom/test-utils');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    InspectedElementContext = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
+      .InspectedElementContext;
+    InspectedElementContextController = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
+      .InspectedElementContextController;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
+    TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+  });
+
+  const Contexts = ({
+    children,
+    defaultSelectedElementID = null,
+    defaultSelectedElementIndex = null,
+  }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultSelectedElementID={defaultSelectedElementID}
+          defaultSelectedElementIndex={defaultSelectedElementIndex}>
+          <InspectedElementContextController>
+            {children}
+          </InspectedElementContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('should inspect the currently selected element', async done => {
+    const Example = () => {
+      const [count] = React.useState(1);
+      return count;
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example a={1} b="abc" />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let didFinish = false;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async done => {
+    const contextData = {
+      bool: true,
+    };
+
+    // Legacy Context API.
+    class LegacyContextProvider extends React.Component<any> {
+      static childContextTypes = {
+        bool: PropTypes.bool,
+      };
+      getChildContext() {
+        return contextData;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+    class LegacyContextConsumer extends React.Component<any> {
+      static contextTypes = {
+        bool: PropTypes.bool,
+      };
+      render() {
+        return null;
+      }
+    }
+
+    // Modern Context API
+    const BoolContext = React.createContext(contextData.bool);
+    BoolContext.displayName = 'BoolContext';
+
+    class ModernContextType extends React.Component<any> {
+      static contextType = BoolContext;
+      render() {
+        return null;
+      }
+    }
+
+    const ModernContext = React.createContext();
+    ModernContext.displayName = 'ModernContext';
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <React.Fragment>
+          <LegacyContextProvider>
+            <LegacyContextConsumer />
+          </LegacyContextProvider>
+          <BoolContext.Consumer>{value => null}</BoolContext.Consumer>
+          <ModernContextType />
+          <ModernContext.Provider value={contextData}>
+            <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
+          </ModernContext.Provider>
+        </React.Fragment>,
+        container,
+      ),
+    );
+
+    const ids = [
+      {
+        // <LegacyContextConsumer />
+        id: ((store.getElementIDAtIndex(1): any): number),
+        shouldHaveLegacyContext: true,
+      },
+      {
+        // <BoolContext.Consumer>
+        id: ((store.getElementIDAtIndex(2): any): number),
+        shouldHaveLegacyContext: false,
+      },
+      {
+        // <ModernContextType />
+        id: ((store.getElementIDAtIndex(3): any): number),
+        shouldHaveLegacyContext: false,
+      },
+      {
+        // <ModernContext.Consumer>
+        id: ((store.getElementIDAtIndex(5): any): number),
+        shouldHaveLegacyContext: false,
+      },
+    ];
+
+    function Suspender({target, shouldHaveLegacyContext}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(target);
+
+      expect(inspectedElement.context).not.toBe(null);
+      expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
+
+      return null;
+    }
+
+    for (let i = 0; i < ids.length; i++) {
+      const {id, shouldHaveLegacyContext} = ids[i];
+
+      await utils.actAsync(
+        () =>
+          TestRenderer.create(
+            <Contexts
+              defaultSelectedElementID={id}
+              defaultSelectedElementIndex={0}>
+              <React.Suspense fallback={null}>
+                <Suspender
+                  target={id}
+                  shouldHaveLegacyContext={shouldHaveLegacyContext}
+                />
+              </React.Suspense>
+            </Contexts>,
+          ),
+        false,
+      );
+    }
+    done();
+  });
+
+  it('should poll for updates for the currently selected element', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(
+      () => ReactDOM.render(<Example a={1} b="abc" />, container),
+      false,
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    let renderer;
+
+    await utils.actAsync(() => {
+      renderer = TestRenderer.create(
+        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={0}>
+          <React.Suspense fallback={null}>
+            <Suspender target={id} />
+          </React.Suspense>
+        </Contexts>,
+      );
+    }, false);
+    expect(inspectedElement).toMatchSnapshot('1: initial render');
+
+    await utils.actAsync(
+      () => ReactDOM.render(<Example a={2} b="def" />, container),
+      false,
+    );
+
+    inspectedElement = null;
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(inspectedElement).toMatchSnapshot('2: updated state');
+
+    done();
+  });
+
+  it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {
+    let targetRenderCount = 0;
+
+    const Wrapper = ({children}) => children;
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      React.useState(0);
+      return null;
+    });
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Wrapper>
+          <Target a={1} b="abc" />
+        </Wrapper>,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(1): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(target);
+      return null;
+    }
+
+    targetRenderCount = 0;
+
+    let renderer;
+    await utils.actAsync(
+      () =>
+        (renderer = TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        )),
+      false,
+    );
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement).toMatchSnapshot('1: initial render');
+
+    const initialInspectedElement = inspectedElement;
+
+    targetRenderCount = 0;
+    inspectedElement = null;
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(targetRenderCount).toBe(0);
+    expect(inspectedElement).toEqual(initialInspectedElement);
+
+    targetRenderCount = 0;
+
+    await utils.actAsync(
+      () =>
+        ReactDOM.render(
+          <Wrapper>
+            <Target a={2} b="def" />
+          </Wrapper>,
+          container,
+        ),
+      false,
+    );
+
+    // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
+    expect(targetRenderCount).toBe(2);
+    expect(inspectedElement).toMatchSnapshot('2: updated state');
+
+    done();
+  });
+
+  it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {
+    let targetRenderCount = 0;
+
+    const errorSpy = ((console: any).error = jest.fn());
+    const infoSpy = ((console: any).info = jest.fn());
+    const logSpy = ((console: any).log = jest.fn());
+    const warnSpy = ((console: any).warn = jest.fn());
+
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      console.error('error');
+      console.info('info');
+      console.log('log');
+      console.warn('warn');
+      React.useState(0);
+      return null;
+    });
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Target a={1} b="abc" />, container),
+    );
+
+    expect(targetRenderCount).toBe(1);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    expect(errorSpy).toHaveBeenCalledWith('error');
+    expect(infoSpy).toHaveBeenCalledTimes(1);
+    expect(infoSpy).toHaveBeenCalledWith('info');
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(logSpy).toHaveBeenCalledWith('log');
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith('warn');
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+
+    expect(inspectedElement).not.toBe(null);
+    expect(targetRenderCount).toBe(2);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    expect(infoSpy).toHaveBeenCalledTimes(1);
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+
+    done();
+  });
+
+  it('should support simple data types', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          boolean_false={false}
+          boolean_true={true}
+          infinity={Infinity}
+          integer_zero={0}
+          integer_one={1}
+          float={1.23}
+          string="abc"
+          string_empty=""
+          nan={NaN}
+          value_null={null}
+          value_undefined={undefined}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const {props} = (inspectedElement: any);
+    expect(props.boolean_false).toBe(false);
+    expect(props.boolean_true).toBe(true);
+    expect(Number.isFinite(props.infinity)).toBe(false);
+    expect(props.integer_zero).toEqual(0);
+    expect(props.integer_one).toEqual(1);
+    expect(props.float).toEqual(1.23);
+    expect(props.string).toEqual('abc');
+    expect(props.string_empty).toEqual('');
+    expect(props.nan).toBeNaN();
+    expect(props.value_null).toBeNull();
+    expect(props.value_undefined).toBeUndefined();
+
+    done();
+  });
+
+  it('should support complex data types', async done => {
+    const Immutable = require('immutable');
+
+    const Example = () => null;
+
+    const arrayOfArrays = [[['abc', 123, true], []]];
+    const div = document.createElement('div');
+    const exampleFunction = () => {};
+    const exampleDateISO = '2019-12-31T23:42:42.000Z';
+    const setShallow = new Set(['abc', 123]);
+    const mapShallow = new Map([
+      ['name', 'Brian'],
+      ['food', 'sushi'],
+    ]);
+    const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
+    const mapOfMaps = new Map([
+      ['first', mapShallow],
+      ['second', mapShallow],
+    ]);
+    const objectOfObjects = {
+      inner: {string: 'abc', number: 123, boolean: true},
+    };
+    const typedArray = Int8Array.from([100, -100, 0]);
+    const arrayBuffer = typedArray.buffer;
+    const dataView = new DataView(arrayBuffer);
+    const immutableMap = Immutable.fromJS({
+      a: [{hello: 'there'}, 'fixed', true],
+      b: 123,
+      c: {
+        '1': 'xyz',
+        xyz: 1,
+      },
+    });
+
+    class Class {
+      anonymousFunction = () => {};
+    }
+    const instance = new Class();
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          anonymous_fn={instance.anonymousFunction}
+          array_buffer={arrayBuffer}
+          array_of_arrays={arrayOfArrays}
+          // eslint-disable-next-line no-undef
+          big_int={BigInt(123)}
+          bound_fn={exampleFunction.bind(this)}
+          data_view={dataView}
+          date={new Date(exampleDateISO)}
+          fn={exampleFunction}
+          html_element={div}
+          immutable={immutableMap}
+          map={mapShallow}
+          map_of_maps={mapOfMaps}
+          object_of_objects={objectOfObjects}
+          react_element={<span />}
+          regexp={/abc/giu}
+          set={setShallow}
+          set_of_sets={setOfSets}
+          symbol={Symbol('symbol')}
+          typed_array={typedArray}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+
+    const {
+      anonymous_fn,
+      array_buffer,
+      array_of_arrays,
+      big_int,
+      bound_fn,
+      data_view,
+      date,
+      fn,
+      html_element,
+      immutable,
+      map,
+      map_of_maps,
+      object_of_objects,
+      react_element,
+      regexp,
+      set,
+      set_of_sets,
+      symbol,
+      typed_array,
+    } = (inspectedElement: any).props;
+
+    expect(anonymous_fn[meta.inspectable]).toBe(false);
+    expect(anonymous_fn[meta.name]).toBe('function');
+    expect(anonymous_fn[meta.type]).toBe('function');
+    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
+    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
+
+    expect(array_buffer[meta.size]).toBe(3);
+    expect(array_buffer[meta.inspectable]).toBe(false);
+    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
+    expect(array_buffer[meta.type]).toBe('array_buffer');
+    expect(array_buffer[meta.preview_short]).toBe('ArrayBuffer(3)');
+    expect(array_buffer[meta.preview_long]).toBe('ArrayBuffer(3)');
+
+    expect(array_of_arrays[0][meta.size]).toBe(2);
+    expect(array_of_arrays[0][meta.inspectable]).toBe(true);
+    expect(array_of_arrays[0][meta.name]).toBe('Array');
+    expect(array_of_arrays[0][meta.type]).toBe('array');
+    expect(array_of_arrays[0][meta.preview_long]).toBe('[Array(3), Array(0)]');
+    expect(array_of_arrays[0][meta.preview_short]).toBe('Array(2)');
+
+    expect(big_int[meta.inspectable]).toBe(false);
+    expect(big_int[meta.name]).toBe('123');
+    expect(big_int[meta.type]).toBe('bigint');
+    expect(big_int[meta.preview_long]).toBe('123n');
+    expect(big_int[meta.preview_short]).toBe('123n');
+
+    expect(bound_fn[meta.inspectable]).toBe(false);
+    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
+    expect(bound_fn[meta.type]).toBe('function');
+    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
+    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
+
+    expect(data_view[meta.size]).toBe(3);
+    expect(data_view[meta.inspectable]).toBe(false);
+    expect(data_view[meta.name]).toBe('DataView');
+    expect(data_view[meta.type]).toBe('data_view');
+    expect(data_view[meta.preview_long]).toBe('DataView(3)');
+    expect(data_view[meta.preview_short]).toBe('DataView(3)');
+
+    expect(date[meta.inspectable]).toBe(false);
+    expect(date[meta.type]).toBe('date');
+    expect(new Date(date[meta.preview_long]).toISOString()).toBe(
+      exampleDateISO,
+    );
+    expect(new Date(date[meta.preview_short]).toISOString()).toBe(
+      exampleDateISO,
+    );
+
+    expect(fn[meta.inspectable]).toBe(false);
+    expect(fn[meta.name]).toBe('exampleFunction');
+    expect(fn[meta.type]).toBe('function');
+    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
+    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
+
+    expect(html_element[meta.inspectable]).toBe(false);
+    expect(html_element[meta.name]).toBe('DIV');
+    expect(html_element[meta.type]).toBe('html_element');
+    expect(html_element[meta.preview_long]).toBe('<div />');
+    expect(html_element[meta.preview_short]).toBe('<div />');
+
+    expect(immutable[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(immutable[meta.name]).toBe('Map');
+    expect(immutable[meta.type]).toBe('iterator');
+    expect(immutable[meta.preview_long]).toBe(
+      'Map(3) {"a" => List(3), "b" => 123, "c" => Map(2)}',
+    );
+    expect(immutable[meta.preview_short]).toBe('Map(3)');
+
+    expect(map[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(map[meta.name]).toBe('Map');
+    expect(map[meta.type]).toBe('iterator');
+    expect(map[0][meta.type]).toBe('array');
+    expect(map[meta.preview_long]).toBe(
+      'Map(2) {"name" => "Brian", "food" => "sushi"}',
+    );
+    expect(map[meta.preview_short]).toBe('Map(2)');
+
+    expect(map_of_maps[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(map_of_maps[meta.name]).toBe('Map');
+    expect(map_of_maps[meta.type]).toBe('iterator');
+    expect(map_of_maps[0][meta.type]).toBe('array');
+    expect(map_of_maps[meta.preview_long]).toBe(
+      'Map(2) {"first" => Map(2), "second" => Map(2)}',
+    );
+    expect(map_of_maps[meta.preview_short]).toBe('Map(2)');
+
+    expect(object_of_objects.inner[meta.size]).toBe(3);
+    expect(object_of_objects.inner[meta.inspectable]).toBe(true);
+    expect(object_of_objects.inner[meta.name]).toBe('');
+    expect(object_of_objects.inner[meta.type]).toBe('object');
+    expect(object_of_objects.inner[meta.preview_long]).toBe(
+      '{boolean: true, number: 123, string: "abc"}',
+    );
+    expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
+
+    expect(react_element[meta.inspectable]).toBe(false);
+    expect(react_element[meta.name]).toBe('span');
+    expect(react_element[meta.type]).toBe('react_element');
+    expect(react_element[meta.preview_long]).toBe('<span />');
+    expect(react_element[meta.preview_short]).toBe('<span />');
+
+    expect(regexp[meta.inspectable]).toBe(false);
+    expect(regexp[meta.name]).toBe('/abc/giu');
+    expect(regexp[meta.preview_long]).toBe('/abc/giu');
+    expect(regexp[meta.preview_short]).toBe('/abc/giu');
+    expect(regexp[meta.type]).toBe('regexp');
+
+    expect(set[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(set[meta.name]).toBe('Set');
+    expect(set[meta.type]).toBe('iterator');
+    expect(set[0]).toBe('abc');
+    expect(set[1]).toBe(123);
+    expect(set[meta.preview_long]).toBe('Set(2) {"abc", 123}');
+    expect(set[meta.preview_short]).toBe('Set(2)');
+
+    expect(set_of_sets[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(set_of_sets[meta.name]).toBe('Set');
+    expect(set_of_sets[meta.type]).toBe('iterator');
+    expect(set_of_sets['0'][meta.inspectable]).toBe(true);
+    expect(set_of_sets[meta.preview_long]).toBe('Set(2) {Set(3), Set(3)}');
+    expect(set_of_sets[meta.preview_short]).toBe('Set(2)');
+
+    expect(symbol[meta.inspectable]).toBe(false);
+    expect(symbol[meta.name]).toBe('Symbol(symbol)');
+    expect(symbol[meta.type]).toBe('symbol');
+    expect(symbol[meta.preview_long]).toBe('Symbol(symbol)');
+    expect(symbol[meta.preview_short]).toBe('Symbol(symbol)');
+
+    expect(typed_array[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(typed_array[meta.size]).toBe(3);
+    expect(typed_array[meta.name]).toBe('Int8Array');
+    expect(typed_array[meta.type]).toBe('typed_array');
+    expect(typed_array[0]).toBe(100);
+    expect(typed_array[1]).toBe(-100);
+    expect(typed_array[2]).toBe(0);
+    expect(typed_array[meta.preview_long]).toBe('Int8Array(3) [100, -100, 0]');
+    expect(typed_array[meta.preview_short]).toBe('Int8Array(3)');
+
+    done();
+  });
+
+  it('should support objects with no prototype', async done => {
+    const Example = () => null;
+
+    const object = Object.create(null);
+    object.string = 'abc';
+    object.number = 123;
+    object.boolean = true;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example object={object} />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+    expect(inspectedElement.props.object).toEqual({
+      boolean: true,
+      number: 123,
+      string: 'abc',
+    });
+
+    done();
+  });
+
+  it('should support objects with overridden hasOwnProperty', async done => {
+    const Example = () => null;
+
+    const object = {
+      name: 'blah',
+      hasOwnProperty: true,
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example object={object} />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      inspectedElement = getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+    expect(inspectedElement.props.object).toEqual({
+      name: 'blah',
+      hasOwnProperty: true,
+    });
+
+    done();
+  });
+
+  it('should support custom objects with enumerable properties and getters', async done => {
+    class CustomData {
+      _number = 42;
+      get number() {
+        return this._number;
+      }
+      set number(value) {
+        this._number = value;
+      }
+    }
+
+    const descriptor = ((Object.getOwnPropertyDescriptor(
+      CustomData.prototype,
+      'number',
+    ): any): PropertyDescriptor<number>);
+    descriptor.enumerable = true;
+    Object.defineProperty(CustomData.prototype, 'number', descriptor);
+
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example data={new CustomData()} />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let didFinish = false;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should not dehydrate nested values until explicitly requested', async done => {
+    const Example = () => {
+      const [state] = React.useState({
+        foo: {
+          bar: {
+            baz: 'hi',
+          },
+        },
+      });
+
+      return state.foo.bar.baz;
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '3: Inspect props.nestedObject.a.b.c',
+    );
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, [
+          'props',
+          'nestedObject',
+          'a',
+          'b',
+          'c',
+          0,
+          'd',
+        ]);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '4: Inspect props.nestedObject.a.b.c.0.d',
+    );
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['hooks', 0, 'value']);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot(
+      '6: Inspect hooks.0.value.foo.bar',
+    );
+
+    done();
+  });
+
+  it('should dehydrate complex nested values when requested', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = null;
+    TestUtils.act(() => {
+      TestRenderer.act(() => {
+        getInspectedElementPath(id, ['props', 'set_of_sets', 0]);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.set_of_sets.0');
+
+    done();
+  });
+
+  it('should include updates for nested values that were previously hydrated', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+            c: {
+              value: 1,
+              d: {
+                value: 1,
+                e: {
+                  value: 1,
+                },
+              },
+            },
+          }}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = null;
+    TestRenderer.act(() => {
+      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = null;
+    TestRenderer.act(() => {
+      getInspectedElementPath(id, ['props', 'nestedObject', 'c']);
+      jest.runOnlyPendingTimers();
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');
+
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        ReactDOM.render(
+          <Example
+            nestedObject={{
+              a: {
+                value: 2,
+                b: {
+                  value: 2,
+                },
+              },
+              c: {
+                value: 2,
+                d: {
+                  value: 2,
+                  e: {
+                    value: 2,
+                  },
+                },
+              },
+            }}
+          />,
+          container,
+        );
+      });
+    });
+
+    TestRenderer.act(() => {
+      inspectedElement = null;
+      jest.advanceTimersByTime(1000);
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('4: update inspected element');
+
+    done();
+  });
+
+  it('should not tear if hydration is requested after an update', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            value: 1,
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+          }}
+        />,
+        container,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(id);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    TestUtils.act(() => {
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            value: 2,
+            a: {
+              value: 2,
+              b: {
+                value: 2,
+              },
+            },
+          }}
+        />,
+        container,
+      );
+    });
+
+    inspectedElement = null;
+
+    TestRenderer.act(() => {
+      TestUtils.act(() => {
+        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
+        jest.runOnlyPendingTimers();
+      });
+    });
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    done();
+  });
+
+  it('should inspect hooks for components that only use context', async done => {
+    const Context = React.createContext(true);
+    const Example = () => {
+      const value = React.useContext(Context);
+      return value;
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example a={1} b="abc" />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let didFinish = false;
+
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should enable inspected values to be stored as global variables', async done => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      storeAsGlobal = context.storeAsGlobal;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(storeAsGlobal).not.toBeNull();
+
+    const logSpy = jest.fn();
+    spyOn(console, 'log').and.callFake(logSpy);
+
+    // Should store the whole value (not just the hydrated parts)
+    storeAsGlobal(id, ['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject);
+
+    logSpy.mockReset();
+
+    // Should store the nested property specified (not just the outer value)
+    storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
+    expect(global.$reactTemp2).toBe(nestedObject.a.b);
+
+    done();
+  });
+
+  it('should enable inspected values to be copied to the clipboard', async done => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      copyPath = context.copyInspectedElementPath;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(copyPath).not.toBeNull();
+
+    // Should copy the whole value (not just the hydrated parts)
+    copyPath(id, ['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    copyPath(id, ['props', 'nestedObject', 'a', 'b']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b),
+    );
+
+    done();
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
new file mode 100644
index 0000000000000..b6290daf61a95
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -0,0 +1,28 @@
+// test() is part of Jest's serializer API
+export function test(maybeInspectedElement) {
+  return (
+    maybeInspectedElement !== null &&
+    typeof maybeInspectedElement === 'object' &&
+    maybeInspectedElement.hasOwnProperty('canEditFunctionProps') &&
+    maybeInspectedElement.hasOwnProperty('canEditHooks') &&
+    maybeInspectedElement.hasOwnProperty('canToggleSuspense') &&
+    maybeInspectedElement.hasOwnProperty('canViewSource')
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(inspectedElement, serialize, indent) {
+  return JSON.stringify(
+    {
+      id: inspectedElement.id,
+      owners: inspectedElement.owners,
+      context: inspectedElement.context,
+      events: inspectedElement.events,
+      hooks: inspectedElement.hooks,
+      props: inspectedElement.props,
+      state: inspectedElement.state,
+    },
+    null,
+    2,
+  );
+}
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
new file mode 100644
index 0000000000000..18ff7483c3f5e
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {}
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": {}
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {}
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "nestedObject": {
+      "a": {
+        "b": {
+          "c": [
+            {
+              "d": {
+                "e": {}
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "anonymous_fn": {},
+    "array_buffer": {},
+    "array_of_arrays": [
+      {}
+    ],
+    "big_int": {},
+    "bound_fn": {},
+    "data_view": {},
+    "date": {},
+    "fn": {},
+    "html_element": {},
+    "immutable": {
+      "0": {},
+      "1": {},
+      "2": {}
+    },
+    "map": {
+      "0": {},
+      "1": {}
+    },
+    "map_of_maps": {
+      "0": {},
+      "1": {}
+    },
+    "object_of_objects": {
+      "inner": {}
+    },
+    "react_element": {},
+    "regexp": {},
+    "set": {
+      "0": "abc",
+      "1": 123
+    },
+    "set_of_sets": {
+      "0": {},
+      "1": {}
+    },
+    "symbol": {},
+    "typed_array": {
+      "0": 100,
+      "1": -100,
+      "2": 0
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "data": {
+      "_number": 42,
+      "number": 42
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support objects with no prototype: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "object": {
+      "string": "abc",
+      "number": 123,
+      "boolean": true
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "object": {
+      "name": "blah",
+      "hasOwnProperty": true
+    }
+  },
+  "state": null
+},
+}
+`;
+
+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
+Object {
+  "id": 2,
+  "type": "full-data",
+  "value": {
+  "id": 2,
+  "owners": null,
+  "context": {},
+  "hooks": null,
+  "props": {
+    "boolean_false": false,
+    "boolean_true": true,
+    "infinity": null,
+    "integer_zero": 0,
+    "integer_one": 1,
+    "float": 1.23,
+    "string": "abc",
+    "string_empty": "",
+    "nan": null,
+    "value_null": null
+  },
+  "state": null
+},
+}
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
new file mode 100644
index 0000000000000..06628a9e9a025
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
@@ -0,0 +1,499 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <div>
+        ▾ <Parent>
+          ▾ <div>
+            ▾ <Child>
+                <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child>
+              <div>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <div>
+        ▾ <Parent>
+          ▾ <div>
+            ▾ <Child>
+                <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child>
+              <div>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="a">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="a">
+          <div>
+      ▾ <Component key="b">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Component key="b">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▾ <Parent key="A">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
+[root]
+  ▾ <Parent key="B">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▾ <Parent key="A">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
+      ▾ <Child key="3">
+          <div>
+[root]
+  ▾ <Parent key="B">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▾ <Parent key="A">
+    ▾ <div>
+      ▾ <Child key="0">
+          <div>
+      ▾ <Child key="1">
+          <div>
+      ▾ <Child key="2">
+          <div>
+      ▾ <Child key="3">
+          <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+          ▾ <Child key="2">
+              <div>
+          ▾ <Child key="3">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+          ▾ <Child key="2">
+              <div>
+          ▾ <Child key="3">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+      ▾ <Parent>
+        ▾ <div>
+          ▾ <Child key="0">
+              <div>
+          ▾ <Child key="1">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+          ▾ <Component key="1">
+              <div>
+      ▾ <Foo key="foo">
+        ▾ <div>
+          ▾ <Component key="0">
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <div>
+      ▸ <Parent>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <div>
+      ▸ <Parent>
+        <Nothing>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+          ▾ <Nested>
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
+[root]
+  ▸ <Wrapper>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+          ▾ <Nested>
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▸ <Nested>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Nested>
+      ▾ <Nested>
+        ▾ <Nested>
+          ▾ <Nested>
+              <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▸ <div>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▾ <Parent>
+        ▸ <div>
+      ▾ <Parent>
+        ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▾ <Parent>
+        ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
+[root]
+  ▾ <Grandparent>
+    ▾ <div>
+      ▸ <Parent>
+      ▸ <Parent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
+[root]
+  ▸ <Grandparent>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
+[root]
+  ▸ <Parent key="A">
+[root]
+  ▸ <Parent key="B">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
+[root]
+  ▸ <Parent key="A">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
+[root]
+  ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
+[root]
+  ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `
+[root]
+  ▾ <Root>
+    ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▸ <Bar key="bar">
+      ▸ <Foo key="foo">
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `
+[root]
+  ▾ <Root>
+    ▾ <div>
+      ▾ <Bar key="bar">
+        ▸ <div>
+      ▾ <Foo key="foo">
+        ▸ <div>
+`;
+
+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `
+[root]
+  ▸ <Root>
+`;
+
+exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
+[root]
+  ▾ <Component>
+      <div>
+`;
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
new file mode 100644
index 0000000000000..8c0937ab9d3f5
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -0,0 +1,592 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {InspectedElementPayload} from 'react-devtools-shared/src/backend/types';
+import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('InspectedElementContext', () => {
+  let React;
+  let ReactDOM;
+  let hydrate;
+  let meta;
+  let bridge: FrontendBridge;
+  let store: Store;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  function dehydrateHelper(
+    dehydratedData: DehydratedData | null,
+  ): Object | null {
+    if (dehydratedData !== null) {
+      return hydrate(
+        dehydratedData.data,
+        dehydratedData.cleaned,
+        dehydratedData.unserializable,
+      );
+    } else {
+      return null;
+    }
+  }
+
+  async function read(
+    id: number,
+    path?: Array<string | number>,
+  ): Promise<Object> {
+    return new Promise((resolve, reject) => {
+      const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+      const onInspectedElement = (payload: InspectedElementPayload) => {
+        bridge.removeListener('inspectedElement', onInspectedElement);
+
+        if (payload.type === 'full-data' && payload.value !== null) {
+          payload.value.context = dehydrateHelper(payload.value.context);
+          payload.value.props = dehydrateHelper(payload.value.props);
+          payload.value.state = dehydrateHelper(payload.value.state);
+        }
+
+        resolve(payload);
+      };
+
+      bridge.addListener('inspectedElement', onInspectedElement);
+      bridge.send('inspectElement', {id, path, rendererID});
+
+      jest.runOnlyPendingTimers();
+    });
+  }
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+
+    hydrate = require('react-devtools-shared/src/hydration').hydrate;
+    meta = require('react-devtools-shared/src/hydration').meta;
+
+    // Redirect all React/ReactDOM requires to the v15 UMD.
+    // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
+    jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
+    jest.mock('react-dom', () =>
+      jest.requireActual('react-dom-15/dist/react-dom.js'),
+    );
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should inspect the currently selected element', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div')),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    done();
+  });
+
+  it('should support simple data types', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          boolean_false={false}
+          boolean_true={true}
+          infinity={Infinity}
+          integer_zero={0}
+          integer_one={1}
+          float={1.23}
+          string="abc"
+          string_empty=""
+          nan={NaN}
+          value_null={null}
+          value_undefined={undefined}
+        />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const {props} = inspectedElement.value;
+    expect(props.boolean_false).toBe(false);
+    expect(props.boolean_true).toBe(true);
+    expect(Number.isFinite(props.infinity)).toBe(false);
+    expect(props.integer_zero).toEqual(0);
+    expect(props.integer_one).toEqual(1);
+    expect(props.float).toEqual(1.23);
+    expect(props.string).toEqual('abc');
+    expect(props.string_empty).toEqual('');
+    expect(props.nan).toBeNaN();
+    expect(props.value_null).toBeNull();
+    expect(props.value_undefined).toBeUndefined();
+
+    done();
+  });
+
+  it('should support complex data types', async done => {
+    const Immutable = require('immutable');
+
+    const Example = () => null;
+
+    const arrayOfArrays = [[['abc', 123, true], []]];
+    const div = document.createElement('div');
+    const exampleFunction = () => {};
+    const setShallow = new Set(['abc', 123]);
+    const mapShallow = new Map([
+      ['name', 'Brian'],
+      ['food', 'sushi'],
+    ]);
+    const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
+    const mapOfMaps = new Map([
+      ['first', mapShallow],
+      ['second', mapShallow],
+    ]);
+    const objectOfObjects = {
+      inner: {string: 'abc', number: 123, boolean: true},
+    };
+    const typedArray = Int8Array.from([100, -100, 0]);
+    const arrayBuffer = typedArray.buffer;
+    const dataView = new DataView(arrayBuffer);
+    const immutableMap = Immutable.fromJS({
+      a: [{hello: 'there'}, 'fixed', true],
+      b: 123,
+      c: {
+        '1': 'xyz',
+        xyz: 1,
+      },
+    });
+
+    class Class {
+      anonymousFunction = () => {};
+    }
+    const instance = new Class();
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          anonymous_fn={instance.anonymousFunction}
+          array_buffer={arrayBuffer}
+          array_of_arrays={arrayOfArrays}
+          // eslint-disable-next-line no-undef
+          big_int={BigInt(123)}
+          bound_fn={exampleFunction.bind(this)}
+          data_view={dataView}
+          date={new Date(123)}
+          fn={exampleFunction}
+          html_element={div}
+          immutable={immutableMap}
+          map={mapShallow}
+          map_of_maps={mapOfMaps}
+          object_of_objects={objectOfObjects}
+          react_element={<span />}
+          regexp={/abc/giu}
+          set={setShallow}
+          set_of_sets={setOfSets}
+          symbol={Symbol('symbol')}
+          typed_array={typedArray}
+        />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    const {
+      anonymous_fn,
+      array_buffer,
+      array_of_arrays,
+      big_int,
+      bound_fn,
+      data_view,
+      date,
+      fn,
+      html_element,
+      immutable,
+      map,
+      map_of_maps,
+      object_of_objects,
+      react_element,
+      regexp,
+      set,
+      set_of_sets,
+      symbol,
+      typed_array,
+    } = inspectedElement.value.props;
+
+    expect(anonymous_fn[meta.inspectable]).toBe(false);
+    expect(anonymous_fn[meta.name]).toBe('function');
+    expect(anonymous_fn[meta.type]).toBe('function');
+    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
+    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
+
+    expect(array_buffer[meta.size]).toBe(3);
+    expect(array_buffer[meta.inspectable]).toBe(false);
+    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
+    expect(array_buffer[meta.type]).toBe('array_buffer');
+    expect(array_buffer[meta.preview_short]).toBe('ArrayBuffer(3)');
+    expect(array_buffer[meta.preview_long]).toBe('ArrayBuffer(3)');
+
+    expect(array_of_arrays[0][meta.size]).toBe(2);
+    expect(array_of_arrays[0][meta.inspectable]).toBe(true);
+    expect(array_of_arrays[0][meta.name]).toBe('Array');
+    expect(array_of_arrays[0][meta.type]).toBe('array');
+    expect(array_of_arrays[0][meta.preview_long]).toBe('[Array(3), Array(0)]');
+    expect(array_of_arrays[0][meta.preview_short]).toBe('Array(2)');
+
+    expect(big_int[meta.inspectable]).toBe(false);
+    expect(big_int[meta.name]).toBe('123');
+    expect(big_int[meta.type]).toBe('bigint');
+
+    expect(bound_fn[meta.inspectable]).toBe(false);
+    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
+    expect(bound_fn[meta.type]).toBe('function');
+    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
+    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
+
+    expect(data_view[meta.size]).toBe(3);
+    expect(data_view[meta.inspectable]).toBe(false);
+    expect(data_view[meta.name]).toBe('DataView');
+    expect(data_view[meta.type]).toBe('data_view');
+
+    expect(date[meta.inspectable]).toBe(false);
+    expect(date[meta.type]).toBe('date');
+
+    expect(fn[meta.inspectable]).toBe(false);
+    expect(fn[meta.name]).toBe('exampleFunction');
+    expect(fn[meta.type]).toBe('function');
+    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
+    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
+
+    expect(html_element[meta.inspectable]).toBe(false);
+    expect(html_element[meta.name]).toBe('DIV');
+    expect(html_element[meta.type]).toBe('html_element');
+
+    expect(immutable[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(immutable[meta.name]).toBe('Map');
+    expect(immutable[meta.type]).toBe('iterator');
+
+    expect(map[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(map[meta.name]).toBe('Map');
+    expect(map[meta.type]).toBe('iterator');
+    expect(map[0][meta.type]).toBe('array');
+
+    expect(map_of_maps[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(map_of_maps[meta.name]).toBe('Map');
+    expect(map_of_maps[meta.type]).toBe('iterator');
+    expect(map_of_maps[0][meta.type]).toBe('array');
+
+    expect(object_of_objects.inner[meta.size]).toBe(3);
+    expect(object_of_objects.inner[meta.inspectable]).toBe(true);
+    expect(object_of_objects.inner[meta.name]).toBe('');
+    expect(object_of_objects.inner[meta.type]).toBe('object');
+    expect(object_of_objects.inner[meta.preview_long]).toBe(
+      '{boolean: true, number: 123, string: "abc"}',
+    );
+    expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
+
+    expect(react_element[meta.inspectable]).toBe(false);
+    expect(react_element[meta.name]).toBe('span');
+    expect(react_element[meta.type]).toBe('react_element');
+
+    expect(regexp[meta.inspectable]).toBe(false);
+    expect(regexp[meta.name]).toBe('/abc/giu');
+    expect(regexp[meta.preview_long]).toBe('/abc/giu');
+    expect(regexp[meta.preview_short]).toBe('/abc/giu');
+    expect(regexp[meta.type]).toBe('regexp');
+
+    expect(set[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(set[meta.name]).toBe('Set');
+    expect(set[meta.type]).toBe('iterator');
+    expect(set[0]).toBe('abc');
+    expect(set[1]).toBe(123);
+
+    expect(set_of_sets[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(set_of_sets[meta.name]).toBe('Set');
+    expect(set_of_sets[meta.type]).toBe('iterator');
+    expect(set_of_sets['0'][meta.inspectable]).toBe(true);
+
+    expect(symbol[meta.inspectable]).toBe(false);
+    expect(symbol[meta.name]).toBe('Symbol(symbol)');
+    expect(symbol[meta.type]).toBe('symbol');
+
+    expect(typed_array[meta.inspectable]).toBeUndefined(); // Complex type
+    expect(typed_array[meta.size]).toBe(3);
+    expect(typed_array[meta.name]).toBe('Int8Array');
+    expect(typed_array[meta.type]).toBe('typed_array');
+    expect(typed_array[0]).toBe(100);
+    expect(typed_array[1]).toBe(-100);
+    expect(typed_array[2]).toBe(0);
+
+    done();
+  });
+
+  it('should support objects with no prototype', async done => {
+    const Example = () => null;
+
+    const object = Object.create(null);
+    object.string = 'abc';
+    object.number = 123;
+    object.boolean = true;
+
+    act(() =>
+      ReactDOM.render(
+        <Example object={object} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement.value.props.object).toEqual({
+      boolean: true,
+      number: 123,
+      string: 'abc',
+    });
+
+    done();
+  });
+
+  it('should support objects with overridden hasOwnProperty', async done => {
+    const Example = () => null;
+
+    const object = {
+      name: 'blah',
+      hasOwnProperty: true,
+    };
+
+    act(() =>
+      ReactDOM.render(
+        <Example object={object} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement.value.props.object).toEqual({
+      name: 'blah',
+      hasOwnProperty: true,
+    });
+
+    done();
+  });
+
+  it('should support custom objects with enumerable properties and getters', async done => {
+    class CustomData {
+      _number = 42;
+      get number() {
+        return this._number;
+      }
+      set number(value) {
+        this._number = value;
+      }
+    }
+
+    const descriptor = ((Object.getOwnPropertyDescriptor(
+      CustomData.prototype,
+      'number',
+    ): any): PropertyDescriptor<number>);
+    descriptor.enumerable = true;
+    Object.defineProperty(CustomData.prototype, 'number', descriptor);
+
+    const Example = ({data}) => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example data={new CustomData()} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+
+    done();
+  });
+
+  it('should not dehydrate nested values until explicitly requested', async done => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = await read(id);
+    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a']);
+    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+    expect(inspectedElement).toMatchSnapshot(
+      '3: Inspect props.nestedObject.a.b.c',
+    );
+
+    inspectedElement = await read(id, [
+      'props',
+      'nestedObject',
+      'a',
+      'b',
+      'c',
+      0,
+      'd',
+    ]);
+    expect(inspectedElement).toMatchSnapshot(
+      '4: Inspect props.nestedObject.a.b.c.0.d',
+    );
+
+    done();
+  });
+
+  it('should enable inspected values to be stored as global variables', () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    act(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+    const logSpy = jest.fn();
+    spyOn(console, 'log').and.callFake(logSpy);
+
+    // Should store the whole value (not just the hydrated parts)
+    bridge.send('storeAsGlobal', {
+      count: 1,
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject);
+
+    logSpy.mockReset();
+
+    // Should store the nested property specified (not just the outer value)
+    bridge.send('storeAsGlobal', {
+      count: 2,
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
+    expect(global.$reactTemp2).toBe(nestedObject.a.b);
+  });
+
+  it('should enable inspected values to be copied to the clipboard', () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    act(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+    // Should copy the whole value (not just the hydrated parts)
+    bridge.send('copyElementPath', {
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    bridge.send('copyElementPath', {
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b),
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
new file mode 100644
index 0000000000000..fb6778521361a
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -0,0 +1,512 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('Store (legacy)', () => {
+  let React;
+  let ReactDOM;
+  let store;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    store = global.store;
+
+    // Redirect all React/ReactDOM requires to the v15 UMD.
+    // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
+    jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
+    jest.mock('react-dom', () =>
+      jest.requireActual('react-dom-15/dist/react-dom.js'),
+    );
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should not allow a root node to be collapsed', () => {
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(<Component count={4} />, document.createElement('div')),
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    expect(store.roots).toHaveLength(1);
+
+    const rootID = store.roots[0];
+
+    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
+      'Root nodes cannot be collapsed',
+    );
+  });
+
+  describe('collapseNodesByDefault:false', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support mount and update operations', () => {
+      const Grandparent = ({count}) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should not filter DOM nodes from the store tree', () => {
+      const Grandparent = ({flip}) => (
+        <div>
+          <div>
+            <Parent flip={flip} />
+          </div>
+          <Parent flip={flip} />
+          <Nothing />
+        </div>
+      );
+      const Parent = ({flip}) => (
+        <div>
+          {flip ? 'foo' : null}
+          <Child />
+          {flip && [null, 'hello', 42]}
+          {flip ? 'bar' : 'baz'}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+      const Nothing = () => null;
+
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
+      );
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('5: unmount');
+    });
+
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({count}) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(8);
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('2: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('3: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('4: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('5: collapse Grandparent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('6: expand Grandparent');
+    });
+
+    it('should support adding and removing children', () => {
+      const Root = ({children}) => <div>{children}</div>;
+      const Component = () => <div />;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+          </Root>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+            <Component key="b" />
+          </Root>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('2: add child');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="b" />
+          </Root>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('3: remove child');
+    });
+
+    it('should support reordering of children', () => {
+      const Root = ({children}) => <div>{children}</div>;
+      const Component = () => <div />;
+
+      const Foo = () => <div>{[<Component key="0" />]}</div>;
+      const Bar = () => (
+        <div>{[<Component key="0" />, <Component key="1" />]}</div>
+      );
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('2: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('3: collapse root');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('4: expand root');
+    });
+  });
+
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+
+    it('should support mount and update operations', () => {
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <div>
+            <Parent count={1} />
+            <Parent count={3} />
+          </div>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <div>
+            <Parent count={2} />
+            <Parent count={1} />
+          </div>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should not filter DOM nodes from the store tree', () => {
+      const Grandparent = ({flip}) => (
+        <div>
+          <div>
+            <Parent flip={flip} />
+          </div>
+          <Parent flip={flip} />
+          <Nothing />
+        </div>
+      );
+      const Parent = ({flip}) => (
+        <div>
+          {flip ? 'foo' : null}
+          <Child />
+          {flip && [null, 'hello', 42]}
+          {flip ? 'bar' : 'baz'}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+      const Nothing = () => null;
+
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('3: expand div');
+
+      act(() =>
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
+      );
+      expect(store).toMatchSnapshot('4: final update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('5: unmount');
+    });
+
+    it('should support expanding parts of the tree', () => {
+      const Grandparent = ({count}) => (
+        <div>
+          <Parent count={count} />
+          <Parent count={count} />
+        </div>
+      );
+      const Parent = ({count}) => (
+        <div>
+          {new Array(count).fill(true).map((_, index) => (
+            <Child key={index} />
+          ))}
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      const parentDivID = store.getElementIDAtIndex(1);
+      act(() => store.toggleIsCollapsed(parentDivID, false));
+      expect(store).toMatchSnapshot('3: expand parent div');
+
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(3);
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('4: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchSnapshot('5: expand second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('6: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('7: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('8: collapse Grandparent');
+    });
+
+    it('should support expanding deep parts of the tree', () => {
+      const Wrapper = ({forwardedRef}) => (
+        <Nested depth={3} forwardedRef={forwardedRef} />
+      );
+      const Nested = ({depth, forwardedRef}) =>
+        depth > 0 ? (
+          <Nested depth={depth - 1} forwardedRef={forwardedRef} />
+        ) : (
+          <div ref={forwardedRef} />
+        );
+
+      let ref = null;
+      const refSetter = value => {
+        ref = value;
+      };
+
+      act(() =>
+        ReactDOM.render(
+          <Wrapper forwardedRef={refSetter} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const deepestedNodeID = global.agent.getIDForNode(ref);
+
+      act(() => store.toggleIsCollapsed(deepestedNodeID, false));
+      expect(store).toMatchSnapshot('2: expand deepest node');
+
+      const rootID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(rootID, true));
+      expect(store).toMatchSnapshot('3: collapse root');
+
+      act(() => store.toggleIsCollapsed(rootID, false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      const id = store.getElementIDAtIndex(1);
+
+      act(() => store.toggleIsCollapsed(id, true));
+      expect(store).toMatchSnapshot('5: collapse middle node');
+
+      act(() => store.toggleIsCollapsed(id, false));
+      expect(store).toMatchSnapshot('6: expand middle node');
+    });
+
+    it('should support reordering of children', () => {
+      const Root = ({children}) => <div>{children}</div>;
+      const Component = () => <div />;
+
+      const Foo = () => <div>{[<Component key="0" />]}</div>;
+      const Bar = () => (
+        <div>{[<Component key="0" />, <Component key="1" />]}</div>
+      );
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('2: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('3: expand root');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('4: expand div');
+
+      act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+      });
+      expect(store).toMatchSnapshot('4: expand leaves');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('5: collapse root');
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
new file mode 100644
index 0000000000000..b39da70632065
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -0,0 +1,209 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('OwnersListContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let OwnersListContext;
+  let OwnersListContextController;
+  let StoreContext;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    OwnersListContext = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
+      .OwnersListContext;
+    OwnersListContextController = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
+      .OwnersListContextController;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
+    TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+  });
+
+  const Contexts = ({children, defaultOwnerID = null}) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController defaultOwnerID={defaultOwnerID}>
+          <OwnersListContextController>{children}</OwnersListContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('should fetch the owners list for the selected element', async done => {
+    const Grandparent = () => <Parent />;
+    const Parent = () => {
+      return (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+    };
+    const Child = () => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const parent = ((store.getElementAtIndex(1): any): Element);
+    const firstChild = ((store.getElementAtIndex(2): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({owner}) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`,
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={parent.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={parent} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+    expect(didFinish).toBe(true);
+
+    didFinish = false;
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={firstChild.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={firstChild} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should fetch the owners list for the selected element that includes filtered components', async done => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = () => {
+      return (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+    };
+    const Child = () => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const firstChild = ((store.getElementAtIndex(1): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({owner}) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`,
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={firstChild.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={firstChild} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+
+  it('should include the current element even if there are no other owners', async done => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = () => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
+    );
+
+    expect(store).toMatchSnapshot('mount');
+
+    const grandparent = ((store.getElementAtIndex(0): any): Element);
+
+    let didFinish = false;
+
+    function Suspender({owner}) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`,
+      );
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={grandparent.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={grandparent} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
new file mode 100644
index 0000000000000..35bc06e58914b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -0,0 +1,354 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Context} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+import type {DispatcherContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('ProfilerContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let ProfilerContext;
+  let ProfilerContextController;
+  let StoreContext;
+  let TreeContextController;
+  let TreeDispatcherContext;
+  let TreeStateContext;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    ProfilerContext = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
+      .ProfilerContext;
+    ProfilerContextController = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
+      .ProfilerContextController;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
+    TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+    TreeDispatcherContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeDispatcherContext;
+    TreeStateContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeStateContext;
+  });
+
+  const Contexts = ({
+    children = null,
+    defaultSelectedElementID = null,
+    defaultSelectedElementIndex = null,
+  }: any) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultSelectedElementID={defaultSelectedElementID}
+          defaultSelectedElementIndex={defaultSelectedElementIndex}>
+          <ProfilerContextController>{children}</ProfilerContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('updates updates profiling support based on the attached roots', async done => {
+    const Component = () => null;
+
+    let context: Context = ((null: any): Context);
+
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      );
+    });
+
+    expect(context.supportsProfiling).toBe(false);
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    await utils.actAsync(() => ReactDOM.render(<Component />, containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => ReactDOM.render(<Component />, containerB));
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(context.supportsProfiling).toBe(false);
+
+    done();
+  });
+
+  it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {
+    const Example = () => null;
+
+    utils.act(() =>
+      ReactDOM.render(<Example />, document.createElement('div')),
+    );
+
+    let context: Context = ((null: any): Context);
+
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    // Profile but don't record any updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => {
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      );
+    });
+    expect(context).not.toBeNull();
+    expect(context.didRecordCommits).toBe(false);
+    expect(context.isProcessingData).toBe(false);
+    expect(context.isProfiling).toBe(true);
+    expect(context.profilingData).toBe(null);
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    expect(context).not.toBeNull();
+    expect(context.didRecordCommits).toBe(false);
+    expect(context.isProcessingData).toBe(false);
+    expect(context.isProfiling).toBe(false);
+    expect(context.profilingData).toBe(null);
+
+    done();
+  });
+
+  it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerOne));
+    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates to both roots.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={store.getElementIDAtIndex(3)}
+          defaultSelectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),
+    );
+
+    done();
+  });
+
+  it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerOne));
+    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates to only the first root.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultSelectedElementID={store.getElementIDAtIndex(3)}
+          defaultSelectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    // Verify the default profiling root is the first one.
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number)),
+    );
+
+    done();
+  });
+
+  it('should maintain root selection between profiling sessions so long as there is data for that root', async done => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    utils.act(() => ReactDOM.render(<Parent />, containerA));
+    utils.act(() => ReactDOM.render(<Parent />, containerB));
+    expect(store).toMatchSnapshot('mounted');
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    let dispatch: DispatcherContext = ((null: any): DispatcherContext);
+    let selectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      dispatch = React.useContext(TreeDispatcherContext);
+      selectedElementID = React.useContext(TreeStateContext).selectedElementID;
+      return null;
+    }
+
+    const id = ((store.getElementIDAtIndex(3): any): number);
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(selectedElementID).toBe(id);
+
+    // Profile and record more updates to both roots
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
+    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    const otherID = ((store.getElementIDAtIndex(0): any): number);
+
+    // Change the selected element within a the Components tab.
+    utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
+
+    // Verify that the initial Profiler root selection is maintained.
+    expect(selectedElementID).toBe(otherID);
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(store.getRootIDForElement(id));
+
+    done();
+  });
+
+  it('should sync selected element in the Components tab too, provided the element is a match', async done => {
+    const GrandParent = ({includeChild}) => (
+      <Parent includeChild={includeChild} />
+    );
+    const Parent = ({includeChild}) => (includeChild ? <Child /> : null);
+    const Child = () => null;
+
+    const container = document.createElement('div');
+    utils.act(() =>
+      ReactDOM.render(<GrandParent includeChild={true} />, container),
+    );
+    expect(store).toMatchSnapshot('mounted');
+
+    const parentID = ((store.getElementIDAtIndex(1): any): number);
+    const childID = ((store.getElementIDAtIndex(2): any): number);
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() =>
+      ReactDOM.render(<GrandParent includeChild={true} />, container),
+    );
+    await utils.actAsync(() =>
+      ReactDOM.render(<GrandParent includeChild={false} />, container),
+    );
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    expect(store).toMatchSnapshot('updated');
+
+    let context: Context = ((null: any): Context);
+    let selectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      selectedElementID = React.useContext(TreeStateContext).selectedElementID;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+    expect(selectedElementID).toBeNull();
+
+    // Select an element in the Profiler tab and verify that the selection is synced to the Components tab.
+    await utils.actAsync(() => context.selectFiber(parentID, 'Parent'));
+    expect(selectedElementID).toBe(parentID);
+
+    // We expect a "no element found" warning.
+    // Let's hide it from the test console though.
+    spyOn(console, 'warn');
+
+    // Select an unmounted element and verify no Components tab selection doesn't change.
+    await utils.actAsync(() => context.selectFiber(childID, 'Child'));
+    expect(selectedElementID).toBe(parentID);
+
+    expect(console.warn).toHaveBeenCalledWith(
+      `No element found with id "${childID}"`,
+    );
+
+    done();
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
new file mode 100644
index 0000000000000..3a6a78597935a
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -0,0 +1,123 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('ProfilerStore', () => {
+  let React;
+  let ReactDOM;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should not remove profiling data when roots are unmounted', async () => {
+    const Parent = ({count}) =>
+      new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+    const Child = () => <div>Hi!</div>;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={3} />, containerA);
+      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+    });
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    utils.act(() => {
+      ReactDOM.render(<Parent key="A" count={4} />, containerA);
+      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+    });
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootA = store.roots[0];
+    const rootB = store.roots[1];
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+
+    expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();
+
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
+
+    expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
+  });
+
+  it('should not allow new/saved profiling data to be set while profiling is in progress', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+    const fauxProfilingData = {
+      dataForRoots: new Map(),
+    };
+    spyOn(console, 'warn');
+    store.profilerStore.profilingData = fauxProfilingData;
+    expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      'Profiling data cannot be updated while profiling is in progress.',
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    store.profilerStore.profilingData = fauxProfilingData;
+    expect(store.profilerStore.profilingData).toBe(fauxProfilingData);
+  });
+
+  // This test covers current broken behavior (arguably) with the synthetic event system.
+  it('should filter empty commits', () => {
+    const inputRef = React.createRef();
+    const ControlledInput = () => {
+      const [name, setName] = React.useState('foo');
+      const handleChange = event => setName(event.target.value);
+      return <input ref={inputRef} value={name} onChange={handleChange} />;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    ReactDOM.render(<ControlledInput />, container);
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // Sets a value in a way that React doesn't see,
+    // so that a subsequent "change" event will trigger the event handler.
+    const setUntrackedValue = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    ).set;
+
+    const target = inputRef.current;
+    setUntrackedValue.call(target, 'bar');
+    target.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    expect(target.value).toBe('bar');
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    // Only one commit should have been recorded (in response to the "change" event).
+    const root = store.roots[0];
+    const data = store.profilerStore.getDataForRoot(root);
+    expect(data.commitData).toHaveLength(1);
+    expect(data.operations).toHaveLength(1);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
new file mode 100644
index 0000000000000..b26c8dbe686f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -0,0 +1,699 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('ProfilingCache', () => {
+  let PropTypes;
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let SchedulerTracing;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  it('should collect data for each root (including ones added or mounted after profiling started)', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
+
+    utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    let allProfilingDataForRoots = [];
+
+    function Validator({previousProfilingDataForRoot, rootID}) {
+      const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
+      if (previousProfilingDataForRoot != null) {
+        expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
+      } else {
+        expect(profilingDataForRoot).toMatchSnapshot(
+          `Data for root ${profilingDataForRoot.displayName}`,
+        );
+      }
+      allProfilingDataForRoots.push(profilingDataForRoot);
+      return null;
+    }
+
+    const dataForRoots =
+      store.profilerStore.profilingData !== null
+        ? store.profilerStore.profilingData.dataForRoots
+        : null;
+
+    expect(dataForRoots).not.toBeNull();
+
+    if (dataForRoots !== null) {
+      dataForRoots.forEach(dataForRoot => {
+        utils.act(() =>
+          TestRenderer.create(
+            <Validator
+              previousProfilingDataForRoot={null}
+              rootID={dataForRoot.rootID}
+            />,
+          ),
+        );
+      });
+    }
+
+    expect(allProfilingDataForRoots).toHaveLength(3);
+
+    utils.exportImportHelper(bridge, store);
+
+    allProfilingDataForRoots.forEach(profilingDataForRoot => {
+      utils.act(() =>
+        TestRenderer.create(
+          <Validator
+            previousProfilingDataForRoot={profilingDataForRoot}
+            rootID={profilingDataForRoot.rootID}
+          />,
+        ),
+      );
+    });
+  });
+
+  it('should collect data for each commit', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allCommitData = [];
+
+    function Validator({commitIndex, previousCommitDetails, rootID}) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      if (previousCommitDetails != null) {
+        expect(commitData).toEqual(previousCommitDetails);
+      } else {
+        allCommitData.push(commitData);
+        expect(commitData).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`,
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={null}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(4);
+
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={allCommitData[commitIndex]}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+  });
+
+  it('should record changed props/state/context/hooks', () => {
+    let instance = null;
+
+    const ModernContext = React.createContext(0);
+
+    class LegacyContextProvider extends React.Component<
+      any,
+      {|count: number|},
+    > {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      state = {count: 0};
+      getChildContext() {
+        return this.state;
+      }
+      render() {
+        instance = this;
+        return (
+          <ModernContext.Provider value={this.state.count}>
+            <React.Fragment>
+              <ModernContextConsumer />
+              <LegacyContextConsumer />
+            </React.Fragment>
+          </ModernContext.Provider>
+        );
+      }
+    }
+
+    const FunctionComponentWithHooks = ({count}) => {
+      React.useMemo(() => count, [count]);
+      return null;
+    };
+
+    class ModernContextConsumer extends React.Component<any> {
+      static contextType = ModernContext;
+      render() {
+        return <FunctionComponentWithHooks count={this.context} />;
+      }
+    }
+
+    class LegacyContextConsumer extends React.Component<any> {
+      static contextTypes = {
+        count: PropTypes.number,
+      };
+      render() {
+        return <FunctionComponentWithHooks count={this.context.count} />;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    expect(instance).not.toBeNull();
+    utils.act(() => (instance: any).setState({count: 1}));
+    utils.act(() =>
+      ReactDOM.render(<LegacyContextProvider foo={123} />, container),
+    );
+    utils.act(() =>
+      ReactDOM.render(<LegacyContextProvider bar="abc" />, container),
+    );
+    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allCommitData = [];
+
+    function Validator({commitIndex, previousCommitDetails, rootID}) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      if (previousCommitDetails != null) {
+        expect(commitData).toEqual(previousCommitDetails);
+      } else {
+        allCommitData.push(commitData);
+        expect(commitData).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`,
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={null}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(5);
+
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={allCommitData[commitIndex]}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+  });
+
+  it('should properly detect changed hooks', () => {
+    const Context = React.createContext(0);
+
+    function reducer(state, action) {
+      switch (action.type) {
+        case 'invert':
+          return {value: !state.value};
+        default:
+          throw new Error();
+      }
+    }
+
+    let dispatch = null;
+    let setState = null;
+
+    const Component = ({count, string}) => {
+      // These hooks may change and initiate re-renders.
+      setState = React.useState('abc')[1];
+      dispatch = React.useReducer(reducer, {value: true})[1];
+
+      // This hook's return value may change between renders,
+      // but the hook itself isn't stateful.
+      React.useContext(Context);
+
+      // These hooks and their dependencies may not change between renders.
+      // We're using them to ensure that they don't trigger false positives.
+      React.useCallback(() => () => {}, [string]);
+      React.useMemo(() => string, [string]);
+
+      // These hooks never "change".
+      React.useEffect(() => {}, [string]);
+      React.useLayoutEffect(() => {}, [string]);
+
+      return null;
+    };
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      ReactDOM.render(
+        <Context.Provider value={true}>
+          <Component count={1} />
+        </Context.Provider>,
+        container,
+      ),
+    );
+
+    // Second render has no changed hooks, only changed props.
+    utils.act(() =>
+      ReactDOM.render(
+        <Context.Provider value={true}>
+          <Component count={2} />
+        </Context.Provider>,
+        container,
+      ),
+    );
+
+    // Third render has a changed reducer hook
+    utils.act(() => dispatch({type: 'invert'}));
+
+    // Fourth render has a changed state hook
+    utils.act(() => setState('def'));
+
+    // Fifth render has a changed context value, but no changed hook.
+    // Technically, DevTools will miss this "context" change since it only tracks legacy context.
+    utils.act(() =>
+      ReactDOM.render(
+        <Context.Provider value={false}>
+          <Component count={2} />
+        </Context.Provider>,
+        container,
+      ),
+    );
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allCommitData = [];
+
+    function Validator({commitIndex, previousCommitDetails, rootID}) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      if (previousCommitDetails != null) {
+        expect(commitData).toEqual(previousCommitDetails);
+      } else {
+        allCommitData.push(commitData);
+        expect(commitData).toMatchSnapshot(
+          `CommitDetails commitIndex: ${commitIndex}`,
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={null}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(5);
+
+    // Export and re-import profile data and make sure it is retained.
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator
+            commitIndex={commitIndex}
+            previousCommitDetails={allCommitData[commitIndex]}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+  });
+
+  it('should calculate a self duration based on actual children (not filtered children)', () => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => {
+      Scheduler.unstable_advanceTime(10);
+      return (
+        <React.Fragment>
+          <Parent key="one" />
+          <Parent key="two" />
+        </React.Fragment>
+      );
+    };
+    const Parent = () => {
+      Scheduler.unstable_advanceTime(2);
+      return <Child />;
+    };
+    const Child = () => {
+      Scheduler.unstable_advanceTime(1);
+      return null;
+    };
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    let commitData = null;
+
+    function Validator({commitIndex, rootID}) {
+      commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      expect(commitData).toMatchSnapshot(
+        `CommitDetails with filtered self durations`,
+      );
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    utils.act(() => {
+      TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
+    });
+
+    expect(commitData).not.toBeNull();
+  });
+
+  it('should calculate self duration correctly for suspended views', async done => {
+    let data;
+    const getData = () => {
+      if (data) {
+        return data;
+      } else {
+        throw new Promise(resolve => {
+          data = 'abc';
+          resolve(data);
+        });
+      }
+    };
+
+    const Parent = () => {
+      Scheduler.unstable_advanceTime(10);
+      return (
+        <React.Suspense fallback={<Fallback />}>
+          <Async />
+        </React.Suspense>
+      );
+    };
+    const Fallback = () => {
+      Scheduler.unstable_advanceTime(2);
+      return 'Fallback...';
+    };
+    const Async = () => {
+      Scheduler.unstable_advanceTime(3);
+      return getData();
+    };
+
+    utils.act(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() =>
+      ReactDOM.render(<Parent />, document.createElement('div')),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allCommitData = [];
+
+    function Validator({commitIndex, rootID}) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      allCommitData.push(commitData);
+      expect(commitData).toMatchSnapshot(
+        `CommitDetails with filtered self durations`,
+      );
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator commitIndex={commitIndex} rootID={rootID} />,
+        );
+      });
+    }
+
+    expect(allCommitData).toHaveLength(2);
+
+    done();
+  });
+
+  it('should collect data for each rendered fiber', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const allFiberCommits = [];
+
+    function Validator({fiberID, previousFiberCommits, rootID}) {
+      const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
+        fiberID,
+        rootID,
+      });
+      if (previousFiberCommits != null) {
+        expect(fiberCommits).toEqual(previousFiberCommits);
+      } else {
+        allFiberCommits.push(fiberCommits);
+        expect(fiberCommits).toMatchSnapshot(
+          `FiberCommits: element ${fiberID}`,
+        );
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let index = 0; index < store.numElements; index++) {
+      utils.act(() => {
+        const fiberID = store.getElementIDAtIndex(index);
+        if (fiberID == null) {
+          throw Error(`Unexpected null ID for element at index ${index}`);
+        }
+        TestRenderer.create(
+          <Validator
+            fiberID={fiberID}
+            previousFiberCommits={null}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+
+    expect(allFiberCommits).toHaveLength(store.numElements);
+
+    utils.exportImportHelper(bridge, store);
+
+    for (let index = 0; index < store.numElements; index++) {
+      utils.act(() => {
+        const fiberID = store.getElementIDAtIndex(index);
+        if (fiberID == null) {
+          throw Error(`Unexpected null ID for element at index ${index}`);
+        }
+        TestRenderer.create(
+          <Validator
+            fiberID={fiberID}
+            previousFiberCommits={allFiberCommits[index]}
+            rootID={rootID}
+          />,
+        );
+      });
+    }
+  });
+
+  it('should report every traced interaction', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      SchedulerTracing.unstable_trace(
+        'mount: one child',
+        Scheduler.unstable_now(),
+        () => ReactDOM.render(<Parent count={1} />, container),
+      ),
+    );
+    utils.act(() =>
+      SchedulerTracing.unstable_trace(
+        'update: two children',
+        Scheduler.unstable_now(),
+        () => ReactDOM.render(<Parent count={2} />, container),
+      ),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    let interactions = null;
+
+    function Validator({previousInteractions, rootID}) {
+      interactions = store.profilerStore.profilingCache.getInteractionsChartData(
+        {
+          rootID,
+        },
+      ).interactions;
+      if (previousInteractions != null) {
+        expect(interactions).toEqual(previousInteractions);
+      } else {
+        expect(interactions).toMatchSnapshot('Interactions');
+      }
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    utils.act(() =>
+      TestRenderer.create(
+        <Validator previousInteractions={null} rootID={rootID} />,
+      ),
+    );
+
+    expect(interactions).not.toBeNull();
+
+    utils.exportImportHelper(bridge, store);
+
+    utils.act(() =>
+      TestRenderer.create(
+        <Validator previousInteractions={interactions} rootID={rootID} />,
+      ),
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
new file mode 100644
index 0000000000000..802a7421575e6
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -0,0 +1,249 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof TestRendererType from 'react-test-renderer';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('profiling charts', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let SchedulerTracing;
+  let TestRenderer: TestRendererType;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    SchedulerTracing = require('scheduler/tracing');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  describe('flamegraph chart', () => {
+    it('should contain valid data', () => {
+      const Parent = (_: {||}) => {
+        Scheduler.unstable_advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child({duration}) {
+        Scheduler.unstable_advanceTime(duration);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
+          {
+            commitIndex,
+            commitTree,
+            rootID,
+          },
+        );
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        expect(chartData).toMatchSnapshot(
+          `${commitIndex}: FlamegraphChartData`,
+        );
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+
+      expect(renderFinished).toBe(true);
+    });
+  });
+
+  describe('ranked chart', () => {
+    it('should contain valid data', () => {
+      const Parent = (_: {||}) => {
+        Scheduler.unstable_advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child({duration}) {
+        Scheduler.unstable_advanceTime(duration);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        const chartData = store.profilerStore.profilingCache.getRankedChartData(
+          {
+            commitIndex,
+            commitTree,
+            rootID,
+          },
+        );
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+    });
+  });
+
+  describe('interactions', () => {
+    it('should contain valid data', () => {
+      const Parent = (_: {||}) => {
+        Scheduler.unstable_advanceTime(10);
+        return (
+          <React.Fragment>
+            <Child key="first" duration={3} />
+            <Child key="second" duration={2} />
+            <Child key="third" duration={0} />
+          </React.Fragment>
+        );
+      };
+
+      // Memoize children to verify that chart doesn't include in the update.
+      const Child = React.memo(function Child({duration}) {
+        Scheduler.unstable_advanceTime(duration);
+        return null;
+      });
+
+      const container = document.createElement('div');
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() =>
+        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
+          ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() =>
+        SchedulerTracing.unstable_trace(
+          'update',
+          Scheduler.unstable_now(),
+          () => ReactDOM.render(<Parent />, container),
+        ),
+      );
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
+          {
+            rootID,
+          },
+        );
+        expect(chartData).toMatchSnapshot('Interactions');
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
new file mode 100644
index 0000000000000..c4bccdef90b3e
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -0,0 +1,82 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof TestRendererType from 'react-test-renderer';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('commit tree', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let TestRenderer: TestRendererType;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  it('should be able to rebuild the store tree for each commit', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      return new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} />);
+    };
+    const Child = React.memo(function Child() {
+      Scheduler.unstable_advanceTime(2);
+      return null;
+    });
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
+    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    let renderFinished = false;
+
+    function Validator({commitIndex, rootID}) {
+      const commitTree = store.profilerStore.profilingCache.getCommitTree({
+        commitIndex,
+        rootID,
+      });
+      expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+      renderFinished = true;
+      return null;
+    }
+
+    const rootID = store.roots[0];
+
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      renderFinished = false;
+
+      utils.act(() => {
+        TestRenderer.create(
+          <Validator commitIndex={commitIndex} rootID={rootID} />,
+        );
+      });
+
+      expect(renderFinished).toBe(true);
+    }
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
new file mode 100644
index 0000000000000..5cf07cf472eeb
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('profiling utils', () => {
+  let utils;
+
+  beforeEach(() => {
+    utils = require('react-devtools-shared/src/devtools/views/Profiler/utils');
+  });
+
+  it('should throw if importing older/unsupported data', () => {
+    expect(() =>
+      utils.prepareProfilingDataFrontendFromExport(
+        ({
+          version: 0,
+          dataForRoots: [],
+        }: any),
+      ),
+    ).toThrow('Unsupported profiler export version "0"');
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
new file mode 100644
index 0000000000000..8b18798e6f7a9
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -0,0 +1,9 @@
+'use strict';
+
+// DevTools stores preferences between sessions in localStorage
+if (!global.hasOwnProperty('localStorage')) {
+  global.localStorage = require('local-storage-fallback').default;
+}
+
+// Mimic the global we set with Webpack's DefinePlugin
+global.__DEV__ = process.env.NODE_ENV !== 'production';
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
new file mode 100644
index 0000000000000..278419c814f85
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -0,0 +1,103 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  BackendBridge,
+  FrontendBridge,
+} from 'react-devtools-shared/src/bridge';
+
+const env = jasmine.getEnv();
+env.beforeEach(() => {
+  global.mockClipboardCopy = jest.fn();
+
+  // Test environment doesn't support document methods like execCommand()
+  // Also once the backend components below have been required,
+  // it's too late for a test to mock the clipboard-js modules.
+  jest.mock('clipboard-js', () => ({copy: global.mockClipboardCopy}));
+
+  // These files should be required (and re-reuired) before each test,
+  // rather than imported at the head of the module.
+  // That's because we reset modules between tests,
+  // which disconnects the DevTool's cache from the current dispatcher ref.
+  const Agent = require('react-devtools-shared/src/backend/agent').default;
+  const {initBackend} = require('react-devtools-shared/src/backend');
+  const Bridge = require('react-devtools-shared/src/bridge').default;
+  const Store = require('react-devtools-shared/src/devtools/store').default;
+  const {installHook} = require('react-devtools-shared/src/hook');
+  const {
+    getDefaultComponentFilters,
+    saveComponentFilters,
+  } = require('react-devtools-shared/src/utils');
+
+  // Fake timers let us flush Bridge operations between setup and assertions.
+  jest.useFakeTimers();
+
+  const originalConsoleError = console.error;
+  // $FlowFixMe
+  console.error = (...args) => {
+    const firstArg = args[0];
+    if (
+      firstArg === 'Warning: React instrumentation encountered an error: %s'
+    ) {
+      // Rethrow errors from React.
+      throw args[1];
+    } else if (
+      typeof firstArg === 'string' &&
+      firstArg.startsWith("Warning: It looks like you're using the wrong act()")
+    ) {
+      // DevTools intentionally wraps updates with acts from both DOM and test-renderer,
+      // since test updates are expected to impact both renderers.
+      return;
+    }
+    originalConsoleError.apply(console, args);
+  };
+
+  // Initialize filters to a known good state.
+  saveComponentFilters(getDefaultComponentFilters());
+  global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
+
+  installHook(global);
+
+  const bridgeListeners = [];
+  const bridge = new Bridge({
+    listen(callback) {
+      bridgeListeners.push(callback);
+      return () => {
+        const index = bridgeListeners.indexOf(callback);
+        if (index >= 0) {
+          bridgeListeners.splice(index, 1);
+        }
+      };
+    },
+    send(event: string, payload: any, transferable?: Array<any>) {
+      bridgeListeners.forEach(callback => callback({event, payload}));
+    },
+  });
+
+  const agent = new Agent(((bridge: any): BackendBridge));
+
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  initBackend(hook, agent, global);
+
+  const store = new Store(((bridge: any): FrontendBridge));
+
+  global.agent = agent;
+  global.bridge = bridge;
+  global.store = store;
+});
+env.afterEach(() => {
+  delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // It's important to reset modules between test runs;
+  // Without this, ReactDOM won't re-inject itself into the new hook.
+  // It's also important to reset after tests, rather than before,
+  // so that we don't disconnect the ReactCurrentDispatcher ref.
+  jest.resetModules();
+});
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
new file mode 100644
index 0000000000000..ccf1654bcbd97
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -0,0 +1,898 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('Store', () => {
+  let React;
+  let ReactDOM;
+  let agent;
+  let act;
+  let getRendererID;
+  let store;
+
+  beforeEach(() => {
+    agent = global.agent;
+    store = global.store;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const utils = require('./utils');
+    act = utils.act;
+    getRendererID = utils.getRendererID;
+  });
+
+  it('should not allow a root node to be collapsed', () => {
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(<Component count={4} />, document.createElement('div')),
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    expect(store.roots).toHaveLength(1);
+
+    const rootID = store.roots[0];
+
+    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
+      'Root nodes cannot be collapsed',
+    );
+  });
+
+  it('should properly handle a root with no visible nodes', () => {
+    const Root = ({children}) => children;
+
+    const container = document.createElement('div');
+
+    act(() => ReactDOM.render(<Root>{null}</Root>, container));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => ReactDOM.render(<div />, container));
+    expect(store).toMatchSnapshot('2: add host nodes');
+  });
+
+  describe('collapseNodesByDefault:false', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support mount and update operations', () => {
+      const Grandparent = ({count}) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+    });
+
+    it('should display Suspense nodes properly in various states', () => {
+      const Loading = () => <div>Loading...</div>;
+      const SuspendingComponent = () => {
+        throw new Promise(() => {});
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({shouldSuspense}) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading />}>
+            {shouldSuspense ? (
+              <SuspendingComponent />
+            ) : (
+              <Component key="Inside" />
+            )}
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      expect(store).toMatchSnapshot('1: loading');
+
+      act(() => {
+        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+      });
+      expect(store).toMatchSnapshot('2: resolved');
+    });
+
+    it('should support nested Suspense nodes', () => {
+      const Component = () => null;
+      const Loading = () => <div>Loading...</div>;
+      const Never = () => {
+        throw new Promise(() => {});
+      };
+
+      const Wrapper = ({
+        suspendFirst = false,
+        suspendSecond = false,
+        suspendParent = false,
+      }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense fallback={<Loading key="Suspense 1 Fallback" />}>
+              {suspendFirst ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 1 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 2 Fallback" />}>
+              {suspendSecond ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 2 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 3 Fallback" />}>
+              <Never />
+            </React.Suspense>
+            {suspendParent && <Never />}
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('1: third child is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('2: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={true}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('3: second and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('4: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={true}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('5: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('6: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('7: only third child is suspended');
+
+      const rendererID = getRendererID();
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchSnapshot('8: first and third child are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchSnapshot('9: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('10: parent is suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchSnapshot('11: all children are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchSnapshot('12: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('13: third child is suspended');
+    });
+
+    it('should display a partially rendered SuspenseList', () => {
+      const Loading = () => <div>Loading...</div>;
+      const SuspendingComponent = () => {
+        throw new Promise(() => {});
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({shouldSuspense}) => (
+        <React.Fragment>
+          <React.SuspenseList revealOrder="forwards" tail="collapsed">
+            <Component key="A" />
+            <React.Suspense fallback={<Loading />}>
+              {shouldSuspense ? <SuspendingComponent /> : <Component key="B" />}
+            </React.Suspense>
+            <Component key="C" />
+          </React.SuspenseList>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      act(() => {
+        root.render(<Wrapper shouldSuspense={true} />);
+      });
+      expect(store).toMatchSnapshot('1: loading');
+
+      act(() => {
+        root.render(<Wrapper shouldSuspense={false} />);
+      });
+      expect(store).toMatchSnapshot('2: resolved');
+    });
+
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({count}) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(4);
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('2: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('3: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('4: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('5: collapse Grandparent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('6: expand Grandparent');
+    });
+
+    it('should support reordering of children', () => {
+      const Root = ({children}) => children;
+      const Component = () => null;
+
+      const Foo = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('4: collapse root');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('5: expand root');
+    });
+  });
+
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+
+    it('should support mount and update operations', () => {
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Parent count={1} />
+            <Parent count={3} />
+          </React.Fragment>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Parent count={2} />
+            <Parent count={1} />
+          </React.Fragment>,
+          container,
+        ),
+      );
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchSnapshot('3: unmount');
+    });
+
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={3} />, containerA);
+        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => {
+        ReactDOM.render(<Parent key="A" count={4} />, containerA);
+        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchSnapshot('2: update');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchSnapshot('3: unmount B');
+
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchSnapshot('4: unmount A');
+    });
+
+    it('should filter DOM nodes from the store tree', () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={4} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('3: expand Parent');
+    });
+
+    it('should display Suspense nodes properly in various states', () => {
+      const Loading = () => <div>Loading...</div>;
+      const SuspendingComponent = () => {
+        throw new Promise(() => {});
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({shouldSuspense}) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading />}>
+            {shouldSuspense ? (
+              <SuspendingComponent />
+            ) : (
+              <Component key="Inside" />
+            )}
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      expect(store).toMatchSnapshot('1: loading');
+
+      // This test isn't meaningful unless we expand the suspended tree
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));
+      expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
+
+      act(() => {
+        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+      });
+      expect(store).toMatchSnapshot('2: resolved');
+    });
+
+    it('should support expanding parts of the tree', () => {
+      const Grandparent = ({count}) => (
+        <React.Fragment>
+          <Parent count={count} />
+          <Parent count={count} />
+        </React.Fragment>
+      );
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      act(() =>
+        ReactDOM.render(
+          <Grandparent count={2} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const grandparentID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchSnapshot('2: expand Grandparent');
+
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(2);
+
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchSnapshot('3: expand first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchSnapshot('4: expand second Parent');
+
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchSnapshot('5: collapse first Parent');
+
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchSnapshot('6: collapse second Parent');
+
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchSnapshot('7: collapse Grandparent');
+    });
+
+    it('should support expanding deep parts of the tree', () => {
+      const Wrapper = ({forwardedRef}) => (
+        <Nested depth={3} forwardedRef={forwardedRef} />
+      );
+      const Nested = ({depth, forwardedRef}) =>
+        depth > 0 ? (
+          <Nested depth={depth - 1} forwardedRef={forwardedRef} />
+        ) : (
+          <div ref={forwardedRef} />
+        );
+
+      const ref = React.createRef();
+
+      act(() =>
+        ReactDOM.render(
+          <Wrapper forwardedRef={ref} />,
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      const deepestedNodeID = agent.getIDForNode(ref.current);
+
+      act(() => store.toggleIsCollapsed(deepestedNodeID, false));
+      expect(store).toMatchSnapshot('2: expand deepest node');
+
+      const rootID = store.getElementIDAtIndex(0);
+
+      act(() => store.toggleIsCollapsed(rootID, true));
+      expect(store).toMatchSnapshot('3: collapse root');
+
+      act(() => store.toggleIsCollapsed(rootID, false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      const id = store.getElementIDAtIndex(1);
+
+      act(() => store.toggleIsCollapsed(id, true));
+      expect(store).toMatchSnapshot('5: collapse middle node');
+
+      act(() => store.toggleIsCollapsed(id, false));
+      expect(store).toMatchSnapshot('6: expand middle node');
+    });
+
+    it('should support reordering of children', () => {
+      const Root = ({children}) => children;
+      const Component = () => null;
+
+      const Foo = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      expect(store).toMatchSnapshot('3: reorder children');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchSnapshot('4: expand root');
+
+      act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
+      });
+      expect(store).toMatchSnapshot('5: expand leaves');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchSnapshot('6: collapse root');
+    });
+
+    it('should not add new nodes when suspense is toggled', () => {
+      const SuspenseTree = () => {
+        return (
+          <React.Suspense fallback={<Fallback>Loading outer</Fallback>}>
+            <Parent />
+          </React.Suspense>
+        );
+      };
+
+      const Fallback = () => null;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(<SuspenseTree />, document.createElement('div')),
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchSnapshot('2: expand tree');
+
+      const rendererID = getRendererID();
+      const suspenseID = store.getElementIDAtIndex(1);
+
+      act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchSnapshot('3: toggle fallback on');
+
+      act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchSnapshot('4: toggle fallback on');
+    });
+  });
+
+  describe('getIndexOfElementID', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    it('should support a single root with a single child', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with one children each', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+        ReactDOM.render(<Grandparent />, document.createElement('div'));
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support a single root with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div'),
+        ),
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    it('should support multiple roots with multiple top level children', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      act(() => {
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div'),
+        );
+        ReactDOM.render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+          document.createElement('div'),
+        );
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+  });
+
+  it('detects and updates profiling support based on the attached roots', () => {
+    const Component = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    expect(store.supportsProfiling).toBe(false);
+
+    act(() => ReactDOM.render(<Component />, containerA));
+    expect(store.supportsProfiling).toBe(true);
+
+    act(() => ReactDOM.render(<Component />, containerB));
+    act(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(store.supportsProfiling).toBe(true);
+
+    act(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(store.supportsProfiling).toBe(false);
+  });
+
+  it('should properly serialize non-string key values', () => {
+    const Child = () => null;
+
+    // Bypass React element's automatic stringifying of keys intentionally.
+    // This is pretty hacky.
+    const fauxElement = Object.assign({}, <Child />, {key: 123});
+
+    act(() => ReactDOM.render([fauxElement], document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+  });
+
+  it('should show the right display names for special component types', async done => {
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const MyComponent = (props, ref) => null;
+    const FowardRefComponent = React.forwardRef(MyComponent);
+    const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
+      <MyComponent />
+    ));
+    const FowardRefComponentWithCustomDisplayName = React.forwardRef(
+      MyComponent,
+    );
+    FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
+    const MemoComponent = React.memo(MyComponent);
+    const MemoForwardRefComponent = React.memo(FowardRefComponent);
+    const LazyComponent = React.lazy(() => fakeImport(MyComponent));
+
+    const App = () => (
+      <React.Fragment>
+        <MyComponent />
+        <FowardRefComponent />
+        <FowardRefComponentWithAnonymousFunction />
+        <FowardRefComponentWithCustomDisplayName />
+        <MemoComponent />
+        <MemoForwardRefComponent />
+        <React.Suspense fallback="Loading...">
+          <LazyComponent />
+        </React.Suspense>
+      </React.Fragment>
+    );
+
+    const container = document.createElement('div');
+
+    // Render once to start fetching the lazy component
+    act(() => ReactDOM.render(<App />, container));
+
+    await Promise.resolve();
+
+    // Render again after it resolves
+    act(() => ReactDOM.render(<App />, container));
+
+    expect(store).toMatchSnapshot();
+
+    done();
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
new file mode 100644
index 0000000000000..341e06b04d57e
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -0,0 +1,230 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('Store component filters', () => {
+  let React;
+  let ReactDOM;
+  let TestUtils;
+  let Types;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  const act = (callback: Function) => {
+    TestUtils.act(() => {
+      callback();
+    });
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.componentFilters = [];
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestUtils = require('react-dom/test-utils');
+    Types = require('react-devtools-shared/src/types');
+    utils = require('./utils');
+  });
+
+  it('should throw if filters are updated while profiling', () => {
+    act(() => store.profilerStore.startProfiling());
+    expect(() => (store.componentFilters = [])).toThrow(
+      'Cannot modify filter preferences while profiling',
+    );
+  });
+
+  it('should support filtering by element type', () => {
+    class Root extends React.Component<{|children: React$Node|}> {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+    const Component = () => <div>Hi</div>;
+
+    act(() =>
+      ReactDOM.render(
+        <Root>
+          <Component />
+        </Root>,
+        document.createElement('div'),
+      ),
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('2: hide host components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('3: hide class components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass),
+          utils.createElementTypeFilter(Types.ElementTypeFunction),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('4: hide class and function components');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass, false),
+          utils.createElementTypeFilter(Types.ElementTypeFunction, false),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('5: disable all filters');
+  });
+
+  it('should ignore invalid ElementTypeRoot filter', () => {
+    const Root = () => <div>Hi</div>;
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeRoot),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('2: add invalid filter');
+  });
+
+  it('should filter by display name', () => {
+    const Text = ({label}) => label;
+    const Foo = () => <Text label="foo" />;
+    const Bar = () => <Text label="bar" />;
+    const Baz = () => <Text label="baz" />;
+
+    act(() =>
+      ReactDOM.render(
+        <React.Fragment>
+          <Foo />
+          <Bar />
+          <Baz />
+        </React.Fragment>,
+        document.createElement('div'),
+      ),
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
+    );
+    expect(store).toMatchSnapshot('2: filter "Foo"');
+
+    act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));
+    expect(store).toMatchSnapshot('3: filter "Ba"');
+
+    act(
+      () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
+    );
+    expect(store).toMatchSnapshot('4: filter "B.z"');
+  });
+
+  it('should filter by path', () => {
+    const Component = () => <div>Hi</div>;
+
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createLocationFilter(__filename.replace(__dirname, '')),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot(
+      '2: hide all components declared within this test filed',
+    );
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createLocationFilter('this:is:a:made:up:path'),
+        ]),
+    );
+
+    expect(store).toMatchSnapshot('3: hide components in a made up fake path');
+  });
+
+  it('should filter HOCs', () => {
+    const Component = () => <div>Hi</div>;
+    const Foo = () => <Component />;
+    Foo.displayName = 'Foo(Component)';
+    const Bar = () => <Foo />;
+    Bar.displayName = 'Bar(Foo(Component))';
+
+    act(() => ReactDOM.render(<Bar />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
+
+    expect(store).toMatchSnapshot('2: hide all HOCs');
+
+    act(() => (store.componentFilters = [utils.createHOCFilter(false)]));
+
+    expect(store).toMatchSnapshot('3: disable HOC filter');
+  });
+
+  it('should not send a bridge update if the set of enabled filters has not changed', () => {
+    act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
+
+    bridge.addListener('updateComponentFilters', componentFilters => {
+      throw Error('Unexpected component update');
+    });
+
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(false),
+          utils.createHOCFilter(true),
+        ]),
+    );
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createLocationFilter('abc', false),
+        ]),
+    );
+    act(
+      () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),
+        ]),
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
new file mode 100644
index 0000000000000..c380d8b91ad3b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -0,0 +1,171 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const {printOwnersList} = require('../devtools/utils');
+
+describe('Store owners list', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let store;
+
+  beforeEach(() => {
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('./utils').act;
+  });
+
+  it('should drill through intermediate components', () => {
+    const Root = () => (
+      <Intermediate>
+        <div>
+          <Leaf />
+        </div>
+      </Intermediate>
+    );
+    const Wrapper = ({children}) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(
+      printOwnersList(store.getOwnersListForElement(intermediateID)),
+    ).toMatchSnapshot('3: components owned by <Intermediate>');
+  });
+
+  it('should drill through interleaved intermediate components', () => {
+    const Root = () => [
+      <Intermediate key="intermediate">
+        <Leaf />
+      </Intermediate>,
+      <Leaf key="leaf" />,
+    ];
+    const Wrapper = ({children}) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({children}) => [
+      <Leaf key="leaf" />,
+      <Wrapper key="wrapper">{children}</Wrapper>,
+    ];
+
+    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(
+      printOwnersList(store.getOwnersListForElement(intermediateID)),
+    ).toMatchSnapshot('3: components owned by <Intermediate>');
+  });
+
+  it('should show the proper owners list order and contents after insertions and deletions', () => {
+    const Root = ({includeDirect, includeIndirect}) => (
+      <div>
+        {includeDirect ? <Leaf /> : null}
+        {includeIndirect ? (
+          <Intermediate>
+            <Leaf />
+          </Intermediate>
+        ) : null}
+      </div>
+    );
+    const Wrapper = ({children}) => children;
+    const Leaf = () => <div>Leaf</div>;
+    const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
+
+    const container = document.createElement('div');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={false} includeIndirect={true} />,
+        container,
+      ),
+    );
+    expect(store).toMatchSnapshot('1: mount');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={true} includeIndirect={true} />,
+        container,
+      ),
+    );
+    expect(store).toMatchSnapshot('3: update to add direct');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('4: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={true} includeIndirect={false} />,
+        container,
+      ),
+    );
+    expect(store).toMatchSnapshot('5: update to remove indirect');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('6: components owned by <Root>');
+
+    act(() =>
+      ReactDOM.render(
+        <Root includeDirect={false} includeIndirect={false} />,
+        container,
+      ),
+    );
+    expect(store).toMatchSnapshot('7: update to remove both');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('8: components owned by <Root>');
+  });
+
+  it('should show the proper owners list ordering after reordered children', () => {
+    const Root = ({ascending}) =>
+      ascending
+        ? [<Leaf key="A" />, <Leaf key="B" />, <Leaf key="C" />]
+        : [<Leaf key="C" />, <Leaf key="B" />, <Leaf key="A" />];
+    const Leaf = () => <div>Leaf</div>;
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Root ascending={true} />, container));
+    expect(store).toMatchSnapshot('1: mount (ascending)');
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('2: components owned by <Root>');
+
+    act(() => ReactDOM.render(<Root ascending={false} />, container));
+    expect(store).toMatchSnapshot('3: update (descending)');
+
+    expect(
+      printOwnersList(store.getOwnersListForElement(rootID)),
+    ).toMatchSnapshot('4: components owned by <Root>');
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/storeSerializer.js b/packages/react-devtools-shared/src/__tests__/storeSerializer.js
new file mode 100644
index 0000000000000..947c449a89a58
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeSerializer.js
@@ -0,0 +1,21 @@
+import {printStore} from 'react-devtools-shared/src/devtools/utils';
+
+// test() is part of Jest's serializer API
+export function test(maybeStore) {
+  // It's important to lazy-require the Store rather than imported at the head of the module.
+  // Because we reset modules between tests, different Store implementations will be used for each test.
+  // Unfortunately Jest does not reset its own serializer modules.
+  return (
+    maybeStore instanceof
+    require('react-devtools-shared/src/devtools/store').default
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(store, serialize, indent) {
+  return printStore(store);
+}
+
+// Used for Jest snapshot testing.
+// May also be useful for visually debugging the tree, so it lives on the Store.
+export {printStore};
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
new file mode 100644
index 0000000000000..899979932f468
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -0,0 +1,1100 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('StoreStress (Legacy Mode)', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let bridge;
+  let store;
+  let print;
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('./utils').act;
+
+    print = require('./storeSerializer').print;
+  });
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  it('should handle a stress test with different tree operations (Legacy Mode)', () => {
+    let setShowX;
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => {
+      // We'll be manually flipping this component back and forth in the test.
+      // We only do this for a single node in order to verify that DevTools
+      // can handle a subtree switching alternates while other subtrees are memoized.
+      let [showX, _setShowX] = React.useState(false);
+      setShowX = _setShowX;
+      return showX ? <X /> : 'c';
+    };
+    const D = () => 'd';
+    const E = () => 'e';
+    const X = () => 'x';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    function Parent({children}) {
+      return children;
+    }
+
+    // 1. Render a normal version of [a, b, c, d, e].
+    let container = document.createElement('div');
+    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
+    expect(store).toMatchSnapshot('1: abcde');
+    expect(container.textContent).toMatch('abcde');
+    const snapshotForABCDE = print(store);
+
+    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
+    // This is how we'll test an update to a single component.
+    act(() => {
+      setShowX(true);
+    });
+    expect(store).toMatchSnapshot('2: abxde');
+    expect(container.textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(container.textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+
+    // Now comes the interesting part.
+    // All of these cases are equivalent to [a, b, c, d, e] in output.
+    // We'll verify that DevTools produces the same snapshots for them.
+    // These cases are picked so that rendering them sequentially in the same
+    // container results in a combination of mounts, updates, unmounts, and reorders.
+    // prettier-ignore
+    let cases = [
+      [a, b, c, d, e],
+      [[a], b, c, d, e],
+      [[a, b], c, d, e],
+      [[a, b], c, [d, e]],
+      [[a, b], c, [d, '', e]],
+      [[a], b, c, d, [e]],
+      [a, b, [[c]], d, e],
+      [[a, ''], [b], [c], [d], [e]],
+      [a, b, [c, [d, ['', e]]]],
+      [a, b, c, d, e],
+      [<div key="0">{a}</div>, b, c, d, e],
+      [<div key="0">{a}{b}</div>, c, d, e],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
+      [<span key="0">{a}</span>, b, c, d, [e]],
+      [a, b, <span key="0"><span>{c}</span></span>, d, e],
+      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
+      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
+      [a, [[]], b, c, [d, [[]], e]],
+      [[[a, b, c, d], e]],
+      [a, b, c, d, e],
+    ];
+
+    // 5. Test fresh mount for each case.
+    for (let i = 0; i < cases.length; i++) {
+      // Ensure fresh mount.
+      container = document.createElement('div');
+
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    container = document.createElement('div');
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => ReactDOM.unmountComponentAtNode(container));
+    expect(print(store)).toBe('');
+  });
+
+  it('should handle stress test with reordering (Legacy Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const D = () => 'd';
+    const E = () => 'e';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    // prettier-ignore
+    let steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify that we can update from every step to every other step and back.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        container = document.createElement('div');
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 3. Same test as above, but this time we wrap children in a host component.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense (Legacy Mode)', async () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a,
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>,
+          container,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container,
+        ),
+      );
+      expect(print(store)).toEqual(snapshots[i]);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense without type change (Legacy Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a,
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const MaybeSuspend = ({children, suspend}) => {
+      if (suspend) {
+        return (
+          <div>
+            {children}
+            <Never />
+            <X />
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <Z />
+        </div>
+      );
+    };
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>
+              <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      snapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    // We don't actually assert here because the tree includes <MaybeSuspend>
+    // which is different from the snapshots above. So we take more snapshots.
+    let fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+          container,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchSnapshot();
+      fallbackSnapshots.push(print(store));
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <Y />
+                  <X />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          ReactDOM.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+            container,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
new file mode 100644
index 0000000000000..fc4fe8bc1e7d3
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -0,0 +1,1372 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('StoreStressConcurrent', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let bridge;
+  let store;
+  let print;
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('./utils').act;
+
+    print = require('./storeSerializer').print;
+  });
+
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  it('should handle a stress test with different tree operations (Concurrent Mode)', () => {
+    let setShowX;
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => {
+      // We'll be manually flipping this component back and forth in the test.
+      // We only do this for a single node in order to verify that DevTools
+      // can handle a subtree switching alternates while other subtrees are memoized.
+      let [showX, _setShowX] = React.useState(false);
+      setShowX = _setShowX;
+      return showX ? <X /> : 'c';
+    };
+    const D = () => 'd';
+    const E = () => 'e';
+    const X = () => 'x';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    function Parent({children}) {
+      return children;
+    }
+
+    // 1. Render a normal version of [a, b, c, d, e].
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.createRoot(container);
+    act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
+    expect(store).toMatchInlineSnapshot(
+      `
+      [root]
+        ▾ <Parent>
+            <A key="a">
+            <B key="b">
+            <C key="c">
+            <D key="d">
+            <E key="e">
+    `,
+    );
+    expect(container.textContent).toMatch('abcde');
+    const snapshotForABCDE = print(store);
+
+    // 2. Render a version where <C /> renders an <X /> child instead of 'c'.
+    // This is how we'll test an update to a single component.
+    act(() => {
+      setShowX(true);
+    });
+    expect(store).toMatchInlineSnapshot(
+      `
+      [root]
+        ▾ <Parent>
+            <A key="a">
+            <B key="b">
+          ▾ <C key="c">
+              <X>
+            <D key="d">
+            <E key="e">
+    `,
+    );
+    expect(container.textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(container.textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+
+    // Now comes the interesting part.
+    // All of these cases are equivalent to [a, b, c, d, e] in output.
+    // We'll verify that DevTools produces the same snapshots for them.
+    // These cases are picked so that rendering them sequentially in the same
+    // container results in a combination of mounts, updates, unmounts, and reorders.
+    // prettier-ignore
+    let cases = [
+      [a, b, c, d, e],
+      [[a], b, c, d, e],
+      [[a, b], c, d, e],
+      [[a, b], c, [d, e]],
+      [[a, b], c, [d, '', e]],
+      [[a], b, c, d, [e]],
+      [a, b, [[c]], d, e],
+      [[a, ''], [b], [c], [d], [e]],
+      [a, b, [c, [d, ['', e]]]],
+      [a, b, c, d, e],
+      [<div key="0">{a}</div>, b, c, d, e],
+      [<div key="0">{a}{b}</div>, c, d, e],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="1">{a}{b}</div>, c, <div key="0">{d}{e}</div>],
+      [<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
+      [<div key="2">{a}{b}</div>, c, <div key="3">{d}{e}</div>],
+      [<span key="0">{a}</span>, b, c, d, [e]],
+      [a, b, <span key="0"><span>{c}</span></span>, d, e],
+      [<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div key="2">{e}</div>],
+      [a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
+      [a, [[]], b, c, [d, [[]], e]],
+      [[[a, b, c, d], e]],
+      [a, b, c, d, e],
+    ];
+
+    // 5. Test fresh mount for each case.
+    for (let i = 0; i < cases.length; i++) {
+      // Ensure fresh mount.
+      container = document.createElement('div');
+      // $FlowFixMe
+      root = ReactDOM.createRoot(container);
+
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    container = document.createElement('div');
+    // $FlowFixMe
+    root = ReactDOM.createRoot(container);
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => root.unmount());
+    expect(print(store)).toBe('');
+  });
+
+  it('should handle stress test with reordering (Concurrent Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const D = () => 'd';
+    const E = () => 'e';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const d = <D key="d" />;
+    const e = <E key="e" />;
+
+    // prettier-ignore
+    let steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() => root.render(<Root>{steps[i]}</Root>));
+      // We snapshot each step once so it doesn't regress.
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      Array [
+        "[root]
+        ▾ <Root>
+            <A key=\\"a\\">",
+        "[root]
+        ▾ <Root>
+            <B key=\\"b\\">",
+        "[root]
+        ▾ <Root>
+            <C key=\\"c\\">",
+        "[root]
+        ▾ <Root>
+            <D key=\\"d\\">",
+        "[root]
+        ▾ <Root>
+            <E key=\\"e\\">",
+        "[root]
+        ▾ <Root>
+            <A key=\\"a\\">",
+        "[root]
+        ▾ <Root>
+            <B key=\\"b\\">",
+        "[root]
+        ▾ <Root>
+            <C key=\\"c\\">",
+        "[root]
+        ▾ <Root>
+            <D key=\\"d\\">",
+        "[root]
+        ▾ <Root>
+            <E key=\\"e\\">",
+        "[root]
+        ▾ <Root>
+            <A key=\\"a\\">
+            <B key=\\"b\\">",
+        "[root]
+        ▾ <Root>
+            <B key=\\"b\\">
+            <A key=\\"a\\">",
+        "[root]
+        ▾ <Root>
+            <B key=\\"b\\">
+            <C key=\\"c\\">",
+        "[root]
+        ▾ <Root>
+            <C key=\\"c\\">
+            <B key=\\"b\\">",
+        "[root]
+        ▾ <Root>
+            <A key=\\"a\\">
+            <C key=\\"c\\">",
+        "[root]
+        ▾ <Root>
+            <C key=\\"c\\">
+            <A key=\\"a\\">",
+      ]
+    `);
+
+    // 2. Verify that we can update from every step to every other step and back.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.render(<Root>{steps[j]}</Root>));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 3. Same test as above, but this time we wrap children in a host component.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense (Concurrent Mode)', async () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a,
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.d
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      Array [
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+              <B key=\\"b\\">
+              <C key=\\"c\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <C key=\\"c\\">
+              <B key=\\"b\\">
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <C key=\\"c\\">
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <C key=\\"c\\">
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <C key=\\"c\\">
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+              <B key=\\"b\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+            <Suspense>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <B key=\\"b\\">
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+              <A key=\\"a\\">
+            <Y>",
+      ]
+    `);
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      expect(print(store)).toEqual(snapshots[i]);
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  it('should handle a stress test for Suspense without type change (Concurrent Mode)', () => {
+    const A = () => 'a';
+    const B = () => 'b';
+    const C = () => 'c';
+    const X = () => 'x';
+    const Y = () => 'y';
+    const Z = () => 'z';
+    const a = <A key="a" />;
+    const b = <B key="b" />;
+    const c = <C key="c" />;
+    const z = <Z key="z" />;
+
+    // prettier-ignore
+    const steps = [
+      a,
+      [a],
+      [a, b, c],
+      [c, b, a],
+      [c, null, a],
+      <React.Fragment>{c}{a}</React.Fragment>,
+      <div>{c}{a}</div>,
+      <div><span>{a}</span>{b}</div>,
+      [[a]],
+      null,
+      b,
+      a,
+    ];
+
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+
+    const MaybeSuspend = ({children, suspend}) => {
+      if (suspend) {
+        return (
+          <div>
+            {children}
+            <Never />
+            <X />
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <Z />
+        </div>
+      );
+    };
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. For each step, check Suspense can render them as initial primary content.
+    // This is the only step where we use Jest snapshots.
+    let snapshots = [];
+    let container = document.createElement('div');
+    // $FlowFixMe
+    let root = ReactDOM.createRoot(container);
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>
+              <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+            </React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      snapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    // We don't actually assert here because the tree includes <MaybeSuspend>
+    // which is different from the snapshots above. So we take more snapshots.
+    let fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      fallbackSnapshots.push(print(store));
+      act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      Array [
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <B key=\\"b\\">
+                <C key=\\"c\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <C key=\\"c\\">
+                <B key=\\"b\\">
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <C key=\\"c\\">
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <C key=\\"c\\">
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <C key=\\"c\\">
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <B key=\\"b\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <B key=\\"b\\">
+                <Z>
+            <Y>",
+        "[root]
+        ▾ <Root>
+            <X>
+          ▾ <Suspense>
+            ▾ <MaybeSuspend>
+                <A key=\\"a\\">
+                <Z>
+            <Y>",
+      ]
+    `);
+
+    // 3. Verify we can update from each step to each step in primary mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 4. Verify we can update from each step to each step in fallback mode.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <Y />
+                  <X />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 5. Verify we can update from each step to each step when moving primary -> fallback.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 6. Verify we can update from each step to each step when moving fallback -> primary.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+
+    // 7. Verify we can update from each step to each step when toggling Suspense.
+    for (let i = 0; i < steps.length; i++) {
+      for (let j = 0; j < steps.length; j++) {
+        // Always start with a fresh container and steps[i].
+        container = document.createElement('div');
+        // $FlowFixMe
+        root = ReactDOM.createRoot(container);
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+
+        // We get ID from the index in the tree above:
+        // Root, X, Suspense, ...
+        //          ^ (index is 2)
+        const suspenseID = store.getElementIDAtIndex(2);
+
+        // Force fallback.
+        expect(print(store)).toEqual(snapshots[i]);
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
new file mode 100644
index 0000000000000..67e7ddf01a654
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -0,0 +1,613 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+import type {
+  DispatcherContext,
+  StateContext,
+} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+
+describe('TreeListContext', () => {
+  let React;
+  let ReactDOM;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let StoreContext;
+  let TreeContext;
+
+  let dispatch: DispatcherContext;
+  let state: StateContext;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    TestRenderer = utils.requireTestRenderer();
+
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
+    TreeContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext');
+  });
+
+  afterEach(() => {
+    // Reset between tests
+    dispatch = ((null: any): DispatcherContext);
+    state = ((null: any): StateContext);
+  });
+
+  const Capture = () => {
+    dispatch = React.useContext(TreeContext.TreeDispatcherContext);
+    state = React.useContext(TreeContext.TreeStateContext);
+    return null;
+  };
+
+  const Contexts = () => {
+    return (
+      <BridgeContext.Provider value={bridge}>
+        <StoreContext.Provider value={store}>
+          <TreeContext.TreeContextController>
+            <Capture />
+          </TreeContext.TreeContextController>
+        </StoreContext.Provider>
+      </BridgeContext.Provider>
+    );
+  };
+
+  describe('tree state', () => {
+    it('should select the next and previous elements in the tree', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select first element');
+
+      while (
+        state.selectedElementIndex !== null &&
+        state.selectedElementIndex < store.numElements - 1
+      ) {
+        const index = ((state.selectedElementIndex: any): number);
+        utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+        utils.act(() => renderer.update(<Contexts />));
+        expect(state).toMatchSnapshot(`3: select element after (${index})`);
+      }
+
+      while (
+        state.selectedElementIndex !== null &&
+        state.selectedElementIndex > 0
+      ) {
+        const index = ((state.selectedElementIndex: any): number);
+        utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+        utils.act(() => renderer.update(<Contexts />));
+        expect(state).toMatchSnapshot(`4: select element before (${index})`);
+      }
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('5: select previous wraps around to last');
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('6: select next wraps around to first');
+    });
+
+    it('should select child elements', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select first element');
+
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: select Parent');
+
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: select Child');
+
+      const previousState = state;
+
+      // There are no more children to select, so this should be a no-op
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toEqual(previousState);
+    });
+
+    it('should select parent elements and then collapse', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select last child');
+
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: select Parent');
+
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: select Grandparent');
+
+      const previousState = state;
+
+      // There are no more ancestors to select, so this should be a no-op
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toEqual(previousState);
+    });
+
+    it('should clear selection if the selected element is unmounted', async done => {
+      const Grandparent = props => props.children || null;
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() =>
+        ReactDOM.render(
+          <Grandparent>
+            <Parent>
+              <Child />
+              <Child />
+            </Parent>
+          </Grandparent>,
+          container,
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 3}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: select second child');
+
+      await utils.actAsync(() =>
+        ReactDOM.render(
+          <Grandparent>
+            <Parent />
+          </Grandparent>,
+          container,
+        ),
+      );
+      expect(state).toMatchSnapshot(
+        '3: remove children (parent should now be selected)',
+      );
+
+      await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
+      expect(state).toMatchSnapshot(
+        '4: unmount root (nothing should be selected)',
+      );
+
+      done();
+    });
+  });
+
+  describe('search state', () => {
+    it('should find elements matching search text', () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+      const Qux = () => null;
+
+      Qux.displayName = `withHOC(${Qux.name})`;
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+            <Qux />
+          </React.Fragment>,
+          document.createElement('div'),
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      // NOTE: multi-match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      // NOTE: single match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'f'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: search for "f"');
+
+      // NOTE: no match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'y'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: search for "y"');
+
+      // NOTE: HOC match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'w'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('5: search for "w"');
+    });
+
+    it('should select the next and previous items within the search results', () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Baz />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          document.createElement('div'),
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: go to second result');
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: go to third result');
+
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('5: go to second result');
+
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('6: go to first result');
+
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('7: wrap to last result');
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('8: wrap to first result');
+    });
+
+    it('should add newly mounted elements to the search results set if they match the current text', async done => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      const container = document.createElement('div');
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+          container,
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      await utils.actAsync(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          container,
+        ),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: mount Baz');
+
+      done();
+    });
+
+    it('should remove unmounted elements from the search results set', async done => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      const container = document.createElement('div');
+
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+          container,
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: search for "ba"');
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: go to second result');
+
+      await utils.actAsync(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+          container,
+        ),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: unmount Baz');
+
+      done();
+    });
+  });
+
+  describe('owners state', () => {
+    it('should support entering and existing the owners tree view', () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+      const Child = () => null;
+
+      utils.act(() =>
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: parent owners tree');
+
+      utils.act(() => dispatch({type: 'RESET_OWNER_STACK'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: final state');
+    });
+
+    it('should remove an element from the owners list if it is unmounted', async done => {
+      const Grandparent = ({count}) => <Parent count={count} />;
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: parent owners tree');
+
+      await utils.actAsync(() =>
+        ReactDOM.render(<Grandparent count={1} />, container),
+      );
+      expect(state).toMatchSnapshot('3: remove second child');
+
+      await utils.actAsync(() =>
+        ReactDOM.render(<Grandparent count={0} />, container),
+      );
+      expect(state).toMatchSnapshot('4: remove first child');
+
+      done();
+    });
+
+    it('should exit the owners list if the current owner is unmounted', async done => {
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      const container = document.createElement('div');
+      utils.act(() =>
+        ReactDOM.render(
+          <Parent>
+            <Child />
+          </Parent>,
+          container,
+        ),
+      );
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      let childID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: child owners tree');
+
+      await utils.actAsync(() => ReactDOM.render(<Parent />, container));
+      expect(state).toMatchSnapshot('3: remove child');
+
+      let parentID = ((store.getElementIDAtIndex(0): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: parent owners tree');
+
+      await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
+      expect(state).toMatchSnapshot('5: unmount root');
+
+      done();
+    });
+
+    // This tests ensures support for toggling Suspense boundaries outside of the active owners list.
+    it('should exit the owners list if an element outside the list is selected', () => {
+      const Grandchild = () => null;
+      const Child = () => (
+        <React.Suspense fallback="Loading">
+          <Grandchild />
+        </React.Suspense>
+      );
+      const Parent = () => (
+        <React.Suspense fallback="Loading">
+          <Child />
+        </React.Suspense>
+      );
+
+      const container = document.createElement('div');
+      utils.act(() => ReactDOM.render(<Parent />, container));
+
+      expect(store).toMatchSnapshot('0: mount');
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchSnapshot('1: initial state');
+
+      const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
+      const childID = ((store.getElementIDAtIndex(2): any): number);
+      const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);
+
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('2: child owners tree');
+
+      // Toggling a Suspense boundary inside of the flat list should update selected index
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('3: child owners tree');
+
+      // Toggling a Suspense boundary outside of the flat list should exit owners list and update index
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchSnapshot('4: main tree');
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
new file mode 100644
index 0000000000000..db22d2813e401
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
@@ -0,0 +1,191 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('useEditableValue', () => {
+  let act;
+  let React;
+  let ReactDOM;
+  let useEditableValue;
+
+  beforeEach(() => {
+    const utils = require('./utils');
+    act = utils.act;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    useEditableValue = require('../devtools/views/hooks').useEditableValue;
+  });
+
+  it('should not cause a loop with values like NaN', () => {
+    let state;
+
+    function Example({value = NaN}) {
+      const tuple = useEditableValue(value);
+      state = tuple[0];
+      return null;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Example />, container);
+    expect(state.editableValue).toEqual('NaN');
+    expect(state.externalValue).toEqual(NaN);
+    expect(state.parsedValue).toEqual(NaN);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+  });
+
+  it('should override editable state when external props are updated', () => {
+    let state;
+
+    function Example({value}) {
+      const tuple = useEditableValue(value);
+      state = tuple[0];
+      return null;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Example value={1} />, container);
+    expect(state.editableValue).toEqual('1');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+
+    // If there are NO pending changes,
+    // an update to the external prop value should override the local/pending value.
+    ReactDOM.render(<Example value={2} />, container);
+    expect(state.editableValue).toEqual('2');
+    expect(state.externalValue).toEqual(2);
+    expect(state.parsedValue).toEqual(2);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+  });
+
+  it('should not override editable state when external props are updated if there are pending changes', () => {
+    let dispatch, state;
+
+    function Example({value}) {
+      const tuple = useEditableValue(value);
+      state = tuple[0];
+      dispatch = tuple[1];
+      return null;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Example value={1} />, container);
+    expect(state.editableValue).toEqual('1');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+
+    // Update (local) editable state.
+    act(() =>
+      dispatch({
+        type: 'UPDATE',
+        editableValue: '2',
+        externalValue: 1,
+      }),
+    );
+    expect(state.editableValue).toEqual('2');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(2);
+    expect(state.hasPendingChanges).toBe(true);
+    expect(state.isValid).toBe(true);
+
+    // If there ARE pending changes,
+    // an update to the external prop value should NOT override the local/pending value.
+    ReactDOM.render(<Example value={3} />, container);
+    expect(state.editableValue).toEqual('2');
+    expect(state.externalValue).toEqual(3);
+    expect(state.parsedValue).toEqual(2);
+    expect(state.hasPendingChanges).toBe(true);
+    expect(state.isValid).toBe(true);
+  });
+
+  it('should parse edits to ensure valid JSON', () => {
+    let dispatch, state;
+
+    function Example({value}) {
+      const tuple = useEditableValue(value);
+      state = tuple[0];
+      dispatch = tuple[1];
+      return null;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Example value={1} />, container);
+    expect(state.editableValue).toEqual('1');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+
+    // Update (local) editable state.
+    act(() =>
+      dispatch({
+        type: 'UPDATE',
+        editableValue: '"a',
+        externalValue: 1,
+      }),
+    );
+    expect(state.editableValue).toEqual('"a');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(true);
+    expect(state.isValid).toBe(false);
+  });
+
+  it('should reset to external value upon request', () => {
+    let dispatch, state;
+
+    function Example({value}) {
+      const tuple = useEditableValue(value);
+      state = tuple[0];
+      dispatch = tuple[1];
+      return null;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Example value={1} />, container);
+    expect(state.editableValue).toEqual('1');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+
+    // Update (local) editable state.
+    act(() =>
+      dispatch({
+        type: 'UPDATE',
+        editableValue: '2',
+        externalValue: 1,
+      }),
+    );
+    expect(state.editableValue).toEqual('2');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(2);
+    expect(state.hasPendingChanges).toBe(true);
+    expect(state.isValid).toBe(true);
+
+    // Reset editable state
+    act(() =>
+      dispatch({
+        type: 'RESET',
+        externalValue: 1,
+      }),
+    );
+    expect(state.editableValue).toEqual('1');
+    expect(state.externalValue).toEqual(1);
+    expect(state.parsedValue).toEqual(1);
+    expect(state.hasPendingChanges).toBe(false);
+    expect(state.isValid).toBe(true);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
new file mode 100644
index 0000000000000..37e445974a28c
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {getDisplayName} from 'react-devtools-shared/src/utils';
+
+describe('utils', () => {
+  describe('getDisplayName', () => {
+    it('should return a function name', () => {
+      function FauxComponent() {}
+      expect(getDisplayName(FauxComponent)).toEqual('FauxComponent');
+    });
+
+    it('should return a displayName name if specified', () => {
+      function FauxComponent() {}
+      FauxComponent.displayName = 'OverrideDisplayName';
+      expect(getDisplayName(FauxComponent)).toEqual('OverrideDisplayName');
+    });
+
+    it('should return the fallback for anonymous functions', () => {
+      expect(getDisplayName(() => {}, 'Fallback')).toEqual('Fallback');
+    });
+
+    it('should return Anonymous for anonymous functions without a fallback', () => {
+      expect(getDisplayName(() => {})).toEqual('Anonymous');
+    });
+
+    // Simulate a reported bug:
+    // https://github.com/facebook/react/issues/16685
+    it('should return a fallback when the name prop is not a string', () => {
+      const FauxComponent = {name: {}};
+      expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
new file mode 100644
index 0000000000000..0b3f03a7fb329
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -0,0 +1,211 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+import type {ProfilingDataFrontend} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ElementType} from 'react-devtools-shared/src/types';
+
+export function act(callback: Function): void {
+  const {act: actTestRenderer} = require('react-test-renderer');
+  const {act: actDOM} = require('react-dom/test-utils');
+
+  actDOM(() => {
+    actTestRenderer(() => {
+      callback();
+    });
+  });
+
+  // Flush Bridge operations
+  while (jest.getTimerCount() > 0) {
+    actDOM(() => {
+      actTestRenderer(() => {
+        jest.runAllTimers();
+      });
+    });
+  }
+}
+
+export async function actAsync(
+  cb: () => *,
+  recursivelyFlush: boolean = true,
+): Promise<void> {
+  const {act: actTestRenderer} = require('react-test-renderer');
+  const {act: actDOM} = require('react-dom/test-utils');
+
+  // $FlowFixMe Flow doens't know about "await act()" yet
+  await actDOM(async () => {
+    await actTestRenderer(async () => {
+      await cb();
+    });
+  });
+
+  if (recursivelyFlush) {
+    while (jest.getTimerCount() > 0) {
+      // $FlowFixMe Flow doens't know about "await act()" yet
+      await actDOM(async () => {
+        await actTestRenderer(async () => {
+          jest.runAllTimers();
+        });
+      });
+    }
+  } else {
+    // $FlowFixMe Flow doesn't know about "await act()" yet
+    await actDOM(async () => {
+      await actTestRenderer(async () => {
+        jest.runOnlyPendingTimers();
+      });
+    });
+  }
+}
+
+export function beforeEachProfiling(): void {
+  // Mock React's timing information so that test runs are predictable.
+  jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
+
+  // DevTools itself uses performance.now() to offset commit times
+  // so they appear relative to when profiling was started in the UI.
+  jest
+    .spyOn(performance, 'now')
+    .mockImplementation(
+      jest.requireActual('scheduler/unstable_mock').unstable_now,
+    );
+}
+
+export function createDisplayNameFilter(
+  source: string,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/types');
+  let isValid = true;
+  try {
+    new RegExp(source); // eslint-disable-line no-new
+  } catch (error) {
+    isValid = false;
+  }
+  return {
+    type: Types.ComponentFilterDisplayName,
+    isEnabled,
+    isValid,
+    value: source,
+  };
+}
+
+export function createHOCFilter(isEnabled: boolean = true) {
+  const Types = require('react-devtools-shared/src/types');
+  return {
+    type: Types.ComponentFilterHOC,
+    isEnabled,
+    isValid: true,
+  };
+}
+
+export function createElementTypeFilter(
+  elementType: ElementType,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/types');
+  return {
+    type: Types.ComponentFilterElementType,
+    isEnabled,
+    value: elementType,
+  };
+}
+
+export function createLocationFilter(
+  source: string,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/types');
+  let isValid = true;
+  try {
+    new RegExp(source); // eslint-disable-line no-new
+  } catch (error) {
+    isValid = false;
+  }
+  return {
+    type: Types.ComponentFilterLocation,
+    isEnabled,
+    isValid,
+    value: source,
+  };
+}
+
+export function getRendererID(): number {
+  if (global.agent == null) {
+    throw Error('Agent unavailable.');
+  }
+  const ids = Object.keys(global.agent._rendererInterfaces);
+
+  const id = ids.find(innerID => {
+    const rendererInterface = global.agent._rendererInterfaces[innerID];
+    return rendererInterface.renderer.rendererPackageName === 'react-dom';
+  });
+
+  if (ids == null) {
+    throw Error('Could not find renderer.');
+  }
+
+  return parseInt(id, 10);
+}
+
+export function requireTestRenderer(): ReactTestRenderer {
+  let hook;
+  try {
+    // Hide the hook before requiring TestRenderer, so we don't end up with a loop.
+    hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+    return require('react-test-renderer');
+  } finally {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+  }
+}
+
+export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
+  const {
+    prepareProfilingDataExport,
+    prepareProfilingDataFrontendFromExport,
+  } = require('react-devtools-shared/src/devtools/views/Profiler/utils');
+
+  const {profilerStore} = store;
+
+  expect(profilerStore.profilingData).not.toBeNull();
+
+  const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);
+
+  const profilingDataExport = prepareProfilingDataExport(
+    profilingDataFrontendInitial,
+  );
+
+  // Simulate writing/reading to disk.
+  const serializedProfilingDataExport = JSON.stringify(
+    profilingDataExport,
+    null,
+    2,
+  );
+  const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);
+
+  const profilingDataFrontend = prepareProfilingDataFrontendFromExport(
+    (parsedProfilingDataExport: any),
+  );
+
+  // Sanity check that profiling snapshots are serialized correctly.
+  expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);
+
+  // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
+  expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
+
+  act(() => {
+    // Apply the new exported-then-reimported data so tests can re-run assertions.
+    profilerStore.profilingData = profilingDataFrontend;
+  });
+}
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
new file mode 100644
index 0000000000000..ae39e8f338b1a
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
@@ -0,0 +1,93 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {BoxStyle} from './types';
+
+/**
+ * This mirrors react-native/Libraries/Inspector/resolveBoxStyle.js (but without RTL support).
+ *
+ * Resolve a style property into it's component parts, e.g.
+ *
+ * resolveBoxStyle('margin', {margin: 5, marginBottom: 10})
+ * -> {top: 5, left: 5, right: 5, bottom: 10}
+ */
+export default function resolveBoxStyle(
+  prefix: string,
+  style: Object,
+): BoxStyle | null {
+  let hasParts = false;
+  const result = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  };
+
+  const styleForAll = style[prefix];
+  if (styleForAll != null) {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const key of Object.keys(result)) {
+      result[key] = styleForAll;
+    }
+    hasParts = true;
+  }
+
+  const styleForHorizontal = style[prefix + 'Horizontal'];
+  if (styleForHorizontal != null) {
+    result.left = styleForHorizontal;
+    result.right = styleForHorizontal;
+    hasParts = true;
+  } else {
+    const styleForLeft = style[prefix + 'Left'];
+    if (styleForLeft != null) {
+      result.left = styleForLeft;
+      hasParts = true;
+    }
+
+    const styleForRight = style[prefix + 'Right'];
+    if (styleForRight != null) {
+      result.right = styleForRight;
+      hasParts = true;
+    }
+
+    const styleForEnd = style[prefix + 'End'];
+    if (styleForEnd != null) {
+      // TODO RTL support
+      result.right = styleForEnd;
+      hasParts = true;
+    }
+    const styleForStart = style[prefix + 'Start'];
+    if (styleForStart != null) {
+      // TODO RTL support
+      result.left = styleForStart;
+      hasParts = true;
+    }
+  }
+
+  const styleForVertical = style[prefix + 'Vertical'];
+  if (styleForVertical != null) {
+    result.bottom = styleForVertical;
+    result.top = styleForVertical;
+    hasParts = true;
+  } else {
+    const styleForBottom = style[prefix + 'Bottom'];
+    if (styleForBottom != null) {
+      result.bottom = styleForBottom;
+      hasParts = true;
+    }
+
+    const styleForTop = style[prefix + 'Top'];
+    if (styleForTop != null) {
+      result.top = styleForTop;
+      hasParts = true;
+    }
+  }
+
+  return hasParts ? result : null;
+}
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
new file mode 100644
index 0000000000000..afa189f1227a0
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -0,0 +1,325 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Agent from 'react-devtools-shared/src/backend/agent';
+import resolveBoxStyle from './resolveBoxStyle';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {RendererID} from '../types';
+import type {StyleAndLayout} from './types';
+
+export type ResolveNativeStyle = (stylesheetID: any) => ?Object;
+
+export default function setupNativeStyleEditor(
+  bridge: BackendBridge,
+  agent: Agent,
+  resolveNativeStyle: ResolveNativeStyle,
+  validAttributes?: $ReadOnlyArray<string> | null,
+) {
+  bridge.addListener(
+    'NativeStyleEditor_measure',
+    ({id, rendererID}: {|id: number, rendererID: RendererID|}) => {
+      measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
+    },
+  );
+
+  bridge.addListener(
+    'NativeStyleEditor_renameAttribute',
+    ({
+      id,
+      rendererID,
+      oldName,
+      newName,
+      value,
+    }: {|
+      id: number,
+      rendererID: RendererID,
+      oldName: string,
+      newName: string,
+      value: string,
+    |}) => {
+      renameStyle(agent, id, rendererID, oldName, newName, value);
+      setTimeout(() =>
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
+      );
+    },
+  );
+
+  bridge.addListener(
+    'NativeStyleEditor_setValue',
+    ({
+      id,
+      rendererID,
+      name,
+      value,
+    }: {|
+      id: number,
+      rendererID: number,
+      name: string,
+      value: string,
+    |}) => {
+      setStyle(agent, id, rendererID, name, value);
+      setTimeout(() =>
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
+      );
+    },
+  );
+
+  bridge.send('isNativeStyleEditorSupported', {
+    isSupported: true,
+    validAttributes,
+  });
+}
+
+const EMPTY_BOX_STYLE = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+const componentIDToStyleOverrides: Map<number, Object> = new Map();
+
+function measureStyle(
+  agent: Agent,
+  bridge: BackendBridge,
+  resolveNativeStyle: ResolveNativeStyle,
+  id: number,
+  rendererID: RendererID,
+) {
+  const data = agent.getInstanceAndStyle({id, rendererID});
+  if (!data || !data.style) {
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: null,
+        style: null,
+      }: StyleAndLayout),
+    );
+    return;
+  }
+
+  const {instance, style} = data;
+
+  let resolvedStyle = resolveNativeStyle(style);
+
+  // If it's a host component we edited before, amend styles.
+  const styleOverrides = componentIDToStyleOverrides.get(id);
+  if (styleOverrides != null) {
+    resolvedStyle = Object.assign({}, resolvedStyle, styleOverrides);
+  }
+
+  if (!instance || typeof instance.measure !== 'function') {
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: null,
+        style: resolvedStyle || null,
+      }: StyleAndLayout),
+    );
+    return;
+  }
+
+  // $FlowFixMe the parameter types of an unknown function are unknown
+  instance.measure((x, y, width, height, left, top) => {
+    // RN Android sometimes returns undefined here. Don't send measurements in this case.
+    // https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-304611817
+    if (typeof x !== 'number') {
+      bridge.send(
+        'NativeStyleEditor_styleAndLayout',
+        ({
+          id,
+          layout: null,
+          style: resolvedStyle || null,
+        }: StyleAndLayout),
+      );
+      return;
+    }
+    const margin =
+      (resolvedStyle != null && resolveBoxStyle('margin', resolvedStyle)) ||
+      EMPTY_BOX_STYLE;
+    const padding =
+      (resolvedStyle != null && resolveBoxStyle('padding', resolvedStyle)) ||
+      EMPTY_BOX_STYLE;
+    bridge.send(
+      'NativeStyleEditor_styleAndLayout',
+      ({
+        id,
+        layout: {
+          x,
+          y,
+          width,
+          height,
+          left,
+          top,
+          margin,
+          padding,
+        },
+        style: resolvedStyle || null,
+      }: StyleAndLayout),
+    );
+  });
+}
+
+function shallowClone(object: Object): Object {
+  const cloned = {};
+  for (let n in object) {
+    cloned[n] = object[n];
+  }
+  return cloned;
+}
+
+function renameStyle(
+  agent: Agent,
+  id: number,
+  rendererID: RendererID,
+  oldName: string,
+  newName: string,
+  value: string,
+): void {
+  const data = agent.getInstanceAndStyle({id, rendererID});
+  if (!data || !data.style) {
+    return;
+  }
+
+  const {instance, style} = data;
+
+  const newStyle = newName
+    ? {[oldName]: undefined, [newName]: value}
+    : {[oldName]: undefined};
+
+  let customStyle;
+
+  // TODO It would be nice if the renderer interface abstracted this away somehow.
+  if (instance !== null && typeof instance.setNativeProps === 'function') {
+    // In the case of a host component, we need to use setNativeProps().
+    // Remember to "correct" resolved styles when we read them next time.
+    const styleOverrides = componentIDToStyleOverrides.get(id);
+    if (!styleOverrides) {
+      componentIDToStyleOverrides.set(id, newStyle);
+    } else {
+      Object.assign(styleOverrides, newStyle);
+    }
+    // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
+    instance.setNativeProps({style: newStyle});
+  } else if (Array.isArray(style)) {
+    const lastIndex = style.length - 1;
+    if (
+      typeof style[lastIndex] === 'object' &&
+      !Array.isArray(style[lastIndex])
+    ) {
+      customStyle = shallowClone(style[lastIndex]);
+      delete customStyle[oldName];
+      if (newName) {
+        customStyle[newName] = value;
+      } else {
+        customStyle[oldName] = undefined;
+      }
+
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style', lastIndex],
+        value: customStyle,
+      });
+    } else {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style'],
+        value: style.concat([newStyle]),
+      });
+    }
+  } else if (typeof style === 'object') {
+    customStyle = shallowClone(style);
+    delete customStyle[oldName];
+    if (newName) {
+      customStyle[newName] = value;
+    } else {
+      customStyle[oldName] = undefined;
+    }
+
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: customStyle,
+    });
+  } else {
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: [style, newStyle],
+    });
+  }
+
+  agent.emit('hideNativeHighlight');
+}
+
+function setStyle(
+  agent: Agent,
+  id: number,
+  rendererID: RendererID,
+  name: string,
+  value: string,
+) {
+  const data = agent.getInstanceAndStyle({id, rendererID});
+  if (!data || !data.style) {
+    return;
+  }
+
+  const {instance, style} = data;
+  const newStyle = {[name]: value};
+
+  // TODO It would be nice if the renderer interface abstracted this away somehow.
+  if (instance !== null && typeof instance.setNativeProps === 'function') {
+    // In the case of a host component, we need to use setNativeProps().
+    // Remember to "correct" resolved styles when we read them next time.
+    const styleOverrides = componentIDToStyleOverrides.get(id);
+    if (!styleOverrides) {
+      componentIDToStyleOverrides.set(id, newStyle);
+    } else {
+      Object.assign(styleOverrides, newStyle);
+    }
+    // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
+    instance.setNativeProps({style: newStyle});
+  } else if (Array.isArray(style)) {
+    const lastLength = style.length - 1;
+    if (
+      typeof style[lastLength] === 'object' &&
+      !Array.isArray(style[lastLength])
+    ) {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style', lastLength, name],
+        value,
+      });
+    } else {
+      agent.overrideProps({
+        id,
+        rendererID,
+        path: ['style'],
+        value: style.concat([newStyle]),
+      });
+    }
+  } else {
+    agent.overrideProps({
+      id,
+      rendererID,
+      path: ['style'],
+      value: [style, newStyle],
+    });
+  }
+
+  agent.emit('hideNativeHighlight');
+}
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
new file mode 100644
index 0000000000000..f20d0d016d850
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type BoxStyle = $ReadOnly<{|
+  bottom: number,
+  left: number,
+  right: number,
+  top: number,
+|}>;
+
+export type Layout = {|
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  left: number,
+  top: number,
+  margin: BoxStyle,
+  padding: BoxStyle,
+|};
+
+export type Style = Object;
+
+export type StyleAndLayout = {|
+  id: number,
+  style: Style | null,
+  layout: Layout | null,
+|};
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
new file mode 100644
index 0000000000000..b9a2b7ab0af23
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -0,0 +1,566 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import EventEmitter from 'events';
+import throttle from 'lodash.throttle';
+import {
+  SESSION_STORAGE_LAST_SELECTION_KEY,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+  __DEBUG__,
+} from '../constants';
+import {
+  sessionStorageGetItem,
+  sessionStorageRemoveItem,
+  sessionStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import setupHighlighter from './views/Highlighter';
+import {
+  initialize as setupTraceUpdates,
+  toggleEnabled as setTraceUpdatesEnabled,
+} from './views/TraceUpdates';
+import {patch as patchConsole, unpatch as unpatchConsole} from './console';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  InstanceAndStyle,
+  NativeType,
+  OwnersList,
+  PathFrame,
+  PathMatch,
+  RendererID,
+  RendererInterface,
+} from './types';
+import type {ComponentFilter} from '../types';
+
+const debug = (methodName, ...args) => {
+  if (__DEBUG__) {
+    console.log(
+      `%cAgent %c${methodName}`,
+      'color: purple; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+};
+
+type ElementAndRendererID = {|
+  id: number,
+  rendererID: number,
+|};
+
+type StoreAsGlobalParams = {|
+  count: number,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+|};
+
+type CopyElementParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+|};
+
+type InspectElementParams = {|
+  id: number,
+  path?: Array<string | number>,
+  rendererID: number,
+|};
+
+type OverrideHookParams = {|
+  id: number,
+  hookID: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
+type SetInParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+|};
+
+type OverrideSuspenseParams = {|
+  id: number,
+  rendererID: number,
+  forceFallback: boolean,
+|};
+
+type PersistedSelection = {|
+  rendererID: number,
+  path: Array<PathFrame>,
+|};
+
+export default class Agent extends EventEmitter<{|
+  hideNativeHighlight: [],
+  showNativeHighlight: [NativeType],
+  shutdown: [],
+  traceUpdates: [Set<NativeType>],
+|}> {
+  _bridge: BackendBridge;
+  _isProfiling: boolean = false;
+  _recordChangeDescriptions: boolean = false;
+  _rendererInterfaces: {[key: RendererID]: RendererInterface, ...} = {};
+  _persistedSelection: PersistedSelection | null = null;
+  _persistedSelectionMatch: PathMatch | null = null;
+  _traceUpdatesEnabled: boolean = false;
+
+  constructor(bridge: BackendBridge) {
+    super();
+
+    if (
+      sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+    ) {
+      this._recordChangeDescriptions =
+        sessionStorageGetItem(
+          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+        ) === 'true';
+      this._isProfiling = true;
+
+      sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);
+      sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);
+    }
+
+    const persistedSelectionString = sessionStorageGetItem(
+      SESSION_STORAGE_LAST_SELECTION_KEY,
+    );
+    if (persistedSelectionString != null) {
+      this._persistedSelection = JSON.parse(persistedSelectionString);
+    }
+
+    this._bridge = bridge;
+
+    bridge.addListener('copyElementPath', this.copyElementPath);
+    bridge.addListener('getProfilingData', this.getProfilingData);
+    bridge.addListener('getProfilingStatus', this.getProfilingStatus);
+    bridge.addListener('getOwnersList', this.getOwnersList);
+    bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('logElementToConsole', this.logElementToConsole);
+    bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideHookState', this.overrideHookState);
+    bridge.addListener('overrideProps', this.overrideProps);
+    bridge.addListener('overrideState', this.overrideState);
+    bridge.addListener('overrideSuspense', this.overrideSuspense);
+    bridge.addListener('reloadAndProfile', this.reloadAndProfile);
+    bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
+    bridge.addListener('startProfiling', this.startProfiling);
+    bridge.addListener('stopProfiling', this.stopProfiling);
+    bridge.addListener('storeAsGlobal', this.storeAsGlobal);
+    bridge.addListener(
+      'syncSelectionFromNativeElementsPanel',
+      this.syncSelectionFromNativeElementsPanel,
+    );
+    bridge.addListener('shutdown', this.shutdown);
+    bridge.addListener(
+      'updateAppendComponentStack',
+      this.updateAppendComponentStack,
+    );
+    bridge.addListener('updateComponentFilters', this.updateComponentFilters);
+    bridge.addListener('viewAttributeSource', this.viewAttributeSource);
+    bridge.addListener('viewElementSource', this.viewElementSource);
+
+    if (this._isProfiling) {
+      bridge.send('profilingStatus', true);
+    }
+
+    // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
+    // If not, features like reload-and-profile will not work correctly and must be disabled.
+    let isBackendStorageAPISupported = false;
+    try {
+      localStorage.getItem('test');
+      isBackendStorageAPISupported = true;
+    } catch (error) {}
+    bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
+
+    setupHighlighter(bridge, this);
+    setupTraceUpdates(this);
+  }
+
+  get rendererInterfaces(): {[key: RendererID]: RendererInterface, ...} {
+    return this._rendererInterfaces;
+  }
+
+  copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.copyElementPath(id, path);
+    }
+  };
+
+  getInstanceAndStyle({
+    id,
+    rendererID,
+  }: ElementAndRendererID): InstanceAndStyle | null {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+      return null;
+    }
+    return renderer.getInstanceAndStyle(id);
+  }
+
+  getIDForNode(node: Object): number | null {
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+
+      try {
+        const id = renderer.getFiberIDForNative(node, true);
+        if (id !== null) {
+          return id;
+        }
+      } catch (error) {
+        // Some old React versions might throw if they can't find a match.
+        // If so we should ignore it...
+      }
+    }
+    return null;
+  }
+
+  getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    }
+
+    this._bridge.send('profilingData', renderer.getProfilingData());
+  };
+
+  getProfilingStatus = () => {
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  getOwnersList = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      const owners = renderer.getOwnersList(id);
+      this._bridge.send('ownersList', ({id, owners}: OwnersList));
+    }
+  };
+
+  inspectElement = ({id, path, rendererID}: InspectElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      this._bridge.send('inspectedElement', renderer.inspectElement(id, path));
+
+      // When user selects an element, stop trying to restore the selection,
+      // and instead remember the current selection for the next reload.
+      if (
+        this._persistedSelectionMatch === null ||
+        this._persistedSelectionMatch.id !== id
+      ) {
+        this._persistedSelection = null;
+        this._persistedSelectionMatch = null;
+        renderer.setTrackedPath(null);
+        this._throttledPersistSelection(rendererID, id);
+      }
+
+      // TODO: If there was a way to change the selected DOM element
+      // in native Elements tab without forcing a switch to it, we'd do it here.
+      // For now, it doesn't seem like there is a way to do that:
+      // https://github.com/bvaughn/react-devtools-experimental/issues/102
+      // (Setting $0 doesn't work, and calling inspect() switches the tab.)
+    }
+  };
+
+  logElementToConsole = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.logElementToConsole(id);
+    }
+  };
+
+  reloadAndProfile = (recordChangeDescriptions: boolean) => {
+    sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+    sessionStorageSetItem(
+      SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+      recordChangeDescriptions ? 'true' : 'false',
+    );
+
+    // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
+    // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
+    // The agent can't do this in a way that is renderer agnostic.
+    this._bridge.send('reloadAppForProfiling');
+  };
+
+  overrideContext = ({id, path, rendererID, value}: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInContext(id, path, value);
+    }
+  };
+
+  overrideHookState = ({
+    id,
+    hookID,
+    path,
+    rendererID,
+    value,
+  }: OverrideHookParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInHook(id, hookID, path, value);
+    }
+  };
+
+  overrideProps = ({id, path, rendererID, value}: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInProps(id, path, value);
+    }
+  };
+
+  overrideState = ({id, path, rendererID, value}: SetInParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.setInState(id, path, value);
+    }
+  };
+
+  overrideSuspense = ({
+    id,
+    rendererID,
+    forceFallback,
+  }: OverrideSuspenseParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideSuspense(id, forceFallback);
+    }
+  };
+
+  selectNode(target: Object): void {
+    const id = this.getIDForNode(target);
+    if (id !== null) {
+      this._bridge.send('selectFiber', id);
+    }
+  }
+
+  setRendererInterface(
+    rendererID: RendererID,
+    rendererInterface: RendererInterface,
+  ) {
+    this._rendererInterfaces[rendererID] = rendererInterface;
+
+    if (this._isProfiling) {
+      rendererInterface.startProfiling(this._recordChangeDescriptions);
+    }
+
+    rendererInterface.setTraceUpdatesEnabled(this._traceUpdatesEnabled);
+
+    // When the renderer is attached, we need to tell it whether
+    // we remember the previous selection that we'd like to restore.
+    // It'll start tracking mounts for matches to the last selection path.
+    const selection = this._persistedSelection;
+    if (selection !== null && selection.rendererID === rendererID) {
+      rendererInterface.setTrackedPath(selection.path);
+    }
+  }
+
+  setTraceUpdatesEnabled = (traceUpdatesEnabled: boolean) => {
+    this._traceUpdatesEnabled = traceUpdatesEnabled;
+
+    setTraceUpdatesEnabled(traceUpdatesEnabled);
+
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.setTraceUpdatesEnabled(traceUpdatesEnabled);
+    }
+  };
+
+  syncSelectionFromNativeElementsPanel = () => {
+    const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
+    if (target == null) {
+      return;
+    }
+    this.selectNode(target);
+  };
+
+  shutdown = () => {
+    // Clean up the overlay if visible, and associated events.
+    this.emit('shutdown');
+  };
+
+  startProfiling = (recordChangeDescriptions: boolean) => {
+    this._recordChangeDescriptions = recordChangeDescriptions;
+    this._isProfiling = true;
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.startProfiling(recordChangeDescriptions);
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  stopProfiling = () => {
+    this._isProfiling = false;
+    this._recordChangeDescriptions = false;
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.stopProfiling();
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  storeAsGlobal = ({count, id, path, rendererID}: StoreAsGlobalParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.storeAsGlobal(id, path, count);
+    }
+  };
+
+  updateAppendComponentStack = (appendComponentStack: boolean) => {
+    // If the frontend preference has change,
+    // or in the case of React Native- if the backend is just finding out the preference-
+    // then install or uninstall the console overrides.
+    // It's safe to call these methods multiple times, so we don't need to worry about that.
+    if (appendComponentStack) {
+      patchConsole();
+    } else {
+      unpatchConsole();
+    }
+  };
+
+  updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.updateComponentFilters(componentFilters);
+    }
+  };
+
+  viewAttributeSource = ({id, path, rendererID}: CopyElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.prepareViewAttributeSource(id, path);
+    }
+  };
+
+  viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.prepareViewElementSource(id);
+    }
+  };
+
+  onTraceUpdates = (nodes: Set<NativeType>) => {
+    this.emit('traceUpdates', nodes);
+  };
+
+  onHookOperations = (operations: Array<number>) => {
+    if (__DEBUG__) {
+      debug('onHookOperations', operations);
+    }
+
+    // TODO:
+    // The chrome.runtime does not currently support transferables; it forces JSON serialization.
+    // See bug https://bugs.chromium.org/p/chromium/issues/detail?id=927134
+    //
+    // Regarding transferables, the postMessage doc states:
+    // If the ownership of an object is transferred, it becomes unusable (neutered)
+    // in the context it was sent from and becomes available only to the worker it was sent to.
+    //
+    // Even though Chrome is eventually JSON serializing the array buffer,
+    // using the transferable approach also sometimes causes it to throw:
+    //   DOMException: Failed to execute 'postMessage' on 'Window': ArrayBuffer at index 0 is already neutered.
+    //
+    // See bug https://github.com/bvaughn/react-devtools-experimental/issues/25
+    //
+    // The Store has a fallback in place that parses the message as JSON if the type isn't an array.
+    // For now the simplest fix seems to be to not transfer the array.
+    // This will negatively impact performance on Firefox so it's unfortunate,
+    // but until we're able to fix the Chrome error mentioned above, it seems necessary.
+    //
+    // this._bridge.send('operations', operations, [operations.buffer]);
+    this._bridge.send('operations', operations);
+
+    if (this._persistedSelection !== null) {
+      const rendererID = operations[0];
+      if (this._persistedSelection.rendererID === rendererID) {
+        // Check if we can select a deeper match for the persisted selection.
+        const renderer = this._rendererInterfaces[rendererID];
+        if (renderer == null) {
+          console.warn(`Invalid renderer id "${rendererID}"`);
+        } else {
+          const prevMatch = this._persistedSelectionMatch;
+          const nextMatch = renderer.getBestMatchForTrackedPath();
+          this._persistedSelectionMatch = nextMatch;
+          const prevMatchID = prevMatch !== null ? prevMatch.id : null;
+          const nextMatchID = nextMatch !== null ? nextMatch.id : null;
+          if (prevMatchID !== nextMatchID) {
+            if (nextMatchID !== null) {
+              // We moved forward, unlocking a deeper node.
+              this._bridge.send('selectFiber', nextMatchID);
+            }
+          }
+          if (nextMatch !== null && nextMatch.isFullMatch) {
+            // We've just unlocked the innermost selected node.
+            // There's no point tracking it further.
+            this._persistedSelection = null;
+            this._persistedSelectionMatch = null;
+            renderer.setTrackedPath(null);
+          }
+        }
+      }
+    }
+  };
+
+  onUnsupportedRenderer(rendererID: number) {
+    this._bridge.send('unsupportedRendererVersion', rendererID);
+  }
+
+  _throttledPersistSelection = throttle((rendererID: number, id: number) => {
+    // This is throttled, so both renderer and selected ID
+    // might not be available by the time we read them.
+    // This is why we need the defensive checks here.
+    const renderer = this._rendererInterfaces[rendererID];
+    const path = renderer != null ? renderer.getPathForElement(id) : null;
+    if (path !== null) {
+      sessionStorageSetItem(
+        SESSION_STORAGE_LAST_SELECTION_KEY,
+        JSON.stringify(({rendererID, path}: PersistedSelection)),
+      );
+    } else {
+      sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
+    }
+  }, 1000);
+}
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
new file mode 100644
index 0000000000000..7bd7efbcd5a5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -0,0 +1,152 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {getInternalReactConstants} from './renderer';
+import describeComponentFrame from './describeComponentFrame';
+
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {ReactRenderer} from './types';
+
+const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];
+
+const FRAME_REGEX = /\n {4}in /;
+
+const injectedRenderers: Map<
+  ReactRenderer,
+  {|
+    getCurrentFiber: () => Fiber | null,
+    getDisplayNameForFiber: (fiber: Fiber) => string | null,
+  |},
+> = new Map();
+
+let targetConsole: Object = console;
+let targetConsoleMethods = {};
+for (let method in console) {
+  targetConsoleMethods[method] = console[method];
+}
+
+let unpatchFn: null | (() => void) = null;
+
+// Enables e.g. Jest tests to inject a mock console object.
+export function dangerous_setTargetConsoleForTesting(
+  targetConsoleForTesting: Object,
+): void {
+  targetConsole = targetConsoleForTesting;
+
+  targetConsoleMethods = {};
+  for (let method in targetConsole) {
+    targetConsoleMethods[method] = console[method];
+  }
+}
+
+// v16 renderers should use this method to inject internals necessary to generate a component stack.
+// These internals will be used if the console is patched.
+// Injecting them separately allows the console to easily be patched or un-patched later (at runtime).
+export function registerRenderer(renderer: ReactRenderer): void {
+  const {getCurrentFiber, findFiberByHostInstance, version} = renderer;
+
+  // Ignore React v15 and older because they don't expose a component stack anyway.
+  if (typeof findFiberByHostInstance !== 'function') {
+    return;
+  }
+
+  if (typeof getCurrentFiber === 'function') {
+    const {getDisplayNameForFiber} = getInternalReactConstants(version);
+
+    injectedRenderers.set(renderer, {
+      getCurrentFiber,
+      getDisplayNameForFiber,
+    });
+  }
+}
+
+// Patches whitelisted console methods to append component stack for the current fiber.
+// Call unpatch() to remove the injected behavior.
+export function patch(): void {
+  if (unpatchFn !== null) {
+    // Don't patch twice.
+    return;
+  }
+
+  const originalConsoleMethods = {};
+
+  unpatchFn = () => {
+    for (let method in originalConsoleMethods) {
+      try {
+        // $FlowFixMe property error|warn is not writable.
+        targetConsole[method] = originalConsoleMethods[method];
+      } catch (error) {}
+    }
+  };
+
+  APPEND_STACK_TO_METHODS.forEach(method => {
+    try {
+      const originalMethod = (originalConsoleMethods[method] =
+        targetConsole[method]);
+
+      const overrideMethod = (...args) => {
+        try {
+          // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
+          // don't append a second stack.
+          const alreadyHasComponentStack =
+            args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);
+
+          if (!alreadyHasComponentStack) {
+            // If there's a component stack for at least one of the injected renderers, append it.
+            // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+            for (let {
+              getCurrentFiber,
+              getDisplayNameForFiber,
+            } of injectedRenderers.values()) {
+              let current: ?Fiber = getCurrentFiber();
+              let ownerStack: string = '';
+              while (current != null) {
+                const name = getDisplayNameForFiber(current);
+                const owner = current._debugOwner;
+                const ownerName =
+                  owner != null ? getDisplayNameForFiber(owner) : null;
+
+                ownerStack += describeComponentFrame(
+                  name,
+                  current._debugSource,
+                  ownerName,
+                );
+
+                current = owner;
+              }
+
+              if (ownerStack !== '') {
+                args.push(ownerStack);
+                break;
+              }
+            }
+          }
+        } catch (error) {
+          // Don't let a DevTools or React internal error interfere with logging.
+        }
+
+        originalMethod(...args);
+      };
+
+      overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+
+      // $FlowFixMe property error|warn is not writable.
+      targetConsole[method] = overrideMethod;
+    } catch (error) {}
+  });
+}
+
+// Removed component stack patch from whitelisted console methods.
+export function unpatch(): void {
+  if (unpatchFn !== null) {
+    unpatchFn();
+    unpatchFn = null;
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/describeComponentFrame.js b/packages/react-devtools-shared/src/backend/describeComponentFrame.js
new file mode 100644
index 0000000000000..b9830fdf717d5
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/describeComponentFrame.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// This file was forked from the React GitHub repo:
+// https://raw.githubusercontent.com/facebook/react/master/packages/shared/describeComponentFrame.js
+//
+// It has been modified slightly to add a zero width space as commented below.
+
+const BEFORE_SLASH_RE = /^(.*)[\\/]/;
+
+export default function describeComponentFrame(
+  name: null | string,
+  source: any,
+  ownerName: null | string,
+) {
+  let sourceInfo = '';
+  if (source) {
+    let path = source.fileName;
+    let fileName = path.replace(BEFORE_SLASH_RE, '');
+    if (__DEV__) {
+      // In DEV, include code for a common special case:
+      // prefer "folder/index.js" instead of just "index.js".
+      if (/^index\./.test(fileName)) {
+        const match = path.match(BEFORE_SLASH_RE);
+        if (match) {
+          const pathBeforeSlash = match[1];
+          if (pathBeforeSlash) {
+            const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            // Note the below string contains a zero width space after the "/" character.
+            // This is to prevent browsers like Chrome from formatting the file name as a link.
+            // (Since this is a source link, it would not work to open the source file anyway.)
+            fileName = folderName + '/​' + fileName;
+          }
+        }
+      }
+    }
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
new file mode 100644
index 0000000000000..6a70c250bb3cd
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/index.js
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Agent from './agent';
+
+import {attach} from './renderer';
+import {attach as attachLegacy} from './legacy/renderer';
+
+import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
+
+export function initBackend(
+  hook: DevToolsHook,
+  agent: Agent,
+  global: Object,
+): () => void {
+  const subs = [
+    hook.sub(
+      'renderer-attached',
+      ({
+        id,
+        renderer,
+        rendererInterface,
+      }: {
+        id: number,
+        renderer: ReactRenderer,
+        rendererInterface: RendererInterface,
+        ...
+      }) => {
+        agent.setRendererInterface(id, rendererInterface);
+
+        // Now that the Store and the renderer interface are connected,
+        // it's time to flush the pending operation codes to the frontend.
+        rendererInterface.flushInitialOperations();
+      },
+    ),
+
+    hook.sub('unsupported-renderer-version', (id: number) => {
+      agent.onUnsupportedRenderer(id);
+    }),
+
+    hook.sub('operations', agent.onHookOperations),
+    hook.sub('traceUpdates', agent.onTraceUpdates),
+
+    // TODO Add additional subscriptions required for profiling mode
+  ];
+
+  const attachRenderer = (id: number, renderer: ReactRenderer) => {
+    let rendererInterface = hook.rendererInterfaces.get(id);
+
+    // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
+    if (rendererInterface == null) {
+      if (typeof renderer.findFiberByHostInstance === 'function') {
+        // react-reconciler v16+
+        rendererInterface = attach(hook, id, renderer, global);
+      } else if (renderer.ComponentTree) {
+        // react-dom v15
+        rendererInterface = attachLegacy(hook, id, renderer, global);
+      } else {
+        // Older react-dom or other unsupported renderer version
+      }
+
+      if (rendererInterface != null) {
+        hook.rendererInterfaces.set(id, rendererInterface);
+      }
+    }
+
+    // Notify the DevTools frontend about new renderers.
+    // This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).
+    if (rendererInterface != null) {
+      hook.emit('renderer-attached', {
+        id,
+        renderer,
+        rendererInterface,
+      });
+    } else {
+      hook.emit('unsupported-renderer-version', id);
+    }
+  };
+
+  // Connect renderers that have already injected themselves.
+  hook.renderers.forEach((renderer, id) => {
+    attachRenderer(id, renderer);
+  });
+
+  // Connect any new renderers that injected themselves.
+  subs.push(
+    hook.sub(
+      'renderer',
+      ({id, renderer}: {id: number, renderer: ReactRenderer, ...}) => {
+        attachRenderer(id, renderer);
+      },
+    ),
+  );
+
+  hook.emit('react-devtools', agent);
+  hook.reactDevtoolsAgent = agent;
+  const onAgentShutdown = () => {
+    subs.forEach(fn => fn());
+    hook.rendererInterfaces.forEach(rendererInterface => {
+      rendererInterface.cleanup();
+    });
+    hook.reactDevtoolsAgent = null;
+  };
+  agent.addListener('shutdown', onAgentShutdown);
+  subs.push(() => {
+    agent.removeListener('shutdown', onAgentShutdown);
+  });
+
+  return () => {
+    subs.forEach(fn => fn());
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
new file mode 100644
index 0000000000000..6c78d481c7787
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -0,0 +1,1001 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+  ElementTypeRoot,
+  ElementTypeHostComponent,
+  ElementTypeOtherOrUnknown,
+} from 'react-devtools-shared/src/types';
+import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
+import {cleanForBridge, copyToClipboard, copyWithSet} from '../utils';
+import {getDisplayName, getInObject} from 'react-devtools-shared/src/utils';
+import {
+  __DEBUG__,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+} from '../../constants';
+import {decorateMany, forceUpdate, restoreMany} from './utils';
+
+import type {
+  DevToolsHook,
+  GetFiberIDForNative,
+  InspectedElementPayload,
+  InstanceAndStyle,
+  NativeType,
+  PathFrame,
+  PathMatch,
+  RendererInterface,
+} from '../types';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
+import type {Owner, InspectedElement} from '../types';
+
+export type InternalInstance = Object;
+type LegacyRenderer = Object;
+
+function getData(internalInstance: InternalInstance) {
+  let displayName = null;
+  let key = null;
+
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    if (internalInstance._currentElement.key) {
+      key = '' + internalInstance._currentElement.key;
+    }
+
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'string') {
+      displayName = elementType;
+    } else if (typeof elementType === 'function') {
+      displayName = getDisplayName(elementType);
+    }
+  }
+
+  return {
+    displayName,
+    key,
+  };
+}
+
+function getElementType(internalInstance: InternalInstance): ElementType {
+  // != used deliberately here to catch undefined and null
+  if (internalInstance._currentElement != null) {
+    const elementType = internalInstance._currentElement.type;
+    if (typeof elementType === 'function') {
+      const publicInstance = internalInstance.getPublicInstance();
+      if (publicInstance !== null) {
+        return ElementTypeClass;
+      } else {
+        return ElementTypeFunction;
+      }
+    } else if (typeof elementType === 'string') {
+      return ElementTypeHostComponent;
+    }
+  }
+  return ElementTypeOtherOrUnknown;
+}
+
+function getChildren(internalInstance: Object): Array<any> {
+  let children = [];
+
+  // If the parent is a native node without rendered children, but with
+  // multiple string children, then the `element` that gets passed in here is
+  // a plain value -- a string or number.
+  if (typeof internalInstance !== 'object') {
+    // No children
+  } else if (
+    internalInstance._currentElement === null ||
+    internalInstance._currentElement === false
+  ) {
+    // No children
+  } else if (internalInstance._renderedComponent) {
+    const child = internalInstance._renderedComponent;
+    if (getElementType(child) !== ElementTypeOtherOrUnknown) {
+      children.push(child);
+    }
+  } else if (internalInstance._renderedChildren) {
+    const renderedChildren = internalInstance._renderedChildren;
+    for (let name in renderedChildren) {
+      const child = renderedChildren[name];
+      if (getElementType(child) !== ElementTypeOtherOrUnknown) {
+        children.push(child);
+      }
+    }
+  }
+  // Note: we skip the case where children are just strings or numbers
+  // because the new DevTools skips over host text nodes anyway.
+  return children;
+}
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: LegacyRenderer,
+  global: Object,
+): RendererInterface {
+  const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
+  const internalInstanceToIDMap: WeakMap<
+    InternalInstance,
+    number,
+  > = new WeakMap();
+  const internalInstanceToRootIDMap: WeakMap<
+    InternalInstance,
+    number,
+  > = new WeakMap();
+
+  let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
+  let findNativeNodeForInternalID: (id: number) => ?NativeType;
+
+  if (renderer.ComponentTree) {
+    getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
+      const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(
+        node,
+      );
+      return internalInstanceToIDMap.get(internalInstance) || null;
+    };
+    findNativeNodeForInternalID = (id: number) => {
+      const internalInstance = idToInternalInstanceMap.get(id);
+      return renderer.ComponentTree.getNodeFromInstance(internalInstance);
+    };
+  } else if (renderer.Mount.getID && renderer.Mount.getNode) {
+    getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
+      // Not implemented.
+      return null;
+    };
+    findNativeNodeForInternalID = (id: number) => {
+      // Not implemented.
+      return null;
+    };
+  }
+
+  function getDisplayNameForFiberID(id: number): string | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    return internalInstance ? getData(internalInstance).displayName : null;
+  }
+
+  function getID(internalInstance: InternalInstance): number {
+    if (typeof internalInstance !== 'object') {
+      throw new Error('Invalid internal instance: ' + internalInstance);
+    }
+    if (!internalInstanceToIDMap.has(internalInstance)) {
+      const id = getUID();
+      internalInstanceToIDMap.set(internalInstance, id);
+      idToInternalInstanceMap.set(id, internalInstance);
+    }
+    return ((internalInstanceToIDMap.get(internalInstance): any): number);
+  }
+
+  function areEqualArrays(a, b) {
+    if (a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // This is shared mutable state that lets us keep track of where we are.
+  let parentIDStack = [];
+
+  let oldReconcilerMethods = null;
+  if (renderer.Reconciler) {
+    // React 15
+    oldReconcilerMethods = decorateMany(renderer.Reconciler, {
+      mountComponent(fn, args) {
+        const internalInstance = args[0];
+        const hostContainerInfo = args[3];
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
+        if (hostContainerInfo._topLevelWrapper === undefined) {
+          // SSR
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        // Push the operation.
+        const parentID =
+          parentIDStack.length > 0
+            ? parentIDStack[parentIDStack.length - 1]
+            : 0;
+        recordMount(internalInstance, id, parentID);
+        parentIDStack.push(id);
+
+        // Remember the root.
+        internalInstanceToRootIDMap.set(
+          internalInstance,
+          getID(hostContainerInfo._topLevelWrapper),
+        );
+
+        try {
+          const result = fn.apply(this, args);
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
+          }
+        }
+      },
+      performUpdateIfNecessary(fn, args) {
+        const internalInstance = args[0];
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+
+        const prevChildren = getChildren(internalInstance);
+        try {
+          const result = fn.apply(this, args);
+
+          const nextChildren = getChildren(internalInstance);
+          if (!areEqualArrays(prevChildren, nextChildren)) {
+            // Push the operation
+            recordReorder(internalInstance, id, nextChildren);
+          }
+
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
+          }
+        }
+      },
+      receiveComponent(fn, args) {
+        const internalInstance = args[0];
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+
+        const prevChildren = getChildren(internalInstance);
+        try {
+          const result = fn.apply(this, args);
+
+          const nextChildren = getChildren(internalInstance);
+          if (!areEqualArrays(prevChildren, nextChildren)) {
+            // Push the operation
+            recordReorder(internalInstance, id, nextChildren);
+          }
+
+          parentIDStack.pop();
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
+          }
+        }
+      },
+      unmountComponent(fn, args) {
+        const internalInstance = args[0];
+        if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+        try {
+          const result = fn.apply(this, args);
+          parentIDStack.pop();
+
+          // Push the operation.
+          recordUnmount(internalInstance, id);
+
+          return result;
+        } catch (err) {
+          parentIDStack = [];
+          throw err;
+        } finally {
+          if (parentIDStack.length === 0) {
+            const rootID = internalInstanceToRootIDMap.get(internalInstance);
+            if (rootID === undefined) {
+              throw new Error('Expected to find root ID.');
+            }
+            flushPendingEvents(rootID);
+          }
+        }
+      },
+    });
+  }
+
+  function cleanup() {
+    if (oldReconcilerMethods !== null) {
+      if (renderer.Component) {
+        restoreMany(renderer.Component.Mixin, oldReconcilerMethods);
+      } else {
+        restoreMany(renderer.Reconciler, oldReconcilerMethods);
+      }
+    }
+    oldReconcilerMethods = null;
+  }
+
+  function recordMount(
+    internalInstance: InternalInstance,
+    id: number,
+    parentID: number,
+  ) {
+    const isRoot = parentID === 0;
+
+    if (__DEBUG__) {
+      console.log(
+        '%crecordMount()',
+        'color: green; font-weight: bold;',
+        id,
+        getData(internalInstance).displayName,
+      );
+    }
+
+    if (isRoot) {
+      // TODO Is this right? For all versions?
+      const hasOwnerMetadata =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null;
+
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(ElementTypeRoot);
+      pushOperation(0); // isProfilingSupported?
+      pushOperation(hasOwnerMetadata ? 1 : 0);
+    } else {
+      const type = getElementType(internalInstance);
+      const {displayName, key} = getData(internalInstance);
+
+      const ownerID =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null
+          ? getID(internalInstance._currentElement._owner)
+          : 0;
+
+      let displayNameStringID = getStringID(displayName);
+      let keyStringID = getStringID(key);
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(type);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
+    }
+  }
+
+  function recordReorder(
+    internalInstance: InternalInstance,
+    id: number,
+    nextChildren: Array<InternalInstance>,
+  ) {
+    pushOperation(TREE_OPERATION_REORDER_CHILDREN);
+    pushOperation(id);
+    const nextChildIDs = nextChildren.map(getID);
+    pushOperation(nextChildIDs.length);
+    for (let i = 0; i < nextChildIDs.length; i++) {
+      pushOperation(nextChildIDs[i]);
+    }
+  }
+
+  function recordUnmount(internalInstance: InternalInstance, id: number) {
+    pendingUnmountedIDs.push(id);
+    idToInternalInstanceMap.delete(id);
+  }
+
+  function crawlAndRecordInitialMounts(
+    id: number,
+    parentID: number,
+    rootID: number,
+  ) {
+    if (__DEBUG__) {
+      console.group('crawlAndRecordInitialMounts() id:', id);
+    }
+
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      internalInstanceToRootIDMap.set(internalInstance, rootID);
+      recordMount(internalInstance, id, parentID);
+      getChildren(internalInstance).forEach(child =>
+        crawlAndRecordInitialMounts(getID(child), id, rootID),
+      );
+    }
+
+    if (__DEBUG__) {
+      console.groupEnd();
+    }
+  }
+
+  function flushInitialOperations() {
+    // Crawl roots though and register any nodes that mounted before we were injected.
+
+    const roots =
+      renderer.Mount._instancesByReactRootID ||
+      renderer.Mount._instancesByContainerID;
+
+    for (let key in roots) {
+      const internalInstance = roots[key];
+      const id = getID(internalInstance);
+      crawlAndRecordInitialMounts(id, 0, id);
+      flushPendingEvents(id);
+    }
+  }
+
+  let pendingOperations: Array<number> = [];
+  let pendingStringTable: Map<string, number> = new Map();
+  let pendingUnmountedIDs: Array<number> = [];
+  let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: number | null = null;
+
+  function flushPendingEvents(rootID: number) {
+    if (
+      pendingOperations.length === 0 &&
+      pendingUnmountedIDs.length === 0 &&
+      pendingUnmountedRootID === null
+    ) {
+      return;
+    }
+
+    const numUnmountIDs =
+      pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
+
+    const operations = new Array(
+      // Identify which renderer this update is coming from.
+      2 + // [rendererID, rootFiberID]
+      // How big is the string table?
+      1 + // [stringTableLength]
+        // Then goes the actual string table.
+        pendingStringTableLength +
+        // All unmounts are batched in a single message.
+        // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
+        (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
+        // Mount operations
+        pendingOperations.length,
+    );
+
+    // Identify which renderer this update is coming from.
+    // This enables roots to be mapped to renderers,
+    // Which in turn enables fiber properations, states, and hooks to be inspected.
+    let i = 0;
+    operations[i++] = rendererID;
+    operations[i++] = rootID;
+
+    // Now fill in the string table.
+    // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
+    operations[i++] = pendingStringTableLength;
+    pendingStringTable.forEach((value, key) => {
+      operations[i++] = key.length;
+      const encodedKey = utfEncodeString(key);
+      for (let j = 0; j < encodedKey.length; j++) {
+        operations[i + j] = encodedKey[j];
+      }
+      i += key.length;
+    });
+
+    if (numUnmountIDs > 0) {
+      // All unmounts except roots are batched in a single message.
+      operations[i++] = TREE_OPERATION_REMOVE;
+      // The first number is how many unmounted IDs we're gonna send.
+      operations[i++] = numUnmountIDs;
+      // Fill in the unmounts
+      for (let j = 0; j < pendingUnmountedIDs.length; j++) {
+        operations[i++] = pendingUnmountedIDs[j];
+      }
+      // The root ID should always be unmounted last.
+      if (pendingUnmountedRootID !== null) {
+        operations[i] = pendingUnmountedRootID;
+        i++;
+      }
+    }
+
+    // Fill in the rest of the operations.
+    for (let j = 0; j < pendingOperations.length; j++) {
+      operations[i + j] = pendingOperations[j];
+    }
+    i += pendingOperations.length;
+
+    if (__DEBUG__) {
+      printOperationsArray(operations);
+    }
+
+    // If we've already connected to the frontend, just pass the operations through.
+    hook.emit('operations', operations);
+
+    pendingOperations.length = 0;
+    pendingUnmountedIDs = [];
+    pendingUnmountedRootID = null;
+    pendingStringTable.clear();
+    pendingStringTableLength = 0;
+  }
+
+  function pushOperation(op: number): void {
+    if (__DEV__) {
+      if (!Number.isInteger(op)) {
+        console.error(
+          'pushOperation() was called but the value is not an integer.',
+          op,
+        );
+      }
+    }
+    pendingOperations.push(op);
+  }
+
+  function getStringID(str: string | null): number {
+    if (str === null) {
+      return 0;
+    }
+    const existingID = pendingStringTable.get(str);
+    if (existingID !== undefined) {
+      return existingID;
+    }
+    const stringID = pendingStringTable.size + 1;
+    pendingStringTable.set(str, stringID);
+    // The string table total length needs to account
+    // both for the string length, and for the array item
+    // that contains the length itself. Hence + 1.
+    pendingStringTableLength += str.length + 1;
+    return stringID;
+  }
+
+  let currentlyInspectedElementID: number | null = null;
+  let currentlyInspectedPaths: Object = {};
+
+  // Track the intersection of currently inspected paths,
+  // so that we can send their data along if the element is re-rendered.
+  function mergeInspectedPaths(path: Array<string | number>) {
+    let current = currentlyInspectedPaths;
+    path.forEach(key => {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key];
+    });
+  }
+
+  function createIsPathWhitelisted(key: string) {
+    // This function helps prevent previously-inspected paths from being dehydrated in updates.
+    // This is important to avoid a bad user experience where expanded toggles collapse on update.
+    return function isPathWhitelisted(path: Array<string | number>): boolean {
+      let current = currentlyInspectedPaths[key];
+      if (!current) {
+        return false;
+      }
+      for (let i = 0; i < path.length; i++) {
+        current = current[path[i]];
+        if (!current) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }
+
+  // Fast path props lookup for React Native style editor.
+  function getInstanceAndStyle(id: number): InstanceAndStyle {
+    let instance = null;
+    let style = null;
+
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      instance = internalInstance._instance || null;
+
+      const element = internalInstance._currentElement;
+      if (element != null && element.props != null) {
+        style = element.props.style || null;
+      }
+    }
+
+    return {
+      instance,
+      style,
+    };
+  }
+
+  function updateSelectedElement(id: number): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return;
+    }
+
+    switch (getElementType(internalInstance)) {
+      case ElementTypeClass:
+        global.$r = internalInstance._instance;
+        break;
+      case ElementTypeFunction:
+        const element = internalInstance._currentElement;
+        if (element == null) {
+          console.warn(`Could not find element with id "${id}"`);
+          return;
+        }
+
+        global.$r = {
+          props: element.props,
+          type: element.type,
+        };
+        break;
+      default:
+        global.$r = null;
+        break;
+    }
+  }
+
+  function storeAsGlobal(
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      const value = getInObject(inspectedElement, path);
+      const key = `$reactTemp${count}`;
+
+      window[key] = value;
+
+      console.log(key);
+      console.log(value);
+    }
+  }
+
+  function copyElementPath(id: number, path: Array<string | number>): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      copyToClipboard(getInObject(inspectedElement, path));
+    }
+  }
+
+  function inspectElement(
+    id: number,
+    path?: Array<string | number>,
+  ): InspectedElementPayload {
+    if (currentlyInspectedElementID !== id) {
+      currentlyInspectedElementID = id;
+      currentlyInspectedPaths = {};
+    }
+
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement === null) {
+      return {
+        id,
+        type: 'not-found',
+      };
+    }
+
+    if (path != null) {
+      mergeInspectedPaths(path);
+    }
+
+    // Any time an inspected element has an update,
+    // we should update the selected $r value as wel.
+    // Do this before dehyration (cleanForBridge).
+    updateSelectedElement(id);
+
+    inspectedElement.context = cleanForBridge(
+      inspectedElement.context,
+      createIsPathWhitelisted('context'),
+    );
+    inspectedElement.props = cleanForBridge(
+      inspectedElement.props,
+      createIsPathWhitelisted('props'),
+    );
+    inspectedElement.state = cleanForBridge(
+      inspectedElement.state,
+      createIsPathWhitelisted('state'),
+    );
+
+    return {
+      id,
+      type: 'full-data',
+      value: inspectedElement,
+    };
+  }
+
+  function inspectElementRaw(id: number): InspectedElement | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+
+    if (internalInstance == null) {
+      return null;
+    }
+
+    const {displayName} = getData(internalInstance);
+    const type = getElementType(internalInstance);
+
+    let context = null;
+    let owners = null;
+    let props = null;
+    let state = null;
+    let source = null;
+
+    const element = internalInstance._currentElement;
+    if (element !== null) {
+      props = element.props;
+      source = element._source != null ? element._source : null;
+
+      let owner = element._owner;
+      if (owner) {
+        owners = [];
+        while (owner != null) {
+          owners.push({
+            displayName: getData(owner).displayName || 'Unknown',
+            id: getID(owner),
+            type: getElementType(owner),
+          });
+          if (owner._currentElement) {
+            owner = owner._currentElement._owner;
+          }
+        }
+      }
+    }
+
+    const publicInstance = internalInstance._instance;
+    if (publicInstance != null) {
+      context = publicInstance.context || null;
+      state = publicInstance.state || null;
+    }
+
+    return {
+      id,
+
+      // Hooks did not exist in legacy versions
+      canEditHooks: false,
+
+      // Does the current renderer support editable function props?
+      canEditFunctionProps: true,
+
+      // Suspense did not exist in legacy versions
+      canToggleSuspense: false,
+
+      // Can view component source location.
+      canViewSource: type === ElementTypeClass || type === ElementTypeFunction,
+
+      // Only legacy context exists in legacy versions.
+      hasLegacyContext: true,
+
+      displayName: displayName,
+
+      type: type,
+
+      // Inspectable properties.
+      context,
+      hooks: null,
+      props,
+      state,
+
+      // List of owners
+      owners,
+
+      // Location of component in source coude.
+      source,
+    };
+  }
+
+  function logElementToConsole(id: number): void {
+    const result = inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return;
+    }
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    if (supportsGroup) {
+      console.groupCollapsed(
+        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
+        'color: var(--dom-tag-name-color); font-weight: normal;',
+      );
+    }
+    if (result.props !== null) {
+      console.log('Props:', result.props);
+    }
+    if (result.state !== null) {
+      console.log('State:', result.state);
+    }
+    if (result.context !== null) {
+      console.log('Context:', result.context);
+    }
+    const nativeNode = findNativeNodeForInternalID(id);
+    if (nativeNode !== null) {
+      console.log('Node:', nativeNode);
+    }
+    if (window.chrome || /firefox/i.test(navigator.userAgent)) {
+      console.log(
+        'Right-click any value to save it as a global variable for further inspection.',
+      );
+    }
+    if (supportsGroup) {
+      console.groupEnd();
+    }
+  }
+
+  function prepareViewAttributeSource(
+    id: number,
+    path: Array<string | number>,
+  ): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      window.$attribute = getInObject(inspectedElement, path);
+    }
+  }
+
+  function prepareViewElementSource(id: number): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return;
+    }
+
+    const element = internalInstance._currentElement;
+    if (element == null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return;
+    }
+
+    global.$type = element.type;
+  }
+
+  function setInProps(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const element = internalInstance._currentElement;
+      internalInstance._currentElement = {
+        ...element,
+        props: copyWithSet(element.props, path, value),
+      };
+      forceUpdate(internalInstance._instance);
+    }
+  }
+
+  function setInState(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        setIn(publicInstance.state, path, value);
+        forceUpdate(publicInstance);
+      }
+    }
+  }
+
+  function setInContext(id: number, path: Array<string | number>, value: any) {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        setIn(publicInstance.context, path, value);
+        forceUpdate(publicInstance);
+      }
+    }
+  }
+
+  function setIn(obj: Object, path: Array<string | number>, value: any) {
+    const last = path.pop();
+    const parent = path.reduce(
+      // $FlowFixMe
+      (reduced, attr) => (reduced ? reduced[attr] : null),
+      obj,
+    );
+    if (parent) {
+      // $FlowFixMe
+      parent[last] = value;
+    }
+  }
+
+  // v16+ only features
+  const getProfilingData = () => {
+    throw new Error('getProfilingData not supported by this renderer');
+  };
+  const handleCommitFiberRoot = () => {
+    throw new Error('handleCommitFiberRoot not supported by this renderer');
+  };
+  const handleCommitFiberUnmount = () => {
+    throw new Error('handleCommitFiberUnmount not supported by this renderer');
+  };
+  const overrideSuspense = () => {
+    throw new Error('overrideSuspense not supported by this renderer');
+  };
+  const setInHook = () => {
+    throw new Error('setInHook not supported by this renderer');
+  };
+  const startProfiling = () => {
+    // Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.
+  };
+  const stopProfiling = () => {
+    // Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.
+  };
+
+  function getBestMatchForTrackedPath(): PathMatch | null {
+    // Not implemented.
+    return null;
+  }
+
+  function getPathForElement(id: number): Array<PathFrame> | null {
+    // Not implemented.
+    return null;
+  }
+
+  function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
+    // Not implemented.
+  }
+
+  function setTraceUpdatesEnabled(enabled: boolean) {
+    // Not implemented.
+  }
+
+  function setTrackedPath(path: Array<PathFrame> | null) {
+    // Not implemented.
+  }
+
+  function getOwnersList(id: number): Array<Owner> | null {
+    // Not implemented.
+    return null;
+  }
+
+  return {
+    cleanup,
+    copyElementPath,
+    flushInitialOperations,
+    getBestMatchForTrackedPath,
+    getDisplayNameForFiberID,
+    getFiberIDForNative: getInternalIDForNative,
+    getInstanceAndStyle,
+    findNativeNodesForFiberID: (id: number) => {
+      const nativeNode = findNativeNodeForInternalID(id);
+      return nativeNode == null ? null : [nativeNode];
+    },
+    getOwnersList,
+    getPathForElement,
+    getProfilingData,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    inspectElement,
+    logElementToConsole,
+    overrideSuspense,
+    prepareViewAttributeSource,
+    prepareViewElementSource,
+    renderer,
+    setInContext,
+    setInHook,
+    setInProps,
+    setInState,
+    setTraceUpdatesEnabled,
+    setTrackedPath,
+    startProfiling,
+    stopProfiling,
+    storeAsGlobal,
+    updateComponentFilters,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/legacy/utils.js b/packages/react-devtools-shared/src/backend/legacy/utils.js
new file mode 100644
index 0000000000000..2634ab1edff58
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/legacy/utils.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {InternalInstance} from './renderer';
+
+export function decorate(object: Object, attr: string, fn: Function): Function {
+  const old = object[attr];
+  object[attr] = function(instance: InternalInstance) {
+    return fn.call(this, old, arguments);
+  };
+  return old;
+}
+
+export function decorateMany(
+  source: Object,
+  fns: {[attr: string]: Function, ...},
+): Object {
+  const olds = {};
+  for (const name in fns) {
+    olds[name] = decorate(source, name, fns[name]);
+  }
+  return olds;
+}
+
+export function restoreMany(source: Object, olds: Object): void {
+  for (let name in olds) {
+    source[name] = olds[name];
+  }
+}
+
+export function forceUpdate(instance: InternalInstance): void {
+  if (typeof instance.forceUpdate === 'function') {
+    instance.forceUpdate();
+  } else if (
+    instance.updater != null &&
+    typeof instance.updater.enqueueForceUpdate === 'function'
+  ) {
+    instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
new file mode 100644
index 0000000000000..d0012684af833
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -0,0 +1,3212 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {gte} from 'semver';
+import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
+  ComponentFilterLocation,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeRoot,
+  ElementTypeSuspense,
+  ElementTypeSuspenseList,
+} from 'react-devtools-shared/src/types';
+import {
+  getDisplayName,
+  getDefaultComponentFilters,
+  getInObject,
+  getUID,
+  setInObject,
+  utfEncodeString,
+} from 'react-devtools-shared/src/utils';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {cleanForBridge, copyToClipboard, copyWithSet} from './utils';
+import {
+  __DEBUG__,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from '../constants';
+import {inspectHooksOfFiber} from 'react-debug-tools';
+import {
+  patch as patchConsole,
+  registerRenderer as registerRendererWithConsole,
+} from './console';
+
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {
+  ChangeDescription,
+  CommitDataBackend,
+  DevToolsHook,
+  InspectedElement,
+  InspectedElementPayload,
+  InstanceAndStyle,
+  NativeType,
+  Owner,
+  PathFrame,
+  PathMatch,
+  ProfilingDataBackend,
+  ProfilingDataForRootBackend,
+  ReactRenderer,
+  RendererInterface,
+} from './types';
+import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
+
+type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
+type getTypeSymbolType = (type: any) => Symbol | number;
+
+type ReactSymbolsType = {|
+  CONCURRENT_MODE_NUMBER: number,
+  CONCURRENT_MODE_SYMBOL_STRING: string,
+  DEPRECATED_ASYNC_MODE_SYMBOL_STRING: string,
+  CONTEXT_CONSUMER_NUMBER: number,
+  CONTEXT_CONSUMER_SYMBOL_STRING: string,
+  CONTEXT_PROVIDER_NUMBER: number,
+  CONTEXT_PROVIDER_SYMBOL_STRING: string,
+  FORWARD_REF_NUMBER: number,
+  FORWARD_REF_SYMBOL_STRING: string,
+  MEMO_NUMBER: number,
+  MEMO_SYMBOL_STRING: string,
+  PROFILER_NUMBER: number,
+  PROFILER_SYMBOL_STRING: string,
+  STRICT_MODE_NUMBER: number,
+  STRICT_MODE_SYMBOL_STRING: string,
+  SCOPE_NUMBER: number,
+  SCOPE_SYMBOL_STRING: string,
+|};
+
+type ReactPriorityLevelsType = {|
+  ImmediatePriority: number,
+  UserBlockingPriority: number,
+  NormalPriority: number,
+  LowPriority: number,
+  IdlePriority: number,
+  NoPriority: number,
+|};
+
+type ReactTypeOfWorkType = {|
+  ClassComponent: number,
+  ContextConsumer: number,
+  ContextProvider: number,
+  CoroutineComponent: number,
+  CoroutineHandlerPhase: number,
+  DehydratedSuspenseComponent: number,
+  ForwardRef: number,
+  Fragment: number,
+  FunctionComponent: number,
+  HostComponent: number,
+  HostPortal: number,
+  HostRoot: number,
+  HostText: number,
+  IncompleteClassComponent: number,
+  IndeterminateComponent: number,
+  LazyComponent: number,
+  MemoComponent: number,
+  Mode: number,
+  Profiler: number,
+  SimpleMemoComponent: number,
+  SuspenseComponent: number,
+  SuspenseListComponent: number,
+  YieldComponent: number,
+|};
+
+type ReactTypeOfSideEffectType = {|
+  NoEffect: number,
+  PerformedWork: number,
+  Placement: number,
+|};
+
+// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+const getCurrentTime =
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
+export function getInternalReactConstants(
+  version: string,
+): {|
+  getDisplayNameForFiber: getDisplayNameForFiberType,
+  getTypeSymbol: getTypeSymbolType,
+  ReactPriorityLevels: ReactPriorityLevelsType,
+  ReactSymbols: ReactSymbolsType,
+  ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
+  ReactTypeOfWork: ReactTypeOfWorkType,
+|} {
+  const ReactSymbols: ReactSymbolsType = {
+    CONCURRENT_MODE_NUMBER: 0xeacf,
+    CONCURRENT_MODE_SYMBOL_STRING: 'Symbol(react.concurrent_mode)',
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING: 'Symbol(react.async_mode)',
+    CONTEXT_CONSUMER_NUMBER: 0xeace,
+    CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',
+    CONTEXT_PROVIDER_NUMBER: 0xeacd,
+    CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',
+    FORWARD_REF_NUMBER: 0xead0,
+    FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',
+    MEMO_NUMBER: 0xead3,
+    MEMO_SYMBOL_STRING: 'Symbol(react.memo)',
+    PROFILER_NUMBER: 0xead2,
+    PROFILER_SYMBOL_STRING: 'Symbol(react.profiler)',
+    STRICT_MODE_NUMBER: 0xeacc,
+    STRICT_MODE_SYMBOL_STRING: 'Symbol(react.strict_mode)',
+    SCOPE_NUMBER: 0xead7,
+    SCOPE_SYMBOL_STRING: 'Symbol(react.scope)',
+  };
+
+  const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
+    NoEffect: 0b00,
+    PerformedWork: 0b01,
+    Placement: 0b10,
+  };
+
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  //
+  // Technically these priority levels are invalid for versions before 16.9,
+  // but 16.9 is the first version to report priority level to DevTools,
+  // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
+  const ReactPriorityLevels: ReactPriorityLevelsType = {
+    ImmediatePriority: 99,
+    UserBlockingPriority: 98,
+    NormalPriority: 97,
+    LowPriority: 96,
+    IdlePriority: 95,
+    NoPriority: 90,
+  };
+
+  let ReactTypeOfWork: ReactTypeOfWorkType = ((null: any): ReactTypeOfWorkType);
+
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  if (gte(version, '16.6.0-beta.0')) {
+    ReactTypeOfWork = {
+      ClassComponent: 1,
+      ContextConsumer: 9,
+      ContextProvider: 10,
+      CoroutineComponent: -1, // Removed
+      CoroutineHandlerPhase: -1, // Removed
+      DehydratedSuspenseComponent: 18, // Behind a flag
+      ForwardRef: 11,
+      Fragment: 7,
+      FunctionComponent: 0,
+      HostComponent: 5,
+      HostPortal: 4,
+      HostRoot: 3,
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IndeterminateComponent: 2,
+      LazyComponent: 16,
+      MemoComponent: 14,
+      Mode: 8,
+      Profiler: 12,
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      SuspenseListComponent: 19, // Experimental
+      YieldComponent: -1, // Removed
+    };
+  } else if (gte(version, '16.4.3-alpha')) {
+    ReactTypeOfWork = {
+      ClassComponent: 2,
+      ContextConsumer: 11,
+      ContextProvider: 12,
+      CoroutineComponent: -1, // Removed
+      CoroutineHandlerPhase: -1, // Removed
+      DehydratedSuspenseComponent: -1, // Doesn't exist yet
+      ForwardRef: 13,
+      Fragment: 9,
+      FunctionComponent: 0,
+      HostComponent: 7,
+      HostPortal: 6,
+      HostRoot: 5,
+      HostText: 8,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 4,
+      LazyComponent: -1, // Doesn't exist yet
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 10,
+      Profiler: 15,
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      SuspenseListComponent: -1, // Doesn't exist yet
+      YieldComponent: -1, // Removed
+    };
+  } else {
+    ReactTypeOfWork = {
+      ClassComponent: 2,
+      ContextConsumer: 12,
+      ContextProvider: 13,
+      CoroutineComponent: 7,
+      CoroutineHandlerPhase: 8,
+      DehydratedSuspenseComponent: -1, // Doesn't exist yet
+      ForwardRef: 14,
+      Fragment: 10,
+      FunctionComponent: 1,
+      HostComponent: 5,
+      HostPortal: 4,
+      HostRoot: 3,
+      HostText: 6,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 0,
+      LazyComponent: -1, // Doesn't exist yet
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 11,
+      Profiler: 15,
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      SuspenseListComponent: -1, // Doesn't exist yet
+      YieldComponent: 9,
+    };
+  }
+  // **********************************************************
+  // End of copied code.
+  // **********************************************************
+
+  function getTypeSymbol(type: any): Symbol | number {
+    const symbolOrNumber =
+      typeof type === 'object' && type !== null ? type.$$typeof : type;
+
+    // $FlowFixMe Flow doesn't know about typeof "symbol"
+    return typeof symbolOrNumber === 'symbol'
+      ? symbolOrNumber.toString()
+      : symbolOrNumber;
+  }
+
+  const {
+    ClassComponent,
+    IncompleteClassComponent,
+    FunctionComponent,
+    IndeterminateComponent,
+    ForwardRef,
+    HostRoot,
+    HostComponent,
+    HostPortal,
+    HostText,
+    Fragment,
+    MemoComponent,
+    SimpleMemoComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+  } = ReactTypeOfWork;
+
+  const {
+    CONCURRENT_MODE_NUMBER,
+    CONCURRENT_MODE_SYMBOL_STRING,
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
+    CONTEXT_PROVIDER_NUMBER,
+    CONTEXT_PROVIDER_SYMBOL_STRING,
+    CONTEXT_CONSUMER_NUMBER,
+    CONTEXT_CONSUMER_SYMBOL_STRING,
+    STRICT_MODE_NUMBER,
+    STRICT_MODE_SYMBOL_STRING,
+    PROFILER_NUMBER,
+    PROFILER_SYMBOL_STRING,
+    SCOPE_NUMBER,
+    SCOPE_SYMBOL_STRING,
+    FORWARD_REF_NUMBER,
+    FORWARD_REF_SYMBOL_STRING,
+    MEMO_NUMBER,
+    MEMO_SYMBOL_STRING,
+  } = ReactSymbols;
+
+  function resolveFiberType(type: any) {
+    const typeSymbol = getTypeSymbol(type);
+    switch (typeSymbol) {
+      case MEMO_NUMBER:
+      case MEMO_SYMBOL_STRING:
+        // recursively resolving memo type in case of memo(forwardRef(Component))
+        return resolveFiberType(type.type);
+      case FORWARD_REF_NUMBER:
+      case FORWARD_REF_SYMBOL_STRING:
+        return type.render;
+      default:
+        return type;
+    }
+  }
+
+  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
+  function getDisplayNameForFiber(fiber: Fiber): string | null {
+    const {type, tag} = fiber;
+
+    let resolvedType = type;
+    if (typeof type === 'object' && type !== null) {
+      resolvedType = resolveFiberType(type);
+    }
+
+    let resolvedContext: any = null;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+        return getDisplayName(resolvedType);
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return getDisplayName(resolvedType);
+      case ForwardRef:
+        // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
+        return (
+          (type && type.displayName) ||
+          getDisplayName(resolvedType, 'Anonymous')
+        );
+      case HostRoot:
+        return null;
+      case HostComponent:
+        return type;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return null;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return getDisplayName(resolvedType, 'Anonymous');
+      case SuspenseComponent:
+        return 'Suspense';
+      case SuspenseListComponent:
+        return 'SuspenseList';
+      default:
+        const typeSymbol = getTypeSymbol(type);
+
+        switch (typeSymbol) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+            return null;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+            // 16.3.0 exposed the context object as "context"
+            // PR #12501 changed it to "_context" for 16.3.1+
+            // NOTE Keep in sync with inspectElementRaw()
+            resolvedContext = fiber.type._context || fiber.type.context;
+            return `${resolvedContext.displayName || 'Context'}.Provider`;
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+            // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+            // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+            // NOTE Keep in sync with inspectElementRaw()
+            resolvedContext = fiber.type._context || fiber.type;
+
+            // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
+            // If you change the name, figure out a more resilient way to detect it.
+            return `${resolvedContext.displayName || 'Context'}.Consumer`;
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return null;
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            return `Profiler(${fiber.memoizedProps.id})`;
+          case SCOPE_NUMBER:
+          case SCOPE_SYMBOL_STRING:
+            return 'Scope';
+          default:
+            // Unknown element type.
+            // This may mean a new element type that has not yet been added to DevTools.
+            return null;
+        }
+    }
+  }
+
+  return {
+    getDisplayNameForFiber,
+    getTypeSymbol,
+    ReactPriorityLevels,
+    ReactTypeOfWork,
+    ReactSymbols,
+    ReactTypeOfSideEffect,
+  };
+}
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: ReactRenderer,
+  global: Object,
+): RendererInterface {
+  const {
+    getDisplayNameForFiber,
+    getTypeSymbol,
+    ReactPriorityLevels,
+    ReactTypeOfWork,
+    ReactSymbols,
+    ReactTypeOfSideEffect,
+  } = getInternalReactConstants(renderer.version);
+  const {NoEffect, PerformedWork, Placement} = ReactTypeOfSideEffect;
+  const {
+    FunctionComponent,
+    ClassComponent,
+    ContextConsumer,
+    DehydratedSuspenseComponent,
+    Fragment,
+    ForwardRef,
+    HostRoot,
+    HostPortal,
+    HostComponent,
+    HostText,
+    IncompleteClassComponent,
+    IndeterminateComponent,
+    MemoComponent,
+    SimpleMemoComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+  } = ReactTypeOfWork;
+  const {
+    ImmediatePriority,
+    UserBlockingPriority,
+    NormalPriority,
+    LowPriority,
+    IdlePriority,
+    NoPriority,
+  } = ReactPriorityLevels;
+  const {
+    CONCURRENT_MODE_NUMBER,
+    CONCURRENT_MODE_SYMBOL_STRING,
+    DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
+    CONTEXT_CONSUMER_NUMBER,
+    CONTEXT_CONSUMER_SYMBOL_STRING,
+    CONTEXT_PROVIDER_NUMBER,
+    CONTEXT_PROVIDER_SYMBOL_STRING,
+    PROFILER_NUMBER,
+    PROFILER_SYMBOL_STRING,
+    STRICT_MODE_NUMBER,
+    STRICT_MODE_SYMBOL_STRING,
+  } = ReactSymbols;
+
+  const {
+    overrideHookState,
+    overrideProps,
+    setSuspenseHandler,
+    scheduleUpdate,
+  } = renderer;
+  const supportsTogglingSuspense =
+    typeof setSuspenseHandler === 'function' &&
+    typeof scheduleUpdate === 'function';
+
+  // Patching the console enables DevTools to do a few useful things:
+  // * Append component stacks to warnings and error messages
+  // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
+  //
+  // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
+  if (process.env.NODE_ENV !== 'test') {
+    registerRendererWithConsole(renderer);
+
+    // The renderer interface can't read this preference directly,
+    // because it is stored in localStorage within the context of the extension.
+    // It relies on the extension to pass the preference through via the global.
+    if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {
+      patchConsole();
+    }
+  }
+
+  const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
+    if (__DEBUG__) {
+      const displayName = getDisplayNameForFiber(fiber) || 'null';
+      const parentDisplayName =
+        (parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';
+      // NOTE: calling getFiberID or getPrimaryFiber is unsafe here
+      // because it will put them in the map. For now, we'll omit them.
+      // TODO: better debugging story for this.
+      console.log(
+        `[renderer] %c${name} %c${displayName} %c${
+          parentFiber ? parentDisplayName : ''
+        }`,
+        'color: red; font-weight: bold;',
+        'color: blue;',
+        'color: purple;',
+      );
+    }
+  };
+
+  // Configurable Components tree filters.
+  const hideElementsWithDisplayNames: Set<RegExp> = new Set();
+  const hideElementsWithPaths: Set<RegExp> = new Set();
+  const hideElementsWithTypes: Set<ElementType> = new Set();
+
+  // Highlight updates
+  let traceUpdatesEnabled: boolean = false;
+  let traceUpdatesForNodes: Set<NativeType> = new Set();
+
+  function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
+    hideElementsWithTypes.clear();
+    hideElementsWithDisplayNames.clear();
+    hideElementsWithPaths.clear();
+
+    componentFilters.forEach(componentFilter => {
+      if (!componentFilter.isEnabled) {
+        return;
+      }
+
+      switch (componentFilter.type) {
+        case ComponentFilterDisplayName:
+          if (componentFilter.isValid && componentFilter.value !== '') {
+            hideElementsWithDisplayNames.add(
+              new RegExp(componentFilter.value, 'i'),
+            );
+          }
+          break;
+        case ComponentFilterElementType:
+          hideElementsWithTypes.add(componentFilter.value);
+          break;
+        case ComponentFilterLocation:
+          if (componentFilter.isValid && componentFilter.value !== '') {
+            hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));
+          }
+          break;
+        case ComponentFilterHOC:
+          hideElementsWithDisplayNames.add(new RegExp('\\('));
+          break;
+        default:
+          console.warn(
+            `Invalid component filter type "${componentFilter.type}"`,
+          );
+          break;
+      }
+    });
+  }
+
+  // The renderer interface can't read saved component filters directly,
+  // because they are stored in localStorage within the context of the extension.
+  // Instead it relies on the extension to pass filters through.
+  if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
+    applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+  } else {
+    // Unfortunately this feature is not expected to work for React Native for now.
+    // It would be annoying for us to spam YellowBox warnings with unactionable stuff,
+    // so for now just skip this message...
+    //console.warn('⚛️ DevTools: Could not locate saved component filters');
+
+    // Fallback to assuming the default filters in this case.
+    applyComponentFilters(getDefaultComponentFilters());
+  }
+
+  // If necessary, we can revisit optimizing this operation.
+  // For example, we could add a new recursive unmount tree operation.
+  // The unmount operations are already significantly smaller than mount opreations though.
+  // This is something to keep in mind for later.
+  function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
+    if (isProfiling) {
+      // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+      // If necessary, we could support this- but it doesn't seem like a necessary use case.
+      throw Error('Cannot modify filter preferences while profiling');
+    }
+
+    // Recursively unmount all roots.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      unmountFiberChildrenRecursively(root.current);
+      recordUnmount(root.current, false);
+      currentRootID = -1;
+    });
+
+    applyComponentFilters(componentFilters);
+
+    // Reset psuedo counters so that new path selections will be persisted.
+    rootDisplayNameCounter.clear();
+
+    // Recursively re-mount all roots with new filter criteria applied.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      setRootPseudoKey(currentRootID, root.current);
+      mountFiberRecursively(root.current, null, false, false);
+      flushPendingEvents(root);
+      currentRootID = -1;
+    });
+  }
+
+  // NOTICE Keep in sync with get*ForFiber methods
+  function shouldFilterFiber(fiber: Fiber): boolean {
+    const {_debugSource, tag, type} = fiber;
+
+    switch (tag) {
+      case DehydratedSuspenseComponent:
+        // TODO: ideally we would show dehydrated Suspense immediately.
+        // However, it has some special behavior (like disconnecting
+        // an alternate and turning into real Suspense) which breaks DevTools.
+        // For now, ignore it, and only show it once it gets hydrated.
+        // https://github.com/bvaughn/react-devtools-experimental/issues/197
+        return true;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return true;
+      case HostRoot:
+        // It is never valid to filter the root element.
+        return false;
+      default:
+        const typeSymbol = getTypeSymbol(type);
+
+        switch (typeSymbol) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return true;
+          default:
+            break;
+        }
+    }
+
+    const elementType = getElementTypeForFiber(fiber);
+    if (hideElementsWithTypes.has(elementType)) {
+      return true;
+    }
+
+    if (hideElementsWithDisplayNames.size > 0) {
+      const displayName = getDisplayNameForFiber(fiber);
+      if (displayName != null) {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (let displayNameRegExp of hideElementsWithDisplayNames) {
+          if (displayNameRegExp.test(displayName)) {
+            return true;
+          }
+        }
+      }
+    }
+
+    if (_debugSource != null && hideElementsWithPaths.size > 0) {
+      const {fileName} = _debugSource;
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (let pathRegExp of hideElementsWithPaths) {
+        if (pathRegExp.test(fileName)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+  // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
+  function getElementTypeForFiber(fiber: Fiber): ElementType {
+    const {type, tag} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+        return ElementTypeClass;
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return ElementTypeFunction;
+      case ForwardRef:
+        return ElementTypeForwardRef;
+      case HostRoot:
+        return ElementTypeRoot;
+      case HostComponent:
+        return ElementTypeHostComponent;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return ElementTypeOtherOrUnknown;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return ElementTypeMemo;
+      case SuspenseComponent:
+        return ElementTypeSuspense;
+      case SuspenseListComponent:
+        return ElementTypeSuspenseList;
+      default:
+        const typeSymbol = getTypeSymbol(type);
+
+        switch (typeSymbol) {
+          case CONCURRENT_MODE_NUMBER:
+          case CONCURRENT_MODE_SYMBOL_STRING:
+          case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+            return ElementTypeOtherOrUnknown;
+          case CONTEXT_PROVIDER_NUMBER:
+          case CONTEXT_PROVIDER_SYMBOL_STRING:
+            return ElementTypeContext;
+          case CONTEXT_CONSUMER_NUMBER:
+          case CONTEXT_CONSUMER_SYMBOL_STRING:
+            return ElementTypeContext;
+          case STRICT_MODE_NUMBER:
+          case STRICT_MODE_SYMBOL_STRING:
+            return ElementTypeOtherOrUnknown;
+          case PROFILER_NUMBER:
+          case PROFILER_SYMBOL_STRING:
+            return ElementTypeProfiler;
+          default:
+            return ElementTypeOtherOrUnknown;
+        }
+    }
+  }
+
+  // This is a slightly annoying indirection.
+  // It is currently necessary because DevTools wants to use unique objects as keys for instances.
+  // However fibers have two versions.
+  // We use this set to remember first encountered fiber for each conceptual instance.
+  function getPrimaryFiber(fiber: Fiber): Fiber {
+    if (primaryFibers.has(fiber)) {
+      return fiber;
+    }
+    const {alternate} = fiber;
+    if (alternate != null && primaryFibers.has(alternate)) {
+      return alternate;
+    }
+    primaryFibers.add(fiber);
+    return fiber;
+  }
+
+  const fiberToIDMap: Map<Fiber, number> = new Map();
+  const idToFiberMap: Map<number, Fiber> = new Map();
+  const primaryFibers: Set<Fiber> = new Set();
+
+  // When profiling is supported, we store the latest tree base durations for each Fiber.
+  // This is so that we can quickly capture a snapshot of those values if profiling starts.
+  // If we didn't store these values, we'd have to crawl the tree when profiling started,
+  // and use a slow path to find each of the current Fibers.
+  const idToTreeBaseDurationMap: Map<number, number> = new Map();
+
+  // When profiling is supported, we store the latest tree base durations for each Fiber.
+  // This map enables us to filter these times by root when sending them to the frontend.
+  const idToRootMap: Map<number, number> = new Map();
+
+  // When a mount or update is in progress, this value tracks the root that is being operated on.
+  let currentRootID: number = -1;
+
+  function getFiberID(primaryFiber: Fiber): number {
+    if (!fiberToIDMap.has(primaryFiber)) {
+      const id = getUID();
+      fiberToIDMap.set(primaryFiber, id);
+      idToFiberMap.set(id, primaryFiber);
+    }
+    return ((fiberToIDMap.get(primaryFiber): any): number);
+  }
+
+  function getChangeDescription(
+    prevFiber: Fiber | null,
+    nextFiber: Fiber,
+  ): ChangeDescription | null {
+    switch (getElementTypeForFiber(nextFiber)) {
+      case ElementTypeClass:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
+      case ElementTypeForwardRef:
+        if (prevFiber === null) {
+          return {
+            context: null,
+            didHooksChange: false,
+            isFirstMount: true,
+            props: null,
+            state: null,
+          };
+        } else {
+          return {
+            context: getContextChangedKeys(nextFiber),
+            didHooksChange: didHooksChange(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState,
+            ),
+            isFirstMount: false,
+            props: getChangedKeys(
+              prevFiber.memoizedProps,
+              nextFiber.memoizedProps,
+            ),
+            state: getChangedKeys(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState,
+            ),
+          };
+        }
+      default:
+        return null;
+    }
+  }
+
+  function updateContextsForFiber(fiber: Fiber) {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        if (idToContextsMap !== null) {
+          const id = getFiberID(getPrimaryFiber(fiber));
+          const contexts = getContextsForFiber(fiber);
+          if (contexts !== null) {
+            idToContextsMap.set(id, contexts);
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  // Differentiates between a null context value and no context.
+  const NO_CONTEXT = {};
+
+  function getContextsForFiber(fiber: Fiber): [Object, any] | null {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        const instance = fiber.stateNode;
+        let legacyContext = NO_CONTEXT;
+        let modernContext = NO_CONTEXT;
+        if (instance != null) {
+          if (
+            instance.constructor &&
+            instance.constructor.contextType != null
+          ) {
+            modernContext = instance.context;
+          } else {
+            legacyContext = instance.context;
+            if (legacyContext && Object.keys(legacyContext).length === 0) {
+              legacyContext = NO_CONTEXT;
+            }
+          }
+        }
+        return [legacyContext, modernContext];
+      default:
+        return null;
+    }
+  }
+
+  // Record all contexts at the time profiling is started.
+  // Fibers only store the current context value,
+  // so we need to track them separatenly in order to determine changed keys.
+  function crawlToInitializeContextsMap(fiber: Fiber) {
+    updateContextsForFiber(fiber);
+    let current = fiber.child;
+    while (current !== null) {
+      crawlToInitializeContextsMap(current);
+      current = current.sibling;
+    }
+  }
+
+  function getContextChangedKeys(fiber: Fiber): null | boolean | Array<string> {
+    switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeClass:
+        if (idToContextsMap !== null) {
+          const id = getFiberID(getPrimaryFiber(fiber));
+          const prevContexts = idToContextsMap.has(id)
+            ? idToContextsMap.get(id)
+            : null;
+          const nextContexts = getContextsForFiber(fiber);
+
+          if (prevContexts == null || nextContexts == null) {
+            return null;
+          }
+
+          const [prevLegacyContext, prevModernContext] = prevContexts;
+          const [nextLegacyContext, nextModernContext] = nextContexts;
+
+          if (nextLegacyContext !== NO_CONTEXT) {
+            return getChangedKeys(prevLegacyContext, nextLegacyContext);
+          } else if (nextModernContext !== NO_CONTEXT) {
+            return prevModernContext !== nextModernContext;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+    return null;
+  }
+
+  function didHooksChange(prev: any, next: any): boolean {
+    if (next == null) {
+      return false;
+    }
+
+    // We can't report anything meaningful for hooks changes.
+    if (
+      next.hasOwnProperty('baseState') &&
+      next.hasOwnProperty('memoizedState') &&
+      next.hasOwnProperty('next') &&
+      next.hasOwnProperty('queue')
+    ) {
+      while (next !== null) {
+        if (next.memoizedState !== prev.memoizedState) {
+          return true;
+        } else {
+          next = next.next;
+          prev = prev.next;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  function getChangedKeys(prev: any, next: any): null | Array<string> {
+    if (prev == null || next == null) {
+      return null;
+    }
+
+    // We can't report anything meaningful for hooks changes.
+    if (
+      next.hasOwnProperty('baseState') &&
+      next.hasOwnProperty('memoizedState') &&
+      next.hasOwnProperty('next') &&
+      next.hasOwnProperty('queue')
+    ) {
+      return null;
+    }
+
+    const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+    const changedKeys = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (let key of keys) {
+      if (prev[key] !== next[key]) {
+        changedKeys.push(key);
+      }
+    }
+
+    return changedKeys;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {
+    switch (nextFiber.tag) {
+      case ClassComponent:
+      case FunctionComponent:
+      case ContextConsumer:
+      case MemoComponent:
+      case SimpleMemoComponent:
+        // For types that execute user code, we check PerformedWork effect.
+        // We don't reflect bailouts (either referential or sCU) in DevTools.
+        // eslint-disable-next-line no-bitwise
+        return (nextFiber.effectTag & PerformedWork) === PerformedWork;
+      // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
+      // so it won't get highlighted with React 16.3.0 to 16.3.2.
+      default:
+        // For host components and other types, we compare inputs
+        // to determine whether something is an update.
+        return (
+          prevFiber.memoizedProps !== nextFiber.memoizedProps ||
+          prevFiber.memoizedState !== nextFiber.memoizedState ||
+          prevFiber.ref !== nextFiber.ref
+        );
+    }
+  }
+
+  let pendingOperations: Array<number> = [];
+  let pendingRealUnmountedIDs: Array<number> = [];
+  let pendingSimulatedUnmountedIDs: Array<number> = [];
+  let pendingOperationsQueue: Array<Array<number>> | null = [];
+  let pendingStringTable: Map<string, number> = new Map();
+  let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: number | null = null;
+
+  function pushOperation(op: number): void {
+    if (__DEV__) {
+      if (!Number.isInteger(op)) {
+        console.error(
+          'pushOperation() was called but the value is not an integer.',
+          op,
+        );
+      }
+    }
+    pendingOperations.push(op);
+  }
+
+  function flushPendingEvents(root: Object): void {
+    if (
+      pendingOperations.length === 0 &&
+      pendingRealUnmountedIDs.length === 0 &&
+      pendingSimulatedUnmountedIDs.length === 0 &&
+      pendingUnmountedRootID === null
+    ) {
+      // If we aren't profiling, we can just bail out here.
+      // No use sending an empty update over the bridge.
+      //
+      // The Profiler stores metadata for each commit and reconstructs the app tree per commit using:
+      // (1) an initial tree snapshot and
+      // (2) the operations array for each commit
+      // Because of this, it's important that the operations and metadata arrays align,
+      // So it's important not to ommit even empty operations while profiing is active.
+      if (!isProfiling) {
+        return;
+      }
+    }
+
+    const numUnmountIDs =
+      pendingRealUnmountedIDs.length +
+      pendingSimulatedUnmountedIDs.length +
+      (pendingUnmountedRootID === null ? 0 : 1);
+
+    const operations = new Array(
+      // Identify which renderer this update is coming from.
+      2 + // [rendererID, rootFiberID]
+      // How big is the string table?
+      1 + // [stringTableLength]
+        // Then goes the actual string table.
+        pendingStringTableLength +
+        // All unmounts are batched in a single message.
+        // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
+        (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
+        // Regular operations
+        pendingOperations.length,
+    );
+
+    // Identify which renderer this update is coming from.
+    // This enables roots to be mapped to renderers,
+    // Which in turn enables fiber props, states, and hooks to be inspected.
+    let i = 0;
+    operations[i++] = rendererID;
+    operations[i++] = currentRootID; // Use this ID in case the root was unmounted!
+
+    // Now fill in the string table.
+    // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
+    operations[i++] = pendingStringTableLength;
+    pendingStringTable.forEach((value, key) => {
+      operations[i++] = key.length;
+      const encodedKey = utfEncodeString(key);
+      for (let j = 0; j < encodedKey.length; j++) {
+        operations[i + j] = encodedKey[j];
+      }
+      i += key.length;
+    });
+
+    if (numUnmountIDs > 0) {
+      // All unmounts except roots are batched in a single message.
+      operations[i++] = TREE_OPERATION_REMOVE;
+      // The first number is how many unmounted IDs we're gonna send.
+      operations[i++] = numUnmountIDs;
+      // Fill in the real unmounts in the reverse order.
+      // They were inserted parents-first by React, but we want children-first.
+      // So we traverse our array backwards.
+      for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {
+        operations[i++] = pendingRealUnmountedIDs[j];
+      }
+      // Fill in the simulated unmounts (hidden Suspense subtrees) in their order.
+      // (We want children to go before parents.)
+      // They go *after* the real unmounts because we know for sure they won't be
+      // children of already pushed "real" IDs. If they were, we wouldn't be able
+      // to discover them during the traversal, as they would have been deleted.
+      for (let j = 0; j < pendingSimulatedUnmountedIDs.length; j++) {
+        operations[i + j] = pendingSimulatedUnmountedIDs[j];
+      }
+      i += pendingSimulatedUnmountedIDs.length;
+      // The root ID should always be unmounted last.
+      if (pendingUnmountedRootID !== null) {
+        operations[i] = pendingUnmountedRootID;
+        i++;
+      }
+    }
+    // Fill in the rest of the operations.
+    for (let j = 0; j < pendingOperations.length; j++) {
+      operations[i + j] = pendingOperations[j];
+    }
+    i += pendingOperations.length;
+
+    // Let the frontend know about tree operations.
+    // The first value in this array will identify which root it corresponds to,
+    // so we do no longer need to dispatch a separate root-committed event.
+    if (pendingOperationsQueue !== null) {
+      // Until the frontend has been connected, store the tree operations.
+      // This will let us avoid walking the tree later when the frontend connects,
+      // and it enables the Profiler's reload-and-profile functionality to work as well.
+      pendingOperationsQueue.push(operations);
+    } else {
+      // If we've already connected to the frontend, just pass the operations through.
+      hook.emit('operations', operations);
+    }
+
+    pendingOperations.length = 0;
+    pendingRealUnmountedIDs.length = 0;
+    pendingSimulatedUnmountedIDs.length = 0;
+    pendingUnmountedRootID = null;
+    pendingStringTable.clear();
+    pendingStringTableLength = 0;
+  }
+
+  function getStringID(str: string | null): number {
+    if (str === null) {
+      return 0;
+    }
+    const existingID = pendingStringTable.get(str);
+    if (existingID !== undefined) {
+      return existingID;
+    }
+    const stringID = pendingStringTable.size + 1;
+    pendingStringTable.set(str, stringID);
+    // The string table total length needs to account
+    // both for the string length, and for the array item
+    // that contains the length itself. Hence + 1.
+    pendingStringTableLength += str.length + 1;
+    return stringID;
+  }
+
+  function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
+    const isRoot = fiber.tag === HostRoot;
+    const id = getFiberID(getPrimaryFiber(fiber));
+
+    const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+
+    if (isRoot) {
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(ElementTypeRoot);
+      pushOperation(isProfilingSupported ? 1 : 0);
+      pushOperation(hasOwnerMetadata ? 1 : 0);
+
+      if (isProfiling) {
+        if (displayNamesByRootID !== null) {
+          displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));
+        }
+      }
+    } else {
+      const {key} = fiber;
+      const displayName = getDisplayNameForFiber(fiber);
+      const elementType = getElementTypeForFiber(fiber);
+      const {_debugOwner} = fiber;
+
+      const ownerID =
+        _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
+      const parentID = parentFiber
+        ? getFiberID(getPrimaryFiber(parentFiber))
+        : 0;
+
+      let displayNameStringID = getStringID(displayName);
+
+      // This check is a guard to handle a React element that has been modified
+      // in such a way as to bypass the default stringification of the "key" property.
+      let keyString = key === null ? null : '' + key;
+      let keyStringID = getStringID(keyString);
+
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(elementType);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
+    }
+
+    if (isProfilingSupported) {
+      idToRootMap.set(id, currentRootID);
+
+      recordProfilingDurations(fiber);
+    }
+  }
+
+  function recordUnmount(fiber: Fiber, isSimulated: boolean) {
+    if (trackedPathMatchFiber !== null) {
+      // We're in the process of trying to restore previous selection.
+      // If this fiber matched but is being unmounted, there's no use trying.
+      // Reset the state so we don't keep holding onto it.
+      if (
+        fiber === trackedPathMatchFiber ||
+        fiber === trackedPathMatchFiber.alternate
+      ) {
+        setTrackedPath(null);
+      }
+    }
+
+    const isRoot = fiber.tag === HostRoot;
+    const primaryFiber = getPrimaryFiber(fiber);
+    if (!fiberToIDMap.has(primaryFiber)) {
+      // If we've never seen this Fiber, it might be because
+      // it is inside a non-current Suspense fragment tree,
+      // and so the store is not even aware of it.
+      // In that case we can just ignore it, or otherwise
+      // there will be errors later on.
+      primaryFibers.delete(primaryFiber);
+      // TODO: this is fragile and can obscure actual bugs.
+      return;
+    }
+    const id = getFiberID(primaryFiber);
+    if (isRoot) {
+      // Roots must be removed only after all children (pending and simultated) have been removed.
+      // So we track it separately.
+      pendingUnmountedRootID = id;
+    } else if (!shouldFilterFiber(fiber)) {
+      // To maintain child-first ordering,
+      // we'll push it into one of these queues,
+      // and later arrange them in the correct order.
+      if (isSimulated) {
+        pendingSimulatedUnmountedIDs.push(id);
+      } else {
+        pendingRealUnmountedIDs.push(id);
+      }
+    }
+    fiberToIDMap.delete(primaryFiber);
+    idToFiberMap.delete(id);
+    primaryFibers.delete(primaryFiber);
+
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+    if (isProfilingSupported) {
+      idToRootMap.delete(id);
+      idToTreeBaseDurationMap.delete(id);
+    }
+  }
+
+  function mountFiberRecursively(
+    fiber: Fiber,
+    parentFiber: Fiber | null,
+    traverseSiblings: boolean,
+    traceNearestHostComponentUpdate: boolean,
+  ) {
+    if (__DEBUG__) {
+      debug('mountFiberRecursively()', fiber, parentFiber);
+    }
+
+    // If we have the tree selection from previous reload, try to match this Fiber.
+    // Also remember whether to do the same for siblings.
+    const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
+      fiber,
+    );
+
+    const shouldIncludeInTree = !shouldFilterFiber(fiber);
+    if (shouldIncludeInTree) {
+      recordMount(fiber, parentFiber);
+    }
+
+    if (traceUpdatesEnabled) {
+      if (traceNearestHostComponentUpdate) {
+        const elementType = getElementTypeForFiber(fiber);
+        // If an ancestor updated, we should mark the nearest host nodes for highlighting.
+        if (elementType === ElementTypeHostComponent) {
+          traceUpdatesForNodes.add(fiber.stateNode);
+          traceNearestHostComponentUpdate = false;
+        }
+      }
+
+      // We intentionally do not re-enable the traceNearestHostComponentUpdate flag in this branch,
+      // because we don't want to highlight every host node inside of a newly mounted subtree.
+    }
+
+    const isTimedOutSuspense =
+      fiber.tag === ReactTypeOfWork.SuspenseComponent &&
+      fiber.memoizedState !== null;
+
+    if (isTimedOutSuspense) {
+      // Special case: if Suspense mounts in a timed-out state,
+      // get the fallback child from the inner fragment and mount
+      // it as if it was our own child. Updates handle this too.
+      const primaryChildFragment = fiber.child;
+      const fallbackChildFragment = primaryChildFragment
+        ? primaryChildFragment.sibling
+        : null;
+      const fallbackChild = fallbackChildFragment
+        ? fallbackChildFragment.child
+        : null;
+      if (fallbackChild !== null) {
+        mountFiberRecursively(
+          fallbackChild,
+          shouldIncludeInTree ? fiber : parentFiber,
+          true,
+          traceNearestHostComponentUpdate,
+        );
+      }
+    } else {
+      if (fiber.child !== null) {
+        mountFiberRecursively(
+          fiber.child,
+          shouldIncludeInTree ? fiber : parentFiber,
+          true,
+          traceNearestHostComponentUpdate,
+        );
+      }
+    }
+
+    // We're exiting this Fiber now, and entering its siblings.
+    // If we have selection to restore, we might need to re-activate tracking.
+    updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);
+
+    if (traverseSiblings && fiber.sibling !== null) {
+      mountFiberRecursively(
+        fiber.sibling,
+        parentFiber,
+        true,
+        traceNearestHostComponentUpdate,
+      );
+    }
+  }
+
+  // We use this to simulate unmounting for Suspense trees
+  // when we switch from primary to fallback.
+  function unmountFiberChildrenRecursively(fiber: Fiber) {
+    if (__DEBUG__) {
+      debug('unmountFiberChildrenRecursively()', fiber);
+    }
+
+    // We might meet a nested Suspense on our way.
+    const isTimedOutSuspense =
+      fiber.tag === ReactTypeOfWork.SuspenseComponent &&
+      fiber.memoizedState !== null;
+
+    let child = fiber.child;
+    if (isTimedOutSuspense) {
+      // If it's showing fallback tree, let's traverse it instead.
+      const primaryChildFragment = fiber.child;
+      const fallbackChildFragment = primaryChildFragment
+        ? primaryChildFragment.sibling
+        : null;
+      // Skip over to the real Fiber child.
+      child = fallbackChildFragment ? fallbackChildFragment.child : null;
+    }
+
+    while (child !== null) {
+      // Record simulated unmounts children-first.
+      // We skip nodes without return because those are real unmounts.
+      if (child.return !== null) {
+        unmountFiberChildrenRecursively(child);
+        recordUnmount(child, true);
+      }
+      child = child.sibling;
+    }
+  }
+
+  function recordProfilingDurations(fiber: Fiber) {
+    const id = getFiberID(getPrimaryFiber(fiber));
+    const {actualDuration, treeBaseDuration} = fiber;
+
+    idToTreeBaseDurationMap.set(id, treeBaseDuration || 0);
+
+    if (isProfiling) {
+      const {alternate} = fiber;
+
+      // It's important to update treeBaseDuration even if the current Fiber did not render,
+      // becuase it's possible that one of its descednants did.
+      if (
+        alternate == null ||
+        treeBaseDuration !== alternate.treeBaseDuration
+      ) {
+        // Tree base duration updates are included in the operations typed array.
+        // So we have to convert them from milliseconds to microseconds so we can send them as ints.
+        const convertedTreeBaseDuration = Math.floor(
+          (treeBaseDuration || 0) * 1000,
+        );
+        pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
+        pushOperation(id);
+        pushOperation(convertedTreeBaseDuration);
+      }
+
+      if (alternate == null || didFiberRender(alternate, fiber)) {
+        if (actualDuration != null) {
+          // The actual duration reported by React includes time spent working on children.
+          // This is useful information, but it's also useful to be able to exclude child durations.
+          // The frontend can't compute this, since the immediate children may have been filtered out.
+          // So we need to do this on the backend.
+          // Note that this calculated self duration is not the same thing as the base duration.
+          // The two are calculated differently (tree duration does not accumulate).
+          let selfDuration = actualDuration;
+          let child = fiber.child;
+          while (child !== null) {
+            selfDuration -= child.actualDuration || 0;
+            child = child.sibling;
+          }
+
+          // If profiling is active, store durations for elements that were rendered during the commit.
+          // Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.
+          // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
+          // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
+          const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
+          metadata.durations.push(id, actualDuration, selfDuration);
+          metadata.maxActualDuration = Math.max(
+            metadata.maxActualDuration,
+            actualDuration,
+          );
+
+          if (recordChangeDescriptions) {
+            const changeDescription = getChangeDescription(alternate, fiber);
+            if (changeDescription !== null) {
+              if (metadata.changeDescriptions !== null) {
+                metadata.changeDescriptions.set(id, changeDescription);
+              }
+            }
+
+            updateContextsForFiber(fiber);
+          }
+        }
+      }
+    }
+  }
+
+  function recordResetChildren(fiber: Fiber, childSet: Fiber) {
+    // The frontend only really cares about the displayName, key, and children.
+    // The first two don't really change, so we are only concerned with the order of children here.
+    // This is trickier than a simple comparison though, since certain types of fibers are filtered.
+    const nextChildren: Array<number> = [];
+
+    // This is a naive implimentation that shallowly recurses children.
+    // We might want to revisit this if it proves to be too inefficient.
+    let child = childSet;
+    while (child !== null) {
+      findReorderedChildrenRecursively(child, nextChildren);
+      child = child.sibling;
+    }
+
+    const numChildren = nextChildren.length;
+    if (numChildren < 2) {
+      // No need to reorder.
+      return;
+    }
+    pushOperation(TREE_OPERATION_REORDER_CHILDREN);
+    pushOperation(getFiberID(getPrimaryFiber(fiber)));
+    pushOperation(numChildren);
+    for (let i = 0; i < nextChildren.length; i++) {
+      pushOperation(nextChildren[i]);
+    }
+  }
+
+  function findReorderedChildrenRecursively(
+    fiber: Fiber,
+    nextChildren: Array<number>,
+  ) {
+    if (!shouldFilterFiber(fiber)) {
+      nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
+    } else {
+      let child = fiber.child;
+      while (child !== null) {
+        findReorderedChildrenRecursively(child, nextChildren);
+        child = child.sibling;
+      }
+    }
+  }
+
+  // Returns whether closest unfiltered fiber parent needs to reset its child list.
+  function updateFiberRecursively(
+    nextFiber: Fiber,
+    prevFiber: Fiber,
+    parentFiber: Fiber | null,
+    traceNearestHostComponentUpdate: boolean,
+  ): boolean {
+    if (__DEBUG__) {
+      debug('updateFiberRecursively()', nextFiber, parentFiber);
+    }
+
+    if (traceUpdatesEnabled) {
+      const elementType = getElementTypeForFiber(nextFiber);
+      if (traceNearestHostComponentUpdate) {
+        // If an ancestor updated, we should mark the nearest host nodes for highlighting.
+        if (elementType === ElementTypeHostComponent) {
+          traceUpdatesForNodes.add(nextFiber.stateNode);
+          traceNearestHostComponentUpdate = false;
+        }
+      } else {
+        if (
+          elementType === ElementTypeFunction ||
+          elementType === ElementTypeClass ||
+          elementType === ElementTypeContext
+        ) {
+          // Otherwise if this is a traced ancestor, flag for the nearest host descendant(s).
+          traceNearestHostComponentUpdate = didFiberRender(
+            prevFiber,
+            nextFiber,
+          );
+        }
+      }
+    }
+
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id ===
+        getFiberID(getPrimaryFiber(nextFiber)) &&
+      didFiberRender(prevFiber, nextFiber)
+    ) {
+      // If this Fiber has updated, clear cached inspected data.
+      // If it is inspected again, it may need to be re-run to obtain updated hooks values.
+      hasElementUpdatedSinceLastInspected = true;
+    }
+
+    const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
+    const isSuspense = nextFiber.tag === SuspenseComponent;
+    let shouldResetChildren = false;
+    // The behavior of timed-out Suspense trees is unique.
+    // Rather than unmount the timed out content (and possibly lose important state),
+    // React re-parents this content within a hidden Fragment while the fallback is showing.
+    // This behavior doesn't need to be observable in the DevTools though.
+    // It might even result in a bad user experience for e.g. node selection in the Elements panel.
+    // The easiest fix is to strip out the intermediate Fragment fibers,
+    // so the Elements panel and Profiler don't need to special case them.
+    // Suspense components only have a non-null memoizedState if they're timed-out.
+    const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
+    const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
+    // The logic below is inspired by the codepaths in updateSuspenseComponent()
+    // inside ReactFiberBeginWork in the React source code.
+    if (prevDidTimeout && nextDidTimeOut) {
+      // Fallback -> Fallback:
+      // 1. Reconcile fallback set.
+      const nextFiberChild = nextFiber.child;
+      const nextFallbackChildSet = nextFiberChild
+        ? nextFiberChild.sibling
+        : null;
+      // Note: We can't use nextFiber.child.sibling.alternate
+      // because the set is special and alternate may not exist.
+      const prevFiberChild = prevFiber.child;
+      const prevFallbackChildSet = prevFiberChild
+        ? prevFiberChild.sibling
+        : null;
+      if (
+        nextFallbackChildSet != null &&
+        prevFallbackChildSet != null &&
+        updateFiberRecursively(
+          nextFallbackChildSet,
+          prevFallbackChildSet,
+          nextFiber,
+          traceNearestHostComponentUpdate,
+        )
+      ) {
+        shouldResetChildren = true;
+      }
+    } else if (prevDidTimeout && !nextDidTimeOut) {
+      // Fallback -> Primary:
+      // 1. Unmount fallback set
+      // Note: don't emulate fallback unmount because React actually did it.
+      // 2. Mount primary set
+      const nextPrimaryChildSet = nextFiber.child;
+      if (nextPrimaryChildSet !== null) {
+        mountFiberRecursively(
+          nextPrimaryChildSet,
+          nextFiber,
+          true,
+          traceNearestHostComponentUpdate,
+        );
+      }
+      shouldResetChildren = true;
+    } else if (!prevDidTimeout && nextDidTimeOut) {
+      // Primary -> Fallback:
+      // 1. Hide primary set
+      // This is not a real unmount, so it won't get reported by React.
+      // We need to manually walk the previous tree and record unmounts.
+      unmountFiberChildrenRecursively(prevFiber);
+      // 2. Mount fallback set
+      const nextFiberChild = nextFiber.child;
+      const nextFallbackChildSet = nextFiberChild
+        ? nextFiberChild.sibling
+        : null;
+      if (nextFallbackChildSet != null) {
+        mountFiberRecursively(
+          nextFallbackChildSet,
+          nextFiber,
+          true,
+          traceNearestHostComponentUpdate,
+        );
+        shouldResetChildren = true;
+      }
+    } else {
+      // Common case: Primary -> Primary.
+      // This is the same codepath as for non-Suspense fibers.
+      if (nextFiber.child !== prevFiber.child) {
+        // If the first child is different, we need to traverse them.
+        // Each next child will be either a new child (mount) or an alternate (update).
+        let nextChild = nextFiber.child;
+        let prevChildAtSameIndex = prevFiber.child;
+        while (nextChild) {
+          // We already know children will be referentially different because
+          // they are either new mounts or alternates of previous children.
+          // Schedule updates and mounts depending on whether alternates exist.
+          // We don't track deletions here because they are reported separately.
+          if (nextChild.alternate) {
+            const prevChild = nextChild.alternate;
+            if (
+              updateFiberRecursively(
+                nextChild,
+                prevChild,
+                shouldIncludeInTree ? nextFiber : parentFiber,
+                traceNearestHostComponentUpdate,
+              )
+            ) {
+              // If a nested tree child order changed but it can't handle its own
+              // child order invalidation (e.g. because it's filtered out like host nodes),
+              // propagate the need to reset child order upwards to this Fiber.
+              shouldResetChildren = true;
+            }
+            // However we also keep track if the order of the children matches
+            // the previous order. They are always different referentially, but
+            // if the instances line up conceptually we'll want to know that.
+            if (prevChild !== prevChildAtSameIndex) {
+              shouldResetChildren = true;
+            }
+          } else {
+            mountFiberRecursively(
+              nextChild,
+              shouldIncludeInTree ? nextFiber : parentFiber,
+              false,
+              traceNearestHostComponentUpdate,
+            );
+            shouldResetChildren = true;
+          }
+          // Try the next child.
+          nextChild = nextChild.sibling;
+          // Advance the pointer in the previous list so that we can
+          // keep comparing if they line up.
+          if (!shouldResetChildren && prevChildAtSameIndex !== null) {
+            prevChildAtSameIndex = prevChildAtSameIndex.sibling;
+          }
+        }
+        // If we have no more children, but used to, they don't line up.
+        if (prevChildAtSameIndex !== null) {
+          shouldResetChildren = true;
+        }
+      } else {
+        if (traceUpdatesEnabled) {
+          // If we're tracing updates and we've bailed out before reaching a host node,
+          // we should fall back to recursively marking the nearest host descendates for highlight.
+          if (traceNearestHostComponentUpdate) {
+            const hostFibers = findAllCurrentHostFibers(
+              getFiberID(getPrimaryFiber(nextFiber)),
+            );
+            hostFibers.forEach(hostFiber => {
+              traceUpdatesForNodes.add(hostFiber.stateNode);
+            });
+          }
+        }
+      }
+    }
+
+    if (shouldIncludeInTree) {
+      const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');
+      if (isProfilingSupported) {
+        recordProfilingDurations(nextFiber);
+      }
+    }
+    if (shouldResetChildren) {
+      // We need to crawl the subtree for closest non-filtered Fibers
+      // so that we can display them in a flat children set.
+      if (shouldIncludeInTree) {
+        // Normally, search for children from the rendered child.
+        let nextChildSet = nextFiber.child;
+        if (nextDidTimeOut) {
+          // Special case: timed-out Suspense renders the fallback set.
+          const nextFiberChild = nextFiber.child;
+          nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;
+        }
+        if (nextChildSet != null) {
+          recordResetChildren(nextFiber, nextChildSet);
+        }
+        // We've handled the child order change for this Fiber.
+        // Since it's included, there's no need to invalidate parent child order.
+        return false;
+      } else {
+        // Let the closest unfiltered parent Fiber reset its child order instead.
+        return true;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  function cleanup() {
+    // We don't patch any methods so there is no cleanup.
+  }
+
+  function flushInitialOperations() {
+    const localPendingOperationsQueue = pendingOperationsQueue;
+
+    pendingOperationsQueue = null;
+
+    if (
+      localPendingOperationsQueue !== null &&
+      localPendingOperationsQueue.length > 0
+    ) {
+      // We may have already queued up some operations before the frontend connected
+      // If so, let the frontend know about them.
+      localPendingOperationsQueue.forEach(operations => {
+        hook.emit('operations', operations);
+      });
+    } else {
+      // Before the traversals, remember to start tracking
+      // our path in case we have selection to restore.
+      if (trackedPath !== null) {
+        mightBeOnTrackedPath = true;
+      }
+      // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
+      hook.getFiberRoots(rendererID).forEach(root => {
+        currentRootID = getFiberID(getPrimaryFiber(root.current));
+        setRootPseudoKey(currentRootID, root.current);
+
+        // Checking root.memoizedInteractions handles multi-renderer edge-case-
+        // where some v16 renderers support profiling and others don't.
+        if (isProfiling && root.memoizedInteractions != null) {
+          // If profiling is active, store commit time and duration, and the current interactions.
+          // The frontend may request this information after profiling has stopped.
+          currentCommitProfilingMetadata = {
+            changeDescriptions: recordChangeDescriptions ? new Map() : null,
+            durations: [],
+            commitTime: getCurrentTime() - profilingStartTime,
+            interactions: Array.from(root.memoizedInteractions).map(
+              (interaction: Interaction) => ({
+                ...interaction,
+                timestamp: interaction.timestamp - profilingStartTime,
+              }),
+            ),
+            maxActualDuration: 0,
+            priorityLevel: null,
+          };
+        }
+
+        mountFiberRecursively(root.current, null, false, false);
+        flushPendingEvents(root);
+        currentRootID = -1;
+      });
+    }
+  }
+
+  function handleCommitFiberUnmount(fiber) {
+    // This is not recursive.
+    // We can't traverse fibers after unmounting so instead
+    // we rely on React telling us about each unmount.
+    recordUnmount(fiber, false);
+  }
+
+  function handleCommitFiberRoot(root, priorityLevel) {
+    const current = root.current;
+    const alternate = current.alternate;
+
+    currentRootID = getFiberID(getPrimaryFiber(current));
+
+    // Before the traversals, remember to start tracking
+    // our path in case we have selection to restore.
+    if (trackedPath !== null) {
+      mightBeOnTrackedPath = true;
+    }
+
+    if (traceUpdatesEnabled) {
+      traceUpdatesForNodes.clear();
+    }
+
+    // Checking root.memoizedInteractions handles multi-renderer edge-case-
+    // where some v16 renderers support profiling and others don't.
+    const isProfilingSupported = root.memoizedInteractions != null;
+
+    if (isProfiling && isProfilingSupported) {
+      // If profiling is active, store commit time and duration, and the current interactions.
+      // The frontend may request this information after profiling has stopped.
+      currentCommitProfilingMetadata = {
+        changeDescriptions: recordChangeDescriptions ? new Map() : null,
+        durations: [],
+        commitTime: getCurrentTime() - profilingStartTime,
+        interactions: Array.from(root.memoizedInteractions).map(
+          (interaction: Interaction) => ({
+            ...interaction,
+            timestamp: interaction.timestamp - profilingStartTime,
+          }),
+        ),
+        maxActualDuration: 0,
+        priorityLevel:
+          priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
+      };
+    }
+
+    if (alternate) {
+      // TODO: relying on this seems a bit fishy.
+      const wasMounted =
+        alternate.memoizedState != null &&
+        alternate.memoizedState.element != null;
+      const isMounted =
+        current.memoizedState != null && current.memoizedState.element != null;
+      if (!wasMounted && isMounted) {
+        // Mount a new root.
+        setRootPseudoKey(currentRootID, current);
+        mountFiberRecursively(current, null, false, false);
+      } else if (wasMounted && isMounted) {
+        // Update an existing root.
+        updateFiberRecursively(current, alternate, null, false);
+      } else if (wasMounted && !isMounted) {
+        // Unmount an existing root.
+        removeRootPseudoKey(currentRootID);
+        recordUnmount(current, false);
+      }
+    } else {
+      // Mount a new root.
+      setRootPseudoKey(currentRootID, current);
+      mountFiberRecursively(current, null, false, false);
+    }
+
+    if (isProfiling && isProfilingSupported) {
+      const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+        currentRootID,
+      );
+      if (commitProfilingMetadata != null) {
+        commitProfilingMetadata.push(
+          ((currentCommitProfilingMetadata: any): CommitProfilingData),
+        );
+      } else {
+        ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+          currentRootID,
+          [((currentCommitProfilingMetadata: any): CommitProfilingData)],
+        );
+      }
+    }
+
+    // We're done here.
+    flushPendingEvents(root);
+
+    if (traceUpdatesEnabled) {
+      hook.emit('traceUpdates', traceUpdatesForNodes);
+    }
+
+    currentRootID = -1;
+  }
+
+  function findAllCurrentHostFibers(id: number): $ReadOnlyArray<Fiber> {
+    const fibers = [];
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (!fiber) {
+      return fibers;
+    }
+
+    // Next we'll drill down this component to find all HostComponent/Text.
+    let node: Fiber = fiber;
+    while (true) {
+      if (node.tag === HostComponent || node.tag === HostText) {
+        fibers.push(node);
+      } else if (node.child) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === fiber) {
+        return fibers;
+      }
+      while (!node.sibling) {
+        if (!node.return || node.return === fiber) {
+          return fibers;
+        }
+        node = node.return;
+      }
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+    // Flow needs the return here, but ESLint complains about it.
+    // eslint-disable-next-line no-unreachable
+    return fibers;
+  }
+
+  function findNativeNodesForFiberID(id: number) {
+    try {
+      let fiber = findCurrentFiberUsingSlowPathById(id);
+      if (fiber === null) {
+        return null;
+      }
+      // Special case for a timed-out Suspense.
+      const isTimedOutSuspense =
+        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
+      if (isTimedOutSuspense) {
+        // A timed-out Suspense's findDOMNode is useless.
+        // Try our best to find the fallback directly.
+        const maybeFallbackFiber = fiber.child && fiber.child.sibling;
+        if (maybeFallbackFiber != null) {
+          fiber = maybeFallbackFiber;
+        }
+      }
+      const hostFibers = findAllCurrentHostFibers(id);
+      return hostFibers.map(hostFiber => hostFiber.stateNode).filter(Boolean);
+    } catch (err) {
+      // The fiber might have unmounted by now.
+      return null;
+    }
+  }
+
+  function getDisplayNameForFiberID(id) {
+    const fiber = idToFiberMap.get(id);
+    return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
+  }
+
+  function getFiberIDForNative(
+    hostInstance,
+    findNearestUnfilteredAncestor = false,
+  ) {
+    let fiber = renderer.findFiberByHostInstance(hostInstance);
+    if (fiber != null) {
+      if (findNearestUnfilteredAncestor) {
+        while (fiber !== null && shouldFilterFiber(fiber)) {
+          fiber = fiber.return;
+        }
+      }
+      return getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    }
+    return null;
+  }
+
+  const MOUNTING = 1;
+  const MOUNTED = 2;
+  const UNMOUNTED = 3;
+
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  function isFiberMountedImpl(fiber: Fiber): number {
+    let node = fiber;
+    if (!fiber.alternate) {
+      // If there is no alternate, this might be a new tree that isn't inserted
+      // yet. If it is, then it will have a pending insertion effect on it.
+      if ((node.effectTag & Placement) !== NoEffect) {
+        return MOUNTING;
+      }
+      while (node.return) {
+        node = node.return;
+        if ((node.effectTag & Placement) !== NoEffect) {
+          return MOUNTING;
+        }
+      }
+    } else {
+      while (node.return) {
+        node = node.return;
+      }
+    }
+    if (node.tag === HostRoot) {
+      // TODO: Check if this was a nested HostRoot when used with
+      // renderContainerIntoSubtree.
+      return MOUNTED;
+    }
+    // If we didn't hit the root, that means that we're in an disconnected tree
+    // that has been unmounted.
+    return UNMOUNTED;
+  }
+
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
+  // BEGIN copied code
+  function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
+    const fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return null;
+    }
+
+    let alternate = fiber.alternate;
+    if (!alternate) {
+      // If there is no alternate, then we only need to check if it is mounted.
+      const state = isFiberMountedImpl(fiber);
+      if (state === UNMOUNTED) {
+        throw Error('Unable to find node on an unmounted component.');
+      }
+      if (state === MOUNTING) {
+        return null;
+      }
+      return fiber;
+    }
+    // If we have two possible branches, we'll walk backwards up to the root
+    // to see what path the root points to. On the way we may hit one of the
+    // special cases and we'll deal with them.
+    let a: Fiber = fiber;
+    let b: Fiber = alternate;
+    while (true) {
+      let parentA = a.return;
+      if (parentA === null) {
+        // We're at the root.
+        break;
+      }
+      let parentB = parentA.alternate;
+      if (parentB === null) {
+        // There is no alternate. This is an unusual case. Currently, it only
+        // happens when a Suspense component is hidden. An extra fragment fiber
+        // is inserted in between the Suspense fiber and its children. Skip
+        // over this extra fragment fiber and proceed to the next parent.
+        const nextParent = parentA.return;
+        if (nextParent !== null) {
+          a = b = nextParent;
+          continue;
+        }
+        // If there's no parent, we're at the root.
+        break;
+      }
+
+      // If both copies of the parent fiber point to the same child, we can
+      // assume that the child is current. This happens when we bailout on low
+      // priority: the bailed out fiber's child reuses the current child.
+      if (parentA.child === parentB.child) {
+        let child = parentA.child;
+        while (child) {
+          if (child === a) {
+            // We've determined that A is the current branch.
+            if (isFiberMountedImpl(parentA) !== MOUNTED) {
+              throw Error('Unable to find node on an unmounted component.');
+            }
+            return fiber;
+          }
+          if (child === b) {
+            // We've determined that B is the current branch.
+            if (isFiberMountedImpl(parentA) !== MOUNTED) {
+              throw Error('Unable to find node on an unmounted component.');
+            }
+            return alternate;
+          }
+          child = child.sibling;
+        }
+        // We should never have an alternate for any mounting node. So the only
+        // way this could possibly happen is if this was unmounted, if at all.
+        throw Error('Unable to find node on an unmounted component.');
+      }
+
+      if (a.return !== b.return) {
+        // The return pointer of A and the return pointer of B point to different
+        // fibers. We assume that return pointers never criss-cross, so A must
+        // belong to the child set of A.return, and B must belong to the child
+        // set of B.return.
+        a = parentA;
+        b = parentB;
+      } else {
+        // The return pointers point to the same fiber. We'll have to use the
+        // default, slow path: scan the child sets of each parent alternate to see
+        // which child belongs to which set.
+        //
+        // Search parent A's child set
+        let didFindChild = false;
+        let child = parentA.child;
+        while (child) {
+          if (child === a) {
+            didFindChild = true;
+            a = parentA;
+            b = parentB;
+            break;
+          }
+          if (child === b) {
+            didFindChild = true;
+            b = parentA;
+            a = parentB;
+            break;
+          }
+          child = child.sibling;
+        }
+        if (!didFindChild) {
+          // Search parent B's child set
+          child = parentB.child;
+          while (child) {
+            if (child === a) {
+              didFindChild = true;
+              a = parentB;
+              b = parentA;
+              break;
+            }
+            if (child === b) {
+              didFindChild = true;
+              b = parentB;
+              a = parentA;
+              break;
+            }
+            child = child.sibling;
+          }
+          if (!didFindChild) {
+            throw Error(
+              'Child was not found in either parent set. This indicates a bug ' +
+                'in React related to the return pointer. Please file an issue.',
+            );
+          }
+        }
+      }
+
+      if (a.alternate !== b) {
+        throw Error(
+          "Return fibers should always be each others' alternates. " +
+            'This error is likely caused by a bug in React. Please file an issue.',
+        );
+      }
+    }
+    // If the root is not a host container, we're in a disconnected tree. I.e.
+    // unmounted.
+    if (a.tag !== HostRoot) {
+      throw Error('Unable to find node on an unmounted component.');
+    }
+    if (a.stateNode.current === a) {
+      // We've determined that A is the current branch.
+      return fiber;
+    }
+    // Otherwise B has to be current branch.
+    return alternate;
+  }
+  // END copied code
+
+  function prepareViewAttributeSource(
+    id: number,
+    path: Array<string | number>,
+  ): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+    if (isCurrent) {
+      window.$attribute = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+    }
+  }
+
+  function prepareViewElementSource(id: number): void {
+    let fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    const {elementType, tag, type} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+      case FunctionComponent:
+        global.$type = type;
+        break;
+      case ForwardRef:
+        global.$type = type.render;
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$type =
+          elementType != null && elementType.type != null
+            ? elementType.type
+            : type;
+        break;
+      default:
+        global.$type = null;
+        break;
+    }
+  }
+
+  function getOwnersList(id: number): Array<Owner> | null {
+    let fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber == null) {
+      return null;
+    }
+
+    const {_debugOwner} = fiber;
+
+    const owners = [
+      {
+        displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
+        id,
+        type: getElementTypeForFiber(fiber),
+      },
+    ];
+
+    if (_debugOwner) {
+      let owner = _debugOwner;
+      while (owner !== null) {
+        owners.unshift({
+          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
+          id: getFiberID(getPrimaryFiber(owner)),
+          type: getElementTypeForFiber(owner),
+        });
+        owner = owner._debugOwner || null;
+      }
+    }
+
+    return owners;
+  }
+
+  // Fast path props lookup for React Native style editor.
+  // Could use inspectElementRaw() but that would require shallow rendering hooks components,
+  // and could also mess with memoization.
+  function getInstanceAndStyle(id: number): InstanceAndStyle {
+    let instance = null;
+    let style = null;
+
+    let fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      instance = fiber.stateNode;
+
+      if (fiber.memoizedProps !== null) {
+        style = fiber.memoizedProps.style;
+      }
+    }
+
+    return {instance, style};
+  }
+
+  function inspectElementRaw(id: number): InspectedElement | null {
+    let fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber == null) {
+      return null;
+    }
+
+    const {
+      _debugOwner,
+      _debugSource,
+      dependencies,
+      stateNode,
+      memoizedProps,
+      memoizedState,
+      tag,
+      type,
+    } = fiber;
+
+    const elementType = getElementTypeForFiber(fiber);
+
+    const usesHooks =
+      (tag === FunctionComponent ||
+        tag === SimpleMemoComponent ||
+        tag === ForwardRef) &&
+      (!!memoizedState || !!dependencies);
+
+    const typeSymbol = getTypeSymbol(type);
+
+    let canViewSource = false;
+    let context = null;
+    if (
+      tag === ClassComponent ||
+      tag === FunctionComponent ||
+      tag === IncompleteClassComponent ||
+      tag === IndeterminateComponent ||
+      tag === MemoComponent ||
+      tag === ForwardRef ||
+      tag === SimpleMemoComponent
+    ) {
+      canViewSource = true;
+      if (stateNode && stateNode.context != null) {
+        // Don't show an empty context object for class components that don't use the context API.
+        const shouldHideContext =
+          elementType === ElementTypeClass &&
+          !(type.contextTypes || type.contextType);
+
+        if (!shouldHideContext) {
+          context = stateNode.context;
+        }
+      }
+    } else if (
+      typeSymbol === CONTEXT_CONSUMER_NUMBER ||
+      typeSymbol === CONTEXT_CONSUMER_SYMBOL_STRING
+    ) {
+      // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+      // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+      // NOTE Keep in sync with getDisplayNameForFiber()
+      const consumerResolvedContext = type._context || type;
+
+      // Global context value.
+      context = consumerResolvedContext._currentValue || null;
+
+      // Look for overridden value.
+      let current = ((fiber: any): Fiber).return;
+      while (current !== null) {
+        const currentType = current.type;
+        const currentTypeSymbol = getTypeSymbol(currentType);
+        if (
+          currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||
+          currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING
+        ) {
+          // 16.3.0 exposed the context object as "context"
+          // PR #12501 changed it to "_context" for 16.3.1+
+          // NOTE Keep in sync with getDisplayNameForFiber()
+          const providerResolvedContext =
+            currentType._context || currentType.context;
+          if (providerResolvedContext === consumerResolvedContext) {
+            context = current.memoizedProps.value;
+            break;
+          }
+        }
+
+        current = current.return;
+      }
+    }
+
+    let hasLegacyContext = false;
+    if (context !== null) {
+      hasLegacyContext = !!type.contextTypes;
+
+      // To simplify hydration and display logic for context, wrap in a value object.
+      // Otherwise simple values (e.g. strings, booleans) become harder to handle.
+      context = {value: context};
+    }
+
+    let owners = null;
+    if (_debugOwner) {
+      owners = [];
+      let owner = _debugOwner;
+      while (owner !== null) {
+        owners.push({
+          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
+          id: getFiberID(getPrimaryFiber(owner)),
+          type: getElementTypeForFiber(owner),
+        });
+        owner = owner._debugOwner || null;
+      }
+    }
+
+    const isTimedOutSuspense =
+      tag === SuspenseComponent && memoizedState !== null;
+
+    let hooks = null;
+    if (usesHooks) {
+      const originalConsoleMethods = {};
+
+      // Temporarily disable all console logging before re-running the hook.
+      for (let method in console) {
+        try {
+          originalConsoleMethods[method] = console[method];
+          // $FlowFixMe property error|warn is not writable.
+          console[method] = () => {};
+        } catch (error) {}
+      }
+
+      try {
+        hooks = inspectHooksOfFiber(
+          fiber,
+          (renderer.currentDispatcherRef: any),
+        );
+      } finally {
+        // Restore original console functionality.
+        for (let method in originalConsoleMethods) {
+          try {
+            // $FlowFixMe property error|warn is not writable.
+            console[method] = originalConsoleMethods[method];
+          } catch (error) {}
+        }
+      }
+    }
+
+    return {
+      id,
+
+      // Does the current renderer support editable hooks?
+      canEditHooks: typeof overrideHookState === 'function',
+
+      // Does the current renderer support editable function props?
+      canEditFunctionProps: typeof overrideProps === 'function',
+
+      canToggleSuspense:
+        supportsTogglingSuspense &&
+        // If it's showing the real content, we can always flip fallback.
+        (!isTimedOutSuspense ||
+          // If it's showing fallback because we previously forced it to,
+          // allow toggling it back to remove the fallback override.
+          forceFallbackForSuspenseIDs.has(id)),
+
+      // Can view component source location.
+      canViewSource,
+
+      // Does the component have legacy context attached to it.
+      hasLegacyContext,
+
+      displayName: getDisplayNameForFiber(fiber),
+      type: elementType,
+
+      // Inspectable properties.
+      // TODO Review sanitization approach for the below inspectable values.
+      context,
+      hooks,
+      props: memoizedProps,
+      state: usesHooks ? null : memoizedState,
+
+      // List of owners
+      owners,
+
+      // Location of component in source coude.
+      source: _debugSource || null,
+    };
+  }
+
+  let mostRecentlyInspectedElement: InspectedElement | null = null;
+  let hasElementUpdatedSinceLastInspected: boolean = false;
+  let currentlyInspectedPaths: Object = {};
+
+  function isMostRecentlyInspectedElementCurrent(id: number): boolean {
+    return (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id === id &&
+      !hasElementUpdatedSinceLastInspected
+    );
+  }
+
+  // Track the intersection of currently inspected paths,
+  // so that we can send their data along if the element is re-rendered.
+  function mergeInspectedPaths(path: Array<string | number>) {
+    let current = currentlyInspectedPaths;
+    path.forEach(key => {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key];
+    });
+  }
+
+  function createIsPathWhitelisted(
+    key: string | null,
+    secondaryCategory: 'hooks' | null,
+  ) {
+    // This function helps prevent previously-inspected paths from being dehydrated in updates.
+    // This is important to avoid a bad user experience where expanded toggles collapse on update.
+    return function isPathWhitelisted(path: Array<string | number>): boolean {
+      switch (secondaryCategory) {
+        case 'hooks':
+          if (path.length === 1) {
+            // Never dehydrate the "hooks" object at the top levels.
+            return true;
+          }
+          if (
+            path[path.length - 1] === 'subHooks' ||
+            path[path.length - 2] === 'subHooks'
+          ) {
+            // Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,
+            // so it's easiest for now if we just don't break on this boundary.
+            // We can always dehydrate a level deeper (in the value object).
+            return true;
+          }
+          break;
+        default:
+          break;
+      }
+
+      let current =
+        key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];
+      if (!current) {
+        return false;
+      }
+      for (let i = 0; i < path.length; i++) {
+        current = current[path[i]];
+        if (!current) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }
+
+  function updateSelectedElement(inspectedElement: InspectedElement): void {
+    const {hooks, id, props} = inspectedElement;
+
+    let fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    const {elementType, stateNode, tag, type} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+        global.$r = stateNode;
+        break;
+      case FunctionComponent:
+        global.$r = {
+          hooks,
+          props,
+          type,
+        };
+        break;
+      case ForwardRef:
+        global.$r = {
+          props,
+          type: type.render,
+        };
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$r = {
+          props,
+          type:
+            elementType != null && elementType.type != null
+              ? elementType.type
+              : type,
+        };
+        break;
+      default:
+        global.$r = null;
+        break;
+    }
+  }
+
+  function storeAsGlobal(
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      const value = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+      const key = `$reactTemp${count}`;
+
+      window[key] = value;
+
+      console.log(key);
+      console.log(value);
+    }
+  }
+
+  function copyElementPath(id: number, path: Array<string | number>): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      copyToClipboard(
+        getInObject(
+          ((mostRecentlyInspectedElement: any): InspectedElement),
+          path,
+        ),
+      );
+    }
+  }
+
+  function inspectElement(
+    id: number,
+    path?: Array<string | number>,
+  ): InspectedElementPayload {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      if (path != null) {
+        mergeInspectedPaths(path);
+
+        let secondaryCategory = null;
+        if (path[0] === 'hooks') {
+          secondaryCategory = 'hooks';
+        }
+
+        // If this element has not been updated since it was last inspected,
+        // we can just return the subset of data in the newly-inspected path.
+        return {
+          id,
+          type: 'hydrated-path',
+          path,
+          value: cleanForBridge(
+            getInObject(
+              ((mostRecentlyInspectedElement: any): InspectedElement),
+              path,
+            ),
+            createIsPathWhitelisted(null, secondaryCategory),
+            path,
+          ),
+        };
+      } else {
+        // If this element has not been updated since it was last inspected, we don't need to re-run it.
+        // Instead we can just return the ID to indicate that it has not changed.
+        return {
+          id,
+          type: 'no-change',
+        };
+      }
+    } else {
+      hasElementUpdatedSinceLastInspected = false;
+
+      if (
+        mostRecentlyInspectedElement === null ||
+        mostRecentlyInspectedElement.id !== id
+      ) {
+        currentlyInspectedPaths = {};
+      }
+
+      mostRecentlyInspectedElement = inspectElementRaw(id);
+      if (mostRecentlyInspectedElement === null) {
+        return {
+          id,
+          type: 'not-found',
+        };
+      }
+
+      if (path != null) {
+        mergeInspectedPaths(path);
+      }
+
+      // Any time an inspected element has an update,
+      // we should update the selected $r value as wel.
+      // Do this before dehyration (cleanForBridge).
+      updateSelectedElement(mostRecentlyInspectedElement);
+
+      // Clone before cleaning so that we preserve the full data.
+      // This will enable us to send patches without re-inspecting if hydrated paths are requested.
+      // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
+      const cleanedInspectedElement = {...mostRecentlyInspectedElement};
+      cleanedInspectedElement.context = cleanForBridge(
+        cleanedInspectedElement.context,
+        createIsPathWhitelisted('context', null),
+      );
+      cleanedInspectedElement.hooks = cleanForBridge(
+        cleanedInspectedElement.hooks,
+        createIsPathWhitelisted('hooks', 'hooks'),
+      );
+      cleanedInspectedElement.props = cleanForBridge(
+        cleanedInspectedElement.props,
+        createIsPathWhitelisted('props', null),
+      );
+      cleanedInspectedElement.state = cleanForBridge(
+        cleanedInspectedElement.state,
+        createIsPathWhitelisted('state', null),
+      );
+
+      return {
+        id,
+        type: 'full-data',
+        value: cleanedInspectedElement,
+      };
+    }
+  }
+
+  function logElementToConsole(id) {
+    const result = isMostRecentlyInspectedElementCurrent(id)
+      ? mostRecentlyInspectedElement
+      : inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find Fiber with id "${id}"`);
+      return;
+    }
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    if (supportsGroup) {
+      console.groupCollapsed(
+        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
+        'color: var(--dom-tag-name-color); font-weight: normal;',
+      );
+    }
+    if (result.props !== null) {
+      console.log('Props:', result.props);
+    }
+    if (result.state !== null) {
+      console.log('State:', result.state);
+    }
+    if (result.hooks !== null) {
+      console.log('Hooks:', result.hooks);
+    }
+    const nativeNodes = findNativeNodesForFiberID(id);
+    if (nativeNodes !== null) {
+      console.log('Nodes:', nativeNodes);
+    }
+    if (result.source !== null) {
+      console.log('Location:', result.source);
+    }
+    if (window.chrome || /firefox/i.test(navigator.userAgent)) {
+      console.log(
+        'Right-click any value to save it as a global variable for further inspection.',
+      );
+    }
+    if (supportsGroup) {
+      console.groupEnd();
+    }
+  }
+
+  function setInHook(
+    id: number,
+    index: number,
+    path: Array<string | number>,
+    value: any,
+  ) {
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      if (typeof overrideHookState === 'function') {
+        overrideHookState(fiber, index, path, value);
+      }
+    }
+  }
+
+  function setInProps(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (instance === null) {
+        if (typeof overrideProps === 'function') {
+          overrideProps(fiber, path, value);
+        }
+      } else {
+        fiber.pendingProps = copyWithSet(instance.props, path, value);
+        instance.forceUpdate();
+      }
+    }
+  }
+
+  function setInState(id: number, path: Array<string | number>, value: any) {
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      setInObject(instance.state, path, value);
+      instance.forceUpdate();
+    }
+  }
+
+  function setInContext(id: number, path: Array<string | number>, value: any) {
+    // To simplify hydration and display of primative context values (e.g. number, string)
+    // the inspectElement() method wraps context in a {value: ...} object.
+    // We need to remove the first part of the path (the "value") before continuing.
+    path = path.slice(1);
+
+    const fiber = findCurrentFiberUsingSlowPathById(id);
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+      if (path.length === 0) {
+        // Simple context value
+        instance.context = value;
+      } else {
+        setInObject(instance.context, path, value);
+      }
+      instance.forceUpdate();
+    }
+  }
+
+  type CommitProfilingData = {|
+    changeDescriptions: Map<number, ChangeDescription> | null,
+    commitTime: number,
+    durations: Array<number>,
+    interactions: Array<Interaction>,
+    maxActualDuration: number,
+    priorityLevel: string | null,
+  |};
+
+  type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
+  type DisplayNamesByRootID = Map<number, string>;
+
+  let currentCommitProfilingMetadata: CommitProfilingData | null = null;
+  let displayNamesByRootID: DisplayNamesByRootID | null = null;
+  let idToContextsMap: Map<number, any> | null = null;
+  let initialTreeBaseDurationsMap: Map<number, number> | null = null;
+  let initialIDToRootMap: Map<number, number> | null = null;
+  let isProfiling: boolean = false;
+  let profilingStartTime: number = 0;
+  let recordChangeDescriptions: boolean = false;
+  let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
+
+  function getProfilingData(): ProfilingDataBackend {
+    const dataForRoots: Array<ProfilingDataForRootBackend> = [];
+
+    if (rootToCommitProfilingMetadataMap === null) {
+      throw Error(
+        'getProfilingData() called before any profiling data was recorded',
+      );
+    }
+
+    rootToCommitProfilingMetadataMap.forEach(
+      (commitProfilingMetadata, rootID) => {
+        const commitData: Array<CommitDataBackend> = [];
+        const initialTreeBaseDurations: Array<[number, number]> = [];
+        const allInteractions: Map<number, Interaction> = new Map();
+        const interactionCommits: Map<number, Array<number>> = new Map();
+
+        const displayName =
+          (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||
+          'Unknown';
+
+        if (initialTreeBaseDurationsMap != null) {
+          initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {
+            if (
+              initialIDToRootMap != null &&
+              initialIDToRootMap.get(id) === rootID
+            ) {
+              // We don't need to convert milliseconds to microseconds in this case,
+              // because the profiling summary is JSON serialized.
+              initialTreeBaseDurations.push([id, treeBaseDuration]);
+            }
+          });
+        }
+
+        commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
+          const {
+            changeDescriptions,
+            durations,
+            interactions,
+            maxActualDuration,
+            priorityLevel,
+            commitTime,
+          } = commitProfilingData;
+
+          const interactionIDs: Array<number> = [];
+
+          interactions.forEach(interaction => {
+            if (!allInteractions.has(interaction.id)) {
+              allInteractions.set(interaction.id, interaction);
+            }
+
+            interactionIDs.push(interaction.id);
+
+            const commitIndices = interactionCommits.get(interaction.id);
+            if (commitIndices != null) {
+              commitIndices.push(commitIndex);
+            } else {
+              interactionCommits.set(interaction.id, [commitIndex]);
+            }
+          });
+
+          const fiberActualDurations: Array<[number, number]> = [];
+          const fiberSelfDurations: Array<[number, number]> = [];
+          for (let i = 0; i < durations.length; i += 3) {
+            const fiberID = durations[i];
+            fiberActualDurations.push([fiberID, durations[i + 1]]);
+            fiberSelfDurations.push([fiberID, durations[i + 2]]);
+          }
+
+          commitData.push({
+            changeDescriptions:
+              changeDescriptions !== null
+                ? Array.from(changeDescriptions.entries())
+                : null,
+            duration: maxActualDuration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            timestamp: commitTime,
+          });
+        });
+
+        dataForRoots.push({
+          commitData,
+          displayName,
+          initialTreeBaseDurations,
+          interactionCommits: Array.from(interactionCommits.entries()),
+          interactions: Array.from(allInteractions.entries()),
+          rootID,
+        });
+      },
+    );
+
+    return {
+      dataForRoots,
+      rendererID,
+    };
+  }
+
+  function startProfiling(shouldRecordChangeDescriptions: boolean) {
+    if (isProfiling) {
+      return;
+    }
+
+    recordChangeDescriptions = shouldRecordChangeDescriptions;
+
+    // Capture initial values as of the time profiling starts.
+    // It's important we snapshot both the durations and the id-to-root map,
+    // since either of these may change during the profiling session
+    // (e.g. when a fiber is re-rendered or when a fiber gets removed).
+    displayNamesByRootID = new Map();
+    initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);
+    initialIDToRootMap = new Map(idToRootMap);
+    idToContextsMap = new Map();
+
+    hook.getFiberRoots(rendererID).forEach(root => {
+      const rootID = getFiberID(getPrimaryFiber(root.current));
+      ((displayNamesByRootID: any): DisplayNamesByRootID).set(
+        rootID,
+        getDisplayNameForRoot(root.current),
+      );
+
+      if (shouldRecordChangeDescriptions) {
+        // Record all contexts at the time profiling is started.
+        // Fibers only store the current context value,
+        // so we need to track them separatenly in order to determine changed keys.
+        crawlToInitializeContextsMap(root.current);
+      }
+    });
+
+    isProfiling = true;
+    profilingStartTime = getCurrentTime();
+    rootToCommitProfilingMetadataMap = new Map();
+  }
+
+  function stopProfiling() {
+    isProfiling = false;
+    recordChangeDescriptions = false;
+  }
+
+  // Automatically start profiling so that we don't miss timing info from initial "mount".
+  if (
+    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+  ) {
+    startProfiling(
+      sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
+        'true',
+    );
+  }
+
+  // React will switch between these implementations depending on whether
+  // we have any manually suspended Fibers or not.
+
+  function shouldSuspendFiberAlwaysFalse() {
+    return false;
+  }
+
+  let forceFallbackForSuspenseIDs = new Set();
+  function shouldSuspendFiberAccordingToSet(fiber) {
+    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    return forceFallbackForSuspenseIDs.has(id);
+  }
+
+  function overrideSuspense(id, forceFallback) {
+    if (
+      typeof setSuspenseHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideSuspense() to not get called for earlier React versions.',
+      );
+    }
+    if (forceFallback) {
+      forceFallbackForSuspenseIDs.add(id);
+      if (forceFallbackForSuspenseIDs.size === 1) {
+        // First override is added. Switch React to slower path.
+        setSuspenseHandler(shouldSuspendFiberAccordingToSet);
+      }
+    } else {
+      forceFallbackForSuspenseIDs.delete(id);
+      if (forceFallbackForSuspenseIDs.size === 0) {
+        // Last override is gone. Switch React back to fast path.
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
+    }
+    const fiber = idToFiberMap.get(id);
+    if (fiber != null) {
+      scheduleUpdate(fiber);
+    }
+  }
+
+  // Remember if we're trying to restore the selection after reload.
+  // In that case, we'll do some extra checks for matching mounts.
+  let trackedPath: Array<PathFrame> | null = null;
+  let trackedPathMatchFiber: Fiber | null = null;
+  let trackedPathMatchDepth = -1;
+  let mightBeOnTrackedPath = false;
+
+  function setTrackedPath(path: Array<PathFrame> | null) {
+    if (path === null) {
+      trackedPathMatchFiber = null;
+      trackedPathMatchDepth = -1;
+      mightBeOnTrackedPath = false;
+    }
+    trackedPath = path;
+  }
+
+  // We call this before traversing a new mount.
+  // It remembers whether this Fiber is the next best match for tracked path.
+  // The return value signals whether we should keep matching siblings or not.
+  function updateTrackedPathStateBeforeMount(fiber: Fiber): boolean {
+    if (trackedPath === null || !mightBeOnTrackedPath) {
+      // Fast path: there's nothing to track so do nothing and ignore siblings.
+      return false;
+    }
+    const returnFiber = fiber.return;
+    const returnAlternate = returnFiber !== null ? returnFiber.alternate : null;
+    // By now we know there's some selection to restore, and this is a new Fiber.
+    // Is this newly mounted Fiber a direct child of the current best match?
+    // (This will also be true for new roots if we haven't matched anything yet.)
+    if (
+      trackedPathMatchFiber === returnFiber ||
+      (trackedPathMatchFiber === returnAlternate && returnAlternate !== null)
+    ) {
+      // Is this the next Fiber we should select? Let's compare the frames.
+      const actualFrame = getPathFrame(fiber);
+      const expectedFrame = trackedPath[trackedPathMatchDepth + 1];
+      if (expectedFrame === undefined) {
+        throw new Error('Expected to see a frame at the next depth.');
+      }
+      if (
+        actualFrame.index === expectedFrame.index &&
+        actualFrame.key === expectedFrame.key &&
+        actualFrame.displayName === expectedFrame.displayName
+      ) {
+        // We have our next match.
+        trackedPathMatchFiber = fiber;
+        trackedPathMatchDepth++;
+        // Are we out of frames to match?
+        if (trackedPathMatchDepth === trackedPath.length - 1) {
+          // There's nothing that can possibly match afterwards.
+          // Don't check the children.
+          mightBeOnTrackedPath = false;
+        } else {
+          // Check the children, as they might reveal the next match.
+          mightBeOnTrackedPath = true;
+        }
+        // In either case, since we have a match, we don't need
+        // to check the siblings. They'll never match.
+        return false;
+      }
+    }
+    // This Fiber's parent is on the path, but this Fiber itself isn't.
+    // There's no need to check its children--they won't be on the path either.
+    mightBeOnTrackedPath = false;
+    // However, one of its siblings may be on the path so keep searching.
+    return true;
+  }
+
+  function updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath) {
+    // updateTrackedPathStateBeforeMount() told us whether to match siblings.
+    // Now that we're entering siblings, let's use that information.
+    mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath;
+  }
+
+  // Roots don't have a real persistent identity.
+  // A root's "pseudo key" is "childDisplayName:indexWithThatName".
+  // For example, "App:0" or, in case of similar roots, "Story:0", "Story:1", etc.
+  // We will use this to try to disambiguate roots when restoring selection between reloads.
+  const rootPseudoKeys: Map<number, string> = new Map();
+  const rootDisplayNameCounter: Map<string, number> = new Map();
+
+  function setRootPseudoKey(id: number, fiber: Fiber) {
+    const name = getDisplayNameForRoot(fiber);
+    const counter = rootDisplayNameCounter.get(name) || 0;
+    rootDisplayNameCounter.set(name, counter + 1);
+    const pseudoKey = `${name}:${counter}`;
+    rootPseudoKeys.set(id, pseudoKey);
+  }
+
+  function removeRootPseudoKey(id: number) {
+    const pseudoKey = rootPseudoKeys.get(id);
+    if (pseudoKey === undefined) {
+      throw new Error('Expected root pseudo key to be known.');
+    }
+    const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));
+    const counter = rootDisplayNameCounter.get(name);
+    if (counter === undefined) {
+      throw new Error('Expected counter to be known.');
+    }
+    if (counter > 1) {
+      rootDisplayNameCounter.set(name, counter - 1);
+    } else {
+      rootDisplayNameCounter.delete(name);
+    }
+    rootPseudoKeys.delete(id);
+  }
+
+  function getDisplayNameForRoot(fiber: Fiber): string {
+    let preferredDisplayName = null;
+    let fallbackDisplayName = null;
+    let child = fiber.child;
+    // Go at most three levels deep into direct children
+    // while searching for a child that has a displayName.
+    for (let i = 0; i < 3; i++) {
+      if (child === null) {
+        break;
+      }
+      const displayName = getDisplayNameForFiber(child);
+      if (displayName !== null) {
+        // Prefer display names that we get from user-defined components.
+        // We want to avoid using e.g. 'Suspense' unless we find nothing else.
+        if (typeof child.type === 'function') {
+          // There's a few user-defined tags, but we'll prefer the ones
+          // that are usually explicitly named (function or class components).
+          preferredDisplayName = displayName;
+        } else if (fallbackDisplayName === null) {
+          fallbackDisplayName = displayName;
+        }
+      }
+      if (preferredDisplayName !== null) {
+        break;
+      }
+      child = child.child;
+    }
+    return preferredDisplayName || fallbackDisplayName || 'Anonymous';
+  }
+
+  function getPathFrame(fiber: Fiber): PathFrame {
+    const {key} = fiber;
+    let displayName = getDisplayNameForFiber(fiber);
+    const index = fiber.index;
+    switch (fiber.tag) {
+      case HostRoot:
+        // Roots don't have a real displayName, index, or key.
+        // Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).
+        const id = getFiberID(getPrimaryFiber(fiber));
+        const pseudoKey = rootPseudoKeys.get(id);
+        if (pseudoKey === undefined) {
+          throw new Error('Expected mounted root to have known pseudo key.');
+        }
+        displayName = pseudoKey;
+        break;
+      case HostComponent:
+        displayName = fiber.type;
+        break;
+      default:
+        break;
+    }
+    return {
+      displayName,
+      key,
+      index,
+    };
+  }
+
+  // Produces a serializable representation that does a best effort
+  // of identifying a particular Fiber between page reloads.
+  // The return path will contain Fibers that are "invisible" to the store
+  // because their keys and indexes are important to restoring the selection.
+  function getPathForElement(id: number): Array<PathFrame> | null {
+    let fiber = idToFiberMap.get(id);
+    if (fiber == null) {
+      return null;
+    }
+    const keyPath = [];
+    while (fiber !== null) {
+      keyPath.push(getPathFrame(fiber));
+      fiber = fiber.return;
+    }
+    keyPath.reverse();
+    return keyPath;
+  }
+
+  function getBestMatchForTrackedPath(): PathMatch | null {
+    if (trackedPath === null) {
+      // Nothing to match.
+      return null;
+    }
+    if (trackedPathMatchFiber === null) {
+      // We didn't find anything.
+      return null;
+    }
+    // Find the closest Fiber store is aware of.
+    let fiber = trackedPathMatchFiber;
+    while (fiber !== null && shouldFilterFiber(fiber)) {
+      fiber = fiber.return;
+    }
+    if (fiber === null) {
+      return null;
+    }
+    return {
+      id: getFiberID(getPrimaryFiber(fiber)),
+      isFullMatch: trackedPathMatchDepth === trackedPath.length - 1,
+    };
+  }
+
+  const formatPriorityLevel = (priorityLevel: ?number) => {
+    if (priorityLevel == null) {
+      return 'Unknown';
+    }
+
+    switch (priorityLevel) {
+      case ImmediatePriority:
+        return 'Immediate';
+      case UserBlockingPriority:
+        return 'User-Blocking';
+      case NormalPriority:
+        return 'Normal';
+      case LowPriority:
+        return 'Low';
+      case IdlePriority:
+        return 'Idle';
+      case NoPriority:
+      default:
+        return 'Unknown';
+    }
+  };
+
+  function setTraceUpdatesEnabled(isEnabled: boolean): void {
+    traceUpdatesEnabled = isEnabled;
+  }
+
+  return {
+    cleanup,
+    copyElementPath,
+    findNativeNodesForFiberID,
+    flushInitialOperations,
+    getBestMatchForTrackedPath,
+    getDisplayNameForFiberID,
+    getFiberIDForNative,
+    getInstanceAndStyle,
+    getOwnersList,
+    getPathForElement,
+    getProfilingData,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    inspectElement,
+    logElementToConsole,
+    prepareViewAttributeSource,
+    prepareViewElementSource,
+    overrideSuspense,
+    renderer,
+    setInContext,
+    setInHook,
+    setInProps,
+    setInState,
+    setTraceUpdatesEnabled,
+    setTrackedPath,
+    startProfiling,
+    stopProfiling,
+    storeAsGlobal,
+    updateComponentFilters,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
new file mode 100644
index 0000000000000..043b1c2e0a859
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -0,0 +1,305 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {ReactContext} from 'shared/ReactTypes';
+import type {Source} from 'shared/ReactElementType';
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
+import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+
+type BundleType =
+  | 0 // PROD
+  | 1; // DEV
+
+export type WorkTag = number;
+export type SideEffectTag = number;
+export type ExpirationTime = number;
+
+// TODO: If it's useful for the frontend to know which types of data an Element has
+// (e.g. props, state, context, hooks) then we could add a bitmask field for this
+// to keep the number of attributes small.
+export type FiberData = {|
+  key: string | null,
+  displayName: string | null,
+  type: ElementType,
+|};
+
+export type NativeType = Object;
+export type RendererID = number;
+
+type Dispatcher = any;
+
+export type GetDisplayNameForFiberID = (
+  id: number,
+  findNearestUnfilteredAncestor?: boolean,
+) => string | null;
+
+export type GetFiberIDForNative = (
+  component: NativeType,
+  findNearestUnfilteredAncestor?: boolean,
+) => number | null;
+export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
+
+export type ReactProviderType<T> = {
+  $$typeof: Symbol | number,
+  _context: ReactContext<T>,
+  ...
+};
+
+export type ReactRenderer = {
+  findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
+  version: string,
+  bundleType: BundleType,
+  // 16.9+
+  overrideHookState?: ?(
+    fiber: Object,
+    id: number,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  // 16.7+
+  overrideProps?: ?(
+    fiber: Object,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  // 16.9+
+  scheduleUpdate?: ?(fiber: Object) => void,
+  setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,
+  // Only injected by React v16.8+ in order to support hooks inspection.
+  currentDispatcherRef?: {|current: null | Dispatcher|},
+  // Only injected by React v16.9+ in DEV mode.
+  // Enables DevTools to append owners-only component stack to error messages.
+  getCurrentFiber?: () => Fiber | null,
+  // Uniquely identifies React DOM v15.
+  ComponentTree?: any,
+  // Present for React DOM v12 (possibly earlier) through v15.
+  Mount?: any,
+  ...
+};
+
+export type ChangeDescription = {|
+  context: Array<string> | boolean | null,
+  didHooksChange: boolean,
+  isFirstMount: boolean,
+  props: Array<string> | null,
+  state: Array<string> | null,
+|};
+
+export type CommitDataBackend = {|
+  // Tuple of fiber ID and change description
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
+  duration: number,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  interactionIDs: Array<number>,
+  priorityLevel: string | null,
+  timestamp: number,
+|};
+
+export type ProfilingDataForRootBackend = {|
+  commitData: Array<CommitDataBackend>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  // Tuple of Interaction ID and commit indices
+  interactionCommits: Array<[number, Array<number>]>,
+  interactions: Array<[number, Interaction]>,
+  rootID: number,
+|};
+
+// Profiling data collected by the renderer interface.
+// This information will be passed to the frontend and combined with info it collects.
+export type ProfilingDataBackend = {|
+  dataForRoots: Array<ProfilingDataForRootBackend>,
+  rendererID: number,
+|};
+
+export type PathFrame = {|
+  key: string | null,
+  index: number,
+  displayName: string | null,
+|};
+
+export type PathMatch = {|
+  id: number,
+  isFullMatch: boolean,
+|};
+
+export type Owner = {|
+  displayName: string | null,
+  id: number,
+  type: ElementType,
+|};
+
+export type OwnersList = {|
+  id: number,
+  owners: Array<Owner> | null,
+|};
+
+export type InspectedElement = {|
+  id: number,
+
+  displayName: string | null,
+
+  // Does the current renderer support editable hooks?
+  canEditHooks: boolean,
+
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
+
+  // Is this Suspense, and can its value be overriden now?
+  canToggleSuspense: boolean,
+
+  // Can view component source location.
+  canViewSource: boolean,
+
+  // Does the component have legacy context attached to it.
+  hasLegacyContext: boolean,
+
+  // Inspectable properties.
+  context: Object | null,
+  hooks: Object | null,
+  props: Object | null,
+  state: Object | null,
+
+  // List of owners
+  owners: Array<Owner> | null,
+
+  // Location of component in source coude.
+  source: Source | null,
+
+  type: ElementType,
+|};
+
+export const InspectElementFullDataType = 'full-data';
+export const InspectElementNoChangeType = 'no-change';
+export const InspectElementNotFoundType = 'not-found';
+export const InspectElementHydratedPathType = 'hydrated-path';
+
+type InspectElementFullData = {|
+  id: number,
+  type: 'full-data',
+  value: InspectedElement,
+|};
+
+type InspectElementHydratedPath = {|
+  id: number,
+  type: 'hydrated-path',
+  path: Array<string | number>,
+  value: any,
+|};
+
+type InspectElementNoChange = {|
+  id: number,
+  type: 'no-change',
+|};
+
+type InspectElementNotFound = {|
+  id: number,
+  type: 'not-found',
+|};
+
+export type InspectedElementPayload =
+  | InspectElementFullData
+  | InspectElementHydratedPath
+  | InspectElementNoChange
+  | InspectElementNotFound;
+
+export type InstanceAndStyle = {|
+  instance: Object | null,
+  style: Object | null,
+|};
+
+export type RendererInterface = {
+  cleanup: () => void,
+  copyElementPath: (id: number, path: Array<string | number>) => void,
+  findNativeNodesForFiberID: FindNativeNodesForFiberID,
+  flushInitialOperations: () => void,
+  getBestMatchForTrackedPath: () => PathMatch | null,
+  getFiberIDForNative: GetFiberIDForNative,
+  getDisplayNameForFiberID: GetDisplayNameForFiberID,
+  getInstanceAndStyle(id: number): InstanceAndStyle,
+  getProfilingData(): ProfilingDataBackend,
+  getOwnersList: (id: number) => Array<Owner> | null,
+  getPathForElement: (id: number) => Array<PathFrame> | null,
+  handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
+  handleCommitFiberUnmount: (fiber: Object) => void,
+  inspectElement: (
+    id: number,
+    path?: Array<string | number>,
+  ) => InspectedElementPayload,
+  logElementToConsole: (id: number) => void,
+  overrideSuspense: (id: number, forceFallback: boolean) => void,
+  prepareViewAttributeSource: (
+    id: number,
+    path: Array<string | number>,
+  ) => void,
+  prepareViewElementSource: (id: number) => void,
+  renderer: ReactRenderer | null,
+  setInContext: (id: number, path: Array<string | number>, value: any) => void,
+  setInHook: (
+    id: number,
+    index: number,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  setInProps: (id: number, path: Array<string | number>, value: any) => void,
+  setInState: (id: number, path: Array<string | number>, value: any) => void,
+  setTraceUpdatesEnabled: (enabled: boolean) => void,
+  setTrackedPath: (path: Array<PathFrame> | null) => void,
+  startProfiling: (recordChangeDescriptions: boolean) => void,
+  stopProfiling: () => void,
+  storeAsGlobal: (
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ) => void,
+  updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
+  ...
+};
+
+export type Handler = (data: any) => void;
+
+export type DevToolsHook = {
+  listeners: {[key: string]: Array<Handler>, ...},
+  rendererInterfaces: Map<RendererID, RendererInterface>,
+  renderers: Map<RendererID, ReactRenderer>,
+
+  emit: (event: string, data: any) => void,
+  getFiberRoots: (rendererID: RendererID) => Set<Object>,
+  inject: (renderer: ReactRenderer) => number | null,
+  on: (event: string, handler: Handler) => void,
+  off: (event: string, handler: Handler) => void,
+  reactDevtoolsAgent?: ?Object,
+  sub: (event: string, handler: Handler) => () => void,
+
+  // Used by react-native-web and Flipper/Inspector
+  resolveRNStyle?: ResolveNativeStyle,
+  nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
+
+  // React uses these methods.
+  checkDCE: (fn: Function) => void,
+  onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,
+  onCommitFiberRoot: (
+    rendererID: RendererID,
+    fiber: Object,
+    // Added in v16.9 to support Profiler priority labels
+    commitPriority?: number,
+    // Added in v16.9 to support Fast Refresh
+    didError?: boolean,
+  ) => void,
+  ...
+};
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
new file mode 100644
index 0000000000000..c08daac1d7584
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -0,0 +1,86 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {copy} from 'clipboard-js';
+import {dehydrate} from '../hydration';
+
+import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+export function cleanForBridge(
+  data: Object | null,
+  isPathWhitelisted: (path: Array<string | number>) => boolean,
+  path?: Array<string | number> = [],
+): DehydratedData | null {
+  if (data !== null) {
+    const cleanedPaths = [];
+    const unserializablePaths = [];
+    const cleanedData = dehydrate(
+      data,
+      cleanedPaths,
+      unserializablePaths,
+      path,
+      isPathWhitelisted,
+    );
+
+    return {
+      data: cleanedData,
+      cleaned: cleanedPaths,
+      unserializable: unserializablePaths,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function copyToClipboard(value: any): void {
+  const safeToCopy = serializeToString(value);
+  const text = safeToCopy === undefined ? 'undefined' : safeToCopy;
+  const {clipboardCopyText} = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // On Firefox navigator.clipboard.writeText has to be called from
+  // the content script js code (because it requires the clipboardWrite
+  // permission to be allowed out of a "user handling" callback),
+  // clipboardCopyText is an helper injected into the page from.
+  // injectGlobalHook.
+  if (typeof clipboardCopyText === 'function') {
+    clipboardCopyText(text).catch(err => {});
+  } else {
+    copy(text);
+  }
+}
+
+export function copyWithSet(
+  obj: Object | Array<any>,
+  path: Array<string | number>,
+  value: any,
+  index: number = 0,
+): Object | Array<any> {
+  if (index >= path.length) {
+    return value;
+  }
+  const key = path[index];
+  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  // $FlowFixMe number or string is fine here
+  updated[key] = copyWithSet(obj[key], path, value, index + 1);
+  return updated;
+}
+
+export function serializeToString(data: any): string {
+  const cache = new Set();
+  // Use a custom replacer function to protect against circular references.
+  return JSON.stringify(data, (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (cache.has(value)) {
+        return;
+      }
+      cache.add(value);
+    }
+    return value;
+  });
+}
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
new file mode 100644
index 0000000000000..b547913cda46d
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Overlay from './Overlay';
+
+const SHOW_DURATION = 2000;
+
+let timeoutID: TimeoutID | null = null;
+let overlay: Overlay | null = null;
+
+export function hideOverlay() {
+  timeoutID = null;
+
+  if (overlay !== null) {
+    overlay.remove();
+    overlay = null;
+  }
+}
+
+export function showOverlay(
+  elements: Array<HTMLElement> | null,
+  componentName: string | null,
+  hideAfterTimeout: boolean,
+) {
+  // TODO (npm-packages) Detect RN and support it somehow
+  if (window.document == null) {
+    return;
+  }
+
+  if (timeoutID !== null) {
+    clearTimeout(timeoutID);
+  }
+
+  if (elements == null) {
+    return;
+  }
+
+  if (overlay === null) {
+    overlay = new Overlay();
+  }
+
+  overlay.inspect(elements, componentName);
+
+  if (hideAfterTimeout) {
+    timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
new file mode 100644
index 0000000000000..00c300e362ace
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -0,0 +1,330 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import assign from 'object-assign';
+import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
+
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
+import type {Rect} from '../utils';
+
+type Box = {|top: number, left: number, width: number, height: number|};
+
+// Note that the Overlay components are not affected by the active Theme,
+// because they highlight elements in the main Chrome window (outside of devtools).
+// The colors below were chosen to roughly match those used by Chrome devtools.
+
+class OverlayRect {
+  node: HTMLElement;
+  border: HTMLElement;
+  padding: HTMLElement;
+  content: HTMLElement;
+
+  constructor(doc: Document, container: HTMLElement) {
+    this.node = doc.createElement('div');
+    this.border = doc.createElement('div');
+    this.padding = doc.createElement('div');
+    this.content = doc.createElement('div');
+
+    this.border.style.borderColor = overlayStyles.border;
+    this.padding.style.borderColor = overlayStyles.padding;
+    this.content.style.backgroundColor = overlayStyles.background;
+
+    assign(this.node.style, {
+      borderColor: overlayStyles.margin,
+      pointerEvents: 'none',
+      position: 'fixed',
+    });
+
+    this.node.style.zIndex = '10000000';
+
+    this.node.appendChild(this.border);
+    this.border.appendChild(this.padding);
+    this.padding.appendChild(this.content);
+    container.appendChild(this.node);
+  }
+
+  remove() {
+    if (this.node.parentNode) {
+      this.node.parentNode.removeChild(this.node);
+    }
+  }
+
+  update(box: Rect, dims: any) {
+    boxWrap(dims, 'margin', this.node);
+    boxWrap(dims, 'border', this.border);
+    boxWrap(dims, 'padding', this.padding);
+
+    assign(this.content.style, {
+      height:
+        box.height -
+        dims.borderTop -
+        dims.borderBottom -
+        dims.paddingTop -
+        dims.paddingBottom +
+        'px',
+      width:
+        box.width -
+        dims.borderLeft -
+        dims.borderRight -
+        dims.paddingLeft -
+        dims.paddingRight +
+        'px',
+    });
+
+    assign(this.node.style, {
+      top: box.top - dims.marginTop + 'px',
+      left: box.left - dims.marginLeft + 'px',
+    });
+  }
+}
+
+class OverlayTip {
+  tip: HTMLElement;
+  nameSpan: HTMLElement;
+  dimSpan: HTMLElement;
+
+  constructor(doc: Document, container: HTMLElement) {
+    this.tip = doc.createElement('div');
+    assign(this.tip.style, {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      backgroundColor: '#333740',
+      borderRadius: '2px',
+      fontFamily:
+        '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+      fontWeight: 'bold',
+      padding: '3px 5px',
+      pointerEvents: 'none',
+      position: 'fixed',
+      fontSize: '12px',
+      whiteSpace: 'nowrap',
+    });
+
+    this.nameSpan = doc.createElement('span');
+    this.tip.appendChild(this.nameSpan);
+    assign(this.nameSpan.style, {
+      color: '#ee78e6',
+      borderRight: '1px solid #aaaaaa',
+      paddingRight: '0.5rem',
+      marginRight: '0.5rem',
+    });
+    this.dimSpan = doc.createElement('span');
+    this.tip.appendChild(this.dimSpan);
+    assign(this.dimSpan.style, {
+      color: '#d7d7d7',
+    });
+
+    this.tip.style.zIndex = '10000000';
+    container.appendChild(this.tip);
+  }
+
+  remove() {
+    if (this.tip.parentNode) {
+      this.tip.parentNode.removeChild(this.tip);
+    }
+  }
+
+  updateText(name: string, width: number, height: number) {
+    this.nameSpan.textContent = name;
+    this.dimSpan.textContent =
+      Math.round(width) + 'px × ' + Math.round(height) + 'px';
+  }
+
+  updatePosition(dims: Box, bounds: Box) {
+    const tipRect = this.tip.getBoundingClientRect();
+    const tipPos = findTipPos(dims, bounds, {
+      width: tipRect.width,
+      height: tipRect.height,
+    });
+    assign(this.tip.style, tipPos.style);
+  }
+}
+
+export default class Overlay {
+  window: window;
+  tipBoundsWindow: window;
+  container: HTMLElement;
+  tip: OverlayTip;
+  rects: Array<OverlayRect>;
+
+  constructor() {
+    // Find the root window, because overlays are positioned relative to it.
+    let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.window = currentWindow;
+
+    // When opened in shells/dev, the tooltip should be bound by the app iframe, not by the topmost window.
+    let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.tipBoundsWindow = tipBoundsWindow;
+
+    const doc = currentWindow.document;
+    this.container = doc.createElement('div');
+    this.container.style.zIndex = '10000000';
+
+    this.tip = new OverlayTip(doc, this.container);
+    this.rects = [];
+
+    doc.body.appendChild(this.container);
+  }
+
+  remove() {
+    this.tip.remove();
+    this.rects.forEach(rect => {
+      rect.remove();
+    });
+    this.rects.length = 0;
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+
+  inspect(nodes: Array<HTMLElement>, name?: ?string) {
+    // We can't get the size of text nodes or comment nodes. React as of v15
+    // heavily uses comment nodes to delimit text.
+    const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+    while (this.rects.length > elements.length) {
+      const rect = this.rects.pop();
+      rect.remove();
+    }
+    if (elements.length === 0) {
+      return;
+    }
+
+    while (this.rects.length < elements.length) {
+      this.rects.push(new OverlayRect(this.window.document, this.container));
+    }
+
+    const outerBox = {
+      top: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY,
+      left: Number.POSITIVE_INFINITY,
+    };
+    elements.forEach((element, index) => {
+      const box = getNestedBoundingClientRect(element, this.window);
+      const dims = getElementDimensions(element);
+
+      outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
+      outerBox.right = Math.max(
+        outerBox.right,
+        box.left + box.width + dims.marginRight,
+      );
+      outerBox.bottom = Math.max(
+        outerBox.bottom,
+        box.top + box.height + dims.marginBottom,
+      );
+      outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
+
+      const rect = this.rects[index];
+      rect.update(box, dims);
+    });
+
+    if (!name) {
+      name = elements[0].nodeName.toLowerCase();
+
+      const node = elements[0];
+      const hook: DevToolsHook =
+        node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      if (hook != null && hook.rendererInterfaces != null) {
+        let ownerName = null;
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const rendererInterface of hook.rendererInterfaces.values()) {
+          const id = rendererInterface.getFiberIDForNative(node, true);
+          if (id !== null) {
+            ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
+            break;
+          }
+        }
+
+        if (ownerName) {
+          name += ' (in ' + ownerName + ')';
+        }
+      }
+    }
+
+    this.tip.updateText(
+      name,
+      outerBox.right - outerBox.left,
+      outerBox.bottom - outerBox.top,
+    );
+    const tipBounds = getNestedBoundingClientRect(
+      this.tipBoundsWindow.document.documentElement,
+      this.window,
+    );
+
+    this.tip.updatePosition(
+      {
+        top: outerBox.top,
+        left: outerBox.left,
+        height: outerBox.bottom - outerBox.top,
+        width: outerBox.right - outerBox.left,
+      },
+      {
+        top: tipBounds.top + this.tipBoundsWindow.scrollY,
+        left: tipBounds.left + this.tipBoundsWindow.scrollX,
+        height: this.tipBoundsWindow.innerHeight,
+        width: this.tipBoundsWindow.innerWidth,
+      },
+    );
+  }
+}
+
+function findTipPos(dims, bounds, tipSize) {
+  const tipHeight = Math.max(tipSize.height, 20);
+  const tipWidth = Math.max(tipSize.width, 60);
+  const margin = 5;
+
+  let top;
+  if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {
+    if (dims.top + dims.height < bounds.top + 0) {
+      top = bounds.top + margin;
+    } else {
+      top = dims.top + dims.height + margin;
+    }
+  } else if (dims.top - tipHeight <= bounds.top + bounds.height) {
+    if (dims.top - tipHeight - margin < bounds.top + margin) {
+      top = bounds.top + margin;
+    } else {
+      top = dims.top - tipHeight - margin;
+    }
+  } else {
+    top = bounds.top + bounds.height - tipHeight - margin;
+  }
+
+  let left = dims.left + margin;
+  if (dims.left < bounds.left) {
+    left = bounds.left + margin;
+  }
+  if (dims.left + tipWidth > bounds.left + bounds.width) {
+    left = bounds.left + bounds.width - tipWidth - margin;
+  }
+
+  top += 'px';
+  left += 'px';
+  return {
+    style: {top, left},
+  };
+}
+
+function boxWrap(dims, what, node) {
+  assign(node.style, {
+    borderTopWidth: dims[what + 'Top'] + 'px',
+    borderLeftWidth: dims[what + 'Left'] + 'px',
+    borderRightWidth: dims[what + 'Right'] + 'px',
+    borderBottomWidth: dims[what + 'Bottom'] + 'px',
+    borderStyle: 'solid',
+  });
+}
+
+const overlayStyles = {
+  background: 'rgba(120, 170, 210, 0.7)',
+  padding: 'rgba(77, 200, 0, 0.3)',
+  margin: 'rgba(255, 155, 0, 0.3)',
+  border: 'rgba(255, 200, 50, 0.3)',
+};
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
new file mode 100644
index 0000000000000..bfd9c7c230337
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -0,0 +1,196 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import memoize from 'memoize-one';
+import throttle from 'lodash.throttle';
+import Agent from 'react-devtools-shared/src/backend/agent';
+import {hideOverlay, showOverlay} from './Highlighter';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+
+// This plug-in provides in-page highlighting of the selected element.
+// It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
+// It is not currently the mechanism used to highlight React Native views.
+// That is done by the React Native Inspector component.
+
+let iframesListeningTo: Set<HTMLIFrameElement> = new Set();
+
+export default function setupHighlighter(
+  bridge: BackendBridge,
+  agent: Agent,
+): void {
+  bridge.addListener(
+    'clearNativeElementHighlight',
+    clearNativeElementHighlight,
+  );
+  bridge.addListener('highlightNativeElement', highlightNativeElement);
+  bridge.addListener('shutdown', stopInspectingNative);
+  bridge.addListener('startInspectingNative', startInspectingNative);
+  bridge.addListener('stopInspectingNative', stopInspectingNative);
+
+  function startInspectingNative() {
+    registerListenersOnWindow(window);
+  }
+
+  function registerListenersOnWindow(window) {
+    // This plug-in may run in non-DOM environments (e.g. React Native).
+    if (window && typeof window.addEventListener === 'function') {
+      window.addEventListener('click', onClick, true);
+      window.addEventListener('mousedown', onMouseEvent, true);
+      window.addEventListener('mouseover', onMouseEvent, true);
+      window.addEventListener('mouseup', onMouseEvent, true);
+      window.addEventListener('pointerdown', onPointerDown, true);
+      window.addEventListener('pointerover', onPointerOver, true);
+      window.addEventListener('pointerup', onPointerUp, true);
+    }
+  }
+
+  function stopInspectingNative() {
+    hideOverlay();
+    removeListenersOnWindow(window);
+    iframesListeningTo.forEach(function(frame) {
+      try {
+        removeListenersOnWindow(frame.contentWindow);
+      } catch (error) {
+        // This can error when the iframe is on a cross-origin.
+      }
+    });
+    iframesListeningTo = new Set();
+  }
+
+  function removeListenersOnWindow(window) {
+    // This plug-in may run in non-DOM environments (e.g. React Native).
+    if (window && typeof window.removeEventListener === 'function') {
+      window.removeEventListener('click', onClick, true);
+      window.removeEventListener('mousedown', onMouseEvent, true);
+      window.removeEventListener('mouseover', onMouseEvent, true);
+      window.removeEventListener('mouseup', onMouseEvent, true);
+      window.removeEventListener('pointerdown', onPointerDown, true);
+      window.removeEventListener('pointerover', onPointerOver, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+    }
+  }
+
+  function clearNativeElementHighlight() {
+    hideOverlay();
+  }
+
+  function highlightNativeElement({
+    displayName,
+    hideAfterTimeout,
+    id,
+    openNativeElementsPanel,
+    rendererID,
+    scrollIntoView,
+  }: {
+    displayName: string | null,
+    hideAfterTimeout: boolean,
+    id: number,
+    openNativeElementsPanel: boolean,
+    rendererID: number,
+    scrollIntoView: boolean,
+    ...
+  }) {
+    const renderer = agent.rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    }
+
+    let nodes: ?Array<HTMLElement> = null;
+    if (renderer !== null) {
+      nodes = ((renderer.findNativeNodesForFiberID(
+        id,
+      ): any): ?Array<HTMLElement>);
+    }
+
+    if (nodes != null && nodes[0] != null) {
+      const node = nodes[0];
+      if (scrollIntoView && typeof node.scrollIntoView === 'function') {
+        // If the node isn't visible show it before highlighting it.
+        // We may want to reconsider this; it might be a little disruptive.
+        // $FlowFixMe Flow only knows about 'start' | 'end'
+        node.scrollIntoView({block: 'nearest', inline: 'nearest'});
+      }
+
+      showOverlay(nodes, displayName, hideAfterTimeout);
+
+      if (openNativeElementsPanel) {
+        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        bridge.send('syncSelectionToNativeElementsPanel');
+      }
+    } else {
+      hideOverlay();
+    }
+  }
+
+  function onClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    stopInspectingNative();
+
+    bridge.send('stopInspectingNative', true);
+  }
+
+  function onMouseEvent(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function onPointerDown(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    selectFiberForNode(((event.target: any): HTMLElement));
+  }
+
+  function onPointerOver(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = ((event.target: any): HTMLElement);
+
+    if (target.tagName === 'IFRAME') {
+      const iframe: HTMLIFrameElement = (target: any);
+      try {
+        if (!iframesListeningTo.has(iframe)) {
+          const window = iframe.contentWindow;
+          registerListenersOnWindow(window);
+          iframesListeningTo.add(iframe);
+        }
+      } catch (error) {
+        // This can error when the iframe is on a cross-origin.
+      }
+    }
+
+    // Don't pass the name explicitly.
+    // It will be inferred from DOM tag and Fiber owner.
+    showOverlay([target], null, false);
+
+    selectFiberForNode(target);
+  }
+
+  function onPointerUp(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  const selectFiberForNode = throttle(
+    memoize((node: HTMLElement) => {
+      const id = agent.getIDForNode(node);
+      if (id !== null) {
+        bridge.send('selectFiber', id);
+      }
+    }),
+    200,
+    // Don't change the selection in the very first 200ms
+    // because those are usually unintentional as you lift the cursor.
+    {leading: false},
+  );
+}
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
new file mode 100644
index 0000000000000..4acdbef21a4e4
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
@@ -0,0 +1,107 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Data} from './index';
+import type {Rect} from '../utils';
+import type {NativeType} from '../../types';
+
+const OUTLINE_COLOR = '#f0f0f0';
+
+// Note these colors are in sync with DevTools Profiler chart colors.
+const COLORS = [
+  '#37afa9',
+  '#63b19e',
+  '#80b393',
+  '#97b488',
+  '#abb67d',
+  '#beb771',
+  '#cfb965',
+  '#dfba57',
+  '#efbb49',
+  '#febc38',
+];
+
+let canvas: HTMLCanvasElement | null = null;
+
+export function draw(nodeToData: Map<NativeType, Data>): void {
+  if (canvas === null) {
+    initialize();
+  }
+
+  const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);
+  canvasFlow.width = window.screen.availWidth;
+  canvasFlow.height = window.screen.availHeight;
+
+  const context = canvasFlow.getContext('2d');
+  context.clearRect(0, 0, canvasFlow.width, canvasFlow.height);
+
+  nodeToData.forEach(({count, rect}) => {
+    if (rect !== null) {
+      const colorIndex = Math.min(COLORS.length - 1, count - 1);
+      const color = COLORS[colorIndex];
+
+      drawBorder(context, rect, color);
+    }
+  });
+}
+
+function drawBorder(
+  context: CanvasRenderingContext2D,
+  rect: Rect,
+  color: string,
+): void {
+  const {height, left, top, width} = rect;
+
+  // outline
+  context.lineWidth = 1;
+  context.strokeStyle = OUTLINE_COLOR;
+
+  context.strokeRect(left - 1, top - 1, width + 2, height + 2);
+
+  // inset
+  context.lineWidth = 1;
+  context.strokeStyle = OUTLINE_COLOR;
+  context.strokeRect(left + 1, top + 1, width - 1, height - 1);
+  context.strokeStyle = color;
+
+  context.setLineDash([0]);
+
+  // border
+  context.lineWidth = 1;
+  context.strokeRect(left, top, width - 1, height - 1);
+
+  context.setLineDash([0]);
+}
+
+export function destroy(): void {
+  if (canvas !== null) {
+    if (canvas.parentNode != null) {
+      canvas.parentNode.removeChild(canvas);
+    }
+    canvas = null;
+  }
+}
+
+function initialize(): void {
+  canvas = window.document.createElement('canvas');
+  canvas.style.cssText = `
+    xx-background-color: red;
+    xx-opacity: 0.5;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000000000;
+  `;
+
+  const root = window.document.documentElement;
+  root.insertBefore(canvas, root.firstChild);
+}
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
new file mode 100644
index 0000000000000..1861b7d155e12
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -0,0 +1,141 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Agent from 'react-devtools-shared/src/backend/agent';
+import {destroy as destroyCanvas, draw} from './canvas';
+import {getNestedBoundingClientRect} from '../utils';
+
+import type {NativeType} from '../../types';
+import type {Rect} from '../utils';
+
+// How long the rect should be shown for?
+const DISPLAY_DURATION = 250;
+
+// What's the longest we are willing to show the overlay for?
+// This can be important if we're getting a flurry of events (e.g. scroll update).
+const MAX_DISPLAY_DURATION = 3000;
+
+// How long should a rect be considered valid for?
+const REMEASUREMENT_AFTER_DURATION = 250;
+
+// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+const getCurrentTime =
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
+export type Data = {|
+  count: number,
+  expirationTime: number,
+  lastMeasuredAt: number,
+  rect: Rect | null,
+|};
+
+const nodeToData: Map<NativeType, Data> = new Map();
+
+let agent: Agent = ((null: any): Agent);
+let drawAnimationFrameID: AnimationFrameID | null = null;
+let isEnabled: boolean = false;
+let redrawTimeoutID: TimeoutID | null = null;
+
+export function initialize(injectedAgent: Agent): void {
+  agent = injectedAgent;
+  agent.addListener('traceUpdates', traceUpdates);
+}
+
+export function toggleEnabled(value: boolean): void {
+  isEnabled = value;
+
+  if (!isEnabled) {
+    nodeToData.clear();
+
+    if (drawAnimationFrameID !== null) {
+      cancelAnimationFrame(drawAnimationFrameID);
+      drawAnimationFrameID = null;
+    }
+
+    if (redrawTimeoutID !== null) {
+      clearTimeout(redrawTimeoutID);
+      redrawTimeoutID = null;
+    }
+
+    destroyCanvas();
+  }
+}
+
+function traceUpdates(nodes: Set<NativeType>): void {
+  if (!isEnabled) {
+    return;
+  }
+
+  nodes.forEach(node => {
+    const data = nodeToData.get(node);
+    const now = getCurrentTime();
+
+    let lastMeasuredAt = data != null ? data.lastMeasuredAt : 0;
+    let rect = data != null ? data.rect : null;
+    if (rect === null || lastMeasuredAt + REMEASUREMENT_AFTER_DURATION < now) {
+      lastMeasuredAt = now;
+      rect = measureNode(node);
+    }
+
+    nodeToData.set(node, {
+      count: data != null ? data.count + 1 : 1,
+      expirationTime:
+        data != null
+          ? Math.min(
+              now + MAX_DISPLAY_DURATION,
+              data.expirationTime + DISPLAY_DURATION,
+            )
+          : now + DISPLAY_DURATION,
+      lastMeasuredAt,
+      rect,
+    });
+  });
+
+  if (redrawTimeoutID !== null) {
+    clearTimeout(redrawTimeoutID);
+    redrawTimeoutID = null;
+  }
+
+  if (drawAnimationFrameID === null) {
+    drawAnimationFrameID = requestAnimationFrame(prepareToDraw);
+  }
+}
+
+function prepareToDraw(): void {
+  drawAnimationFrameID = null;
+  redrawTimeoutID = null;
+
+  const now = getCurrentTime();
+  let earliestExpiration = Number.MAX_VALUE;
+
+  // Remove any items that have already expired.
+  nodeToData.forEach((data, node) => {
+    if (data.expirationTime < now) {
+      nodeToData.delete(node);
+    } else {
+      earliestExpiration = Math.min(earliestExpiration, data.expirationTime);
+    }
+  });
+
+  draw(nodeToData);
+
+  redrawTimeoutID = setTimeout(prepareToDraw, earliestExpiration - now);
+}
+
+function measureNode(node: Object): Rect | null {
+  if (!node || typeof node.getBoundingClientRect !== 'function') {
+    return null;
+  }
+
+  let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+
+  return getNestedBoundingClientRect(node, currentWindow);
+}
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
new file mode 100644
index 0000000000000..e332c81a0af86
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -0,0 +1,128 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type Rect = {
+  bottom: number,
+  height: number,
+  left: number,
+  right: number,
+  top: number,
+  width: number,
+  ...
+};
+
+// Get the window object for the document that a node belongs to,
+// or return null if it cannot be found (node not attached to DOM,
+// etc).
+export function getOwnerWindow(node: HTMLElement): typeof window | null {
+  if (!node.ownerDocument) {
+    return null;
+  }
+  return node.ownerDocument.defaultView;
+}
+
+// Get the iframe containing a node, or return null if it cannot
+// be found (node not within iframe, etc).
+export function getOwnerIframe(node: HTMLElement): HTMLElement | null {
+  const nodeWindow = getOwnerWindow(node);
+  if (nodeWindow) {
+    return nodeWindow.frameElement;
+  }
+  return null;
+}
+
+// Get a bounding client rect for a node, with an
+// offset added to compensate for its border.
+export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
+  const dimensions = getElementDimensions(node);
+  return mergeRectOffsets([
+    node.getBoundingClientRect(),
+    {
+      top: dimensions.borderTop,
+      left: dimensions.borderLeft,
+      bottom: dimensions.borderBottom,
+      right: dimensions.borderRight,
+      // This width and height won't get used by mergeRectOffsets (since this
+      // is not the first rect in the array), but we set them so that this
+      // object typechecks as a ClientRect.
+      width: 0,
+      height: 0,
+    },
+  ]);
+}
+
+// Add together the top, left, bottom, and right properties of
+// each ClientRect, but keep the width and height of the first one.
+export function mergeRectOffsets(rects: Array<Rect>): Rect {
+  return rects.reduce((previousRect, rect) => {
+    if (previousRect == null) {
+      return rect;
+    }
+
+    return {
+      top: previousRect.top + rect.top,
+      left: previousRect.left + rect.left,
+      width: previousRect.width,
+      height: previousRect.height,
+      bottom: previousRect.bottom + rect.bottom,
+      right: previousRect.right + rect.right,
+    };
+  });
+}
+
+// Calculate a boundingClientRect for a node relative to boundaryWindow,
+// taking into account any offsets caused by intermediate iframes.
+export function getNestedBoundingClientRect(
+  node: HTMLElement,
+  boundaryWindow: typeof window,
+): Rect {
+  const ownerIframe = getOwnerIframe(node);
+  if (ownerIframe && ownerIframe !== boundaryWindow) {
+    const rects = [node.getBoundingClientRect()];
+    let currentIframe = ownerIframe;
+    let onlyOneMore = false;
+    while (currentIframe) {
+      const rect = getBoundingClientRectWithBorderOffset(currentIframe);
+      rects.push(rect);
+      currentIframe = getOwnerIframe(currentIframe);
+
+      if (onlyOneMore) {
+        break;
+      }
+      // We don't want to calculate iframe offsets upwards beyond
+      // the iframe containing the boundaryWindow, but we
+      // need to calculate the offset relative to the boundaryWindow.
+      if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {
+        onlyOneMore = true;
+      }
+    }
+
+    return mergeRectOffsets(rects);
+  } else {
+    return node.getBoundingClientRect();
+  }
+}
+
+export function getElementDimensions(domElement: Element) {
+  const calculatedStyle = window.getComputedStyle(domElement);
+  return {
+    borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),
+    borderRight: parseInt(calculatedStyle.borderRightWidth, 10),
+    borderTop: parseInt(calculatedStyle.borderTopWidth, 10),
+    borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),
+    marginLeft: parseInt(calculatedStyle.marginLeft, 10),
+    marginRight: parseInt(calculatedStyle.marginRight, 10),
+    marginTop: parseInt(calculatedStyle.marginTop, 10),
+    marginBottom: parseInt(calculatedStyle.marginBottom, 10),
+    paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),
+    paddingRight: parseInt(calculatedStyle.paddingRight, 10),
+    paddingTop: parseInt(calculatedStyle.paddingTop, 10),
+    paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),
+  };
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
new file mode 100644
index 0000000000000..7bdc37971ee37
--- /dev/null
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -0,0 +1,270 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import EventEmitter from 'events';
+
+import type {ComponentFilter, Wall} from './types';
+import type {
+  InspectedElementPayload,
+  OwnersList,
+  ProfilingDataBackend,
+  RendererID,
+} from 'react-devtools-shared/src/backend/types';
+import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+
+const BATCH_DURATION = 100;
+
+type ElementAndRendererID = {|id: number, rendererID: RendererID|};
+
+type Message = {|
+  event: string,
+  payload: any,
+|};
+
+type HighlightElementInDOM = {|
+  ...ElementAndRendererID,
+  displayName: string | null,
+  hideAfterTimeout: boolean,
+  openNativeElementsPanel: boolean,
+  scrollIntoView: boolean,
+|};
+
+type OverrideValue = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+  value: any,
+|};
+
+type OverrideHookState = {|
+  ...OverrideValue,
+  hookID: number,
+|};
+
+type OverrideSuspense = {|
+  ...ElementAndRendererID,
+  forceFallback: boolean,
+|};
+
+type CopyElementPathParams = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+|};
+
+type ViewAttributeSourceParams = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+|};
+
+type InspectElementParams = {|
+  ...ElementAndRendererID,
+  path?: Array<string | number>,
+|};
+
+type StoreAsGlobalParams = {|
+  ...ElementAndRendererID,
+  count: number,
+  path: Array<string | number>,
+|};
+
+type NativeStyleEditor_RenameAttributeParams = {|
+  ...ElementAndRendererID,
+  oldName: string,
+  newName: string,
+  value: string,
+|};
+
+type NativeStyleEditor_SetValueParams = {|
+  ...ElementAndRendererID,
+  name: string,
+  value: string,
+|};
+
+type BackendEvents = {|
+  extensionBackendInitialized: [],
+  inspectedElement: [InspectedElementPayload],
+  isBackendStorageAPISupported: [boolean],
+  operations: [Array<number>],
+  ownersList: [OwnersList],
+  overrideComponentFilters: [Array<ComponentFilter>],
+  profilingData: [ProfilingDataBackend],
+  profilingStatus: [boolean],
+  reloadAppForProfiling: [],
+  selectFiber: [number],
+  shutdown: [],
+  stopInspectingNative: [boolean],
+  syncSelectionFromNativeElementsPanel: [],
+  syncSelectionToNativeElementsPanel: [],
+  unsupportedRendererVersion: [RendererID],
+
+  // React Native style editor plug-in.
+  isNativeStyleEditorSupported: [
+    {|isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>|},
+  ],
+  NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+|};
+
+type FrontendEvents = {|
+  clearNativeElementHighlight: [],
+  copyElementPath: [CopyElementPathParams],
+  getOwnersList: [ElementAndRendererID],
+  getProfilingData: [{|rendererID: RendererID|}],
+  getProfilingStatus: [],
+  highlightNativeElement: [HighlightElementInDOM],
+  inspectElement: [InspectElementParams],
+  logElementToConsole: [ElementAndRendererID],
+  overrideContext: [OverrideValue],
+  overrideHookState: [OverrideHookState],
+  overrideProps: [OverrideValue],
+  overrideState: [OverrideValue],
+  overrideSuspense: [OverrideSuspense],
+  profilingData: [ProfilingDataBackend],
+  reloadAndProfile: [boolean],
+  selectFiber: [number],
+  setTraceUpdatesEnabled: [boolean],
+  shutdown: [],
+  startInspectingNative: [],
+  startProfiling: [boolean],
+  stopInspectingNative: [boolean],
+  stopProfiling: [],
+  storeAsGlobal: [StoreAsGlobalParams],
+  updateAppendComponentStack: [boolean],
+  updateComponentFilters: [Array<ComponentFilter>],
+  viewAttributeSource: [ViewAttributeSourceParams],
+  viewElementSource: [ElementAndRendererID],
+
+  // React Native style editor plug-in.
+  NativeStyleEditor_measure: [ElementAndRendererID],
+  NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],
+  NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],
+|};
+
+class Bridge<
+  OutgoingEvents: Object,
+  IncomingEvents: Object,
+> extends EventEmitter<{|
+  ...IncomingEvents,
+  ...OutgoingEvents,
+|}> {
+  _isShutdown: boolean = false;
+  _messageQueue: Array<any> = [];
+  _timeoutID: TimeoutID | null = null;
+  _wall: Wall;
+  _wallUnlisten: Function | null = null;
+
+  constructor(wall: Wall) {
+    super();
+
+    this._wall = wall;
+
+    this._wallUnlisten =
+      wall.listen((message: Message) => {
+        (this: any).emit(message.event, message.payload);
+      }) || null;
+  }
+
+  // Listening directly to the wall isn't advised.
+  // It can be used to listen for legacy (v3) messages (since they use a different format).
+  get wall(): Wall {
+    return this._wall;
+  }
+
+  send<EventName: $Keys<OutgoingEvents>>(
+    event: EventName,
+    ...payload: $ElementType<OutgoingEvents, EventName>
+  ) {
+    if (this._isShutdown) {
+      console.warn(
+        `Cannot send message "${event}" through a Bridge that has been shutdown.`,
+      );
+      return;
+    }
+
+    // When we receive a message:
+    // - we add it to our queue of messages to be sent
+    // - if there hasn't been a message recently, we set a timer for 0 ms in
+    //   the future, allowing all messages created in the same tick to be sent
+    //   together
+    // - if there *has* been a message flushed in the last BATCH_DURATION ms
+    //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
+    //   be set, and we'll simply add to the queue and wait for that
+    this._messageQueue.push(event, payload);
+    if (!this._timeoutID) {
+      this._timeoutID = setTimeout(this._flush, 0);
+    }
+  }
+
+  shutdown() {
+    if (this._isShutdown) {
+      console.warn('Bridge was already shutdown.');
+      return;
+    }
+
+    // Queue the shutdown outgoing message for subscribers.
+    this.send('shutdown');
+
+    // Mark this bridge as destroyed, i.e. disable its public API.
+    this._isShutdown = true;
+
+    // Disable the API inherited from EventEmitter that can add more listeners and send more messages.
+    // $FlowFixMe This property is not writable.
+    this.addListener = function() {};
+    // $FlowFixMe This property is not writable.
+    this.emit = function() {};
+    // NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.
+
+    // Unsubscribe this bridge incoming message listeners to be sure, and so they don't have to do that.
+    this.removeAllListeners();
+
+    // Stop accepting and emitting incoming messages from the wall.
+    const wallUnlisten = this._wallUnlisten;
+    if (wallUnlisten) {
+      wallUnlisten();
+    }
+
+    // Synchronously flush all queued outgoing messages.
+    // At this step the subscribers' code may run in this call stack.
+    do {
+      this._flush();
+    } while (this._messageQueue.length);
+
+    // Make sure once again that there is no dangling timer.
+    if (this._timeoutID !== null) {
+      clearTimeout(this._timeoutID);
+      this._timeoutID = null;
+    }
+  }
+
+  _flush = () => {
+    // This method is used after the bridge is marked as destroyed in shutdown sequence,
+    // so we do not bail out if the bridge marked as destroyed.
+    // It is a private method that the bridge ensures is only called at the right times.
+
+    if (this._timeoutID !== null) {
+      clearTimeout(this._timeoutID);
+      this._timeoutID = null;
+    }
+
+    if (this._messageQueue.length) {
+      for (let i = 0; i < this._messageQueue.length; i += 2) {
+        this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);
+      }
+      this._messageQueue.length = 0;
+
+      // Check again for queued messages in BATCH_DURATION ms. This will keep
+      // flushing in a loop as long as messages continue to be added. Once no
+      // more are, the timer expires.
+      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
+    }
+  };
+}
+
+export type BackendBridge = Bridge<BackendEvents, FrontendEvents>;
+export type FrontendBridge = Bridge<FrontendEvents, BackendEvents>;
+
+export default Bridge;
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
new file mode 100644
index 0000000000000..e6e2a8ad35382
--- /dev/null
+++ b/packages/react-devtools-shared/src/constants.js
@@ -0,0 +1,73 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// Flip this flag to true to enable verbose console debug logging.
+export const __DEBUG__ = false;
+
+export const TREE_OPERATION_ADD = 1;
+export const TREE_OPERATION_REMOVE = 2;
+export const TREE_OPERATION_REORDER_CHILDREN = 3;
+export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
+
+export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
+  'React::DevTools::componentFilters';
+
+export const SESSION_STORAGE_LAST_SELECTION_KEY =
+  'React::DevTools::lastSelection';
+
+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
+  'React::DevTools::recordChangeDescriptions';
+
+export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
+  'React::DevTools::reloadAndProfile';
+
+export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
+  'React::DevTools::appendComponentStack';
+
+export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
+  'React::DevTools::traceUpdatesEnabled';
+
+export const PROFILER_EXPORT_VERSION = 4;
+
+export const CHANGE_LOG_URL =
+  'https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md';
+
+export const UNSUPPORTED_VERSION_URL =
+  'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
+
+// HACK
+//
+// Extracting during build time avoids a temporarily invalid state for the inline target.
+// Sometimes the inline target is rendered before root styles are applied,
+// which would result in e.g. NaN itemSize being passed to react-window list.
+//
+let COMFORTABLE_LINE_HEIGHT;
+let COMPACT_LINE_HEIGHT;
+
+try {
+  // $FlowFixMe
+  const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
+    .default;
+
+  const extractVar = varName => {
+    const regExp = new RegExp(`${varName}: ([0-9]+)`);
+    const match = rawStyleString.match(regExp);
+    return parseInt(match[1], 10);
+  };
+
+  COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
+  COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
+} catch (error) {
+  // We can't use the Webpack loader syntax in the context of Jest,
+  // so tests need some reasonably meaningful fallback value.
+  COMFORTABLE_LINE_HEIGHT = 15;
+  COMPACT_LINE_HEIGHT = 10;
+}
+
+export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
new file mode 100644
index 0000000000000..20af7c096f059
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
@@ -0,0 +1,7 @@
+.ContextMenu {
+  position: absolute;
+  background-color: var(--color-context-background);
+  border-radius: 0.25rem;
+  overflow: hidden;
+  z-index: 10000002;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
new file mode 100644
index 0000000000000..891d24c0518b5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -0,0 +1,131 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+import {RegistryContext} from './Contexts';
+
+import styles from './ContextMenu.css';
+
+function respositionToFit(element: HTMLElement, pageX: number, pageY: number) {
+  const ownerWindow = element.ownerDocument.defaultView;
+  if (element !== null) {
+    if (pageY + element.offsetHeight >= ownerWindow.innerHeight) {
+      if (pageY - element.offsetHeight > 0) {
+        element.style.top = `${pageY - element.offsetHeight}px`;
+      } else {
+        element.style.top = '0px';
+      }
+    } else {
+      element.style.top = `${pageY}px`;
+    }
+
+    if (pageX + element.offsetWidth >= ownerWindow.innerWidth) {
+      if (pageX - element.offsetWidth > 0) {
+        element.style.left = `${pageX - element.offsetWidth}px`;
+      } else {
+        element.style.left = '0px';
+      }
+    } else {
+      element.style.left = `${pageX}px`;
+    }
+  }
+}
+
+const HIDDEN_STATE = {
+  data: null,
+  isVisible: false,
+  pageX: 0,
+  pageY: 0,
+};
+
+type Props = {|
+  children: (data: Object) => React$Node,
+  id: string,
+|};
+
+export default function ContextMenu({children, id}: Props) {
+  const {registerMenu} = useContext(RegistryContext);
+
+  const [state, setState] = useState(HIDDEN_STATE);
+
+  const bodyAccessorRef = useRef(null);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const ownerDocument = bodyAccessorRef.current.ownerDocument;
+    containerRef.current = ownerDocument.createElement('div');
+    ownerDocument.body.appendChild(containerRef.current);
+    return () => {
+      ownerDocument.body.removeChild(containerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    const showMenu = ({data, pageX, pageY}) => {
+      setState({data, isVisible: true, pageX, pageY});
+    };
+    const hideMenu = () => setState(HIDDEN_STATE);
+    return registerMenu(id, showMenu, hideMenu);
+  }, [id]);
+
+  useLayoutEffect(() => {
+    if (!state.isVisible) {
+      return;
+    }
+
+    const menu = menuRef.current;
+
+    const hideUnlessContains = event => {
+      if (!menu.contains(event.target)) {
+        setState(HIDDEN_STATE);
+      }
+    };
+
+    const hide = event => {
+      setState(HIDDEN_STATE);
+    };
+
+    const ownerDocument = containerRef.current.ownerDocument;
+    ownerDocument.addEventListener('mousedown', hideUnlessContains);
+    ownerDocument.addEventListener('touchstart', hideUnlessContains);
+    ownerDocument.addEventListener('keydown', hideUnlessContains);
+
+    const ownerWindow = ownerDocument.defaultView;
+    ownerWindow.addEventListener('resize', hide);
+
+    respositionToFit(menu, state.pageX, state.pageY);
+
+    return () => {
+      ownerDocument.removeEventListener('mousedown', hideUnlessContains);
+      ownerDocument.removeEventListener('touchstart', hideUnlessContains);
+      ownerDocument.removeEventListener('keydown', hideUnlessContains);
+
+      ownerWindow.removeEventListener('resize', hide);
+    };
+  }, [state]);
+
+  if (!state.isVisible) {
+    return <div ref={bodyAccessorRef} />;
+  } else {
+    return createPortal(
+      <div ref={menuRef} className={styles.ContextMenu}>
+        {children(state.data)}
+      </div>,
+      containerRef.current,
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css
new file mode 100644
index 0000000000000..1b36ea76c0142
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css
@@ -0,0 +1,22 @@
+.ContextMenuItem {
+  display: flex;
+  align-items: center;
+  color: var(--color-context-text);
+  padding: 0.5rem 0.75rem;
+  cursor: default;
+  border-top: 1px solid var(--color-context-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+}
+.ContextMenuItem:first-of-type {
+  border-top: none;
+}
+.ContextMenuItem:hover,
+.ContextMenuItem:focus {
+  outline: 0;
+  background-color: var(--color-context-background-hover);
+}
+.ContextMenuItem:active {
+  background-color: var(--color-context-background-selected);
+  color: var(--color-context-text-selected);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
new file mode 100644
index 0000000000000..ddfa61171b23d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext} from 'react';
+import {RegistryContext} from './Contexts';
+
+import styles from './ContextMenuItem.css';
+
+type Props = {|
+  children: React$Node,
+  onClick: () => void,
+  title: string,
+|};
+
+export default function ContextMenuItem({children, onClick, title}: Props) {
+  const {hideMenu} = useContext(RegistryContext);
+
+  const handleClick = event => {
+    onClick();
+    hideMenu();
+  };
+
+  return (
+    <div
+      className={styles.ContextMenuItem}
+      onClick={handleClick}
+      onTouchEnd={handleClick}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
new file mode 100644
index 0000000000000..9cf99a3d6adaf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {createContext} from 'react';
+
+export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void;
+export type HideFn = () => void;
+
+const idToShowFnMap = new Map<string, ShowFn>();
+const idToHideFnMap = new Map<string, HideFn>();
+
+let currentHideFn = null;
+
+function hideMenu() {
+  if (typeof currentHideFn === 'function') {
+    currentHideFn();
+  }
+}
+
+function showMenu({
+  data,
+  id,
+  pageX,
+  pageY,
+}: {|
+  data: Object,
+  id: string,
+  pageX: number,
+  pageY: number,
+|}) {
+  const showFn = idToShowFnMap.get(id);
+  if (typeof showFn === 'function') {
+    currentHideFn = idToHideFnMap.get(id);
+    showFn({data, pageX, pageY});
+  }
+}
+
+function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
+  if (idToShowFnMap.has(id)) {
+    throw Error(`Context menu with id "${id}" already registered.`);
+  }
+
+  idToShowFnMap.set(id, showFn);
+  idToHideFnMap.set(id, hideFn);
+
+  return function unregisterMenu() {
+    idToShowFnMap.delete(id);
+    idToHideFnMap.delete(id);
+  };
+}
+
+export const RegistryContext = createContext({
+  hideMenu,
+  showMenu,
+  registerMenu,
+});
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
new file mode 100644
index 0000000000000..1639befc76bb9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {useContext, useEffect} from 'react';
+import {RegistryContext} from './Contexts';
+
+import type {ElementRef} from 'react';
+
+export default function useContextMenu({
+  data,
+  id,
+  ref,
+}: {|
+  data: Object,
+  id: string,
+  ref: ElementRef<HTMLElement>,
+|}) {
+  const {showMenu} = useContext(RegistryContext);
+
+  useEffect(() => {
+    if (ref.current !== null) {
+      const handleContextMenu = event => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const pageX = event.pageX || (event.touches && event.touches[0].pageX);
+        const pageY = event.pageY || (event.touches && event.touches[0].pageY);
+
+        showMenu({data, id, pageX, pageY});
+      };
+
+      const trigger = ref.current;
+      trigger.addEventListener('contextmenu', handleContextMenu);
+
+      return () => {
+        trigger.removeEventListener('contextmenu', handleContextMenu);
+      };
+    }
+  }, [data, id, showMenu]);
+}
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
new file mode 100644
index 0000000000000..76f58823bef3a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -0,0 +1,347 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import EventEmitter from 'events';
+import {prepareProfilingDataFrontendFromBackendAndStore} from './views/Profiler/utils';
+import ProfilingCache from './ProfilingCache';
+import Store from './store';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
+import type {
+  CommitDataFrontend,
+  ProfilingDataForRootFrontend,
+  ProfilingDataFrontend,
+  SnapshotNode,
+} from './views/Profiler/types';
+
+export default class ProfilerStore extends EventEmitter<{|
+  isProcessingData: [],
+  isProfiling: [],
+  profilingData: [],
+|}> {
+  _bridge: FrontendBridge;
+
+  // Suspense cache for lazily calculating derived profiling data.
+  _cache: ProfilingCache;
+
+  // Temporary store of profiling data from the backend renderer(s).
+  // This data will be converted to the ProfilingDataFrontend format after being collected from all renderers.
+  _dataBackends: Array<ProfilingDataBackend> = [];
+
+  // Data from the most recently completed profiling session,
+  // or data that has been imported from a previously exported session.
+  // This object contains all necessary data to drive the Profiler UI interface,
+  // even though some of it is lazily parsed/derived via the ProfilingCache.
+  _dataFrontend: ProfilingDataFrontend | null = null;
+
+  // Snapshot of all attached renderer IDs.
+  // Once profiling is finished, this snapshot will be used to query renderers for profiling data.
+  //
+  // This map is initialized when profiling starts and updated when a new root is added while profiling;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _initialRendererIDs: Set<number> = new Set();
+
+  // Snapshot of the state of the main Store (including all roots) when profiling started.
+  // Once profiling is finished, this snapshot can be used along with "operations" messages emitted during profiling,
+  // to reconstruct the state of each root for each commit.
+  // It's okay to use a single root to store this information because node IDs are unique across all roots.
+  //
+  // This map is initialized when profiling starts and updated when a new root is added while profiling;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _initialSnapshotsByRootID: Map<number, Map<number, SnapshotNode>> = new Map();
+
+  // Map of root (id) to a list of tree mutation that occur during profiling.
+  // Once profiling is finished, these mutations can be used, along with the initial tree snapshots,
+  // to reconstruct the state of each root for each commit.
+  //
+  // This map is only updated while profiling is in progress;
+  // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
+  _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();
+
+  // The backend is currently profiling.
+  // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
+  _isProfiling: boolean = false;
+
+  // Tracks whether a specific renderer logged any profiling data during the most recent session.
+  _rendererIDsThatReportedProfilingData: Set<number> = new Set();
+
+  // After profiling, data is requested from each attached renderer using this queue.
+  // So long as this queue is not empty, the store is retrieving and processing profiling data from the backend.
+  _rendererQueue: Set<number> = new Set();
+
+  _store: Store;
+
+  constructor(
+    bridge: FrontendBridge,
+    store: Store,
+    defaultIsProfiling: boolean,
+  ) {
+    super();
+
+    this._bridge = bridge;
+    this._isProfiling = defaultIsProfiling;
+    this._store = store;
+
+    bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener('profilingData', this.onBridgeProfilingData);
+    bridge.addListener('profilingStatus', this.onProfilingStatus);
+    bridge.addListener('shutdown', this.onBridgeShutdown);
+
+    // It's possible that profiling has already started (e.g. "reload and start profiling")
+    // so the frontend needs to ask the backend for its status after mounting.
+    bridge.send('getProfilingStatus');
+
+    this._cache = new ProfilingCache(this);
+  }
+
+  getCommitData(rootID: number, commitIndex: number): CommitDataFrontend {
+    if (this._dataFrontend !== null) {
+      const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);
+      if (dataForRoot != null) {
+        const commitDatum = dataForRoot.commitData[commitIndex];
+        if (commitDatum != null) {
+          return commitDatum;
+        }
+      }
+    }
+
+    throw Error(
+      `Could not find commit data for root "${rootID}" and commit ${commitIndex}`,
+    );
+  }
+
+  getDataForRoot(rootID: number): ProfilingDataForRootFrontend {
+    if (this._dataFrontend !== null) {
+      const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);
+      if (dataForRoot != null) {
+        return dataForRoot;
+      }
+    }
+
+    throw Error(`Could not find commit data for root "${rootID}"`);
+  }
+
+  // Profiling data has been recorded for at least one root.
+  get didRecordCommits(): boolean {
+    return (
+      this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0
+    );
+  }
+
+  get isProcessingData(): boolean {
+    return this._rendererQueue.size > 0 || this._dataBackends.length > 0;
+  }
+
+  get isProfiling(): boolean {
+    return this._isProfiling;
+  }
+
+  get profilingCache(): ProfilingCache {
+    return this._cache;
+  }
+
+  get profilingData(): ProfilingDataFrontend | null {
+    return this._dataFrontend;
+  }
+  set profilingData(value: ProfilingDataFrontend | null): void {
+    if (this._isProfiling) {
+      console.warn(
+        'Profiling data cannot be updated while profiling is in progress.',
+      );
+      return;
+    }
+
+    this._dataBackends.splice(0);
+    this._dataFrontend = value;
+    this._initialRendererIDs.clear();
+    this._initialSnapshotsByRootID.clear();
+    this._inProgressOperationsByRootID.clear();
+    this._cache.invalidate();
+
+    this.emit('profilingData');
+  }
+
+  clear(): void {
+    this._dataBackends.splice(0);
+    this._dataFrontend = null;
+    this._initialRendererIDs.clear();
+    this._initialSnapshotsByRootID.clear();
+    this._inProgressOperationsByRootID.clear();
+    this._rendererQueue.clear();
+
+    // Invalidate suspense cache if profiling data is being (re-)recorded.
+    // Note that we clear now because any existing data is "stale".
+    this._cache.invalidate();
+
+    this.emit('profilingData');
+  }
+
+  startProfiling(): void {
+    this._bridge.send('startProfiling', this._store.recordChangeDescriptions);
+
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+  }
+
+  stopProfiling(): void {
+    this._bridge.send('stopProfiling');
+
+    // Don't actually update the local profiling boolean yet!
+    // Wait for onProfilingStatus() to confirm the status has changed.
+    // This ensures the frontend and backend are in sync wrt which commits were profiled.
+    // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
+  }
+
+  _takeProfilingSnapshotRecursive = (
+    elementID: number,
+    profilingSnapshots: Map<number, SnapshotNode>,
+  ) => {
+    const element = this._store.getElementByID(elementID);
+    if (element !== null) {
+      const snapshotNode: SnapshotNode = {
+        id: elementID,
+        children: element.children.slice(0),
+        displayName: element.displayName,
+        key: element.key,
+        type: element.type,
+      };
+      profilingSnapshots.set(elementID, snapshotNode);
+
+      element.children.forEach(childID =>
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots),
+      );
+    }
+  };
+
+  onBridgeOperations = (operations: Array<number>) => {
+    // The first two values are always rendererID and rootID
+    const rendererID = operations[0];
+    const rootID = operations[1];
+
+    if (this._isProfiling) {
+      let profilingOperations = this._inProgressOperationsByRootID.get(rootID);
+      if (profilingOperations == null) {
+        profilingOperations = [operations];
+        this._inProgressOperationsByRootID.set(rootID, profilingOperations);
+      } else {
+        profilingOperations.push(operations);
+      }
+
+      if (!this._initialRendererIDs.has(rendererID)) {
+        this._initialRendererIDs.add(rendererID);
+      }
+
+      if (!this._initialSnapshotsByRootID.has(rootID)) {
+        this._initialSnapshotsByRootID.set(rootID, new Map());
+      }
+
+      this._rendererIDsThatReportedProfilingData.add(rendererID);
+    }
+  };
+
+  onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {
+    if (this._isProfiling) {
+      // This should never happen, but if it does- ignore previous profiling data.
+      return;
+    }
+
+    const {rendererID} = dataBackend;
+
+    if (!this._rendererQueue.has(rendererID)) {
+      throw Error(
+        `Unexpected profiling data update from renderer "${rendererID}"`,
+      );
+    }
+
+    this._dataBackends.push(dataBackend);
+    this._rendererQueue.delete(rendererID);
+
+    if (this._rendererQueue.size === 0) {
+      this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(
+        this._dataBackends,
+        this._inProgressOperationsByRootID,
+        this._initialSnapshotsByRootID,
+      );
+
+      this._dataBackends.splice(0);
+
+      this.emit('isProcessingData');
+    }
+  };
+
+  onBridgeShutdown = () => {
+    this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('profilingData', this.onBridgeProfilingData);
+    this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
+    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
+  };
+
+  onProfilingStatus = (isProfiling: boolean) => {
+    if (isProfiling) {
+      this._dataBackends.splice(0);
+      this._dataFrontend = null;
+      this._initialRendererIDs.clear();
+      this._initialSnapshotsByRootID.clear();
+      this._inProgressOperationsByRootID.clear();
+      this._rendererIDsThatReportedProfilingData.clear();
+      this._rendererQueue.clear();
+
+      // Record all renderer IDs initially too (in case of unmount)
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (let rendererID of this._store.rootIDToRendererID.values()) {
+        if (!this._initialRendererIDs.has(rendererID)) {
+          this._initialRendererIDs.add(rendererID);
+        }
+      }
+
+      // Record snapshot of tree at the time profiling is started.
+      // This info is required to handle cases of e.g. nodes being removed during profiling.
+      this._store.roots.forEach(rootID => {
+        const profilingSnapshots = new Map();
+        this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);
+        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
+      });
+    }
+
+    if (this._isProfiling !== isProfiling) {
+      this._isProfiling = isProfiling;
+
+      // Invalidate suspense cache if profiling data is being (re-)recorded.
+      // Note that we clear again, in case any views read from the cache while profiling.
+      // (That would have resolved a now-stale value without any profiling data.)
+      this._cache.invalidate();
+
+      this.emit('isProfiling');
+
+      // If we've just finished a profiling session, we need to fetch data stored in each renderer interface
+      // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI.
+      // During this time, DevTools UI should probably not be interactive.
+      if (!isProfiling) {
+        this._dataBackends.splice(0);
+        this._rendererQueue.clear();
+
+        // Only request data from renderers that actually logged it.
+        // This avoids unnecessary bridge requests and also avoids edge case mixed renderer bugs.
+        // (e.g. when v15 and v16 are both present)
+        this._rendererIDsThatReportedProfilingData.forEach(rendererID => {
+          if (!this._rendererQueue.has(rendererID)) {
+            this._rendererQueue.add(rendererID);
+
+            this._bridge.send('getProfilingData', {rendererID});
+          }
+        });
+
+        this.emit('isProcessingData');
+      }
+    }
+  };
+}
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
new file mode 100644
index 0000000000000..03e156cdf0f9d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -0,0 +1,129 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import ProfilerStore from './ProfilerStore';
+import {
+  getCommitTree,
+  invalidateCommitTrees,
+} from 'react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder';
+import {
+  getChartData as getFlamegraphChartData,
+  invalidateChartData as invalidateFlamegraphChartData,
+} from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
+import {
+  getChartData as getInteractionsChartData,
+  invalidateChartData as invalidateInteractionsChartData,
+} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
+import {
+  getChartData as getRankedChartData,
+  invalidateChartData as invalidateRankedChartData,
+} from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
+
+import type {CommitTree} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ChartData as FlamegraphChartData} from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
+import type {ChartData as InteractionsChartData} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
+import type {ChartData as RankedChartData} from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
+
+export default class ProfilingCache {
+  _fiberCommits: Map<number, Array<number>> = new Map();
+  _profilerStore: ProfilerStore;
+
+  constructor(profilerStore: ProfilerStore) {
+    this._profilerStore = profilerStore;
+  }
+
+  getCommitTree = ({
+    commitIndex,
+    rootID,
+  }: {|
+    commitIndex: number,
+    rootID: number,
+  |}) =>
+    getCommitTree({
+      commitIndex,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getFiberCommits = ({
+    fiberID,
+    rootID,
+  }: {|
+    fiberID: number,
+    rootID: number,
+  |}): Array<number> => {
+    const cachedFiberCommits = this._fiberCommits.get(fiberID);
+    if (cachedFiberCommits != null) {
+      return cachedFiberCommits;
+    }
+
+    const fiberCommits = [];
+    const dataForRoot = this._profilerStore.getDataForRoot(rootID);
+    dataForRoot.commitData.forEach((commitDatum, commitIndex) => {
+      if (commitDatum.fiberActualDurations.has(fiberID)) {
+        fiberCommits.push(commitIndex);
+      }
+    });
+
+    this._fiberCommits.set(fiberID, fiberCommits);
+
+    return fiberCommits;
+  };
+
+  getFlamegraphChartData = ({
+    commitIndex,
+    commitTree,
+    rootID,
+  }: {|
+    commitIndex: number,
+    commitTree: CommitTree,
+    rootID: number,
+  |}): FlamegraphChartData =>
+    getFlamegraphChartData({
+      commitIndex,
+      commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getInteractionsChartData = ({
+    rootID,
+  }: {|
+    rootID: number,
+  |}): InteractionsChartData =>
+    getInteractionsChartData({
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getRankedChartData = ({
+    commitIndex,
+    commitTree,
+    rootID,
+  }: {|
+    commitIndex: number,
+    commitTree: CommitTree,
+    rootID: number,
+  |}): RankedChartData =>
+    getRankedChartData({
+      commitIndex,
+      commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  invalidate() {
+    this._fiberCommits.clear();
+
+    invalidateCommitTrees();
+    invalidateFlamegraphChartData();
+    invalidateInteractionsChartData();
+    invalidateRankedChartData();
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
new file mode 100644
index 0000000000000..e389a594e896e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -0,0 +1,201 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {createContext} from 'react';
+
+// Cache implementation was forked from the React repo:
+// https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
+//
+// This cache is simpler than react-cache in that:
+// 1. Individual items don't need to be invalidated.
+//    Profiling data is invalidated as a whole.
+// 2. We didn't need the added overhead of an LRU cache.
+//    The size of this cache is bounded by how many renders were profiled,
+//    and it will be fully reset between profiling sessions.
+
+export type Thenable<T> = {
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,
+  ...
+};
+
+type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
+
+type PendingResult = {|
+  status: 0,
+  value: Suspender,
+|};
+
+type ResolvedResult<Value> = {|
+  status: 1,
+  value: Value,
+|};
+
+type RejectedResult = {|
+  status: 2,
+  value: mixed,
+|};
+
+type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;
+
+export type Resource<Input, Key, Value> = {
+  clear(): void,
+  invalidate(Key): void,
+  read(Input): Value,
+  preload(Input): void,
+  write(Key, Value): void,
+  ...
+};
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+const ReactCurrentDispatcher = (React: any)
+  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
+
+function readContext(Context, observedBits) {
+  const dispatcher = ReactCurrentDispatcher.current;
+  if (dispatcher === null) {
+    throw new Error(
+      'react-cache: read and preload may only be called from within a ' +
+        "component's render. They are not supported in event handlers or " +
+        'lifecycle methods.',
+    );
+  }
+  return dispatcher.readContext(Context, observedBits);
+}
+
+const CacheContext = createContext(null);
+
+type Config = {useWeakMap?: boolean, ...};
+
+const entries: Map<
+  Resource<any, any, any>,
+  Map<any, any> | WeakMap<any, any>,
+> = new Map();
+const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
+
+function getEntriesForResource(
+  resource: any,
+): Map<any, any> | WeakMap<any, any> {
+  let entriesForResource = ((entries.get(resource): any): Map<any, any>);
+  if (entriesForResource === undefined) {
+    const config = resourceConfigs.get(resource);
+    entriesForResource =
+      config !== undefined && config.useWeakMap ? new WeakMap() : new Map();
+    entries.set(resource, entriesForResource);
+  }
+  return entriesForResource;
+}
+
+function accessResult<Input, Key, Value>(
+  resource: any,
+  fetch: Input => Thenable<Value>,
+  input: Input,
+  key: Key,
+): Result<Value> {
+  const entriesForResource = getEntriesForResource(resource);
+  const entry = entriesForResource.get(key);
+  if (entry === undefined) {
+    const thenable = fetch(input);
+    thenable.then(
+      value => {
+        if (newResult.status === Pending) {
+          const resolvedResult: ResolvedResult<Value> = (newResult: any);
+          resolvedResult.status = Resolved;
+          resolvedResult.value = value;
+        }
+      },
+      error => {
+        if (newResult.status === Pending) {
+          const rejectedResult: RejectedResult = (newResult: any);
+          rejectedResult.status = Rejected;
+          rejectedResult.value = error;
+        }
+      },
+    );
+    const newResult: PendingResult = {
+      status: Pending,
+      value: thenable,
+    };
+    entriesForResource.set(key, newResult);
+    return newResult;
+  } else {
+    return entry;
+  }
+}
+
+export function createResource<Input, Key, Value>(
+  fetch: Input => Thenable<Value>,
+  hashInput: Input => Key,
+  config?: Config = {},
+): Resource<Input, Key, Value> {
+  const resource = {
+    clear(): void {
+      entries.delete(resource);
+    },
+
+    invalidate(key: Key): void {
+      const entriesForResource = getEntriesForResource(resource);
+      entriesForResource.delete(key);
+    },
+
+    read(input: Input): Value {
+      // Prevent access outside of render.
+      readContext(CacheContext);
+
+      const key = hashInput(input);
+      const result: Result<Value> = accessResult(resource, fetch, input, key);
+      switch (result.status) {
+        case Pending: {
+          const suspender = result.value;
+          throw suspender;
+        }
+        case Resolved: {
+          const value = result.value;
+          return value;
+        }
+        case Rejected: {
+          const error = result.value;
+          throw error;
+        }
+        default:
+          // Should be unreachable
+          return (undefined: any);
+      }
+    },
+
+    preload(input: Input): void {
+      // Prevent access outside of render.
+      readContext(CacheContext);
+
+      const key = hashInput(input);
+      accessResult(resource, fetch, input, key);
+    },
+
+    write(key: Key, value: Value): void {
+      const entriesForResource = getEntriesForResource(resource);
+
+      const resolvedResult: ResolvedResult<Value> = {
+        status: Resolved,
+        value,
+      };
+
+      entriesForResource.set(key, resolvedResult);
+    },
+  };
+
+  resourceConfigs.set(resource, config);
+
+  return resource;
+}
+
+export function invalidateResources(): void {
+  entries.clear();
+}
diff --git a/packages/react-devtools-shared/src/devtools/index.js b/packages/react-devtools-shared/src/devtools/index.js
new file mode 100644
index 0000000000000..a15999478f1d9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/index.js
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+type Shell = {|
+  connect: (callback: Function) => void,
+  onReload: (reloadFn: Function) => void,
+|};
+
+export function initDevTools(shell: Shell) {
+  shell.connect((bridge: FrontendBridge) => {
+    // TODO ...
+  });
+}
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
new file mode 100644
index 0000000000000..ad46873c35e91
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -0,0 +1,1036 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import EventEmitter from 'events';
+import {inspect} from 'util';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from '../constants';
+import {ElementTypeRoot} from '../types';
+import {
+  getSavedComponentFilters,
+  saveComponentFilters,
+  separateDisplayNameAndHOCs,
+  shallowDiffers,
+  utfDecodeString,
+} from '../utils';
+import {localStorageGetItem, localStorageSetItem} from '../storage';
+import {__DEBUG__} from '../constants';
+import {printStore} from './utils';
+import ProfilerStore from './ProfilerStore';
+
+import type {Element} from './views/Components/types';
+import type {ComponentFilter, ElementType} from '../types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+const debug = (methodName, ...args) => {
+  if (__DEBUG__) {
+    console.log(
+      `%cStore %c${methodName}`,
+      'color: green; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+};
+
+const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
+  'React::DevTools::collapseNodesByDefault';
+const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
+  'React::DevTools::recordChangeDescriptions';
+
+type Config = {|
+  isProfiling?: boolean,
+  supportsNativeInspection?: boolean,
+  supportsReloadAndProfile?: boolean,
+  supportsProfiling?: boolean,
+  supportsTraceUpdates?: boolean,
+|};
+
+export type Capabilities = {|
+  hasOwnerMetadata: boolean,
+  supportsProfiling: boolean,
+|};
+
+/**
+ * The store is the single source of truth for updates from the backend.
+ * ContextProviders can subscribe to the Store for specific things they want to provide.
+ */
+export default class Store extends EventEmitter<{|
+  collapseNodesByDefault: [],
+  componentFilters: [],
+  mutated: [[Array<number>, Map<number, number>]],
+  recordChangeDescriptions: [],
+  roots: [],
+  supportsNativeStyleEditor: [],
+  supportsProfiling: [],
+  supportsReloadAndProfile: [],
+  unsupportedRendererVersionDetected: [],
+|}> {
+  _bridge: FrontendBridge;
+
+  // Should new nodes be collapsed by default when added to the tree?
+  _collapseNodesByDefault: boolean = true;
+
+  _componentFilters: Array<ComponentFilter>;
+
+  // At least one of the injected renderers contains (DEV only) owner metadata.
+  _hasOwnerMetadata: boolean = false;
+
+  // Map of ID to (mutable) Element.
+  // Elements are mutated to avoid excessive cloning during tree updates.
+  // The InspectedElementContext also relies on this mutability for its WeakMap usage.
+  _idToElement: Map<number, Element> = new Map();
+
+  // Should the React Native style editor panel be shown?
+  _isNativeStyleEditorSupported: boolean = false;
+
+  // Can the backend use the Storage API (e.g. localStorage)?
+  // If not, features like reload-and-profile will not work correctly and must be disabled.
+  _isBackendStorageAPISupported: boolean = false;
+
+  _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;
+
+  // Map of element (id) to the set of elements (ids) it owns.
+  // This map enables getOwnersListForElement() to avoid traversing the entire tree.
+  _ownersMap: Map<number, Set<number>> = new Map();
+
+  _profilerStore: ProfilerStore;
+
+  _recordChangeDescriptions: boolean = false;
+
+  // Incremented each time the store is mutated.
+  // This enables a passive effect to detect a mutation between render and commit phase.
+  _revision: number = 0;
+
+  // This Array must be treated as immutable!
+  // Passive effects will check it for changes between render and mount.
+  _roots: $ReadOnlyArray<number> = [];
+
+  _rootIDToCapabilities: Map<number, Capabilities> = new Map();
+
+  // Renderer ID is needed to support inspection fiber props, state, and hooks.
+  _rootIDToRendererID: Map<number, number> = new Map();
+
+  // These options may be initially set by a confiugraiton option when constructing the Store.
+  // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
+  _supportsNativeInspection: boolean = true;
+  _supportsProfiling: boolean = false;
+  _supportsReloadAndProfile: boolean = false;
+  _supportsTraceUpdates: boolean = false;
+
+  _unsupportedRendererVersionDetected: boolean = false;
+
+  // Total number of visible elements (within all roots).
+  // Used for windowing purposes.
+  _weightAcrossRoots: number = 0;
+
+  constructor(bridge: FrontendBridge, config?: Config) {
+    super();
+
+    if (__DEBUG__) {
+      debug('constructor', 'subscribing to Bridge');
+    }
+
+    this._collapseNodesByDefault =
+      localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===
+      'true';
+
+    this._recordChangeDescriptions =
+      localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
+      'true';
+
+    this._componentFilters = getSavedComponentFilters();
+
+    let isProfiling = false;
+    if (config != null) {
+      isProfiling = config.isProfiling === true;
+
+      const {
+        supportsNativeInspection,
+        supportsProfiling,
+        supportsReloadAndProfile,
+        supportsTraceUpdates,
+      } = config;
+      this._supportsNativeInspection = supportsNativeInspection !== false;
+      if (supportsProfiling) {
+        this._supportsProfiling = true;
+      }
+      if (supportsReloadAndProfile) {
+        this._supportsReloadAndProfile = true;
+      }
+      if (supportsTraceUpdates) {
+        this._supportsTraceUpdates = true;
+      }
+    }
+
+    this._bridge = bridge;
+    bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener(
+      'overrideComponentFilters',
+      this.onBridgeOverrideComponentFilters,
+    );
+    bridge.addListener('shutdown', this.onBridgeShutdown);
+    bridge.addListener(
+      'isBackendStorageAPISupported',
+      this.onBridgeStorageSupported,
+    );
+    bridge.addListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported,
+    );
+    bridge.addListener(
+      'unsupportedRendererVersion',
+      this.onBridgeUnsupportedRendererVersion,
+    );
+
+    this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
+  }
+
+  // This is only used in tests to avoid memory leaks.
+  assertExpectedRootMapSizes() {
+    if (this.roots.length === 0) {
+      // The only safe time to assert these maps are empty is when the store is empty.
+      this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');
+      this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');
+    }
+
+    // These maps should always be the same size as the number of roots
+    this.assertMapSizeMatchesRootCount(
+      this._rootIDToCapabilities,
+      '_rootIDToCapabilities',
+    );
+    this.assertMapSizeMatchesRootCount(
+      this._rootIDToRendererID,
+      '_rootIDToRendererID',
+    );
+  }
+
+  // This is only used in tests to avoid memory leaks.
+  assertMapSizeMatchesRootCount(map: Map<any, any>, mapName: string) {
+    const expectedSize = this.roots.length;
+    if (map.size !== expectedSize) {
+      throw new Error(
+        `Expected ${mapName} to contain ${expectedSize} items, but it contains ${
+          map.size
+        } items\n\n${inspect(map, {
+          depth: 20,
+        })}`,
+      );
+    }
+  }
+
+  get collapseNodesByDefault(): boolean {
+    return this._collapseNodesByDefault;
+  }
+  set collapseNodesByDefault(value: boolean): void {
+    this._collapseNodesByDefault = value;
+
+    localStorageSetItem(
+      LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,
+      value ? 'true' : 'false',
+    );
+
+    this.emit('collapseNodesByDefault');
+  }
+
+  get componentFilters(): Array<ComponentFilter> {
+    return this._componentFilters;
+  }
+  set componentFilters(value: Array<ComponentFilter>): void {
+    if (this._profilerStore.isProfiling) {
+      // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
+      // If necessary, we could support this- but it doesn't seem like a necessary use case.
+      throw Error('Cannot modify filter preferences while profiling');
+    }
+
+    // Filter updates are expensive to apply (since they impact the entire tree).
+    // Let's determine if they've changed and avoid doing this work if they haven't.
+    const prevEnabledComponentFilters = this._componentFilters.filter(
+      filter => filter.isEnabled,
+    );
+    const nextEnabledComponentFilters = value.filter(
+      filter => filter.isEnabled,
+    );
+    let haveEnabledFiltersChanged =
+      prevEnabledComponentFilters.length !== nextEnabledComponentFilters.length;
+    if (!haveEnabledFiltersChanged) {
+      for (let i = 0; i < nextEnabledComponentFilters.length; i++) {
+        const prevFilter = prevEnabledComponentFilters[i];
+        const nextFilter = nextEnabledComponentFilters[i];
+        if (shallowDiffers(prevFilter, nextFilter)) {
+          haveEnabledFiltersChanged = true;
+          break;
+        }
+      }
+    }
+
+    this._componentFilters = value;
+
+    // Update persisted filter preferences stored in localStorage.
+    saveComponentFilters(value);
+
+    // Notify the renderer that filter prefernces have changed.
+    // This is an expensive opreation; it unmounts and remounts the entire tree,
+    // so only do it if the set of enabled component filters has changed.
+    if (haveEnabledFiltersChanged) {
+      this._bridge.send('updateComponentFilters', value);
+    }
+
+    this.emit('componentFilters');
+  }
+
+  get hasOwnerMetadata(): boolean {
+    return this._hasOwnerMetadata;
+  }
+
+  get nativeStyleEditorValidAttributes(): $ReadOnlyArray<string> | null {
+    return this._nativeStyleEditorValidAttributes;
+  }
+
+  get numElements(): number {
+    return this._weightAcrossRoots;
+  }
+
+  get profilerStore(): ProfilerStore {
+    return this._profilerStore;
+  }
+
+  get recordChangeDescriptions(): boolean {
+    return this._recordChangeDescriptions;
+  }
+  set recordChangeDescriptions(value: boolean): void {
+    this._recordChangeDescriptions = value;
+
+    localStorageSetItem(
+      LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+      value ? 'true' : 'false',
+    );
+
+    this.emit('recordChangeDescriptions');
+  }
+
+  get revision(): number {
+    return this._revision;
+  }
+
+  get rootIDToRendererID(): Map<number, number> {
+    return this._rootIDToRendererID;
+  }
+
+  get roots(): $ReadOnlyArray<number> {
+    return this._roots;
+  }
+
+  get supportsNativeInspection(): boolean {
+    return this._supportsNativeInspection;
+  }
+
+  get supportsNativeStyleEditor(): boolean {
+    return this._isNativeStyleEditorSupported;
+  }
+
+  get supportsProfiling(): boolean {
+    return this._supportsProfiling;
+  }
+  get supportsReloadAndProfile(): boolean {
+    // Does the DevTools shell support reloading and eagerly injecting the renderer interface?
+    // And if so, can the backend use the localStorage API?
+    // Both of these are required for the reload-and-profile feature to work.
+    return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
+  }
+
+  get supportsTraceUpdates(): boolean {
+    return this._supportsTraceUpdates;
+  }
+
+  get unsupportedRendererVersionDetected(): boolean {
+    return this._unsupportedRendererVersionDetected;
+  }
+
+  containsElement(id: number): boolean {
+    return this._idToElement.get(id) != null;
+  }
+
+  getElementAtIndex(index: number): Element | null {
+    if (index < 0 || index >= this.numElements) {
+      console.warn(
+        `Invalid index ${index} specified; store contains ${this.numElements} items.`,
+      );
+
+      return null;
+    }
+
+    // Find wich root this element is in...
+    let rootID;
+    let root;
+    let rootWeight = 0;
+    for (let i = 0; i < this._roots.length; i++) {
+      rootID = this._roots[i];
+      root = ((this._idToElement.get(rootID): any): Element);
+      if (root.children.length === 0) {
+        continue;
+      } else if (rootWeight + root.weight > index) {
+        break;
+      } else {
+        rootWeight += root.weight;
+      }
+    }
+
+    // Find the element in the tree using the weight of each node...
+    // Skip over the root itself, because roots aren't visible in the Elements tree.
+    let currentElement = ((root: any): Element);
+    let currentWeight = rootWeight - 1;
+    while (index !== currentWeight) {
+      const numChildren = currentElement.children.length;
+      for (let i = 0; i < numChildren; i++) {
+        const childID = currentElement.children[i];
+        const child = ((this._idToElement.get(childID): any): Element);
+        const childWeight = child.isCollapsed ? 1 : child.weight;
+
+        if (index <= currentWeight + childWeight) {
+          currentWeight++;
+          currentElement = child;
+          break;
+        } else {
+          currentWeight += childWeight;
+        }
+      }
+    }
+
+    return ((currentElement: any): Element) || null;
+  }
+
+  getElementIDAtIndex(index: number): number | null {
+    const element: Element | null = this.getElementAtIndex(index);
+    return element === null ? null : element.id;
+  }
+
+  getElementByID(id: number): Element | null {
+    const element = this._idToElement.get(id);
+    if (element == null) {
+      console.warn(`No element found with id "${id}"`);
+      return null;
+    }
+
+    return element;
+  }
+
+  getIndexOfElementID(id: number): number | null {
+    const element = this.getElementByID(id);
+
+    if (element === null || element.parentID === 0) {
+      return null;
+    }
+
+    // Walk up the tree to the root.
+    // Increment the index by one for each node we encounter,
+    // and by the weight of all nodes to the left of the current one.
+    // This should be a relatively fast way of determining the index of a node within the tree.
+    let previousID = id;
+    let currentID = element.parentID;
+    let index = 0;
+    while (true) {
+      const current = ((this._idToElement.get(currentID): any): Element);
+
+      const {children} = current;
+      for (let i = 0; i < children.length; i++) {
+        const childID = children[i];
+        if (childID === previousID) {
+          break;
+        }
+        const child = ((this._idToElement.get(childID): any): Element);
+        index += child.isCollapsed ? 1 : child.weight;
+      }
+
+      if (current.parentID === 0) {
+        // We found the root; stop crawling.
+        break;
+      }
+
+      index++;
+
+      previousID = current.id;
+      currentID = current.parentID;
+    }
+
+    // At this point, the current ID is a root (from the previous loop).
+    // We also need to offset the index by previous root weights.
+    for (let i = 0; i < this._roots.length; i++) {
+      const rootID = this._roots[i];
+      if (rootID === currentID) {
+        break;
+      }
+      const root = ((this._idToElement.get(rootID): any): Element);
+      index += root.weight;
+    }
+
+    return index;
+  }
+
+  getOwnersListForElement(ownerID: number): Array<Element> {
+    const list = [];
+    let element = this._idToElement.get(ownerID);
+    if (element != null) {
+      list.push({
+        ...element,
+        depth: 0,
+      });
+
+      const unsortedIDs = this._ownersMap.get(ownerID);
+      if (unsortedIDs !== undefined) {
+        const depthMap: Map<number, number> = new Map([[ownerID, 0]]);
+
+        // Items in a set are ordered based on insertion.
+        // This does not correlate with their order in the tree.
+        // So first we need to order them.
+        // I wish we could avoid this sorting operation; we could sort at insertion time,
+        // but then we'd have to pay sorting costs even if the owners list was never used.
+        // Seems better to defer the cost, since the set of ids is probably pretty small.
+        const sortedIDs = Array.from(unsortedIDs).sort(
+          (idA, idB) =>
+            ((this.getIndexOfElementID(idA): any): number) -
+            ((this.getIndexOfElementID(idB): any): number),
+        );
+
+        // Next we need to determine the appropriate depth for each element in the list.
+        // The depth in the list may not correspond to the depth in the tree,
+        // because the list has been filtered to remove intermediate components.
+        // Perhaps the easiest way to do this is to walk up the tree until we reach either:
+        // (1) another node that's already in the tree, or (2) the root (owner)
+        // at which point, our depth is just the depth of that node plus one.
+        sortedIDs.forEach(id => {
+          const innerElement = this._idToElement.get(id);
+          if (innerElement != null) {
+            let parentID = innerElement.parentID;
+
+            let depth = 0;
+            while (parentID > 0) {
+              if (parentID === ownerID || unsortedIDs.has(parentID)) {
+                depth = depthMap.get(parentID) + 1;
+                depthMap.set(id, depth);
+                break;
+              }
+              const parent = this._idToElement.get(parentID);
+              if (parent == null) {
+                break;
+              }
+              parentID = parent.parentID;
+            }
+
+            if (depth === 0) {
+              throw Error('Invalid owners list');
+            }
+
+            list.push({...innerElement, depth});
+          }
+        });
+      }
+    }
+
+    return list;
+  }
+
+  getRendererIDForElement(id: number): number | null {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        const rendererID = this._rootIDToRendererID.get(current.id);
+        return rendererID == null ? null : rendererID;
+      } else {
+        current = this._idToElement.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
+  getRootIDForElement(id: number): number | null {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        return current.id;
+      } else {
+        current = this._idToElement.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
+  isInsideCollapsedSubTree(id: number): boolean {
+    let current = this._idToElement.get(id);
+    while (current != null) {
+      if (current.parentID === 0) {
+        return false;
+      } else {
+        current = this._idToElement.get(current.parentID);
+        if (current != null && current.isCollapsed) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  // TODO Maybe split this into two methods: expand() and collapse()
+  toggleIsCollapsed(id: number, isCollapsed: boolean): void {
+    let didMutate = false;
+
+    const element = this.getElementByID(id);
+    if (element !== null) {
+      if (isCollapsed) {
+        if (element.type === ElementTypeRoot) {
+          throw Error('Root nodes cannot be collapsed');
+        }
+
+        if (!element.isCollapsed) {
+          didMutate = true;
+          element.isCollapsed = true;
+
+          const weightDelta = 1 - element.weight;
+
+          let parentElement = ((this._idToElement.get(
+            element.parentID,
+          ): any): Element);
+          while (parentElement != null) {
+            // We don't need to break on a collapsed parent in the same way as the expand case below.
+            // That's because collapsing a node doesn't "bubble" and affect its parents.
+            parentElement.weight += weightDelta;
+            parentElement = this._idToElement.get(parentElement.parentID);
+          }
+        }
+      } else {
+        let currentElement = element;
+        while (currentElement != null) {
+          const oldWeight = currentElement.isCollapsed
+            ? 1
+            : currentElement.weight;
+
+          if (currentElement.isCollapsed) {
+            didMutate = true;
+            currentElement.isCollapsed = false;
+
+            const newWeight = currentElement.isCollapsed
+              ? 1
+              : currentElement.weight;
+            const weightDelta = newWeight - oldWeight;
+
+            let parentElement = ((this._idToElement.get(
+              currentElement.parentID,
+            ): any): Element);
+            while (parentElement != null) {
+              parentElement.weight += weightDelta;
+              if (parentElement.isCollapsed) {
+                // It's important to break on a collapsed parent when expanding nodes.
+                // That's because expanding a node "bubbles" up and expands all parents as well.
+                // Breaking in this case prevents us from over-incrementing the expanded weights.
+                break;
+              }
+              parentElement = this._idToElement.get(parentElement.parentID);
+            }
+          }
+
+          currentElement =
+            currentElement.parentID !== 0
+              ? this.getElementByID(currentElement.parentID)
+              : null;
+        }
+      }
+
+      // Only re-calculate weights and emit an "update" event if the store was mutated.
+      if (didMutate) {
+        let weightAcrossRoots = 0;
+        this._roots.forEach(rootID => {
+          const {weight} = ((this.getElementByID(rootID): any): Element);
+          weightAcrossRoots += weight;
+        });
+        this._weightAcrossRoots = weightAcrossRoots;
+
+        // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
+        // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
+        // Updating the selected search index later may require auto-expanding a collapsed subtree though.
+        this.emit('mutated', [[], new Map()]);
+      }
+    }
+  }
+
+  _adjustParentTreeWeight = (
+    parentElement: Element | null,
+    weightDelta: number,
+  ) => {
+    let isInsideCollapsedSubTree = false;
+
+    while (parentElement != null) {
+      parentElement.weight += weightDelta;
+
+      // Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.
+      // Their weight will bubble up when the parent is expanded.
+      if (parentElement.isCollapsed) {
+        isInsideCollapsedSubTree = true;
+        break;
+      }
+
+      parentElement = ((this._idToElement.get(
+        parentElement.parentID,
+      ): any): Element);
+    }
+
+    // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
+    if (!isInsideCollapsedSubTree) {
+      this._weightAcrossRoots += weightDelta;
+    }
+  };
+
+  onBridgeNativeStyleEditorSupported = ({
+    isSupported,
+    validAttributes,
+  }: {|
+    isSupported: boolean,
+    validAttributes: ?$ReadOnlyArray<string>,
+  |}) => {
+    this._isNativeStyleEditorSupported = isSupported;
+    this._nativeStyleEditorValidAttributes = validAttributes || null;
+
+    this.emit('supportsNativeStyleEditor');
+  };
+
+  onBridgeOperations = (operations: Array<number>) => {
+    if (__DEBUG__) {
+      console.groupCollapsed('onBridgeOperations');
+      debug('onBridgeOperations', operations.join(','));
+    }
+
+    let haveRootsChanged = false;
+
+    // The first two values are always rendererID and rootID
+    const rendererID = operations[0];
+
+    const addedElementIDs: Array<number> = [];
+    // This is a mapping of removed ID -> parent ID:
+    const removedElementIDs: Map<number, number> = new Map();
+    // We'll use the parent ID to adjust selection if it gets deleted.
+
+    let i = 2;
+
+    // Reassemble the string table.
+    const stringTable = [
+      null, // ID = 0 corresponds to the null string.
+    ];
+    const stringTableSize = operations[i++];
+    const stringTableEnd = i + stringTableSize;
+    while (i < stringTableEnd) {
+      const nextLength = operations[i++];
+      const nextString = utfDecodeString(
+        (operations.slice(i, i + nextLength): any),
+      );
+      stringTable.push(nextString);
+      i += nextLength;
+    }
+
+    while (i < operations.length) {
+      const operation = operations[i];
+      switch (operation) {
+        case TREE_OPERATION_ADD: {
+          const id = ((operations[i + 1]: any): number);
+          const type = ((operations[i + 2]: any): ElementType);
+
+          i += 3;
+
+          if (this._idToElement.has(id)) {
+            throw Error(
+              `Cannot add node ${id} because a node with that id is already in the Store.`,
+            );
+          }
+
+          let ownerID: number = 0;
+          let parentID: number = ((null: any): number);
+          if (type === ElementTypeRoot) {
+            if (__DEBUG__) {
+              debug('Add', `new root node ${id}`);
+            }
+
+            const supportsProfiling = operations[i] > 0;
+            i++;
+
+            const hasOwnerMetadata = operations[i] > 0;
+            i++;
+
+            this._roots = this._roots.concat(id);
+            this._rootIDToRendererID.set(id, rendererID);
+            this._rootIDToCapabilities.set(id, {
+              hasOwnerMetadata,
+              supportsProfiling,
+            });
+
+            this._idToElement.set(id, {
+              children: [],
+              depth: -1,
+              displayName: null,
+              hocDisplayNames: null,
+              id,
+              isCollapsed: false, // Never collapse roots; it would hide the entire tree.
+              key: null,
+              ownerID: 0,
+              parentID: 0,
+              type,
+              weight: 0,
+            });
+
+            haveRootsChanged = true;
+          } else {
+            parentID = ((operations[i]: any): number);
+            i++;
+
+            ownerID = ((operations[i]: any): number);
+            i++;
+
+            const displayNameStringID = operations[i];
+            const displayName = stringTable[displayNameStringID];
+            i++;
+
+            const keyStringID = operations[i];
+            const key = stringTable[keyStringID];
+            i++;
+
+            if (__DEBUG__) {
+              debug(
+                'Add',
+                `node ${id} (${displayName || 'null'}) as child of ${parentID}`,
+              );
+            }
+
+            if (!this._idToElement.has(parentID)) {
+              throw Error(
+                `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`,
+              );
+            }
+
+            const parentElement = ((this._idToElement.get(
+              parentID,
+            ): any): Element);
+            parentElement.children.push(id);
+
+            const [
+              displayNameWithoutHOCs,
+              hocDisplayNames,
+            ] = separateDisplayNameAndHOCs(displayName, type);
+
+            const element: Element = {
+              children: [],
+              depth: parentElement.depth + 1,
+              displayName: displayNameWithoutHOCs,
+              hocDisplayNames,
+              id,
+              isCollapsed: this._collapseNodesByDefault,
+              key,
+              ownerID,
+              parentID: parentElement.id,
+              type,
+              weight: 1,
+            };
+
+            this._idToElement.set(id, element);
+            addedElementIDs.push(id);
+            this._adjustParentTreeWeight(parentElement, 1);
+
+            if (ownerID > 0) {
+              let set = this._ownersMap.get(ownerID);
+              if (set === undefined) {
+                set = new Set();
+                this._ownersMap.set(ownerID, set);
+              }
+              set.add(id);
+            }
+          }
+          break;
+        }
+        case TREE_OPERATION_REMOVE: {
+          const removeLength = ((operations[i + 1]: any): number);
+          i += 2;
+
+          for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+            const id = ((operations[i]: any): number);
+
+            if (!this._idToElement.has(id)) {
+              throw Error(
+                `Cannot remove node ${id} because no matching node was found in the Store.`,
+              );
+            }
+
+            i += 1;
+
+            const element = ((this._idToElement.get(id): any): Element);
+            const {children, ownerID, parentID, weight} = element;
+            if (children.length > 0) {
+              throw new Error(`Node ${id} was removed before its children.`);
+            }
+
+            this._idToElement.delete(id);
+
+            let parentElement = null;
+            if (parentID === 0) {
+              if (__DEBUG__) {
+                debug('Remove', `node ${id} root`);
+              }
+
+              this._roots = this._roots.filter(rootID => rootID !== id);
+              this._rootIDToRendererID.delete(id);
+              this._rootIDToCapabilities.delete(id);
+
+              haveRootsChanged = true;
+            } else {
+              if (__DEBUG__) {
+                debug('Remove', `node ${id} from parent ${parentID}`);
+              }
+              parentElement = ((this._idToElement.get(parentID): any): Element);
+              if (parentElement === undefined) {
+                throw Error(
+                  `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`,
+                );
+              }
+              const index = parentElement.children.indexOf(id);
+              parentElement.children.splice(index, 1);
+            }
+
+            this._adjustParentTreeWeight(parentElement, -weight);
+            removedElementIDs.set(id, parentID);
+
+            this._ownersMap.delete(id);
+            if (ownerID > 0) {
+              const set = this._ownersMap.get(ownerID);
+              if (set !== undefined) {
+                set.delete(id);
+              }
+            }
+          }
+          break;
+        }
+        case TREE_OPERATION_REORDER_CHILDREN: {
+          const id = ((operations[i + 1]: any): number);
+          const numChildren = ((operations[i + 2]: any): number);
+          i += 3;
+
+          if (!this._idToElement.has(id)) {
+            throw Error(
+              `Cannot reorder children for node ${id} because no matching node was found in the Store.`,
+            );
+          }
+
+          const element = ((this._idToElement.get(id): any): Element);
+          const children = element.children;
+          if (children.length !== numChildren) {
+            throw Error(
+              `Children cannot be added or removed during a reorder operation.`,
+            );
+          }
+
+          for (let j = 0; j < numChildren; j++) {
+            const childID = operations[i + j];
+            children[j] = childID;
+            if (__DEV__) {
+              // This check is more expensive so it's gated by __DEV__.
+              const childElement = this._idToElement.get(childID);
+              if (childElement == null || childElement.parentID !== id) {
+                console.error(
+                  `Children cannot be added or removed during a reorder operation.`,
+                );
+              }
+            }
+          }
+          i += numChildren;
+
+          if (__DEBUG__) {
+            debug('Re-order', `Node ${id} children ${children.join(',')}`);
+          }
+          break;
+        }
+        case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
+          // Base duration updates are only sent while profiling is in progress.
+          // We can ignore them at this point.
+          // The profiler UI uses them lazily in order to generate the tree.
+          i += 3;
+          break;
+        default:
+          throw Error(`Unsupported Bridge operation ${operation}`);
+      }
+    }
+
+    this._revision++;
+
+    if (haveRootsChanged) {
+      const prevSupportsProfiling = this._supportsProfiling;
+
+      this._hasOwnerMetadata = false;
+      this._supportsProfiling = false;
+      this._rootIDToCapabilities.forEach(
+        ({hasOwnerMetadata, supportsProfiling}) => {
+          if (hasOwnerMetadata) {
+            this._hasOwnerMetadata = true;
+          }
+          if (supportsProfiling) {
+            this._supportsProfiling = true;
+          }
+        },
+      );
+
+      this.emit('roots');
+
+      if (this._supportsProfiling !== prevSupportsProfiling) {
+        this.emit('supportsProfiling');
+      }
+    }
+
+    if (__DEBUG__) {
+      console.log(printStore(this, true));
+      console.groupEnd();
+    }
+
+    this.emit('mutated', [addedElementIDs, removedElementIDs]);
+  };
+
+  // Certain backends save filters on a per-domain basis.
+  // In order to prevent filter preferences and applied filters from being out of sync,
+  // this message enables the backend to override the frontend's current ("saved") filters.
+  // This action should also override the saved filters too,
+  // else reloading the frontend without reloading the backend would leave things out of sync.
+  onBridgeOverrideComponentFilters = (
+    componentFilters: Array<ComponentFilter>,
+  ) => {
+    this._componentFilters = componentFilters;
+
+    saveComponentFilters(componentFilters);
+  };
+
+  onBridgeShutdown = () => {
+    if (__DEBUG__) {
+      debug('onBridgeShutdown', 'unsubscribing from Bridge');
+    }
+
+    this._bridge.removeListener('operations', this.onBridgeOperations);
+    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
+    this._bridge.removeListener(
+      'isBackendStorageAPISupported',
+      this.onBridgeStorageSupported,
+    );
+  };
+
+  onBridgeStorageSupported = (isBackendStorageAPISupported: boolean) => {
+    this._isBackendStorageAPISupported = isBackendStorageAPISupported;
+
+    this.emit('supportsReloadAndProfile');
+  };
+
+  onBridgeUnsupportedRendererVersion = () => {
+    this._unsupportedRendererVersionDetected = true;
+
+    this.emit('unsupportedRendererVersionDetected');
+  };
+}
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
new file mode 100644
index 0000000000000..c5a07f3146fd7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -0,0 +1,145 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+
+import type {Element} from './views/Components/types';
+import type Store from './store';
+
+export function printElement(element: Element, includeWeight: boolean = false) {
+  let prefix = ' ';
+  if (element.children.length > 0) {
+    prefix = element.isCollapsed ? '▸' : '▾';
+  }
+
+  let key = '';
+  if (element.key !== null) {
+    key = ` key="${element.key}"`;
+  }
+
+  let hocDisplayNames = null;
+  if (element.hocDisplayNames !== null) {
+    hocDisplayNames = [...element.hocDisplayNames];
+  }
+  if (element.type === ElementTypeMemo) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['Memo'];
+    } else {
+      hocDisplayNames.push('Memo');
+    }
+  } else if (element.type === ElementTypeForwardRef) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['ForwardRef'];
+    } else {
+      hocDisplayNames.push('ForwardRef');
+    }
+  }
+
+  let hocs = hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
+
+  let suffix = '';
+  if (includeWeight) {
+    suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
+  }
+
+  return `${'  '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
+    'null'}${key}>${hocs}${suffix}`;
+}
+
+export function printOwnersList(
+  elements: Array<Element>,
+  includeWeight: boolean = false,
+) {
+  return elements
+    .map(element => printElement(element, includeWeight))
+    .join('\n');
+}
+
+export function printStore(store: Store, includeWeight: boolean = false) {
+  const snapshotLines = [];
+
+  let rootWeight = 0;
+
+  store.roots.forEach(rootID => {
+    const {weight} = ((store.getElementByID(rootID): any): Element);
+
+    snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
+
+    for (let i = rootWeight; i < rootWeight + weight; i++) {
+      const element = store.getElementAtIndex(i);
+
+      if (element == null) {
+        throw Error(`Could not find element at index ${i}`);
+      }
+
+      snapshotLines.push(printElement(element, includeWeight));
+    }
+
+    rootWeight += weight;
+  });
+
+  // Make sure the pretty-printed test align with the Store's reported number of total rows.
+  if (rootWeight !== store.numElements) {
+    throw Error(
+      `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${store.numElements})`,
+    );
+  }
+
+  // If roots have been unmounted, verify that they've been removed from maps.
+  // This helps ensure the Store doesn't leak memory.
+  store.assertExpectedRootMapSizes();
+
+  return snapshotLines.join('\n');
+}
+
+// We use JSON.parse to parse string values
+// e.g. 'foo' is not valid JSON but it is a valid string
+// so this method replaces e.g. 'foo' with "foo"
+export function sanitizeForParse(value: any) {
+  if (typeof value === 'string') {
+    if (
+      value.length >= 2 &&
+      value.charAt(0) === "'" &&
+      value.charAt(value.length - 1) === "'"
+    ) {
+      return '"' + value.substr(1, value.length - 2) + '"';
+    }
+  }
+  return value;
+}
+
+export function smartParse(value: any) {
+  switch (value) {
+    case 'Infinity':
+      return Infinity;
+    case 'NaN':
+      return NaN;
+    case 'undefined':
+      return undefined;
+    default:
+      return JSON.parse(sanitizeForParse(value));
+  }
+}
+
+export function smartStringify(value: any) {
+  if (typeof value === 'number') {
+    if (Number.isNaN(value)) {
+      return 'NaN';
+    } else if (!Number.isFinite(value)) {
+      return 'Infinity';
+    }
+  } else if (value === undefined) {
+    return 'undefined';
+  }
+
+  return JSON.stringify(value);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.css b/packages/react-devtools-shared/src/devtools/views/Button.css
new file mode 100644
index 0000000000000..d3885372b485e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Button.css
@@ -0,0 +1,37 @@
+.Button {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  padding: 0;
+  border-radius: 0.25rem;
+  flex: 0 0 auto;
+}
+.ButtonContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
+
+.Button:hover {
+  color: var(--color-button-hover);
+}
+.Button:active {
+  color: var(--color-button-focus);
+  outline: none;
+}
+.Button:focus,
+.ButtonContent:focus {
+  outline: none;
+}
+
+.Button:focus > .ButtonContent {
+  background: var(--color-button-background-focus);
+}
+
+.Button:disabled,
+.Button:disabled:active {
+  background: var(--color-button-background);
+  color: var(--color-button-disabled);
+  cursor: default;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
new file mode 100644
index 0000000000000..76028d53dde90
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import Tooltip from '@reach/tooltip';
+
+import styles from './Button.css';
+import tooltipStyles from './Tooltip.css';
+
+type Props = {
+  children: React$Node,
+  className?: string,
+  title?: string,
+  ...
+};
+
+export default function Button({
+  children,
+  className = '',
+  title = '',
+  ...rest
+}: Props) {
+  let button = (
+    <button className={`${styles.Button} ${className}`} {...rest}>
+      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
+  );
+
+  if (title) {
+    button = (
+      <Tooltip className={tooltipStyles.Tooltip} label={title}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.css b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.css
new file mode 100644
index 0000000000000..b21c094828703
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.css
@@ -0,0 +1,5 @@
+.ButtonIcon {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
new file mode 100644
index 0000000000000..5edc6821bd3fe
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -0,0 +1,246 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import styles from './ButtonIcon.css';
+
+export type IconType =
+  | 'add'
+  | 'cancel'
+  | 'clear'
+  | 'close'
+  | 'collapsed'
+  | 'copy'
+  | 'delete'
+  | 'down'
+  | 'expanded'
+  | 'export'
+  | 'filter'
+  | 'import'
+  | 'log-data'
+  | 'more'
+  | 'next'
+  | 'previous'
+  | 'record'
+  | 'reload'
+  | 'save'
+  | 'search'
+  | 'settings'
+  | 'suspend'
+  | 'undo'
+  | 'up'
+  | 'view-dom'
+  | 'view-source';
+
+type Props = {|
+  className?: string,
+  type: IconType,
+|};
+
+export default function ButtonIcon({className = '', type}: Props) {
+  let pathData = null;
+  switch (type) {
+    case 'add':
+      pathData = PATH_ADD;
+      break;
+    case 'cancel':
+      pathData = PATH_CANCEL;
+      break;
+    case 'clear':
+      pathData = PATH_CLEAR;
+      break;
+    case 'close':
+      pathData = PATH_CLOSE;
+      break;
+    case 'collapsed':
+      pathData = PATH_COLLAPSED;
+      break;
+    case 'copy':
+      pathData = PATH_COPY;
+      break;
+    case 'delete':
+      pathData = PATH_DELETE;
+      break;
+    case 'down':
+      pathData = PATH_DOWN;
+      break;
+    case 'expanded':
+      pathData = PATH_EXPANDED;
+      break;
+    case 'export':
+      pathData = PATH_EXPORT;
+      break;
+    case 'filter':
+      pathData = PATH_FILTER;
+      break;
+    case 'import':
+      pathData = PATH_IMPORT;
+      break;
+    case 'log-data':
+      pathData = PATH_LOG_DATA;
+      break;
+    case 'more':
+      pathData = PATH_MORE;
+      break;
+    case 'next':
+      pathData = PATH_NEXT;
+      break;
+    case 'previous':
+      pathData = PATH_PREVIOUS;
+      break;
+    case 'record':
+      pathData = PATH_RECORD;
+      break;
+    case 'reload':
+      pathData = PATH_RELOAD;
+      break;
+    case 'save':
+      pathData = PATH_SAVE;
+      break;
+    case 'search':
+      pathData = PATH_SEARCH;
+      break;
+    case 'settings':
+      pathData = PATH_SETTINGS;
+      break;
+    case 'suspend':
+      pathData = PATH_SUSPEND;
+      break;
+    case 'undo':
+      pathData = PATH_UNDO;
+      break;
+    case 'up':
+      pathData = PATH_UP;
+      break;
+    case 'view-dom':
+      pathData = PATH_VIEW_DOM;
+      break;
+    case 'view-source':
+      pathData = PATH_VIEW_SOURCE;
+      break;
+    default:
+      console.warn(`Unsupported type "${type}" specified for ButtonIcon`);
+      break;
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.ButtonIcon} ${className}`}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path fill="currentColor" d={pathData} />
+    </svg>
+  );
+}
+
+const PATH_ADD =
+  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z';
+
+const PATH_CANCEL = `
+  M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z
+`;
+
+const PATH_CLEAR = `
+  M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
+  16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
+`;
+
+const PATH_CLOSE =
+  'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
+
+const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';
+
+const PATH_COPY = `
+  M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
+  2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
+`;
+
+const PATH_DELETE = `
+  M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12
+  13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z
+`;
+
+const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
+
+const PATH_EXPANDED = 'M7 10l5 5 5-5z';
+
+const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';
+
+const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
+
+const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';
+
+const PATH_LOG_DATA = `
+  M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41
+  3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04
+  1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6
+  8h-4v-2h4v2zm0-4h-4v-2h4v2z
+`;
+
+const PATH_MORE = `
+  M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 
+  2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z
+`;
+
+const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';
+
+const PATH_PREVIOUS =
+  'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';
+
+const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';
+
+const PATH_RELOAD = `
+  M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0
+  6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0
+  3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z
+`;
+
+const PATH_SAVE = `
+  M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z
+`;
+
+const PATH_SEARCH = `
+  M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
+  M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
+`;
+
+const PATH_SETTINGS = `
+  M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
+  1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
+  2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
+  1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
+  1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
+  1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
+  3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
+`;
+
+const PATH_SUSPEND = `
+  M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97
+  0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
+`;
+
+const PATH_UNDO = `
+  M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
+  3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
+`;
+
+const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';
+
+const PATH_VIEW_DOM = `
+  M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12
+  17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3
+  3-1.34 3-3-1.34-3-3-3z
+`;
+
+const PATH_VIEW_SOURCE = `
+  M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
+  `;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.css b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css
new file mode 100644
index 0000000000000..22f749cc5b1a1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css
@@ -0,0 +1,17 @@
+.Badge {
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
+
+.ExtraLabel {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  color: var(--color-component-badge-count);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
new file mode 100644
index 0000000000000..660e4ab4002be
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -0,0 +1,57 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment} from 'react';
+import {
+  ElementTypeMemo,
+  ElementTypeForwardRef,
+} from 'react-devtools-shared/src/types';
+import styles from './Badge.css';
+
+import type {ElementType} from 'react-devtools-shared/src/types';
+
+type Props = {|
+  className?: string,
+  hocDisplayNames: Array<string> | null,
+  type: ElementType,
+|};
+
+export default function Badge({className, hocDisplayNames, type}: Props) {
+  let hocDisplayName = null;
+  let totalBadgeCount = 0;
+  let typeLabel = null;
+
+  if (hocDisplayNames !== null) {
+    hocDisplayName = hocDisplayNames[0];
+    totalBadgeCount += hocDisplayNames.length;
+  }
+
+  if (type === ElementTypeMemo) {
+    typeLabel = 'Memo';
+    totalBadgeCount++;
+  } else if (type === ElementTypeForwardRef) {
+    typeLabel = 'ForwardRef';
+    totalBadgeCount++;
+  }
+
+  if (hocDisplayNames === null && typeLabel === null) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <div className={`${styles.Badge} ${className || ''}`}>
+        {hocDisplayName || typeLabel}
+      </div>
+      {totalBadgeCount > 1 && (
+        <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
new file mode 100644
index 0000000000000..f37b3eaa73d3f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -0,0 +1,45 @@
+.Components {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+}
+
+.TreeWrapper {
+  flex: 0 0 65%;
+  overflow: auto;
+}
+
+.SelectedElementWrapper {
+  flex: 0 0 35%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@media screen and (max-width: 600px) {
+  .Components {
+    flex-direction: column;
+  }
+
+  .TreeWrapper {
+    flex: 0 0 50%;
+  }
+
+  .SelectedElementWrapper {
+    flex: 0 0 50%;
+  }
+}
+
+.Loading {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
new file mode 100644
index 0000000000000..107ef1393ef31
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Suspense} from 'react';
+import Tree from './Tree';
+import SelectedElement from './SelectedElement';
+import {InspectedElementContextController} from './InspectedElementContext';
+import {NativeStyleContextController} from './NativeStyleEditor/context';
+import {OwnersListContextController} from './OwnersListContext';
+import portaledContent from '../portaledContent';
+import {ModalDialog} from '../ModalDialog';
+import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
+
+import styles from './Components.css';
+
+function Components(_: {||}) {
+  // TODO Flex wrappers below should be user resizable.
+  return (
+    <SettingsModalContextController>
+      <OwnersListContextController>
+        <InspectedElementContextController>
+          <div className={styles.Components}>
+            <div className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.SelectedElementWrapper}>
+              <NativeStyleContextController>
+                <Suspense fallback={<Loading />}>
+                  <SelectedElement />
+                </Suspense>
+              </NativeStyleContextController>
+            </div>
+            <ModalDialog />
+            <SettingsModal />
+          </div>
+        </InspectedElementContextController>
+      </OwnersListContextController>
+    </SettingsModalContextController>
+  );
+}
+
+function Loading() {
+  return <div className={styles.Loading}>Loading...</div>;
+}
+
+export default portaledContent(Components);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.css b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.css
new file mode 100644
index 0000000000000..285f858a8a772
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.css
@@ -0,0 +1,10 @@
+.Input {
+  flex: 0 1 auto;
+  padding: 1px;
+  box-shadow: 0px 1px 3px transparent;
+  color: var(--color-text);
+}
+.Input:focus {
+  color: var(--color-text);
+  box-shadow: 0px 1px 3px var(--color-shadow);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
new file mode 100644
index 0000000000000..73b85cddf8c42
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -0,0 +1,78 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useState} from 'react';
+import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
+import styles from './EditableName.css';
+
+type OverrideNameFn = (path: Array<string | number>, value: any) => void;
+
+type EditableNameProps = {|
+  autoFocus?: boolean,
+  initialValue?: string,
+  overrideNameFn: OverrideNameFn,
+|};
+
+export default function EditableName({
+  autoFocus = false,
+  initialValue = '',
+  overrideNameFn,
+}: EditableNameProps) {
+  const [editableName, setEditableName] = useState(initialValue);
+  const [isValid, setIsValid] = useState(false);
+
+  const handleChange = useCallback(
+    ({target}) => {
+      const value = target.value.trim();
+
+      if (value) {
+        setIsValid(true);
+      } else {
+        setIsValid(false);
+      }
+
+      setEditableName(value);
+    },
+    [overrideNameFn],
+  );
+
+  const handleKeyDown = useCallback(
+    event => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      switch (event.key) {
+        case 'Enter':
+        case 'Tab':
+          if (isValid) {
+            overrideNameFn(editableName);
+          }
+          break;
+        case 'Escape':
+          setEditableName(initialValue);
+          break;
+        default:
+          break;
+      }
+    },
+    [editableName, setEditableName, isValid, initialValue, overrideNameFn],
+  );
+
+  return (
+    <AutoSizeInput
+      autoFocus={autoFocus}
+      className={styles.Input}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="new prop"
+      type="text"
+      value={editableName}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
new file mode 100644
index 0000000000000..30fa8a43ee657
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
@@ -0,0 +1,46 @@
+.CheckboxLabel {
+  flex: 1 1 100%;
+  display: flex;
+}
+.CheckboxLabel:focus-within {
+  background-color: var(--color-button-background-focus);
+}
+
+.Checkbox:focus {
+  outline: none;
+}
+
+.Input {
+  flex: 1 1;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Invalid {
+  flex: 1 1;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  background-color: var(--color-background-invalid);
+  color: var(--color-text-invalid);
+
+  --color-border: var(--color-text-invalid);
+}
+
+.Input:focus,
+.Invalid:focus {
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}
+
+.ResetButton {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
new file mode 100644
index 0000000000000..992f2b2dff658
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -0,0 +1,95 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useRef} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import styles from './EditableValue.css';
+import {useEditableValue} from '../hooks';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type EditableValueProps = {|
+  className?: string,
+  overrideValueFn: OverrideValueFn,
+  path: Array<string | number>,
+  value: any,
+|};
+
+export default function EditableValue({
+  className = '',
+  overrideValueFn,
+  path,
+  value,
+}: EditableValueProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [state, dispatch] = useEditableValue(value);
+  const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
+
+  const reset = () =>
+    dispatch({
+      type: 'RESET',
+      externalValue: value,
+    });
+
+  const handleChange = ({target}) =>
+    dispatch({
+      type: 'UPDATE',
+      editableValue: target.value,
+      externalValue: value,
+    });
+
+  const handleKeyDown = event => {
+    // Prevent keydown events from e.g. change selected element in the tree
+    event.stopPropagation();
+
+    switch (event.key) {
+      case 'Enter':
+        if (isValid && hasPendingChanges) {
+          overrideValueFn(path, parsedValue);
+        }
+        break;
+      case 'Escape':
+        reset();
+        break;
+      default:
+        break;
+    }
+  };
+
+  let placeholder = '';
+  if (editableValue === undefined) {
+    placeholder = '(undefined)';
+  } else {
+    placeholder = 'Enter valid JSON';
+  }
+
+  return (
+    <Fragment>
+      <input
+        autoComplete="new-password"
+        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        ref={inputRef}
+        type="text"
+        value={editableValue}
+      />
+      {hasPendingChanges && (
+        <Button
+          className={styles.ResetButton}
+          onClick={reset}
+          title="Reset value">
+          <ButtonIcon type="undo" />
+        </Button>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
new file mode 100644
index 0000000000000..f71e9f479f476
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -0,0 +1,75 @@
+.Element,
+.InactiveSelectedElement,
+.SelectedElement,
+.HoveredElement {
+  color: var(--color-component-name);
+}
+.HoveredElement {
+  background-color: var(--color-background-hover);
+}
+.InactiveSelectedElement {
+  background-color: var(--color-background-inactive);
+}
+
+.Wrapper {
+  padding: 0 0.25rem;
+  white-space: nowrap;
+  height: var(--line-height-data);
+  line-height: var(--line-height-data);
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+}
+
+.ScrollAnchor {
+  height: 100%;
+  width: 0;
+}
+
+.SelectedElement {
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
+
+  /* Invert colors */
+  --color-component-name: var(--color-component-name-inverted);
+  --color-text: var(--color-text-selected);
+  --color-component-badge-background: var(
+    --color-component-badge-background-inverted
+  );
+  --color-component-badge-count: var(--color-component-badge-count-inverted);
+  --color-attribute-name: var(--color-attribute-name-inverted);
+  --color-attribute-value: var(--color-attribute-value-inverted);
+  --color-expand-collapse-toggle: var(--color-component-name-inverted);
+}
+
+.KeyName {
+  color: var(--color-attribute-name);
+}
+
+.KeyValue {
+  color: var(--color-attribute-value);
+  user-select: text;
+  max-width: 100px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.Highlight {
+  background-color: var(--color-search-match);
+}
+.CurrentHighlight {
+  background-color: var(--color-search-match-current);
+}
+
+.ExpandCollapseToggle {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 1rem;
+  color: var(--color-expand-collapse-toggle);
+}
+
+.Badge {
+  margin-left: 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
new file mode 100644
index 0000000000000..4143bd01ce7f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -0,0 +1,232 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useMemo, useState} from 'react';
+import Store from 'react-devtools-shared/src/devtools/store';
+import Badge from './Badge';
+import ButtonIcon from '../ButtonIcon';
+import {createRegExp} from '../utils';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {StoreContext} from '../context';
+
+import type {ItemData} from './Tree';
+import type {Element} from './types';
+
+import styles from './Element.css';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+export default function ElementView({data, index, style}: Props) {
+  const store = useContext(StoreContext);
+  const {ownerFlatTree, ownerID, selectedElementID} = useContext(
+    TreeStateContext,
+  );
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const element =
+    ownerFlatTree !== null
+      ? ownerFlatTree[index]
+      : store.getElementAtIndex(index);
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const {isNavigatingWithKeyboard, onElementMouseEnter, treeFocused} = data;
+  const id = element === null ? null : element.id;
+  const isSelected = selectedElementID === id;
+
+  const handleDoubleClick = () => {
+    if (id !== null) {
+      dispatch({type: 'SELECT_OWNER', payload: id});
+    }
+  };
+
+  const handleMouseDown = ({metaKey}) => {
+    if (id !== null) {
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: metaKey ? null : id,
+      });
+    }
+  };
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (id !== null) {
+      onElementMouseEnter(id);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const handleKeyDoubleClick = event => {
+    // Double clicks on key value are used for text selection (if the text has been truncated).
+    // They should not enter the owners tree view.
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  // Handle elements that are removed from the tree while an async render is in progress.
+  if (element == null) {
+    console.warn(`<ElementView> Could not find element at index ${index}`);
+
+    // This return needs to happen after hooks, since hooks can't be conditional.
+    return null;
+  }
+
+  const {
+    depth,
+    displayName,
+    hocDisplayNames,
+    key,
+    type,
+  } = ((element: any): Element);
+
+  let className = styles.Element;
+  if (isSelected) {
+    className = treeFocused
+      ? styles.SelectedElement
+      : styles.InactiveSelectedElement;
+  } else if (isHovered && !isNavigatingWithKeyboard) {
+    className = styles.HoveredElement;
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseDown={handleMouseDown}
+      onDoubleClick={handleDoubleClick}
+      style={style}
+      data-depth={depth}>
+      {/* This wrapper is used by Tree for measurement purposes. */}
+      <div
+        className={styles.Wrapper}
+        style={{
+          // Left offset presents the appearance of a nested tree structure.
+          // We must use padding rather than margin/left because of the selected background color.
+          transform: `translateX(calc(${depth} * var(--indentation-size)))`,
+        }}>
+        {ownerID === null ? (
+          <ExpandCollapseToggle element={element} store={store} />
+        ) : null}
+        <DisplayName displayName={displayName} id={((id: any): number)} />
+        {key && (
+          <Fragment>
+            &nbsp;<span className={styles.KeyName}>key</span>="
+            <span
+              className={styles.KeyValue}
+              title={key}
+              onDoubleClick={handleKeyDoubleClick}>
+              {key}
+            </span>
+            "
+          </Fragment>
+        )}
+        <Badge
+          className={styles.Badge}
+          hocDisplayNames={hocDisplayNames}
+          type={type}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Prevent double clicks on toggle from drilling into the owner list.
+const swallowDoubleClick = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+type ExpandCollapseToggleProps = {|
+  element: Element,
+  store: Store,
+|};
+
+function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
+  const {children, id, isCollapsed} = element;
+
+  const toggleCollapsed = event => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    store.toggleIsCollapsed(id, !isCollapsed);
+  };
+
+  const stopPropagation = event => {
+    // Prevent the row from selecting
+    event.stopPropagation();
+  };
+
+  if (children.length === 0) {
+    return <div className={styles.ExpandCollapseToggle} />;
+  }
+
+  return (
+    <div
+      className={styles.ExpandCollapseToggle}
+      onMouseDown={stopPropagation}
+      onClick={toggleCollapsed}
+      onDoubleClick={swallowDoubleClick}>
+      <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} />
+    </div>
+  );
+}
+
+type DisplayNameProps = {|
+  displayName: string | null,
+  id: number,
+|};
+
+function DisplayName({displayName, id}: DisplayNameProps) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const isSearchResult = useMemo(() => {
+    return searchResults.includes(id);
+  }, [id, searchResults]);
+  const isCurrentResult =
+    searchIndex !== null && id === searchResults[searchIndex];
+
+  if (!isSearchResult || displayName === null) {
+    return displayName;
+  }
+
+  const match = createRegExp(searchText).exec(displayName);
+
+  if (match === null) {
+    return displayName;
+  }
+
+  const startIndex = match.index;
+  const stopIndex = startIndex + match[0].length;
+
+  const children = [];
+  if (startIndex > 0) {
+    children.push(<span key="begin">{displayName.slice(0, startIndex)}</span>);
+  }
+  children.push(
+    <mark
+      key="middle"
+      className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}>
+      {displayName.slice(startIndex, stopIndex)}
+    </mark>,
+  );
+  if (stopIndex < displayName.length) {
+    children.push(<span key="end">{displayName.slice(stopIndex)}</span>);
+  }
+
+  return children;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.css b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.css
new file mode 100644
index 0000000000000..38b2aa6f7e5ca
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.css
@@ -0,0 +1,7 @@
+.ExpandCollapseToggle {
+  flex: 0 0 1rem;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  color: var(--color-expand-collapse-toggle);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
new file mode 100644
index 0000000000000..234930c900b12
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './ExpandCollapseToggle.css';
+
+type ExpandCollapseToggleProps = {|
+  isOpen: boolean,
+  setIsOpen: Function,
+|};
+
+export default function ExpandCollapseToggle({
+  isOpen,
+  setIsOpen,
+}: ExpandCollapseToggleProps) {
+  return (
+    <Button
+      className={styles.ExpandCollapseToggle}
+      onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
+      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}>
+      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.css b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.css
new file mode 100644
index 0000000000000..4b37be0325508
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.css
@@ -0,0 +1,16 @@
+.HocBadges {
+  padding: 0.125rem 0.25rem;
+  user-select: none;
+}
+
+.Badge {
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
new file mode 100644
index 0000000000000..6cf25ef234a8a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import styles from './HocBadges.css';
+
+import type {Element} from './types';
+
+type Props = {|
+  element: Element,
+|};
+
+export default function HocBadges({element}: Props) {
+  const {hocDisplayNames, type} = ((element: any): Element);
+
+  let typeBadge = null;
+  if (type === ElementTypeMemo) {
+    typeBadge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    typeBadge = 'ForwardRef';
+  }
+
+  if (hocDisplayNames === null && typeBadge === null) {
+    return null;
+  }
+
+  return (
+    <div className={styles.HocBadges}>
+      {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
+      {hocDisplayNames !== null &&
+        hocDisplayNames.map(hocDisplayName => (
+          <div key={hocDisplayName} className={styles.Badge}>
+            {hocDisplayName}
+          </div>
+        ))}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
new file mode 100644
index 0000000000000..37e0d9dbd5e00
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
@@ -0,0 +1,70 @@
+.HooksTreeView {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.Hook {
+}
+
+.Children {
+  padding-left: 1rem;
+}
+
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  flex: 1 1;
+  font-family: var(--font-family-sans);
+}
+
+.NameValueRow {
+  display: flex;
+}
+
+.Name,
+.NameAnonymous {
+  flex: 0 0 auto;
+  cursor: default;
+}
+.Name {
+  color: var(--color-dim);
+}
+.NameAnonymous {
+  color: var(--color-dimmer);
+}
+
+.EditableName {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+  cursor: default;
+}
+.EditableName:after,
+.Name:after {
+  color: var(--color-text);
+  content: ': ';
+  margin-right: 0.5rem;
+}
+
+.Value {
+  color: var(--color-attribute-value);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+
+.None {
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.TruncationIndicator {
+  color: var(--color-dimmer);
+}
+
+.ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
+  width: 1rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
new file mode 100644
index 0000000000000..f479d477f4255
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -0,0 +1,311 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {copy} from 'clipboard-js';
+import React, {useCallback, useContext, useRef, useState} from 'react';
+import {BridgeContext, StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import EditableValue from './EditableValue';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
+import {InspectedElementContext} from './InspectedElementContext';
+import KeyValue from './KeyValue';
+import {serializeHooksForCopy} from '../utils';
+import styles from './HooksTree.css';
+import useContextMenu from '../../ContextMenu/useContextMenu';
+import {meta} from '../../../hydration';
+
+import type {InspectPath} from './SelectedElement';
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+
+type HooksTreeViewProps = {|
+  canEditHooks: boolean,
+  hooks: HooksTree | null,
+  id: number,
+|};
+
+export function HooksTreeView({canEditHooks, hooks, id}: HooksTreeViewProps) {
+  const {getInspectedElementPath} = useContext(InspectedElementContext);
+  const inspectPath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['hooks', ...path]);
+    },
+    [getInspectedElementPath, id],
+  );
+  const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [
+    hooks,
+  ]);
+
+  if (hooks === null) {
+    return null;
+  } else {
+    return (
+      <div className={styles.HooksTreeView}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>hooks</div>
+          <Button onClick={handleCopy} title="Copy to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        </div>
+        <InnerHooksTreeView
+          canEditHooks={canEditHooks}
+          hooks={hooks}
+          id={id}
+          inspectPath={inspectPath}
+          path={[]}
+        />
+      </div>
+    );
+  }
+}
+
+type InnerHooksTreeViewProps = {|
+  canEditHooks: boolean,
+  hooks: HooksTree,
+  id: number,
+  inspectPath: InspectPath,
+  path: Array<string | number>,
+|};
+
+export function InnerHooksTreeView({
+  canEditHooks,
+  hooks,
+  id,
+  inspectPath,
+  path,
+}: InnerHooksTreeViewProps) {
+  // $FlowFixMe "Missing type annotation for U" whatever that means
+  return hooks.map((hook, index) => (
+    <HookView
+      key={index}
+      canEditHooks={canEditHooks}
+      hook={hooks[index]}
+      id={id}
+      inspectPath={inspectPath}
+      path={path.concat([index])}
+    />
+  ));
+}
+
+type HookViewProps = {|
+  canEditHooks: boolean,
+  hook: HooksNode,
+  id: number,
+  inspectPath: InspectPath,
+  path: Array<string | number>,
+|};
+
+function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
+  const {name, id: hookID, isStateEditable, subHooks, value} = hook;
+
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    [],
+  );
+
+  const contextMenuTriggerRef = useRef(null);
+
+  useContextMenu({
+    data: {
+      path: ['hooks', ...path],
+      type:
+        hook !== null &&
+        typeof hook === 'object' &&
+        hook.hasOwnProperty(meta.type)
+          ? hook[meta.type]
+          : typeof value,
+    },
+    id: 'SelectedElement',
+    ref: contextMenuTriggerRef,
+  });
+
+  if (hook.hasOwnProperty(meta.inspected)) {
+    // This Hook is too deep and hasn't been hydrated.
+    if (__DEV__) {
+      console.warn('Unexpected dehydrated hook; this is a DevTools error.');
+    }
+    return (
+      <div className={styles.Hook}>
+        <div className={styles.NameValueRow}>
+          <span className={styles.TruncationIndicator}>...</span>
+        </div>
+      </div>
+    );
+  }
+
+  const isCustomHook = subHooks.length > 0;
+
+  const type = typeof value;
+
+  let displayValue;
+  let isComplexDisplayValue = false;
+
+  // Format data for display to mimic the props/state/context for now.
+  if (type === 'string') {
+    displayValue = `"${((value: any): string)}"`;
+  } else if (type === 'boolean') {
+    displayValue = value ? 'true' : 'false';
+  } else if (type === 'number') {
+    displayValue = value;
+  } else if (value === null) {
+    displayValue = 'null';
+  } else if (value === undefined) {
+    displayValue = null;
+  } else if (Array.isArray(value)) {
+    isComplexDisplayValue = true;
+    displayValue = 'Array';
+  } else if (type === 'object') {
+    isComplexDisplayValue = true;
+    displayValue = 'Object';
+  }
+
+  if (isCustomHook) {
+    const subHooksView = Array.isArray(subHooks) ? (
+      <InnerHooksTreeView
+        canEditHooks={canEditHooks}
+        hooks={subHooks}
+        id={id}
+        inspectPath={inspectPath}
+        path={path.concat(['subHooks'])}
+      />
+    ) : (
+      <KeyValue
+        depth={1}
+        alphaSort={false}
+        inspectPath={inspectPath}
+        name="subHooks"
+        path={path.concat(['subHooks'])}
+        pathRoot="hooks"
+        value={subHooks}
+      />
+    );
+
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.Hook}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
+              {name || 'Anonymous'}
+            </span>
+          </div>
+          <div className={styles.Children} hidden={!isOpen}>
+            <KeyValue
+              depth={1}
+              alphaSort={false}
+              inspectPath={inspectPath}
+              name="DebugValue"
+              path={path.concat(['value'])}
+              pathRoot="hooks"
+              value={value}
+            />
+            {subHooksView}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.Hook}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
+              {name || 'Anonymous'}
+            </span>{' '}
+            {/* $FlowFixMe */}
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {displayValue}
+            </span>
+          </div>
+          <div className={styles.Children} hidden={!isOpen}>
+            {subHooksView}
+          </div>
+        </div>
+      );
+    }
+  } else {
+    let overrideValueFn = null;
+    // TODO Maybe read editable value from debug hook?
+    if (canEditHooks && isStateEditable) {
+      overrideValueFn = (
+        absolutePath: Array<string | number>,
+        newValue: any,
+      ) => {
+        const rendererID = store.getRendererIDForElement(id);
+        if (rendererID !== null) {
+          bridge.send('overrideHookState', {
+            id,
+            hookID,
+            // Hooks override function expects a relative path for the specified hook (id),
+            // starting with its id within the (flat) hooks list structure.
+            // This relative path does not include the fake tree structure DevTools uses for display,
+            // so it's important that we remove that part of the path before sending the update.
+            path: absolutePath.slice(path.length + 1),
+            rendererID,
+            value: newValue,
+          });
+        }
+      };
+    }
+
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.Hook}>
+          <KeyValue
+            depth={1}
+            alphaSort={false}
+            inspectPath={inspectPath}
+            name={name}
+            overrideValueFn={overrideValueFn}
+            path={path.concat(['value'])}
+            pathRoot="hooks"
+            value={value}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.Hook}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
+            <span
+              className={
+                typeof overrideValueFn === 'function'
+                  ? styles.EditableName
+                  : styles.Name
+              }>
+              {name}
+            </span>
+            {typeof overrideValueFn === 'function' ? (
+              <EditableValue
+                overrideValueFn={overrideValueFn}
+                path={[]}
+                value={value}
+              />
+            ) : (
+              // $FlowFixMe Cannot create span element because in property children
+              <span className={styles.Value}>{displayValue}</span>
+            )}
+          </div>
+        </div>
+      );
+    }
+  }
+}
+
+// $FlowFixMe
+export default React.memo(HooksTreeView);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
new file mode 100644
index 0000000000000..7740542881623
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -0,0 +1,47 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useEffect, useState} from 'react';
+import {BridgeContext} from '../context';
+import Toggle from '../Toggle';
+import ButtonIcon from '../ButtonIcon';
+
+export default function InspectHostNodesToggle() {
+  const [isInspecting, setIsInspecting] = useState(false);
+  const bridge = useContext(BridgeContext);
+
+  const handleChange = useCallback(
+    (isChecked: boolean) => {
+      setIsInspecting(isChecked);
+
+      if (isChecked) {
+        bridge.send('startInspectingNative');
+      } else {
+        bridge.send('stopInspectingNative', false);
+      }
+    },
+    [bridge],
+  );
+
+  useEffect(() => {
+    const onStopInspectingNative = () => setIsInspecting(false);
+    bridge.addListener('stopInspectingNative', onStopInspectingNative);
+    return () =>
+      bridge.removeListener('stopInspectingNative', onStopInspectingNative);
+  }, [bridge]);
+
+  return (
+    <Toggle
+      onChange={handleChange}
+      isChecked={isInspecting}
+      title="Select an element in the page to inspect it">
+      <ButtonIcon type="search" />
+    </Toggle>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
new file mode 100644
index 0000000000000..0467ffd1c6e8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -0,0 +1,371 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {createResource} from '../../cache';
+import {BridgeContext, StoreContext} from '../context';
+import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
+import {TreeStateContext} from './TreeContext';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
+
+import type {
+  InspectedElement as InspectedElementBackend,
+  InspectedElementPayload,
+} from 'react-devtools-shared/src/backend/types';
+import type {
+  DehydratedData,
+  Element,
+  InspectedElement as InspectedElementFrontend,
+} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {Resource, Thenable} from '../../cache';
+
+export type StoreAsGlobal = (id: number, path: Array<string | number>) => void;
+
+export type CopyInspectedElementPath = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+
+export type GetInspectedElementPath = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+
+export type GetInspectedElement = (
+  id: number,
+) => InspectedElementFrontend | null;
+
+type Context = {|
+  copyInspectedElementPath: CopyInspectedElementPath,
+  getInspectedElementPath: GetInspectedElementPath,
+  getInspectedElement: GetInspectedElement,
+  storeAsGlobal: StoreAsGlobal,
+|};
+
+const InspectedElementContext = createContext<Context>(((null: any): Context));
+InspectedElementContext.displayName = 'InspectedElementContext';
+
+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
+type InProgressRequest = {|
+  promise: Thenable<InspectedElementFrontend>,
+  resolveFn: ResolveFn,
+|};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<
+  Element,
+  Element,
+  InspectedElementFrontend,
+> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(element, {promise, resolveFn});
+
+    return promise;
+  },
+  (element: Element) => element,
+  {useWeakMap: true},
+);
+
+type Props = {|
+  children: React$Node,
+|};
+
+function InspectedElementContextController({children}: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const storeAsGlobalCount = useRef(1);
+
+  // Ask the backend to store the value at the specified path as a global variable.
+  const storeAsGlobal = useCallback<GetInspectedElementPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('storeAsGlobal', {
+          count: storeAsGlobalCount.current++,
+          id,
+          path,
+          rendererID,
+        });
+      }
+    },
+    [bridge, store],
+  );
+
+  // Ask the backend to copy the specified path to the clipboard.
+  const copyInspectedElementPath = useCallback<GetInspectedElementPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('copyElementPath', {id, path, rendererID});
+      }
+    },
+    [bridge, store],
+  );
+
+  // Ask the backend to fill in a "dehydrated" path; this will result in a "inspectedElement".
+  const getInspectedElementPath = useCallback<GetInspectedElementPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('inspectElement', {id, path, rendererID});
+      }
+    },
+    [bridge, store],
+  );
+
+  const getInspectedElement = useCallback<GetInspectedElement>(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store],
+  );
+
+  // It's very important that this context consumes selectedElementID and not inspectedElementID.
+  // Otherwise the effect that sends the "inspect" message across the bridge-
+  // would itself be blocked by the same render that suspends (waiting for the data).
+  const {selectedElementID} = useContext(TreeStateContext);
+
+  const [
+    currentlyInspectedElement,
+    setCurrentlyInspectedElement,
+  ] = useState<InspectedElementFrontend | null>(null);
+
+  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
+  useEffect(() => {
+    const onInspectedElement = (data: InspectedElementPayload) => {
+      const {id} = data;
+
+      let element;
+
+      switch (data.type) {
+        case 'no-change':
+        case 'not-found':
+          // No-op
+          break;
+        case 'hydrated-path':
+          // Merge new data into previous object and invalidate cache
+          element = store.getElementByID(id);
+          if (element !== null) {
+            if (currentlyInspectedElement != null) {
+              const value = hydrateHelper(data.value, data.path);
+              const inspectedElement = {...currentlyInspectedElement};
+
+              fillInPath(inspectedElement, data.value, data.path, value);
+
+              resource.write(element, inspectedElement);
+
+              // Schedule update with React if the curently-selected element has been invalidated.
+              if (id === selectedElementID) {
+                setCurrentlyInspectedElement(inspectedElement);
+              }
+            }
+          }
+          break;
+        case 'full-data':
+          const {
+            canEditFunctionProps,
+            canEditHooks,
+            canToggleSuspense,
+            canViewSource,
+            hasLegacyContext,
+            source,
+            type,
+            owners,
+            context,
+            hooks,
+            props,
+            state,
+          } = ((data.value: any): InspectedElementBackend);
+
+          const inspectedElement: InspectedElementFrontend = {
+            canEditFunctionProps,
+            canEditHooks,
+            canToggleSuspense,
+            canViewSource,
+            hasLegacyContext,
+            id,
+            source,
+            type,
+            owners:
+              owners === null
+                ? null
+                : owners.map(owner => {
+                    const [
+                      displayName,
+                      hocDisplayNames,
+                    ] = separateDisplayNameAndHOCs(
+                      owner.displayName,
+                      owner.type,
+                    );
+                    return {
+                      ...owner,
+                      displayName,
+                      hocDisplayNames,
+                    };
+                  }),
+            context: hydrateHelper(context),
+            hooks: hydrateHelper(hooks),
+            props: hydrateHelper(props),
+            state: hydrateHelper(state),
+          };
+
+          element = store.getElementByID(id);
+          if (element !== null) {
+            const request = inProgressRequests.get(element);
+            if (request != null) {
+              inProgressRequests.delete(element);
+              batchedUpdates(() => {
+                request.resolveFn(inspectedElement);
+                setCurrentlyInspectedElement(inspectedElement);
+              });
+            } else {
+              resource.write(element, inspectedElement);
+
+              // Schedule update with React if the curently-selected element has been invalidated.
+              if (id === selectedElementID) {
+                setCurrentlyInspectedElement(inspectedElement);
+              }
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
+    return () => bridge.removeListener('inspectedElement', onInspectedElement);
+  }, [bridge, currentlyInspectedElement, selectedElementID, store]);
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(() => {
+    if (selectedElementID === null) {
+      return () => {};
+    }
+
+    const rendererID = store.getRendererIDForElement(selectedElementID);
+
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
+      if (rendererID !== null) {
+        bridge.send('inspectElement', {id: selectedElementID, rendererID});
+      }
+    };
+
+    // Send the initial inspection request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onInspectedElement = (data: InspectedElementPayload) => {
+      // If this is the element we requested, wait a little bit and then ask for another update.
+      if (data.id === selectedElementID) {
+        switch (data.type) {
+          case 'no-change':
+          case 'full-data':
+          case 'hydrated-path':
+            if (timeoutID !== null) {
+              clearTimeout(timeoutID);
+            }
+            timeoutID = setTimeout(sendRequest, 1000);
+            break;
+          default:
+            break;
+        }
+      }
+    };
+
+    bridge.addListener('inspectedElement', onInspectedElement);
+
+    return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
+
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [bridge, selectedElementID, store]);
+
+  const value = useMemo(
+    () => ({
+      copyInspectedElementPath,
+      getInspectedElement,
+      getInspectedElementPath,
+      storeAsGlobal,
+    }),
+    // InspectedElement is used to invalidate the cache and schedule an update with React.
+    [
+      copyInspectedElementPath,
+      currentlyInspectedElement,
+      getInspectedElement,
+      getInspectedElementPath,
+      storeAsGlobal,
+    ],
+  );
+
+  return (
+    <InspectedElementContext.Provider value={value}>
+      {children}
+    </InspectedElementContext.Provider>
+  );
+}
+
+function hydrateHelper(
+  dehydratedData: DehydratedData | null,
+  path?: Array<string | number>,
+): Object | null {
+  if (dehydratedData !== null) {
+    let {cleaned, data, unserializable} = dehydratedData;
+
+    if (path) {
+      const {length} = path;
+      if (length > 0) {
+        // Hydration helper requires full paths, but inspection dehydrates with relative paths.
+        // In that event it's important that we adjust the "cleaned" paths to match.
+        cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));
+        unserializable = unserializable.map(unserializablePath =>
+          unserializablePath.slice(length),
+        );
+      }
+    }
+
+    return hydrate(data, cleaned, unserializable);
+  } else {
+    return null;
+  }
+}
+
+export {InspectedElementContext, InspectedElementContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
new file mode 100644
index 0000000000000..4547a814d0524
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
@@ -0,0 +1,59 @@
+.InspectedElementTree {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+.InspectedElementTree:first-of-type {
+  border-top: none;
+}
+
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  flex: 1 1;
+  font-family: var(--font-family-sans);
+}
+
+.Item {
+  display: flex;
+}
+
+.Name {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.Name:after {
+  content: ': ';
+  color: var(--color-text);
+  margin-right: 0.5rem;
+}
+
+.Value {
+  color: var(--color-attribute-value);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.None {
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.Empty {
+  color: var(--color-dimmer);
+  font-style: italic;
+  padding-left: 0.75rem;
+}
+
+.AddEntry {
+  padding-left: 1rem;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.EditableValue {
+  min-width: 1rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
new file mode 100644
index 0000000000000..ca6616fdbe3ff
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -0,0 +1,120 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {copy} from 'clipboard-js';
+import React, {useCallback, useState} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import EditableName from './EditableName';
+import EditableValue from './EditableValue';
+import {alphaSortEntries, serializeDataForCopy} from '../utils';
+import styles from './InspectedElementTree.css';
+
+import type {InspectPath} from './SelectedElement';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type Props = {|
+  data: Object | null,
+  inspectPath?: InspectPath,
+  label: string,
+  overrideValueFn?: ?OverrideValueFn,
+  pathRoot: string,
+  showWhenEmpty?: boolean,
+  canAddEntries?: boolean,
+|};
+
+export default function InspectedElementTree({
+  data,
+  inspectPath,
+  label,
+  overrideValueFn,
+  pathRoot,
+  canAddEntries = false,
+  showWhenEmpty = false,
+}: Props) {
+  const entries = data != null ? Object.entries(data) : null;
+  if (entries !== null) {
+    entries.sort(alphaSortEntries);
+  }
+
+  const [newPropKey, setNewPropKey] = useState<number>(0);
+  const [newPropName, setNewPropName] = useState<string>('');
+
+  const isEmpty = entries === null || entries.length === 0;
+
+  const handleCopy = useCallback(
+    () => copy(serializeDataForCopy(((data: any): Object))),
+    [data],
+  );
+
+  const handleNewEntryValue = useCallback(
+    (name, value) => {
+      if (!newPropName) {
+        return;
+      }
+
+      setNewPropName('');
+      setNewPropKey(key => key + 1);
+
+      if (typeof overrideValueFn === 'function') {
+        overrideValueFn(name, value);
+      }
+    },
+    [newPropName, overrideValueFn],
+  );
+
+  if (isEmpty && !showWhenEmpty && !canAddEntries) {
+    return null;
+  } else {
+    return (
+      <div className={styles.InspectedElementTree}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>{label}</div>
+          {!isEmpty && (
+            <Button onClick={handleCopy} title="Copy to clipboard">
+              <ButtonIcon type="copy" />
+            </Button>
+          )}
+        </div>
+        {isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
+        {!isEmpty &&
+          (entries: any).map(([name, value]) => (
+            <KeyValue
+              key={name}
+              alphaSort={true}
+              pathRoot={pathRoot}
+              depth={1}
+              inspectPath={inspectPath}
+              name={name}
+              overrideValueFn={overrideValueFn}
+              path={[name]}
+              value={value}
+            />
+          ))}
+        {canAddEntries && (
+          <div className={styles.AddEntry} key={newPropKey}>
+            <EditableName
+              autoFocus={newPropKey > 0}
+              overrideNameFn={setNewPropName}
+            />
+            :&nbsp;
+            <EditableValue
+              className={styles.EditableValue}
+              overrideValueFn={handleNewEntryValue}
+              path={[newPropName]}
+              value={''}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
new file mode 100644
index 0000000000000..a984ac76df530
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -0,0 +1,42 @@
+.Item:not([hidden]) {
+  display: flex;
+}
+
+.Name {
+  color: var(--color-dim);
+  flex: 0 0 auto;
+  cursor: default;
+}
+.EditableName {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+  cursor: default;
+}
+.EditableName:after,
+.Name:after {
+  content: ': ';
+  color: var(--color-text);
+  margin-right: 0.5rem;
+}
+
+.Value {
+  color: var(--color-attribute-value);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+
+.None {
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
+  width: 1rem;
+}
+
+.Empty {
+  color: var(--color-dimmer);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
new file mode 100644
index 0000000000000..e45a5488c4a7a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -0,0 +1,263 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useEffect, useRef, useState} from 'react';
+import EditableValue from './EditableValue';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
+import {alphaSortEntries, getMetaValueLabel} from '../utils';
+import {meta} from '../../../hydration';
+import useContextMenu from '../../ContextMenu/useContextMenu';
+import styles from './KeyValue.css';
+
+import type {Element} from 'react';
+import type {InspectPath} from './SelectedElement';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type KeyValueProps = {|
+  alphaSort: boolean,
+  depth: number,
+  hidden?: boolean,
+  inspectPath?: InspectPath,
+  isReadOnly?: boolean,
+  name: string,
+  overrideValueFn?: ?OverrideValueFn,
+  path: Array<any>,
+  pathRoot: string,
+  value: any,
+|};
+
+export default function KeyValue({
+  alphaSort,
+  depth,
+  inspectPath,
+  isReadOnly,
+  hidden,
+  name,
+  overrideValueFn,
+  path,
+  pathRoot,
+  value,
+}: KeyValueProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const prevIsOpenRef = useRef(isOpen);
+  const contextMenuTriggerRef = useRef(null);
+
+  const isInspectable =
+    value !== null &&
+    typeof value === 'object' &&
+    value[meta.inspectable] &&
+    value[meta.size] !== 0;
+
+  useEffect(() => {
+    if (
+      isInspectable &&
+      isOpen &&
+      !prevIsOpenRef.current &&
+      typeof inspectPath === 'function'
+    ) {
+      inspectPath(path);
+    }
+    prevIsOpenRef.current = isOpen;
+  }, [inspectPath, isInspectable, isOpen, path]);
+
+  const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  useContextMenu({
+    data: {
+      path: [pathRoot, ...path],
+      type:
+        value !== null &&
+        typeof value === 'object' &&
+        hasOwnProperty.call(value, meta.type)
+          ? value[meta.type]
+          : typeof value,
+    },
+    id: 'SelectedElement',
+    ref: contextMenuTriggerRef,
+  });
+
+  const dataType = typeof value;
+  const isSimpleType =
+    dataType === 'number' ||
+    dataType === 'string' ||
+    dataType === 'boolean' ||
+    value == null;
+
+  const style = {
+    paddingLeft: `${(depth - 1) * 0.75}rem`,
+  };
+
+  let children = null;
+  if (isSimpleType) {
+    let displayValue = value;
+    if (dataType === 'string') {
+      displayValue = `"${value}"`;
+    } else if (dataType === 'boolean') {
+      displayValue = value ? 'true' : 'false';
+    } else if (value === null) {
+      displayValue = 'null';
+    } else if (value === undefined) {
+      displayValue = 'undefined';
+    }
+
+    const isEditable = typeof overrideValueFn === 'function' && !isReadOnly;
+
+    children = (
+      <div
+        key="root"
+        path={path}
+        className={styles.Item}
+        hidden={hidden}
+        ref={contextMenuTriggerRef}
+        style={style}>
+        <div className={styles.ExpandCollapseToggleSpacer} />
+        <span className={isEditable ? styles.EditableName : styles.Name}>
+          {name}
+        </span>
+        {isEditable ? (
+          <EditableValue
+            overrideValueFn={((overrideValueFn: any): OverrideValueFn)}
+            path={path}
+            value={value}
+          />
+        ) : (
+          <span className={styles.Value}>{displayValue}</span>
+        )}
+      </div>
+    );
+  } else if (
+    hasOwnProperty.call(value, meta.type) &&
+    !hasOwnProperty.call(value, meta.unserializable)
+  ) {
+    children = (
+      <div
+        ref={contextMenuTriggerRef}
+        key="root"
+        className={styles.Item}
+        hidden={hidden}
+        style={style}>
+        {isInspectable ? (
+          <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+        ) : (
+          <div className={styles.ExpandCollapseToggleSpacer} />
+        )}
+        <span
+          className={styles.Name}
+          onClick={isInspectable ? toggleIsOpen : undefined}>
+          {name}
+        </span>
+        <span
+          className={styles.Value}
+          onClick={isInspectable ? toggleIsOpen : undefined}>
+          {getMetaValueLabel(value)}
+        </span>
+      </div>
+    );
+  } else {
+    if (Array.isArray(value)) {
+      const hasChildren = value.length > 0;
+      const displayName = getMetaValueLabel(value);
+
+      children = value.map((innerValue, index) => (
+        <KeyValue
+          key={index}
+          alphaSort={alphaSort}
+          depth={depth + 1}
+          inspectPath={inspectPath}
+          isReadOnly={isReadOnly}
+          hidden={hidden || !isOpen}
+          name={index}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(index)}
+          pathRoot={pathRoot}
+          value={value[index]}
+        />
+      ));
+      children.unshift(
+        <div
+          ref={contextMenuTriggerRef}
+          key={`${depth}-root`}
+          className={styles.Item}
+          hidden={hidden}
+          style={style}>
+          {hasChildren ? (
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+          ) : (
+            <div className={styles.ExpandCollapseToggleSpacer} />
+          )}
+          <span
+            className={styles.Name}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {name}
+          </span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
+        </div>,
+      );
+    } else {
+      // TRICKY
+      // It's important to use Object.entries() rather than Object.keys()
+      // because of the hidden meta Symbols used for hydration and unserializable values.
+      const entries = Object.entries(value);
+      if (alphaSort) {
+        entries.sort(alphaSortEntries);
+      }
+
+      const hasChildren = entries.length > 0;
+      const displayName = getMetaValueLabel(value);
+
+      let areChildrenReadOnly = isReadOnly || !!value[meta.readonly];
+      children = entries.map<Element<any>>(([key, keyValue]) => (
+        <KeyValue
+          key={key}
+          alphaSort={alphaSort}
+          depth={depth + 1}
+          inspectPath={inspectPath}
+          isReadOnly={areChildrenReadOnly}
+          hidden={hidden || !isOpen}
+          name={key}
+          overrideValueFn={overrideValueFn}
+          path={path.concat(key)}
+          pathRoot={pathRoot}
+          value={keyValue}
+        />
+      ));
+      children.unshift(
+        <div
+          ref={contextMenuTriggerRef}
+          key={`${depth}-root`}
+          className={styles.Item}
+          hidden={hidden}
+          style={style}>
+          {hasChildren ? (
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+          ) : (
+            <div className={styles.ExpandCollapseToggleSpacer} />
+          )}
+          <span
+            className={styles.Name}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {name}
+          </span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
+        </div>,
+      );
+    }
+  }
+
+  return children;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
new file mode 100644
index 0000000000000..d231c8b8af024
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
@@ -0,0 +1,26 @@
+.Input {
+  width: 0;
+  min-width: 0.5rem;
+  flex: 1 1 auto;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0;
+  border: none;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Input:focus {
+  border-color: var(--color-border);
+}
+
+.HiddenDiv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  height: 0;
+  overflow: scroll;
+  white-space: pre;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
new file mode 100644
index 0000000000000..389013ee7d5a6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -0,0 +1,105 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useLayoutEffect, useRef} from 'react';
+import styles from './AutoSizeInput.css';
+
+type Props = {
+  className?: string,
+  onFocus?: (event: FocusEvent) => void,
+  placeholder?: string,
+  value: any,
+  ...
+};
+
+export default function AutoSizeInput({
+  className,
+  onFocus,
+  placeholder,
+  value,
+  ...rest
+}: Props) {
+  const hiddenDivRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const onFocusWrapper = event => {
+    if (inputRef.current !== null) {
+      inputRef.current.selectionStart = 0;
+      inputRef.current.selectionEnd = value.length;
+    }
+
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
+  };
+
+  // Copy text styles from <input> to hidden sizing <div>
+  useLayoutEffect(() => {
+    if (
+      typeof window.getComputedStyle !== 'function' ||
+      inputRef.current === null
+    ) {
+      return;
+    }
+
+    const inputStyle = window.getComputedStyle(inputRef.current);
+    if (!inputStyle) {
+      return;
+    }
+
+    if (hiddenDivRef.current !== null) {
+      const divStyle = hiddenDivRef.current.style;
+      divStyle.border = inputStyle.border;
+      divStyle.fontFamily = inputStyle.fontFamily;
+      divStyle.fontSize = inputStyle.fontSize;
+      divStyle.fontStyle = inputStyle.fontStyle;
+      divStyle.fontWeight = inputStyle.fontWeight;
+      divStyle.letterSpacing = inputStyle.letterSpacing;
+      divStyle.padding = inputStyle.padding;
+    }
+  }, []);
+
+  // Resize input any time text changes
+  useLayoutEffect(() => {
+    if (hiddenDivRef.current === null) {
+      return;
+    }
+
+    const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;
+    if (!scrollWidth) {
+      return;
+    }
+
+    // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
+    // Not sure why this is, but the old DevTools did a similar thing.
+    const targetWidth = Math.ceil(scrollWidth) + 1;
+
+    if (inputRef.current !== null) {
+      inputRef.current.style.width = `${targetWidth}px`;
+    }
+  }, [value]);
+
+  const isEmpty = value === '' || value === '""';
+
+  return (
+    <Fragment>
+      <input
+        ref={inputRef}
+        className={`${className ? className : ''} ${styles.Input}`}
+        onFocus={onFocusWrapper}
+        placeholder={placeholder}
+        value={isEmpty ? '' : value}
+        {...rest}
+      />
+      <div ref={hiddenDivRef} className={styles.HiddenDiv}>
+        {isEmpty ? placeholder : value}
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
new file mode 100644
index 0000000000000..d21b49197a19b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
@@ -0,0 +1,50 @@
+.LayoutViewer {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
+
+.Header {
+  font-family: var(--font-family-sans);
+}
+
+.DashedBox,
+.SolidBox {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-width: 1px;
+  border-color: var(--color-dim);
+  padding: 0.25rem;
+  margin: 0.25rem;
+}
+.DashedBox {
+  border-style: dashed;
+}
+.SolidBox {
+  border-style: solid;
+}
+
+.LabelRow {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Label {
+  position: absolute;
+  left: 0.5rem;
+  flex: 1 0 100px;
+  color: var(--color-attribute-name);
+}
+
+.BoxRow {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
new file mode 100644
index 0000000000000..22287647c8b16
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -0,0 +1,71 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import styles from './LayoutViewer.css';
+
+import type {Layout} from './types';
+
+type Props = {|
+  id: number,
+  layout: Layout,
+|};
+
+export default function LayoutViewer({id, layout}: Props) {
+  const {height, margin, padding, y, width, x} = layout;
+
+  return (
+    <div className={styles.LayoutViewer}>
+      <div className={styles.Header}>layout</div>
+      <div className={styles.DashedBox}>
+        <div className={styles.LabelRow}>
+          <label className={styles.Label}>margin</label>
+
+          <label>{margin.top || '-'}</label>
+        </div>
+
+        <div className={styles.BoxRow}>
+          <label>{margin.left || '-'}</label>
+
+          <div className={styles.SolidBox}>
+            <div className={styles.LabelRow}>
+              <label className={styles.Label}>padding</label>
+
+              <label>{padding.top || '-'}</label>
+            </div>
+
+            <div className={styles.BoxRow}>
+              <label>{padding.left || '-'}</label>
+
+              <div className={styles.DashedBox}>
+                <div className={styles.LabelRow}>
+                  {format(width)} x {format(height)} ({format(x)}, {format(y)})
+                </div>
+              </div>
+
+              <label>{padding.right || '-'}</label>
+            </div>
+
+            <label>{padding.bottom || '-'}</label>
+          </div>
+          <label>{margin.right || '-'}</label>
+        </div>
+        <label>{margin.bottom || '-'}</label>
+      </div>
+    </div>
+  );
+}
+
+function format(number: number): string | number {
+  if (Math.round(number) === number) {
+    return number;
+  } else {
+    return number.toFixed(1);
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
new file mode 100644
index 0000000000000..bbaaf16ea5829
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -0,0 +1,58 @@
+.StyleEditor {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  flex: 1 1;
+}
+
+.Brackets {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-small);
+}
+
+.Row {
+  white-space: nowrap;
+  padding-left: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.Invalid {
+  background-color: var(--color-background-invalid);
+  color: var(--color-text-invalid);
+
+  --color-border: var(--color-text-invalid);
+}
+.Attribute {
+  color: var(--color-attribute-name);
+}
+
+.Value {
+  color: var(--color-attribute-value);
+}
+
+.Input {
+  flex: 0 1 auto;
+  padding: 1px;
+  box-shadow: 0px 1px 3px transparent;
+}
+.Input:focus {
+  color: var(--color-text);
+  box-shadow: 0px 1px 3px var(--color-shadow);
+}
+
+.Empty {
+  color: var(--color-dimmer);
+  font-style: italic;
+  user-select: none;
+  padding-left: 1rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
new file mode 100644
index 0000000000000..8e0210d44b49c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -0,0 +1,293 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext, useMemo, useRef, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {copy} from 'clipboard-js';
+import {
+  BridgeContext,
+  StoreContext,
+} from 'react-devtools-shared/src/devtools/views/context';
+import Button from '../../Button';
+import ButtonIcon from '../../ButtonIcon';
+import {serializeDataForCopy} from '../../utils';
+import AutoSizeInput from './AutoSizeInput';
+import styles from './StyleEditor.css';
+import {sanitizeForParse} from '../../../utils';
+
+import type {Style} from './types';
+
+type Props = {|
+  id: number,
+  style: Style,
+|};
+
+type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
+type ChangeValueFn = (name: string, value: any) => void;
+
+export default function StyleEditor({id, style}: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const changeAttribute = (oldName: string, newName: string, value: any) => {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('NativeStyleEditor_renameAttribute', {
+        id,
+        rendererID,
+        oldName,
+        newName,
+        value,
+      });
+    }
+  };
+
+  const changeValue = (name: string, value: any) => {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('NativeStyleEditor_setValue', {
+        id,
+        rendererID,
+        name,
+        value,
+      });
+    }
+  };
+
+  const keys = useMemo(() => Array.from(Object.keys(style)), [style]);
+
+  const handleCopy = () => copy(serializeDataForCopy(style));
+
+  return (
+    <div className={styles.StyleEditor}>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>
+          <div className={styles.Brackets}>{'style {'}</div>
+        </div>
+        <Button onClick={handleCopy} title="Copy to clipboard">
+          <ButtonIcon type="copy" />
+        </Button>
+      </div>
+      {keys.length > 0 &&
+        keys.map(attribute => (
+          <Row
+            key={attribute}
+            attribute={attribute}
+            changeAttribute={changeAttribute}
+            changeValue={changeValue}
+            validAttributes={store.nativeStyleEditorValidAttributes}
+            value={style[attribute]}
+          />
+        ))}
+      <NewRow
+        changeAttribute={changeAttribute}
+        changeValue={changeValue}
+        validAttributes={store.nativeStyleEditorValidAttributes}
+      />
+      <div className={styles.Brackets}>{'}'}</div>
+    </div>
+  );
+}
+
+type NewRowProps = {|
+  changeAttribute: ChangeAttributeFn,
+  changeValue: ChangeValueFn,
+  validAttributes: $ReadOnlyArray<string> | null,
+|};
+
+function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
+  const [key, setKey] = useState<number>(0);
+  const reset = () => setKey(key + 1);
+
+  const newAttributeRef = useRef<string>('');
+
+  const changeAttributeWrapper = (
+    oldAttribute: string,
+    newAttribute: string,
+    value: any,
+  ) => {
+    // Ignore attribute changes until a value has been specified
+    newAttributeRef.current = newAttribute;
+  };
+
+  const changeValueWrapper = (attribute: string, value: any) => {
+    // Blur events should reset/cancel if there's no value or no attribute
+    if (newAttributeRef.current !== '') {
+      if (value !== '') {
+        changeValue(newAttributeRef.current, value);
+      }
+      reset();
+    }
+  };
+
+  return (
+    <Row
+      key={key}
+      attribute={''}
+      attributePlaceholder="attribute"
+      changeAttribute={changeAttributeWrapper}
+      changeValue={changeValueWrapper}
+      validAttributes={validAttributes}
+      value={''}
+      valuePlaceholder="value"
+    />
+  );
+}
+
+type RowProps = {|
+  attribute: string,
+  attributePlaceholder?: string,
+  changeAttribute: ChangeAttributeFn,
+  changeValue: ChangeValueFn,
+  validAttributes: $ReadOnlyArray<string> | null,
+  value: any,
+  valuePlaceholder?: string,
+|};
+
+function Row({
+  attribute,
+  attributePlaceholder,
+  changeAttribute,
+  changeValue,
+  validAttributes,
+  value,
+  valuePlaceholder,
+}: RowProps) {
+  // TODO (RN style editor) Use @reach/combobox to auto-complete attributes.
+  // The list of valid attributes would need to be injected by RN backend,
+  // which would need to require them from ReactNativeViewViewConfig "validAttributes.style" keys.
+  // This would need to degrade gracefully for react-native-web,
+  // althoguh we could let it also inject a custom set of whitelisted attributes.
+
+  const [localAttribute, setLocalAttribute] = useState(attribute);
+  const [localValue, setLocalValue] = useState(JSON.stringify(value));
+  const [isAttributeValid, setIsAttributeValid] = useState(true);
+  const [isValueValid, setIsValueValid] = useState(true);
+
+  const validateAndSetLocalAttribute = newAttribute => {
+    const isValid =
+      newAttribute === '' ||
+      validAttributes === null ||
+      validAttributes.indexOf(newAttribute) >= 0;
+
+    batchedUpdates(() => {
+      setLocalAttribute(newAttribute);
+      setIsAttributeValid(isValid);
+    });
+  };
+
+  const validateAndSetLocalValue = newValue => {
+    let isValid = false;
+    try {
+      JSON.parse(sanitizeForParse(newValue));
+      isValid = true;
+    } catch (error) {}
+
+    batchedUpdates(() => {
+      setLocalValue(newValue);
+      setIsValueValid(isValid);
+    });
+  };
+
+  const resetAttribute = () => {
+    setLocalAttribute(attribute);
+  };
+
+  const resetValue = () => {
+    setLocalValue(value);
+  };
+
+  const submitValueChange = () => {
+    if (isAttributeValid && isValueValid) {
+      const parsedLocalValue = JSON.parse(sanitizeForParse(localValue));
+      if (value !== parsedLocalValue) {
+        changeValue(attribute, parsedLocalValue);
+      }
+    }
+  };
+
+  const submitAttributeChange = () => {
+    if (isAttributeValid && isValueValid) {
+      if (attribute !== localAttribute) {
+        changeAttribute(attribute, localAttribute, value);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.Row}>
+      <Field
+        className={isAttributeValid ? styles.Attribute : styles.Invalid}
+        onChange={validateAndSetLocalAttribute}
+        onReset={resetAttribute}
+        onSubmit={submitAttributeChange}
+        placeholder={attributePlaceholder}
+        value={localAttribute}
+      />
+      :&nbsp;
+      <Field
+        className={isValueValid ? styles.Value : styles.Invalid}
+        onChange={validateAndSetLocalValue}
+        onReset={resetValue}
+        onSubmit={submitValueChange}
+        placeholder={valuePlaceholder}
+        value={localValue}
+      />
+      ;
+    </div>
+  );
+}
+
+type FieldProps = {|
+  className: string,
+  onChange: (value: any) => void,
+  onReset: () => void,
+  onSubmit: () => void,
+  placeholder?: string,
+  value: any,
+|};
+
+function Field({
+  className,
+  onChange,
+  onReset,
+  onSubmit,
+  placeholder,
+  value,
+}: FieldProps) {
+  const onKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+        onSubmit();
+        break;
+      case 'Escape':
+        onReset();
+        break;
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <AutoSizeInput
+      className={`${className} ${styles.Input}`}
+      onBlur={onSubmit}
+      onChange={event => onChange(event.target.value)}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      value={value}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
new file mode 100644
index 0000000000000..2542957f882fb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -0,0 +1,201 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {createResource} from 'react-devtools-shared/src/devtools/cache';
+import {
+  BridgeContext,
+  StoreContext,
+} from 'react-devtools-shared/src/devtools/views/context';
+import {TreeStateContext} from '../TreeContext';
+
+import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {
+  Resource,
+  Thenable,
+} from 'react-devtools-shared/src/devtools/cache';
+
+export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;
+
+type Context = {|
+  getStyleAndLayout: GetStyleAndLayout,
+|};
+
+const NativeStyleContext = createContext<Context>(((null: any): Context));
+NativeStyleContext.displayName = 'NativeStyleContext';
+
+type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
+type InProgressRequest = {|
+  promise: Thenable<StyleAndLayoutFrontend>,
+  resolveFn: ResolveFn,
+|};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<
+  Element,
+  Element,
+  StyleAndLayoutFrontend,
+> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(element, {promise, resolveFn});
+
+    return promise;
+  },
+  (element: Element) => element,
+  {useWeakMap: true},
+);
+
+type Props = {|
+  children: React$Node,
+|};
+
+function NativeStyleContextController({children}: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const getStyleAndLayout = useCallback<GetStyleAndLayout>(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store],
+  );
+
+  // It's very important that this context consumes selectedElementID and not NativeStyleID.
+  // Otherwise the effect that sends the "inspect" message across the bridge-
+  // would itself be blocked by the same render that suspends (waiting for the data).
+  const {selectedElementID} = useContext(TreeStateContext);
+
+  const [
+    currentStyleAndLayout,
+    setCurrentStyleAndLayout,
+  ] = useState<StyleAndLayoutFrontend | null>(null);
+
+  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
+  useEffect(() => {
+    const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {
+      let element = store.getElementByID(id);
+      if (element !== null) {
+        const styleAndLayout: StyleAndLayoutFrontend = {
+          layout,
+          style,
+        };
+        const request = inProgressRequests.get(element);
+        if (request != null) {
+          inProgressRequests.delete(element);
+          batchedUpdates(() => {
+            request.resolveFn(styleAndLayout);
+            setCurrentStyleAndLayout(styleAndLayout);
+          });
+        } else {
+          resource.write(element, styleAndLayout);
+
+          // Schedule update with React if the currently-selected element has been invalidated.
+          if (id === selectedElementID) {
+            setCurrentStyleAndLayout(styleAndLayout);
+          }
+        }
+      }
+    };
+
+    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+    return () =>
+      bridge.removeListener(
+        'NativeStyleEditor_styleAndLayout',
+        onStyleAndLayout,
+      );
+  }, [bridge, currentStyleAndLayout, selectedElementID, store]);
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(() => {
+    if (selectedElementID === null) {
+      return () => {};
+    }
+
+    const rendererID = store.getRendererIDForElement(selectedElementID);
+
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
+      if (rendererID !== null) {
+        bridge.send('NativeStyleEditor_measure', {
+          id: selectedElementID,
+          rendererID,
+        });
+      }
+    };
+
+    // Send the initial measurement request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onStyleAndLayout = ({id}: StyleAndLayoutBackend) => {
+      // If this is the element we requested, wait a little bit and then ask for another update.
+      if (id === selectedElementID) {
+        if (timeoutID !== null) {
+          clearTimeout(timeoutID);
+        }
+        timeoutID = setTimeout(sendRequest, 1000);
+      }
+    };
+
+    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+
+    return () => {
+      bridge.removeListener(
+        'NativeStyleEditor_styleAndLayout',
+        onStyleAndLayout,
+      );
+
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [bridge, selectedElementID, store]);
+
+  const value = useMemo(
+    () => ({getStyleAndLayout}),
+    // NativeStyle is used to invalidate the cache and schedule an update with React.
+    [currentStyleAndLayout, getStyleAndLayout],
+  );
+
+  return (
+    <NativeStyleContext.Provider value={value}>
+      {children}
+    </NativeStyleContext.Provider>
+  );
+}
+
+export {NativeStyleContext, NativeStyleContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
new file mode 100644
index 0000000000000..d9032e2f61ac4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -0,0 +1,72 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useMemo} from 'react';
+import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
+import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
+import {NativeStyleContext} from './context';
+import LayoutViewer from './LayoutViewer';
+import StyleEditor from './StyleEditor';
+import {TreeStateContext} from '../TreeContext';
+
+type Props = {||};
+
+export default function NativeStyleEditorWrapper(_: Props) {
+  const store = useContext(StoreContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.supportsNativeStyleEditor,
+      subscribe: (callback: Function) => {
+        store.addListener('supportsNativeStyleEditor', callback);
+        return () => {
+          store.removeListener('supportsNativeStyleEditor', callback);
+        };
+      },
+    }),
+    [store],
+  );
+  const supportsNativeStyleEditor = useSubscription<boolean>(subscription);
+
+  if (!supportsNativeStyleEditor) {
+    return null;
+  }
+
+  return <NativeStyleEditor />;
+}
+
+function NativeStyleEditor(_: Props) {
+  const {getStyleAndLayout} = useContext(NativeStyleContext);
+
+  const {inspectedElementID} = useContext(TreeStateContext);
+  if (inspectedElementID === null) {
+    return null;
+  }
+
+  const maybeStyleAndLayout = getStyleAndLayout(inspectedElementID);
+  if (maybeStyleAndLayout === null) {
+    return null;
+  }
+
+  const {layout, style} = maybeStyleAndLayout;
+
+  return (
+    <Fragment>
+      {layout !== null && (
+        <LayoutViewer id={inspectedElementID} layout={layout} />
+      )}
+      {style !== null && (
+        <StyleEditor
+          id={inspectedElementID}
+          style={style !== null ? style : {}}
+        />
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
new file mode 100644
index 0000000000000..8a24e808a1e4f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  Layout as LayoutBackend,
+  Style as StyleBackend,
+} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+
+export type Layout = LayoutBackend;
+export type Style = StyleBackend;
+export type StyleAndLayout = {|
+  layout: LayoutBackend | null,
+  style: StyleBackend | null,
+|};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
new file mode 100644
index 0000000000000..aae74b4f84b50
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -0,0 +1,129 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {createContext, useCallback, useContext, useEffect} from 'react';
+import {createResource} from '../../cache';
+import {BridgeContext, StoreContext} from '../context';
+import {TreeStateContext} from './TreeContext';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
+
+import type {OwnersList} from 'react-devtools-shared/src/backend/types';
+import type {
+  Element,
+  Owner,
+} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {Resource, Thenable} from '../../cache';
+
+type Context = (id: number) => Array<Owner> | null;
+
+const OwnersListContext = createContext<Context>(((null: any): Context));
+OwnersListContext.displayName = 'OwnersListContext';
+
+type ResolveFn = (ownersList: Array<Owner> | null) => void;
+type InProgressRequest = {|
+  promise: Thenable<Array<Owner>>,
+  resolveFn: ResolveFn,
+|};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<Element, Element, Array<Owner>> = createResource(
+  (element: Element) => {
+    let request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    inProgressRequests.set(element, {promise, resolveFn});
+
+    return promise;
+  },
+  (element: Element) => element,
+  {useWeakMap: true},
+);
+
+type Props = {|
+  children: React$Node,
+|};
+
+function OwnersListContextController({children}: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const {ownerID} = useContext(TreeStateContext);
+
+  const read = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        return resource.read(element);
+      } else {
+        return null;
+      }
+    },
+    [store],
+  );
+
+  useEffect(() => {
+    const onOwnersList = (ownersList: OwnersList) => {
+      const id = ownersList.id;
+
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        const request = inProgressRequests.get(element);
+        if (request != null) {
+          inProgressRequests.delete(element);
+
+          request.resolveFn(
+            ownersList.owners === null
+              ? null
+              : ownersList.owners.map(owner => {
+                  const [
+                    displayNameWithoutHOCs,
+                    hocDisplayNames,
+                  ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
+
+                  return {
+                    ...owner,
+                    displayName: displayNameWithoutHOCs,
+                    hocDisplayNames,
+                  };
+                }),
+          );
+        }
+      }
+    };
+
+    bridge.addListener('ownersList', onOwnersList);
+    return () => bridge.removeListener('ownersList', onOwnersList);
+  }, [bridge, store]);
+
+  // This effect requests an updated owners list any time the selected owner changes
+  useEffect(() => {
+    if (ownerID !== null) {
+      const rendererID = store.getRendererIDForElement(ownerID);
+      if (rendererID !== null) {
+        bridge.send('getOwnersList', {id: ownerID, rendererID});
+      }
+    }
+
+    return () => {};
+  }, [bridge, ownerID, store]);
+
+  return (
+    <OwnersListContext.Provider value={read}>
+      {children}
+    </OwnersListContext.Provider>
+  );
+}
+
+export {OwnersListContext, OwnersListContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
new file mode 100644
index 0000000000000..5fed9e61d4e3f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
@@ -0,0 +1,104 @@
+.OwnerStack {
+  max-width: 100%;
+  overflow-x: auto;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.Component,
+.Component[data-reach-menu-item] {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  user-select: none;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.Component[data-reach-menu-item][data-selected],
+.Component[data-reach-menu-item][data-selected]:hover {
+  color: var(--color-text-selected);
+  background: var(--color-background-selected);
+}
+.Component[data-reach-menu-item][data-selected]:focus {
+  outline: none;
+}
+
+.Bar {
+  display: flex;
+  flex: 1 1 auto;
+  overflow-x: auto;
+}
+
+.VRule {
+  flex: 0 0 auto;
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+  margin: 0 0.5rem;
+}
+
+.MenuButton {
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  flex: 0 0 auto;
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+}
+.MenuButtonContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
+.MenuButton:hover {
+  color: var(--color-button-hover);
+}
+.MenuButton[aria-expanded='true'],
+.MenuButton[aria-expanded='true']:active {
+  color: var(--color-button-active);
+  outline: none;
+}
+
+.MenuButton:focus,
+.MenuButtonContent:focus {
+  outline: none;
+}
+.MenuButton:focus > .MenuButtonContent {
+  background: var(--color-button-background-focus);
+}
+
+.Modal[data-reach-menu-list] {
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  color: var(--color-button);
+  padding: 0.25rem 0;
+  padding-right: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  max-height: 10rem;
+  overflow: auto;
+
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+  position: relative;
+
+  /* Reach UI tries to set its own :( */
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.NotInStore,
+.NotInStore:hover {
+  color: var(--color-dimmest);
+}
+
+.Badge {
+  margin-left: 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
new file mode 100644
index 0000000000000..a42ff9ada0d37
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -0,0 +1,306 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import Tooltip from '@reach/tooltip';
+import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import Badge from './Badge';
+import {OwnersListContext} from './OwnersListContext';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {useIsOverflowing} from '../hooks';
+import {StoreContext} from '../context';
+
+import type {Owner} from './types';
+
+import styles from './OwnersStack.css';
+
+type SelectOwner = (owner: Owner | null) => void;
+
+type ACTION_UPDATE_OWNER_ID = {|
+  type: 'UPDATE_OWNER_ID',
+  ownerID: number | null,
+  owners: Array<Owner>,
+|};
+type ACTION_UPDATE_SELECTED_INDEX = {|
+  type: 'UPDATE_SELECTED_INDEX',
+  selectedIndex: number,
+|};
+
+type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;
+
+type State = {|
+  ownerID: number | null,
+  owners: Array<Owner>,
+  selectedIndex: number,
+|};
+
+function dialogReducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_OWNER_ID':
+      const selectedIndex = action.owners.findIndex(
+        owner => owner.id === action.ownerID,
+      );
+      return {
+        ownerID: action.ownerID,
+        owners: action.owners,
+        selectedIndex,
+      };
+    case 'UPDATE_SELECTED_INDEX':
+      return {
+        ...state,
+        selectedIndex: action.selectedIndex,
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
+export default function OwnerStack() {
+  const read = useContext(OwnersListContext);
+  const {ownerID} = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+
+  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+    ownerID: null,
+    owners: [],
+    selectedIndex: 0,
+  });
+
+  // When an owner is selected, we either need to update the selected index, or we need to fetch a new list of owners.
+  // We use a reducer here so that we can avoid fetching a new list unless the owner ID has actually changed.
+  if (ownerID === null) {
+    dispatch({
+      type: 'UPDATE_OWNER_ID',
+      ownerID: null,
+      owners: [],
+    });
+  } else if (ownerID !== state.ownerID) {
+    const isInStore =
+      state.owners.findIndex(owner => owner.id === ownerID) >= 0;
+    dispatch({
+      type: 'UPDATE_OWNER_ID',
+      ownerID,
+      owners: isInStore ? state.owners : read(ownerID) || [],
+    });
+  }
+
+  const {owners, selectedIndex} = state;
+
+  const selectOwner = useCallback<SelectOwner>(
+    (owner: Owner | null) => {
+      if (owner !== null) {
+        const index = owners.indexOf(owner);
+        dispatch({
+          type: 'UPDATE_SELECTED_INDEX',
+          selectedIndex: index >= 0 ? index : 0,
+        });
+        treeDispatch({type: 'SELECT_OWNER', payload: owner.id});
+      } else {
+        dispatch({
+          type: 'UPDATE_SELECTED_INDEX',
+          selectedIndex: 0,
+        });
+        treeDispatch({type: 'RESET_OWNER_STACK'});
+      }
+    },
+    [owners, treeDispatch],
+  );
+
+  const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
+  const elementsBarRef = useRef<HTMLDivElement | null>(null);
+  const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);
+
+  const selectedOwner = owners[selectedIndex];
+
+  useLayoutEffect(() => {
+    // If we're already overflowing, then we don't need to re-measure items.
+    // That's because once the owners stack is open, it can only get larger (by driling in).
+    // A totally new stack can only be reached by exiting this mode and re-entering it.
+    if (elementsBarRef.current === null || isOverflowing) {
+      return () => {};
+    }
+
+    let totalWidth = 0;
+    for (let i = 0; i < owners.length; i++) {
+      const element = elementsBarRef.current.children[i];
+      const computedStyle = getComputedStyle(element);
+
+      totalWidth +=
+        element.offsetWidth +
+        parseInt(computedStyle.marginLeft, 10) +
+        parseInt(computedStyle.marginRight, 10);
+    }
+
+    setElementsTotalWidth(totalWidth);
+  }, [elementsBarRef, isOverflowing, owners.length]);
+
+  return (
+    <div className={styles.OwnerStack}>
+      <div className={styles.Bar} ref={elementsBarRef}>
+        {isOverflowing && (
+          <Fragment>
+            <ElementsDropdown
+              owners={owners}
+              selectedIndex={selectedIndex}
+              selectOwner={selectOwner}
+            />
+            <BackToOwnerButton
+              owners={owners}
+              selectedIndex={selectedIndex}
+              selectOwner={selectOwner}
+            />
+            {selectedOwner != null && (
+              <ElementView
+                owner={selectedOwner}
+                isSelected={true}
+                selectOwner={selectOwner}
+              />
+            )}
+          </Fragment>
+        )}
+        {!isOverflowing &&
+          owners.map((owner, index) => (
+            <ElementView
+              key={index}
+              owner={owner}
+              isSelected={index === selectedIndex}
+              selectOwner={selectOwner}
+            />
+          ))}
+      </div>
+      <div className={styles.VRule} />
+      <Button
+        className={styles.IconButton}
+        onClick={() => selectOwner(null)}
+        title="Back to tree view">
+        <ButtonIcon type="close" />
+      </Button>
+    </div>
+  );
+}
+
+type ElementsDropdownProps = {
+  owners: Array<Owner>,
+  selectedIndex: number,
+  selectOwner: SelectOwner,
+  ...
+};
+function ElementsDropdown({
+  owners,
+  selectedIndex,
+  selectOwner,
+}: ElementsDropdownProps) {
+  const store = useContext(StoreContext);
+
+  const menuItems = [];
+  for (let index = owners.length - 1; index >= 0; index--) {
+    const owner = owners[index];
+    const isInStore = store.containsElement(owner.id);
+    menuItems.push(
+      <MenuItem
+        key={owner.id}
+        className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
+        onSelect={() => (isInStore ? selectOwner(owner) : null)}>
+        {owner.displayName}
+
+        <Badge
+          className={styles.Badge}
+          hocDisplayNames={owner.hocDisplayNames}
+          type={owner.type}
+        />
+      </MenuItem>,
+    );
+  }
+
+  return (
+    <Menu>
+      <MenuButton className={styles.MenuButton}>
+        <Tooltip label="Open elements dropdown">
+          <span className={styles.MenuButtonContent} tabIndex={-1}>
+            <ButtonIcon type="more" />
+          </span>
+        </Tooltip>
+      </MenuButton>
+      <MenuList className={styles.Modal}>{menuItems}</MenuList>
+    </Menu>
+  );
+}
+
+type ElementViewProps = {
+  isSelected: boolean,
+  owner: Owner,
+  selectOwner: SelectOwner,
+  ...
+};
+function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
+  const store = useContext(StoreContext);
+
+  const {displayName, hocDisplayNames, type} = owner;
+  const isInStore = store.containsElement(owner.id);
+
+  const handleChange = useCallback(() => {
+    if (isInStore) {
+      selectOwner(owner);
+    }
+  }, [isInStore, selectOwner, owner]);
+
+  return (
+    <Toggle
+      className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
+      isChecked={isSelected}
+      onChange={handleChange}>
+      {displayName}
+
+      <Badge
+        className={styles.Badge}
+        hocDisplayNames={hocDisplayNames}
+        type={type}
+      />
+    </Toggle>
+  );
+}
+
+type BackToOwnerButtonProps = {|
+  owners: Array<Owner>,
+  selectedIndex: number,
+  selectOwner: SelectOwner,
+|};
+function BackToOwnerButton({
+  owners,
+  selectedIndex,
+  selectOwner,
+}: BackToOwnerButtonProps) {
+  const store = useContext(StoreContext);
+
+  if (selectedIndex <= 0) {
+    return null;
+  }
+
+  const owner = owners[selectedIndex - 1];
+  const isInStore = store.containsElement(owner.id);
+
+  return (
+    <Button
+      className={isInStore ? undefined : styles.NotInStore}
+      onClick={() => (isInStore ? selectOwner(owner) : null)}
+      title={`Up to ${owner.displayName || 'owner'}`}>
+      <ButtonIcon type="previous" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css
new file mode 100644
index 0000000000000..5db009aa13702
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css
@@ -0,0 +1,42 @@
+.SearchInput {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+}
+
+.Input {
+  flex: 1 1 100px;
+  width: 100px;
+  font-size: var(--font-size-sans-large);
+  outline: none;
+  border: none;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  padding-left: 1.5rem;
+  margin-left: -1rem;
+}
+
+.InputIcon {
+  pointer-events: none;
+  z-index: 2;
+  color: var(--color-dimmer);
+}
+
+.IndexLabel {
+  color: var(--color-dim);
+  font-size: var(--font-size-sans-normal);
+  white-space: pre;
+}
+
+.LeftVRule,
+.RightVRule {
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+}
+.LeftVRule {
+  margin: 0 0.25rem 0 0.5rem;
+}
+.RightVRule {
+  margin: 0 0.5rem 0 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
new file mode 100644
index 0000000000000..ded2f2ef06f3a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -0,0 +1,136 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
+
+import styles from './SearchInput.css';
+
+type Props = {||};
+
+export default function SearchInput(props: Props) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleTextChange = useCallback(
+    ({currentTarget}) =>
+      dispatch({type: 'SET_SEARCH_TEXT', payload: currentTarget.value}),
+    [dispatch],
+  );
+  const resetSearch = useCallback(
+    () => dispatch({type: 'SET_SEARCH_TEXT', payload: ''}),
+    [dispatch],
+  );
+
+  const handleKeyDown = useCallback(
+    event => {
+      // For convenience, let up/down arrow keys change Tree selection.
+      switch (event.key) {
+        case 'ArrowDown':
+          dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    },
+    [dispatch],
+  );
+
+  const handleInputKeyPress = useCallback(
+    ({key, shiftKey}) => {
+      if (key === 'Enter') {
+        if (shiftKey) {
+          dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+        } else {
+          dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
+        }
+      }
+    },
+    [dispatch],
+  );
+
+  // Auto-focus search input
+  useEffect(() => {
+    if (inputRef.current === null) {
+      return () => {};
+    }
+
+    const handleWindowKey = (event: KeyboardEvent) => {
+      const {key, metaKey} = event;
+      if (key === 'f' && metaKey) {
+        if (inputRef.current !== null) {
+          inputRef.current.focus();
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+    };
+
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = inputRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleWindowKey);
+
+    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
+  }, [inputRef]);
+
+  return (
+    <div className={styles.SearchInput}>
+      <Icon className={styles.InputIcon} type="search" />
+      <input
+        className={styles.Input}
+        onChange={handleTextChange}
+        onKeyDown={handleKeyDown}
+        onKeyPress={handleInputKeyPress}
+        placeholder="Search (text or /regex/)"
+        ref={inputRef}
+        value={searchText}
+      />
+      {!!searchText && (
+        <span className={styles.IndexLabel}>
+          {Math.min(searchIndex + 1, searchResults.length)} |{' '}
+          {searchResults.length}
+        </span>
+      )}
+      <div className={styles.LeftVRule} />
+      <Button
+        className={styles.IconButton}
+        disabled={!searchText}
+        onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+        title="Scroll to previous search result">
+        <ButtonIcon type="up" />
+      </Button>
+      <Button
+        className={styles.IconButton}
+        disabled={!searchText}
+        onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+        title="Scroll to next search result">
+        <ButtonIcon type="down" />
+      </Button>
+      <Button
+        className={styles.IconButton}
+        disabled={!searchText}
+        onClick={resetSearch}
+        title="Reset search">
+        <ButtonIcon type="close" />
+      </Button>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
new file mode 100644
index 0000000000000..d1bb28f19706e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
@@ -0,0 +1,118 @@
+.SelectedElement {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.TitleRow {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-monospace-large);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.5rem;
+}
+
+.SelectedComponentName {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Owners {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.OwnersHeader {
+  font-family: var(--font-family-sans);
+}
+
+.Source {
+  padding: 0.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.SourceHeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.SourceHeader {
+  flex: 1 1;
+  font-family: var(--font-family-sans);
+}
+
+.SourceOneLiner {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  margin-left: 1rem;
+}
+
+.Component,
+.Owner {
+  color: var(--color-component-name);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.Component {
+  flex: 1 1 auto;
+}
+
+.InspectedElement {
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  line-height: var(--line-height-data);
+}
+
+.Owner {
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+  display: block;
+}
+.Owner:focus {
+  outline: none;
+  background-color: var(--color-button-background-focus);
+}
+
+.Loading {
+  padding: 0.25rem;
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.CannotSuspendWarningMessage {
+}
+
+.NotInStore {
+  color: var(--color-dim);
+  cursor: default;
+}
+
+.OwnerButton {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  padding: 0;
+}
+
+.ContextMenuIcon {
+  margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
new file mode 100644
index 0000000000000..432f5a5436126
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -0,0 +1,577 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {copy} from 'clipboard-js';
+import React, {Fragment, useCallback, useContext} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {BridgeContext, ContextMenuContext, StoreContext} from '../context';
+import ContextMenu from '../../ContextMenu/ContextMenu';
+import ContextMenuItem from '../../ContextMenu/ContextMenuItem';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
+import HooksTree from './HooksTree';
+import {ModalDialogContext} from '../ModalDialog';
+import HocBadges from './HocBadges';
+import InspectedElementTree from './InspectedElementTree';
+import {InspectedElementContext} from './InspectedElementContext';
+import ViewElementSourceContext from './ViewElementSourceContext';
+import NativeStyleEditor from './NativeStyleEditor';
+import Toggle from '../Toggle';
+import Badge from './Badge';
+import {
+  ComponentFilterElementType,
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+  ElementTypeSuspense,
+} from 'react-devtools-shared/src/types';
+
+import styles from './SelectedElement.css';
+
+import type {
+  CopyInspectedElementPath,
+  GetInspectedElementPath,
+  StoreAsGlobal,
+} from './InspectedElementContext';
+import type {Element, InspectedElement} from './types';
+import type {ElementType} from 'react-devtools-shared/src/types';
+
+export type Props = {||};
+
+export default function SelectedElement(_: Props) {
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
+    ViewElementSourceContext,
+  );
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
+
+  const {
+    copyInspectedElementPath,
+    getInspectedElementPath,
+    getInspectedElement,
+    storeAsGlobal,
+    viewInspectedElementPath,
+  } = useContext(InspectedElementContext);
+
+  const element =
+    inspectedElementID !== null
+      ? store.getElementByID(inspectedElementID)
+      : null;
+
+  const inspectedElement =
+    inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;
+
+  const highlightElement = useCallback(() => {
+    if (element !== null && inspectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
+      if (rendererID !== null) {
+        bridge.send('highlightNativeElement', {
+          displayName: element.displayName,
+          hideAfterTimeout: true,
+          id: inspectedElementID,
+          openNativeElementsPanel: true,
+          rendererID,
+          scrollIntoView: true,
+        });
+      }
+    }
+  }, [bridge, element, inspectedElementID, store]);
+
+  const logElement = useCallback(() => {
+    if (inspectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
+      if (rendererID !== null) {
+        bridge.send('logElementToConsole', {
+          id: inspectedElementID,
+          rendererID,
+        });
+      }
+    }
+  }, [bridge, inspectedElementID, store]);
+
+  const viewSource = useCallback(() => {
+    if (viewElementSourceFunction != null && inspectedElement !== null) {
+      viewElementSourceFunction(
+        inspectedElement.id,
+        ((inspectedElement: any): InspectedElement),
+      );
+    }
+  }, [inspectedElement, viewElementSourceFunction]);
+
+  // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
+  // To detect this case, we defer to an injected helper function (if present).
+  const canViewSource =
+    inspectedElement !== null &&
+    inspectedElement.canViewSource &&
+    viewElementSourceFunction !== null &&
+    (canViewElementSourceFunction === null ||
+      canViewElementSourceFunction(inspectedElement));
+
+  const isSuspended =
+    element !== null &&
+    element.type === ElementTypeSuspense &&
+    inspectedElement != null &&
+    inspectedElement.state != null;
+
+  const canToggleSuspense =
+    inspectedElement != null && inspectedElement.canToggleSuspense;
+
+  // TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.
+  const toggleSuspended = useCallback(() => {
+    let nearestSuspenseElement = null;
+    let currentElement = element;
+    while (currentElement !== null) {
+      if (currentElement.type === ElementTypeSuspense) {
+        nearestSuspenseElement = currentElement;
+        break;
+      } else if (currentElement.parentID > 0) {
+        currentElement = store.getElementByID(currentElement.parentID);
+      } else {
+        currentElement = null;
+      }
+    }
+
+    // If we didn't find a Suspense ancestor, we can't suspend.
+    // Instead we can show a warning to the user.
+    if (nearestSuspenseElement === null) {
+      modalDialogDispatch({
+        type: 'SHOW',
+        content: <CannotSuspendWarningMessage />,
+      });
+    } else {
+      const nearestSuspenseElementID = nearestSuspenseElement.id;
+
+      // If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.
+      // This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.
+      if (nearestSuspenseElement !== element) {
+        dispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: nearestSuspenseElementID,
+        });
+      }
+
+      const rendererID = store.getRendererIDForElement(
+        nearestSuspenseElementID,
+      );
+
+      // Toggle suspended
+      if (rendererID !== null) {
+        bridge.send('overrideSuspense', {
+          id: nearestSuspenseElementID,
+          rendererID,
+          forceFallback: !isSuspended,
+        });
+      }
+    }
+  }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
+
+  if (element === null) {
+    return (
+      <div className={styles.SelectedElement}>
+        <div className={styles.TitleRow} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.SelectedElement}>
+      <div className={styles.TitleRow}>
+        <div className={styles.SelectedComponentName}>
+          <div className={styles.Component} title={element.displayName}>
+            {element.displayName}
+          </div>
+        </div>
+
+        {canToggleSuspense && (
+          <Toggle
+            className={styles.IconButton}
+            isChecked={isSuspended}
+            onChange={toggleSuspended}
+            title={
+              isSuspended
+                ? 'Unsuspend the selected component'
+                : 'Suspend the selected component'
+            }>
+            <ButtonIcon type="suspend" />
+          </Toggle>
+        )}
+        {store.supportsNativeInspection && (
+          <Button
+            className={styles.IconButton}
+            onClick={highlightElement}
+            title="Inspect the matching DOM element">
+            <ButtonIcon type="view-dom" />
+          </Button>
+        )}
+        <Button
+          className={styles.IconButton}
+          onClick={logElement}
+          title="Log this component data to the console">
+          <ButtonIcon type="log-data" />
+        </Button>
+        <Button
+          className={styles.IconButton}
+          disabled={!canViewSource}
+          onClick={viewSource}
+          title="View source for this element">
+          <ButtonIcon type="view-source" />
+        </Button>
+      </div>
+
+      {inspectedElement === null && (
+        <div className={styles.Loading}>Loading...</div>
+      )}
+
+      {inspectedElement !== null && (
+        <InspectedElementView
+          key={
+            inspectedElementID /* Force reset when seleted Element changes */
+          }
+          copyInspectedElementPath={copyInspectedElementPath}
+          element={element}
+          getInspectedElementPath={getInspectedElementPath}
+          inspectedElement={inspectedElement}
+          storeAsGlobal={storeAsGlobal}
+          viewInspectedElementPath={viewInspectedElementPath}
+        />
+      )}
+    </div>
+  );
+}
+
+export type CopyPath = (path: Array<string | number>) => void;
+export type InspectPath = (path: Array<string | number>) => void;
+
+type InspectedElementViewProps = {|
+  copyInspectedElementPath: CopyInspectedElementPath,
+  element: Element,
+  getInspectedElementPath: GetInspectedElementPath,
+  inspectedElement: InspectedElement,
+  storeAsGlobal: StoreAsGlobal,
+|};
+
+const IS_SUSPENDED = 'Suspended';
+
+function InspectedElementView({
+  copyInspectedElementPath,
+  element,
+  getInspectedElementPath,
+  inspectedElement,
+  storeAsGlobal,
+  viewInspectedElementPath,
+}: InspectedElementViewProps) {
+  const {id, type} = element;
+  const {
+    canEditFunctionProps,
+    canEditHooks,
+    canToggleSuspense,
+    hasLegacyContext,
+    context,
+    hooks,
+    owners,
+    props,
+    source,
+    state,
+  } = inspectedElement;
+
+  const {ownerID} = useContext(TreeStateContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const {
+    isEnabledForInspectedElement,
+    viewAttributeSourceFunction,
+  } = useContext(ContextMenuContext);
+
+  const inspectContextPath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['context', ...path]);
+    },
+    [getInspectedElementPath, id],
+  );
+  const inspectPropsPath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['props', ...path]);
+    },
+    [getInspectedElementPath, id],
+  );
+  const inspectStatePath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['state', ...path]);
+    },
+    [getInspectedElementPath, id],
+  );
+
+  let overrideContextFn = null;
+  let overridePropsFn = null;
+  let overrideStateFn = null;
+  let overrideSuspenseFn = null;
+  if (type === ElementTypeClass) {
+    overrideContextFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideContext', {id, path, rendererID, value});
+      }
+    };
+    overridePropsFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideProps', {id, path, rendererID, value});
+      }
+    };
+    overrideStateFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideState', {id, path, rendererID, value});
+      }
+    };
+  } else if (
+    (type === ElementTypeFunction ||
+      type === ElementTypeMemo ||
+      type === ElementTypeForwardRef) &&
+    canEditFunctionProps
+  ) {
+    overridePropsFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideProps', {id, path, rendererID, value});
+      }
+    };
+  } else if (type === ElementTypeSuspense && canToggleSuspense) {
+    overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {
+      if (path.length !== 1 && path !== IS_SUSPENDED) {
+        throw new Error('Unexpected path.');
+      }
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideSuspense', {
+          id,
+          rendererID,
+          forceFallback: value,
+        });
+      }
+    };
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.InspectedElement}>
+        <HocBadges element={element} />
+        <InspectedElementTree
+          label="props"
+          data={props}
+          inspectPath={inspectPropsPath}
+          overrideValueFn={overridePropsFn}
+          pathRoot="props"
+          showWhenEmpty={true}
+          canAddEntries={typeof overridePropsFn === 'function'}
+        />
+        {type === ElementTypeSuspense ? (
+          <InspectedElementTree
+            label="suspense"
+            data={{
+              [IS_SUSPENDED]: state !== null,
+            }}
+            overrideValueFn={overrideSuspenseFn}
+          />
+        ) : (
+          <InspectedElementTree
+            label="state"
+            data={state}
+            inspectPath={inspectStatePath}
+            overrideValueFn={overrideStateFn}
+            pathRoot="state"
+          />
+        )}
+        <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} />
+        <InspectedElementTree
+          label={hasLegacyContext ? 'legacy context' : 'context'}
+          data={context}
+          inspectPath={inspectContextPath}
+          overrideValueFn={overrideContextFn}
+          pathRoot="context"
+        />
+
+        <NativeStyleEditor />
+
+        {ownerID === null && owners !== null && owners.length > 0 && (
+          <div className={styles.Owners}>
+            <div className={styles.OwnersHeader}>rendered by</div>
+            {owners.map(owner => (
+              <OwnerView
+                key={owner.id}
+                displayName={owner.displayName || 'Anonymous'}
+                hocDisplayNames={owner.hocDisplayNames}
+                id={owner.id}
+                isInStore={store.containsElement(owner.id)}
+                type={owner.type}
+              />
+            ))}
+          </div>
+        )}
+
+        {source !== null && (
+          <Source fileName={source.fileName} lineNumber={source.lineNumber} />
+        )}
+      </div>
+
+      {isEnabledForInspectedElement && (
+        <ContextMenu id="SelectedElement">
+          {data => (
+            <Fragment>
+              <ContextMenuItem
+                onClick={() => copyInspectedElementPath(id, data.path)}
+                title="Copy value to clipboard">
+                <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
+                value to clipboard
+              </ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => storeAsGlobal(id, data.path)}
+                title="Store as global variable">
+                <Icon
+                  className={styles.ContextMenuIcon}
+                  type="store-as-global-variable"
+                />{' '}
+                Store as global variable
+              </ContextMenuItem>
+              {viewAttributeSourceFunction !== null &&
+                data.type === 'function' && (
+                  <ContextMenuItem
+                    onClick={() => viewAttributeSourceFunction(id, data.path)}
+                    title="Go to definition">
+                    <Icon className={styles.ContextMenuIcon} type="code" /> Go
+                    to definition
+                  </ContextMenuItem>
+                )}
+            </Fragment>
+          )}
+        </ContextMenu>
+      )}
+    </Fragment>
+  );
+}
+
+// This function is based on packages/shared/describeComponentFrame.js
+function formatSourceForDisplay(fileName: string, lineNumber: string) {
+  const BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+
+  let nameOnly = fileName.replace(BEFORE_SLASH_RE, '');
+
+  // In DEV, include code for a common special case:
+  // prefer "folder/index.js" instead of just "index.js".
+  if (/^index\./.test(nameOnly)) {
+    const match = fileName.match(BEFORE_SLASH_RE);
+    if (match) {
+      const pathBeforeSlash = match[1];
+      if (pathBeforeSlash) {
+        const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+        nameOnly = folderName + '/' + nameOnly;
+      }
+    }
+  }
+
+  return `${nameOnly}:${lineNumber}`;
+}
+
+type SourceProps = {|
+  fileName: string,
+  lineNumber: string,
+|};
+
+function Source({fileName, lineNumber}: SourceProps) {
+  const handleCopy = () => copy(`${fileName}:${lineNumber}`);
+  return (
+    <div className={styles.Source}>
+      <div className={styles.SourceHeaderRow}>
+        <div className={styles.SourceHeader}>source</div>
+        <Button onClick={handleCopy} title="Copy to clipboard">
+          <ButtonIcon type="copy" />
+        </Button>
+      </div>
+      <div className={styles.SourceOneLiner}>
+        {formatSourceForDisplay(fileName, lineNumber)}
+      </div>
+    </div>
+  );
+}
+
+type OwnerViewProps = {|
+  displayName: string,
+  hocDisplayNames: Array<string> | null,
+  id: number,
+  isInStore: boolean,
+  type: ElementType,
+|};
+
+function OwnerView({
+  displayName,
+  hocDisplayNames,
+  id,
+  isInStore,
+  type,
+}: OwnerViewProps) {
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const handleClick = useCallback(
+    () =>
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: id,
+      }),
+    [dispatch, id],
+  );
+
+  return (
+    <Button
+      key={id}
+      className={styles.OwnerButton}
+      disabled={!isInStore}
+      onClick={handleClick}>
+      <span
+        className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+        title={displayName}>
+        {displayName}
+      </span>
+      <Badge hocDisplayNames={hocDisplayNames} type={type} />
+    </Button>
+  );
+}
+
+function CannotSuspendWarningMessage() {
+  const store = useContext(StoreContext);
+  const areSuspenseElementsHidden = !!store.componentFilters.find(
+    filter =>
+      filter.type === ComponentFilterElementType &&
+      filter.value === ElementTypeSuspense &&
+      filter.isEnabled,
+  );
+
+  // Has the user filted out Suspense nodes from the tree?
+  // If so, the selected element might actually be in a Suspense tree after all.
+  if (areSuspenseElementsHidden) {
+    return (
+      <div className={styles.CannotSuspendWarningMessage}>
+        Suspended state cannot be toggled while Suspense components are hidden.
+        Disable the filter and try agan.
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.CannotSuspendWarningMessage}>
+        The selected element is not within a Suspense container. Suspending it
+        would cause an error.
+      </div>
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.css
new file mode 100644
index 0000000000000..19b64a8ef4702
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.css
@@ -0,0 +1,16 @@
+.Active,
+.Inactive {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.Active {
+  background-color: var(--color-selected-tree-highlight-active);
+}
+
+.Inactive {
+  background-color: var(--color-selected-tree-highlight-inactive);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
new file mode 100644
index 0000000000000..ea94dbff78c0f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -0,0 +1,107 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext, useMemo} from 'react';
+import {TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
+import TreeFocusedContext from './TreeFocusedContext';
+import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
+
+import styles from './SelectedTreeHighlight.css';
+
+type Data = {|
+  startIndex: number,
+  stopIndex: number,
+|};
+
+export default function SelectedTreeHighlight(_: {||}) {
+  const {lineHeight} = useContext(SettingsContext);
+  const store = useContext(StoreContext);
+  const treeFocused = useContext(TreeFocusedContext);
+  const {ownerID, selectedElementID} = useContext(TreeStateContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => {
+        if (
+          selectedElementID === null ||
+          store.isInsideCollapsedSubTree(selectedElementID)
+        ) {
+          return null;
+        }
+
+        const element = store.getElementByID(selectedElementID);
+        if (
+          element === null ||
+          element.isCollapsed ||
+          element.children.length === 0
+        ) {
+          return null;
+        }
+
+        const startIndex = store.getIndexOfElementID(element.children[0]);
+        if (startIndex === null) {
+          return null;
+        }
+
+        let stopIndex = null;
+        let current = element;
+        while (current !== null) {
+          if (current.isCollapsed || current.children.length === 0) {
+            // We've found the last/deepest descendant.
+            stopIndex = store.getIndexOfElementID(current.id);
+            current = null;
+          } else {
+            const lastChildID = current.children[current.children.length - 1];
+            current = store.getElementByID(lastChildID);
+          }
+        }
+
+        if (stopIndex === null) {
+          return null;
+        }
+
+        return {
+          startIndex,
+          stopIndex,
+        };
+      },
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => {
+          store.removeListener('mutated', callback);
+        };
+      },
+    }),
+    [selectedElementID, store],
+  );
+  const data = useSubscription<Data | null>(subscription);
+
+  if (ownerID !== null) {
+    return null;
+  }
+
+  if (data === null) {
+    return null;
+  }
+
+  const {startIndex, stopIndex} = data;
+
+  return (
+    <div
+      className={treeFocused ? styles.Active : styles.Inactive}
+      style={{
+        position: 'absolute',
+        top: `${startIndex * lineHeight}px`,
+        height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,
+      }}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.css b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
new file mode 100644
index 0000000000000..64a5983ee06d9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
@@ -0,0 +1,60 @@
+.Tree {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--color-border);
+
+  /* Default size will be adjusted by Tree after scrolling */
+  --indentation-size: 12px;
+}
+
+.List {
+  overflow-x: hidden !important;
+}
+
+.InnerElementType {
+  overflow-x: hidden;
+}
+
+.SearchInput {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.5rem;
+}
+
+.AutoSizerWrapper {
+  width: 100%;
+  overflow: hidden;
+  flex: 1 0 auto;
+}
+.AutoSizerWrapper:focus {
+  outline: none;
+}
+
+.List {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  line-height: var(--line-height-data);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
+
+.Loading {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-start;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
new file mode 100644
index 0000000000000..3b6357ae8535e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -0,0 +1,500 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  Fragment,
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {FixedSizeList} from 'react-window';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {BridgeContext, StoreContext} from '../context';
+import ElementView from './Element';
+import InspectHostNodesToggle from './InspectHostNodesToggle';
+import OwnersStack from './OwnersStack';
+import SearchInput from './SearchInput';
+import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
+import SelectedTreeHighlight from './SelectedTreeHighlight';
+import TreeFocusedContext from './TreeFocusedContext';
+
+import styles from './Tree.css';
+
+// Never indent more than this number of pixels (even if we have the room).
+const DEFAULT_INDENTATION_SIZE = 12;
+
+export type ItemData = {|
+  numElements: number,
+  isNavigatingWithKeyboard: boolean,
+  lastScrolledIDRef: {current: number | null, ...},
+  onElementMouseEnter: (id: number) => void,
+  treeFocused: boolean,
+|};
+
+type Props = {||};
+
+export default function Tree(props: Props) {
+  const dispatch = useContext(TreeDispatcherContext);
+  const {
+    numElements,
+    ownerID,
+    searchIndex,
+    searchResults,
+    selectedElementID,
+    selectedElementIndex,
+  } = useContext(TreeStateContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
+    false,
+  );
+  const treeRef = useRef<HTMLDivElement | null>(null);
+  const focusTargetRef = useRef<HTMLDivElement | null>(null);
+
+  const [treeFocused, setTreeFocused] = useState<boolean>(false);
+
+  const {lineHeight} = useContext(SettingsContext);
+
+  // Make sure a newly selected element is visible in the list.
+  // This is helpful for things like the owners list and search.
+  //
+  // TRICKY:
+  // It's important to use a callback ref for this, rather than a ref object and an effect.
+  // As an optimization, the AutoSizer component does not render children when their size would be 0.
+  // This means that in some cases (if the browser panel size is initially really small),
+  // the Tree component might render without rendering an inner List.
+  // In this case, the list ref would be null on mount (when the scroll effect runs),
+  // meaning the scroll action would be skipped (since ref updates don't re-run effects).
+  // Using a callback ref accounts for this case...
+  const listCallbackRef = useCallback(
+    list => {
+      if (list != null && selectedElementIndex !== null) {
+        list.scrollToItem(selectedElementIndex, 'smart');
+      }
+    },
+    [selectedElementIndex],
+  );
+
+  // Picking an element in the inspector should put focus into the tree.
+  // This ensures that keyboard navigation works right after picking a node.
+  useEffect(() => {
+    function handleStopInspectingNative(didSelectNode) {
+      if (didSelectNode && focusTargetRef.current !== null) {
+        focusTargetRef.current.focus();
+      }
+    }
+    bridge.addListener('stopInspectingNative', handleStopInspectingNative);
+    return () =>
+      bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
+  }, [bridge]);
+
+  // This ref is passed down the context to elements.
+  // It lets them avoid autoscrolling to the same item many times
+  // when a selected virtual row goes in and out of the viewport.
+  const lastScrolledIDRef = useRef<number | null>(null);
+
+  // Navigate the tree with up/down arrow keys.
+  useEffect(() => {
+    if (treeRef.current === null) {
+      return () => {};
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
+        return;
+      }
+
+      // TODO We should ignore arrow keys if the focus is outside of DevTools.
+      // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
+      // e.g. when a text input or a select has focus.
+
+      let element;
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          element =
+            selectedElementID !== null
+              ? store.getElementByID(selectedElementID)
+              : null;
+          if (element !== null) {
+            if (element.children.length > 0 && !element.isCollapsed) {
+              store.toggleIsCollapsed(element.id, true);
+            } else {
+              dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'});
+            }
+          }
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          element =
+            selectedElementID !== null
+              ? store.getElementByID(selectedElementID)
+              : null;
+          if (element !== null) {
+            if (element.children.length > 0 && element.isCollapsed) {
+              store.toggleIsCollapsed(element.id, false);
+            } else {
+              dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'});
+            }
+          }
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
+          break;
+        default:
+          return;
+      }
+      setIsNavigatingWithKeyboard(true);
+    };
+
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = treeRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      ownerDocument.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dispatch, selectedElementID, store]);
+
+  // Focus management.
+  const handleBlur = useCallback(() => setTreeFocused(false), []);
+  const handleFocus = useCallback(() => {
+    setTreeFocused(true);
+
+    if (selectedElementIndex === null && numElements > 0) {
+      dispatch({
+        type: 'SELECT_ELEMENT_AT_INDEX',
+        payload: 0,
+      });
+    }
+  }, [dispatch, numElements, selectedElementIndex]);
+
+  const handleKeyPress = useCallback(
+    event => {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          if (selectedElementID !== null) {
+            dispatch({type: 'SELECT_OWNER', payload: selectedElementID});
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [dispatch, selectedElementID],
+  );
+
+  const highlightNativeElement = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null && rendererID !== null) {
+        bridge.send('highlightNativeElement', {
+          displayName: element.displayName,
+          hideAfterTimeout: false,
+          id,
+          openNativeElementsPanel: false,
+          rendererID,
+          scrollIntoView: false,
+        });
+      }
+    },
+    [store, bridge],
+  );
+
+  // If we switch the selected element while using the keyboard,
+  // start highlighting it in the DOM instead of the last hovered node.
+  const searchRef = useRef({searchIndex, searchResults});
+  useEffect(() => {
+    let didSelectNewSearchResult = false;
+    if (
+      searchRef.current.searchIndex !== searchIndex ||
+      searchRef.current.searchResults !== searchResults
+    ) {
+      searchRef.current.searchIndex = searchIndex;
+      searchRef.current.searchResults = searchResults;
+      didSelectNewSearchResult = true;
+    }
+    if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
+      if (selectedElementID !== null) {
+        highlightNativeElement(selectedElementID);
+      } else {
+        bridge.send('clearNativeElementHighlight');
+      }
+    }
+  }, [
+    bridge,
+    isNavigatingWithKeyboard,
+    highlightNativeElement,
+    searchIndex,
+    searchResults,
+    selectedElementID,
+  ]);
+
+  // Highlight last hovered element.
+  const handleElementMouseEnter = useCallback(
+    id => {
+      // Ignore hover while we're navigating with keyboard.
+      // This avoids flicker from the hovered nodes under the mouse.
+      if (!isNavigatingWithKeyboard) {
+        highlightNativeElement(id);
+      }
+    },
+    [isNavigatingWithKeyboard, highlightNativeElement],
+  );
+
+  const handleMouseMove = useCallback(() => {
+    // We started using the mouse again.
+    // This will enable hover styles in individual rows.
+    setIsNavigatingWithKeyboard(false);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    bridge.send('clearNativeElementHighlight');
+  }, [bridge]);
+
+  // Let react-window know to re-render any time the underlying tree data changes.
+  // This includes the owner context, since it controls a filtered view of the tree.
+  const itemData = useMemo<ItemData>(
+    () => ({
+      numElements,
+      isNavigatingWithKeyboard,
+      onElementMouseEnter: handleElementMouseEnter,
+      lastScrolledIDRef,
+      treeFocused,
+    }),
+    [
+      numElements,
+      isNavigatingWithKeyboard,
+      handleElementMouseEnter,
+      lastScrolledIDRef,
+      treeFocused,
+    ],
+  );
+
+  const itemKey = useCallback(
+    (index: number) => store.getElementIDAtIndex(index),
+    [store],
+  );
+
+  return (
+    <TreeFocusedContext.Provider value={treeFocused}>
+      <div className={styles.Tree} ref={treeRef}>
+        <div className={styles.SearchInput}>
+          {store.supportsNativeInspection && (
+            <Fragment>
+              <InspectHostNodesToggle />
+              <div className={styles.VRule} />
+            </Fragment>
+          )}
+          <Suspense fallback={<Loading />}>
+            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+          </Suspense>
+          <div className={styles.VRule} />
+          <SettingsModalContextToggle />
+        </div>
+        <div
+          className={styles.AutoSizerWrapper}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onKeyPress={handleKeyPress}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          ref={focusTargetRef}
+          tabIndex={0}>
+          <AutoSizer>
+            {({height, width}) => (
+              // $FlowFixMe https://github.com/facebook/flow/issues/7341
+              <FixedSizeList
+                className={styles.List}
+                height={height}
+                innerElementType={InnerElementType}
+                itemCount={numElements}
+                itemData={itemData}
+                itemKey={itemKey}
+                itemSize={lineHeight}
+                ref={listCallbackRef}
+                width={width}>
+                {ElementView}
+              </FixedSizeList>
+            )}
+          </AutoSizer>
+        </div>
+      </div>
+    </TreeFocusedContext.Provider>
+  );
+}
+
+// Indentation size can be adjusted but child width is fixed.
+// We need to adjust indentations so the widest child can fit without overflowing.
+// Sometimes the widest child is also the deepest in the tree:
+//   ┏----------------------┓
+//   ┆ <Foo>                ┆
+//   ┆ ••••<Foobar>         ┆
+//   ┆ ••••••••<Baz>        ┆
+//   ┗----------------------┛
+//
+// But this is not always the case.
+// Even with the above example, a change in indentation may change the overall widest child:
+//   ┏----------------------┓
+//   ┆ <Foo>                ┆
+//   ┆ ••<Foobar>           ┆
+//   ┆ ••••<Baz>            ┆
+//   ┗----------------------┛
+//
+// In extreme cases this difference can be important:
+//   ┏----------------------┓
+//   ┆ <ReallyLongName>     ┆
+//   ┆ ••<Foo>              ┆
+//   ┆ ••••<Bar>            ┆
+//   ┆ ••••••<Baz>          ┆
+//   ┆ ••••••••<Qux>        ┆
+//   ┗----------------------┛
+//
+// In the above example, the current indentation is fine,
+// but if we naively assumed that the widest element is also the deepest element,
+// we would end up compressing the indentation unnecessarily:
+//   ┏----------------------┓
+//   ┆ <ReallyLongName>     ┆
+//   ┆ •<Foo>               ┆
+//   ┆ ••<Bar>              ┆
+//   ┆ •••<Baz>             ┆
+//   ┆ ••••<Qux>            ┆
+//   ┗----------------------┛
+//
+// The way we deal with this is to compute the max indentation size that can fit each child,
+// given the child's fixed width and depth within the tree.
+// Then we take the smallest of these indentation sizes...
+function updateIndentationSizeVar(
+  innerDiv: HTMLDivElement,
+  cachedChildWidths: WeakMap<HTMLElement, number>,
+  indentationSizeRef: {|current: number|},
+  prevListWidthRef: {|current: number|},
+): void {
+  const list = ((innerDiv.parentElement: any): HTMLDivElement);
+  const listWidth = list.clientWidth;
+
+  // Skip measurements when the Components panel is hidden.
+  if (listWidth === 0) {
+    return;
+  }
+
+  // Reset the max indentation size if the width of the tree has increased.
+  if (listWidth > prevListWidthRef.current) {
+    indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
+  }
+  prevListWidthRef.current = listWidth;
+
+  let maxIndentationSize: number = indentationSizeRef.current;
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (let child of innerDiv.children) {
+    const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
+
+    let childWidth: number = 0;
+
+    const cachedChildWidth = cachedChildWidths.get(child);
+    if (cachedChildWidth != null) {
+      childWidth = cachedChildWidth;
+    } else {
+      const {firstElementChild} = child;
+
+      // Skip over e.g. the guideline element
+      if (firstElementChild != null) {
+        childWidth = firstElementChild.clientWidth;
+        cachedChildWidths.set(child, childWidth);
+      }
+    }
+
+    const remainingWidth = Math.max(0, listWidth - childWidth);
+
+    maxIndentationSize = Math.min(maxIndentationSize, remainingWidth / depth);
+  }
+
+  indentationSizeRef.current = maxIndentationSize;
+
+  list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);
+}
+
+function InnerElementType({children, style, ...rest}) {
+  const {ownerID} = useContext(TreeStateContext);
+
+  const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(
+    () => new WeakMap(),
+    [],
+  );
+
+  // This ref tracks the current indentation size.
+  // We decrease indentation to fit wider/deeper trees.
+  // We indentionally do not increase it again afterward, to avoid the perception of content "jumping"
+  // e.g. clicking to toggle/collapse a row might otherwise jump horizontally beneath your cursor,
+  // e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.
+  //
+  // There are two exceptions for this:
+  // 1. The first is when the width of the tree increases.
+  // The user may have resized the window specifically to make more room for DevTools.
+  // In either case, this should reset our max indentation size logic.
+  // 2. The second is when the user enters or exits an owner tree.
+  const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);
+  const prevListWidthRef = useRef<number>(0);
+  const prevOwnerIDRef = useRef<number | null>(ownerID);
+  const divRef = useRef<HTMLDivElement | null>(null);
+
+  // We shouldn't retain this width across different conceptual trees though,
+  // so when the user opens the "owners tree" view, we should discard the previous width.
+  if (ownerID !== prevOwnerIDRef.current) {
+    prevOwnerIDRef.current = ownerID;
+    indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
+  }
+
+  // When we render new content, measure to see if we need to shrink indentation to fit it.
+  useEffect(() => {
+    if (divRef.current !== null) {
+      updateIndentationSizeVar(
+        divRef.current,
+        cachedChildWidths,
+        indentationSizeRef,
+        prevListWidthRef,
+      );
+    }
+  });
+
+  // This style override enables the background color to fill the full visible width,
+  // when combined with the CSS tweaks in Element.
+  // A lot of options were considered; this seemed the one that requires the least code.
+  // See https://github.com/bvaughn/react-devtools-experimental/issues/9
+  return (
+    <div
+      className={styles.InnerElementType}
+      ref={divRef}
+      style={style}
+      {...rest}>
+      <SelectedTreeHighlight />
+      {children}
+    </div>
+  );
+}
+
+function Loading() {
+  return <div className={styles.Loading}>Loading...</div>;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
new file mode 100644
index 0000000000000..bdd1fc04cfe54
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -0,0 +1,818 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// This context combines tree/selection state, search, and the owners stack.
+// These values are managed together because changes in one often impact the others.
+// Combining them enables us to avoid cascading renders.
+//
+// Changes to search state may impact tree state.
+// For example, updating the selected search result also updates the tree's selected value.
+// Search does not fundamanetally change the tree though.
+// It is also possible to update the selected tree value independently.
+//
+// Changes to owners state mask search and tree values.
+// When owners statck is not empty, search is temporarily disabnled,
+// and tree values (e.g. num elements, selected element) are masked.
+// Both tree and search values are restored when the owners stack is cleared.
+//
+// For this reason, changes to the tree context are processed in sequence: tree -> search -> owners
+// This enables each section to potentially override (or mask) previous values.
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import {
+  unstable_next as next,
+  unstable_runWithPriority as runWithPriority,
+  unstable_UserBlockingPriority as UserBlockingPriority,
+} from 'scheduler';
+import {createRegExp} from '../utils';
+import {BridgeContext, StoreContext} from '../context';
+import Store from '../../store';
+
+import type {Element} from './types';
+
+export type StateContext = {|
+  // Tree
+  numElements: number,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+
+  // Owners
+  ownerID: number | null,
+  ownerFlatTree: Array<Element> | null,
+
+  // Inspection element panel
+  inspectedElementID: number | null,
+|};
+
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+  type: 'GO_TO_NEXT_SEARCH_RESULT',
+|};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+  type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
+|};
+type ACTION_HANDLE_STORE_MUTATION = {|
+  type: 'HANDLE_STORE_MUTATION',
+  payload: [Array<number>, Map<number, number>],
+|};
+type ACTION_RESET_OWNER_STACK = {|
+  type: 'RESET_OWNER_STACK',
+|};
+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|
+  type: 'SELECT_CHILD_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_ELEMENT_AT_INDEX = {|
+  type: 'SELECT_ELEMENT_AT_INDEX',
+  payload: number | null,
+|};
+type ACTION_SELECT_ELEMENT_BY_ID = {|
+  type: 'SELECT_ELEMENT_BY_ID',
+  payload: number | null,
+|};
+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_NEXT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PARENT_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|
+  type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',
+|};
+type ACTION_SELECT_OWNER = {|
+  type: 'SELECT_OWNER',
+  payload: number,
+|};
+type ACTION_SET_SEARCH_TEXT = {|
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
+|};
+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|
+  type: 'UPDATE_INSPECTED_ELEMENT_ID',
+|};
+
+type Action =
+  | ACTION_GO_TO_NEXT_SEARCH_RESULT
+  | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+  | ACTION_HANDLE_STORE_MUTATION
+  | ACTION_RESET_OWNER_STACK
+  | ACTION_SELECT_CHILD_ELEMENT_IN_TREE
+  | ACTION_SELECT_ELEMENT_AT_INDEX
+  | ACTION_SELECT_ELEMENT_BY_ID
+  | ACTION_SELECT_NEXT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PARENT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SELECT_OWNER
+  | ACTION_SET_SEARCH_TEXT
+  | ACTION_UPDATE_INSPECTED_ELEMENT_ID;
+
+export type DispatcherContext = (action: Action) => void;
+
+const TreeStateContext = createContext<StateContext>(
+  ((null: any): StateContext),
+);
+TreeStateContext.displayName = 'TreeStateContext';
+
+const TreeDispatcherContext = createContext<DispatcherContext>(
+  ((null: any): DispatcherContext),
+);
+TreeDispatcherContext.displayName = 'TreeDispatcherContext';
+
+type State = {|
+  // Tree
+  numElements: number,
+  selectedElementID: number | null,
+  selectedElementIndex: number | null,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+
+  // Owners
+  ownerID: number | null,
+  ownerFlatTree: Array<Element> | null,
+
+  // Inspection element panel
+  inspectedElementID: number | null,
+|};
+
+function reduceTreeState(store: Store, state: State, action: Action): State {
+  let {numElements, ownerID, selectedElementIndex, selectedElementID} = state;
+
+  let lookupIDForIndex = true;
+
+  // Base tree should ignore selected element changes when the owner's tree is active.
+  if (ownerID === null) {
+    switch (action.type) {
+      case 'HANDLE_STORE_MUTATION':
+        numElements = store.numElements;
+
+        // If the currently-selected Element has been removed from the tree, update selection state.
+        const removedIDs = action.payload[1];
+        // Find the closest parent that wasn't removed during this batch.
+        // We deduce the parent-child mapping from removedIDs (id -> parentID)
+        // because by now it's too late to read them from the store.
+        while (
+          selectedElementID !== null &&
+          removedIDs.has(selectedElementID)
+        ) {
+          selectedElementID = ((removedIDs.get(
+            selectedElementID,
+          ): any): number);
+        }
+        if (selectedElementID === 0) {
+          // The whole root was removed.
+          selectedElementIndex = null;
+        }
+        break;
+      case 'SELECT_CHILD_ELEMENT_IN_TREE':
+        if (selectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((selectedElementIndex: any): number),
+          );
+          if (
+            selectedElement !== null &&
+            selectedElement.children.length > 0 &&
+            !selectedElement.isCollapsed
+          ) {
+            const firstChildID = selectedElement.children[0];
+            const firstChildIndex = store.getIndexOfElementID(firstChildID);
+            if (firstChildIndex !== null) {
+              selectedElementIndex = firstChildIndex;
+            }
+          }
+        }
+        break;
+      case 'SELECT_ELEMENT_AT_INDEX':
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
+        break;
+      case 'SELECT_ELEMENT_BY_ID':
+        // Skip lookup in this case; it would be redundant.
+        // It might also cause problems if the specified element was inside of a (not yet expanded) subtree.
+        lookupIDForIndex = false;
+
+        selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
+        selectedElementIndex =
+          selectedElementID === null
+            ? null
+            : store.getIndexOfElementID(selectedElementID);
+        break;
+      case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        if (
+          selectedElementIndex === null ||
+          selectedElementIndex + 1 >= numElements
+        ) {
+          selectedElementIndex = 0;
+        } else {
+          selectedElementIndex++;
+        }
+        break;
+      case 'SELECT_PARENT_ELEMENT_IN_TREE':
+        if (selectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((selectedElementIndex: any): number),
+          );
+          if (selectedElement !== null && selectedElement.parentID !== null) {
+            const parentIndex = store.getIndexOfElementID(
+              selectedElement.parentID,
+            );
+            if (parentIndex !== null) {
+              selectedElementIndex = parentIndex;
+            }
+          }
+        }
+        break;
+      case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        if (selectedElementIndex === null || selectedElementIndex === 0) {
+          selectedElementIndex = numElements - 1;
+        } else {
+          selectedElementIndex--;
+        }
+        break;
+      default:
+        // React can bailout of no-op updates.
+        return state;
+    }
+  }
+
+  // Keep selected item ID and index in sync.
+  if (lookupIDForIndex && selectedElementIndex !== state.selectedElementIndex) {
+    if (selectedElementIndex === null) {
+      selectedElementID = null;
+    } else {
+      selectedElementID = store.getElementIDAtIndex(
+        ((selectedElementIndex: any): number),
+      );
+    }
+  }
+
+  return {
+    ...state,
+
+    numElements,
+    selectedElementIndex,
+    selectedElementID,
+  };
+}
+
+function reduceSearchState(store: Store, state: State, action: Action): State {
+  let {
+    ownerID,
+    searchIndex,
+    searchResults,
+    searchText,
+    selectedElementID,
+    selectedElementIndex,
+  } = state;
+
+  const prevSearchIndex = searchIndex;
+  const prevSearchText = searchText;
+  const numPrevSearchResults = searchResults.length;
+
+  // We track explicitly whether search was requested because
+  // we might want to search even if search index didn't change.
+  // For example, if you press "next result" on a search with a single
+  // result but a different current selection, we'll set this to true.
+  let didRequestSearch = false;
+
+  // Search isn't supported when the owner's tree is active.
+  if (ownerID === null) {
+    switch (action.type) {
+      case 'GO_TO_NEXT_SEARCH_RESULT':
+        if (numPrevSearchResults > 0) {
+          didRequestSearch = true;
+          searchIndex =
+            searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;
+        }
+        break;
+      case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+        if (numPrevSearchResults > 0) {
+          didRequestSearch = true;
+          searchIndex =
+            ((searchIndex: any): number) > 0
+              ? ((searchIndex: any): number) - 1
+              : numPrevSearchResults - 1;
+        }
+        break;
+      case 'HANDLE_STORE_MUTATION':
+        if (searchText !== '') {
+          const [
+            addedElementIDs,
+            removedElementIDs,
+          ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;
+
+          removedElementIDs.forEach((parentID, id) => {
+            // Prune this item from the search results.
+            const index = searchResults.indexOf(id);
+            if (index >= 0) {
+              searchResults = searchResults
+                .slice(0, index)
+                .concat(searchResults.slice(index + 1));
+
+              // If the results are now empty, also deselect things.
+              if (searchResults.length === 0) {
+                searchIndex = null;
+              } else if (((searchIndex: any): number) >= searchResults.length) {
+                searchIndex = searchResults.length - 1;
+              }
+            }
+          });
+
+          addedElementIDs.forEach(id => {
+            const element = ((store.getElementByID(id): any): Element);
+
+            // It's possible that multiple tree operations will fire before this action has run.
+            // So it's important to check for elements that may have been added and then removed.
+            if (element !== null) {
+              const {displayName} = element;
+
+              // Add this item to the search results if it matches.
+              const regExp = createRegExp(searchText);
+              if (displayName !== null && regExp.test(displayName)) {
+                const newElementIndex = ((store.getIndexOfElementID(
+                  id,
+                ): any): number);
+
+                let foundMatch = false;
+                for (let index = 0; index < searchResults.length; index++) {
+                  const resultID = searchResults[index];
+                  if (
+                    newElementIndex <
+                    ((store.getIndexOfElementID(resultID): any): number)
+                  ) {
+                    foundMatch = true;
+                    searchResults = searchResults
+                      .slice(0, index)
+                      .concat(resultID)
+                      .concat(searchResults.slice(index));
+                    break;
+                  }
+                }
+                if (!foundMatch) {
+                  searchResults = searchResults.concat(id);
+                }
+
+                searchIndex = searchIndex === null ? 0 : searchIndex;
+              }
+            }
+          });
+        }
+        break;
+      case 'SET_SEARCH_TEXT':
+        searchIndex = null;
+        searchResults = [];
+        searchText = (action: ACTION_SET_SEARCH_TEXT).payload;
+
+        if (searchText !== '') {
+          const regExp = createRegExp(searchText);
+          store.roots.forEach(rootID => {
+            recursivelySearchTree(store, rootID, regExp, searchResults);
+          });
+          if (searchResults.length > 0) {
+            if (prevSearchIndex === null) {
+              if (selectedElementIndex !== null) {
+                searchIndex = getNearestResultIndex(
+                  store,
+                  searchResults,
+                  selectedElementIndex,
+                );
+              } else {
+                searchIndex = 0;
+              }
+            } else {
+              searchIndex = Math.min(
+                ((prevSearchIndex: any): number),
+                searchResults.length - 1,
+              );
+            }
+          }
+        }
+        break;
+      default:
+        // React can bailout of no-op updates.
+        return state;
+    }
+  }
+
+  if (searchText !== prevSearchText) {
+    const newSearchIndex = searchResults.indexOf(selectedElementID);
+    if (newSearchIndex === -1) {
+      // Only move the selection if the new query
+      // doesn't match the current selection anymore.
+      didRequestSearch = true;
+    } else {
+      // Selected item still matches the new search query.
+      // Adjust the index to reflect its position in new results.
+      searchIndex = newSearchIndex;
+    }
+  }
+  if (didRequestSearch && searchIndex !== null) {
+    selectedElementID = ((searchResults[searchIndex]: any): number);
+    selectedElementIndex = store.getIndexOfElementID(
+      ((selectedElementID: any): number),
+    );
+  }
+
+  return {
+    ...state,
+
+    selectedElementID,
+    selectedElementIndex,
+
+    searchIndex,
+    searchResults,
+    searchText,
+  };
+}
+
+function reduceOwnersState(store: Store, state: State, action: Action): State {
+  let {
+    numElements,
+    selectedElementID,
+    selectedElementIndex,
+    ownerID,
+    ownerFlatTree,
+    searchIndex,
+    searchResults,
+    searchText,
+  } = state;
+
+  let prevSelectedElementIndex = selectedElementIndex;
+
+  switch (action.type) {
+    case 'HANDLE_STORE_MUTATION':
+      if (ownerID !== null) {
+        if (!store.containsElement(ownerID)) {
+          ownerID = null;
+          ownerFlatTree = null;
+          selectedElementID = null;
+        } else {
+          ownerFlatTree = store.getOwnersListForElement(ownerID);
+          if (selectedElementID !== null) {
+            // Mutation might have caused the index of this ID to shift.
+            selectedElementIndex = ownerFlatTree.findIndex(
+              element => element.id === selectedElementID,
+            );
+          }
+        }
+      } else {
+        if (selectedElementID !== null) {
+          // Mutation might have caused the index of this ID to shift.
+          selectedElementIndex = store.getIndexOfElementID(selectedElementID);
+        }
+      }
+      if (selectedElementIndex === -1) {
+        // If we couldn't find this ID after mutation, unselect it.
+        selectedElementIndex = null;
+        selectedElementID = null;
+      }
+      break;
+    case 'RESET_OWNER_STACK':
+      ownerID = null;
+      ownerFlatTree = null;
+      selectedElementIndex =
+        selectedElementID !== null
+          ? store.getIndexOfElementID(selectedElementID)
+          : null;
+      break;
+    case 'SELECT_ELEMENT_AT_INDEX':
+      if (ownerFlatTree !== null) {
+        selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;
+      }
+      break;
+    case 'SELECT_ELEMENT_BY_ID':
+      if (ownerFlatTree !== null) {
+        const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
+        if (payload === null) {
+          selectedElementIndex = null;
+        } else {
+          selectedElementIndex = ownerFlatTree.findIndex(
+            element => element.id === payload,
+          );
+
+          // If the selected element is outside of the current owners list,
+          // exit the list and select the element in the main tree.
+          // This supports features like toggling Suspense.
+          if (selectedElementIndex !== null && selectedElementIndex < 0) {
+            ownerID = null;
+            ownerFlatTree = null;
+            selectedElementIndex = store.getIndexOfElementID(payload);
+          }
+        }
+      }
+      break;
+    case 'SELECT_NEXT_ELEMENT_IN_TREE':
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
+        if (selectedElementIndex === null) {
+          selectedElementIndex = 0;
+        } else if (selectedElementIndex + 1 < ownerFlatTree.length) {
+          selectedElementIndex++;
+        }
+      }
+      break;
+    case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
+        if (selectedElementIndex !== null && selectedElementIndex > 0) {
+          selectedElementIndex--;
+        }
+      }
+      break;
+    case 'SELECT_OWNER':
+      // If the Store doesn't have any owners metadata, don't drill into an empty stack.
+      // This is a confusing user experience.
+      if (store.hasOwnerMetadata) {
+        ownerID = (action: ACTION_SELECT_OWNER).payload;
+        ownerFlatTree = store.getOwnersListForElement(ownerID);
+
+        // Always force reset selection to be the top of the new owner tree.
+        selectedElementIndex = 0;
+        prevSelectedElementIndex = null;
+      }
+      break;
+    default:
+      // React can bailout of no-op updates.
+      return state;
+  }
+
+  // Changes in the selected owner require re-calculating the owners tree.
+  if (
+    ownerFlatTree !== state.ownerFlatTree ||
+    action.type === 'HANDLE_STORE_MUTATION'
+  ) {
+    if (ownerFlatTree === null) {
+      numElements = store.numElements;
+    } else {
+      numElements = ownerFlatTree.length;
+    }
+  }
+
+  // Keep selected item ID and index in sync.
+  if (selectedElementIndex !== prevSelectedElementIndex) {
+    if (selectedElementIndex === null) {
+      selectedElementID = null;
+    } else {
+      if (ownerFlatTree !== null) {
+        selectedElementID = ownerFlatTree[selectedElementIndex].id;
+      }
+    }
+  }
+
+  return {
+    ...state,
+
+    numElements,
+    selectedElementID,
+    selectedElementIndex,
+
+    searchIndex,
+    searchResults,
+    searchText,
+
+    ownerID,
+    ownerFlatTree,
+  };
+}
+
+function reduceSuspenseState(
+  store: Store,
+  state: State,
+  action: Action,
+): State {
+  const {type} = action;
+  switch (type) {
+    case 'UPDATE_INSPECTED_ELEMENT_ID':
+      if (state.inspectedElementID !== state.selectedElementID) {
+        return {
+          ...state,
+          inspectedElementID: state.selectedElementID,
+        };
+      }
+      break;
+    default:
+      break;
+  }
+
+  // React can bailout of no-op updates.
+  return state;
+}
+
+type Props = {|
+  children: React$Node,
+
+  // Used for automated testing
+  defaultInspectedElementID?: ?number,
+  defaultOwnerID?: ?number,
+  defaultSelectedElementID?: ?number,
+  defaultSelectedElementIndex?: ?number,
+|};
+
+// TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
+function TreeContextController({
+  children,
+  defaultInspectedElementID,
+  defaultOwnerID,
+  defaultSelectedElementID,
+  defaultSelectedElementIndex,
+}: Props) {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const initialRevision = useMemo(() => store.revision, [store]);
+
+  // This reducer is created inline because it needs access to the Store.
+  // The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
+  // so it's okay for the reducer to have an empty dependencies array.
+  const reducer = useMemo(
+    () => (state: State, action: Action): State => {
+      const {type} = action;
+      switch (type) {
+        case 'GO_TO_NEXT_SEARCH_RESULT':
+        case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+        case 'HANDLE_STORE_MUTATION':
+        case 'RESET_OWNER_STACK':
+        case 'SELECT_ELEMENT_AT_INDEX':
+        case 'SELECT_ELEMENT_BY_ID':
+        case 'SELECT_CHILD_ELEMENT_IN_TREE':
+        case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        case 'SELECT_PARENT_ELEMENT_IN_TREE':
+        case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        case 'SELECT_OWNER':
+        case 'UPDATE_INSPECTED_ELEMENT_ID':
+        case 'SET_SEARCH_TEXT':
+          state = reduceTreeState(store, state, action);
+          state = reduceSearchState(store, state, action);
+          state = reduceOwnersState(store, state, action);
+          state = reduceSuspenseState(store, state, action);
+
+          // If the selected ID is in a collapsed subtree, reset the selected index to null.
+          // We'll know the correct index after the layout effect will toggle the tree,
+          // and the store tree is mutated to account for that.
+          if (
+            state.selectedElementID !== null &&
+            store.isInsideCollapsedSubTree(state.selectedElementID)
+          ) {
+            return {
+              ...state,
+              selectedElementIndex: null,
+            };
+          }
+
+          return state;
+        default:
+          throw new Error(`Unrecognized action "${type}"`);
+      }
+    },
+    [store],
+  );
+
+  const [state, dispatch] = useReducer(reducer, {
+    // Tree
+    numElements: store.numElements,
+    selectedElementID:
+      defaultSelectedElementID == null ? null : defaultSelectedElementID,
+    selectedElementIndex:
+      defaultSelectedElementIndex == null ? null : defaultSelectedElementIndex,
+
+    // Search
+    searchIndex: null,
+    searchResults: [],
+    searchText: '',
+
+    // Owners
+    ownerID: defaultOwnerID == null ? null : defaultOwnerID,
+    ownerFlatTree: null,
+
+    // Inspection element panel
+    inspectedElementID:
+      defaultInspectedElementID == null ? null : defaultInspectedElementID,
+  });
+
+  const dispatchWrapper = useCallback(
+    (action: Action) => {
+      // Run the first update at "user-blocking" priority in case dispatch is called from a non-React event.
+      // In this case, the current (and "next") priorities would both be "normal",
+      // and suspense would potentially block both updates.
+      runWithPriority(UserBlockingPriority, () => dispatch(action));
+      next(() => dispatch({type: 'UPDATE_INSPECTED_ELEMENT_ID'}));
+    },
+    [dispatch],
+  );
+
+  // Listen for host element selections.
+  useEffect(() => {
+    const handleSelectFiber = (id: number) =>
+      dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+    bridge.addListener('selectFiber', handleSelectFiber);
+    return () => bridge.removeListener('selectFiber', handleSelectFiber);
+  }, [bridge, dispatchWrapper]);
+
+  // If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
+  // This needs to be a layout effect to avoid temporarily flashing an incorrect selection.
+  const prevSelectedElementID = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    if (state.selectedElementID !== prevSelectedElementID.current) {
+      prevSelectedElementID.current = state.selectedElementID;
+
+      if (state.selectedElementID !== null) {
+        let element = store.getElementByID(state.selectedElementID);
+        if (element !== null && element.parentID > 0) {
+          store.toggleIsCollapsed(element.parentID, false);
+        }
+      }
+    }
+  }, [state.selectedElementID, store]);
+
+  // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
+  useEffect(() => {
+    const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
+      Array<number>,
+      Map<number, number>,
+    ]) => {
+      dispatchWrapper({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [addedElementIDs, removedElementIDs],
+      });
+    };
+
+    // Since this is a passive effect, the tree may have been mutated before our initial subscription.
+    if (store.revision !== initialRevision) {
+      // At the moment, we can treat this as a mutation.
+      // We don't know which Elements were newly added/removed, but that should be okay in this case.
+      // It would only impact the search state, which is unlikely to exist yet at this point.
+      dispatchWrapper({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [[], new Map()],
+      });
+    }
+
+    store.addListener('mutated', handleStoreMutated);
+
+    return () => store.removeListener('mutated', handleStoreMutated);
+  }, [dispatchWrapper, initialRevision, store]);
+
+  return (
+    <TreeStateContext.Provider value={state}>
+      <TreeDispatcherContext.Provider value={dispatchWrapper}>
+        {children}
+      </TreeDispatcherContext.Provider>
+    </TreeStateContext.Provider>
+  );
+}
+function recursivelySearchTree(
+  store: Store,
+  elementID: number,
+  regExp: RegExp,
+  searchResults: Array<number>,
+): void {
+  const {children, displayName, hocDisplayNames} = ((store.getElementByID(
+    elementID,
+  ): any): Element);
+
+  if (displayName != null && regExp.test(displayName) === true) {
+    searchResults.push(elementID);
+  } else if (
+    hocDisplayNames != null &&
+    hocDisplayNames.length > 0 &&
+    hocDisplayNames.some(name => regExp.test(name)) === true
+  ) {
+    searchResults.push(elementID);
+  }
+
+  children.forEach(childID =>
+    recursivelySearchTree(store, childID, regExp, searchResults),
+  );
+}
+
+function getNearestResultIndex(
+  store: Store,
+  searchResults: Array<number>,
+  selectedElementIndex: number,
+): number {
+  const index = searchResults.findIndex(id => {
+    const innerIndex = store.getIndexOfElementID(id);
+    return innerIndex !== null && innerIndex >= selectedElementIndex;
+  });
+
+  return index === -1 ? 0 : index;
+}
+
+export {TreeDispatcherContext, TreeStateContext, TreeContextController};
diff --git a/packages/react-events/hover.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
similarity index 61%
rename from packages/react-events/hover.js
rename to packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
index a53675ca5c1ab..8461f97f1bb80 100644
--- a/packages/react-events/hover.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
-'use strict';
+import {createContext} from 'react';
 
-const Hover = require('./src/Hover');
+const TreeFocusedContext = createContext<boolean>(false);
 
-module.exports = Hover.default || Hover;
+export default TreeFocusedContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
new file mode 100644
index 0000000000000..3dc061c354567
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {createContext} from 'react';
+
+import type {
+  CanViewElementSource,
+  ViewElementSource,
+} from 'react-devtools-shared/src/devtools/views/DevTools';
+
+export type Context = {|
+  canViewElementSourceFunction: CanViewElementSource | null,
+  viewElementSourceFunction: ViewElementSource | null,
+|};
+
+const ViewElementSourceContext = createContext<Context>(((null: any): Context));
+ViewElementSourceContext.displayName = 'ViewElementSourceContext';
+
+export default ViewElementSourceContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
new file mode 100644
index 0000000000000..6e57fec8adcad
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -0,0 +1,104 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Source} from 'shared/ReactElementType';
+import type {
+  Dehydrated,
+  Unserializable,
+} from 'react-devtools-shared/src/hydration';
+import type {ElementType} from 'react-devtools-shared/src/types';
+
+// Each element on the frontend corresponds to a Fiber on the backend.
+// Some of its information (e.g. id, type, displayName) come from the backend.
+// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
+// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
+export type Element = {|
+  id: number,
+  parentID: number,
+  children: Array<number>,
+  type: ElementType,
+  displayName: string | null,
+  key: number | string | null,
+
+  hocDisplayNames: null | Array<string>,
+
+  // Should the elements children be visible in the tree?
+  isCollapsed: boolean,
+
+  // Owner (if available)
+  ownerID: number,
+
+  // How many levels deep within the tree is this element?
+  // This determines how much indentation (left padding) should be used in the Elements tree.
+  depth: number,
+
+  // How many nodes (including itself) are below this Element within the tree.
+  // This property is used to quickly determine the total number of Elements,
+  // and the Element at any given index (for windowing purposes).
+  weight: number,
+|};
+
+export type Owner = {|
+  displayName: string | null,
+  id: number,
+  hocDisplayNames: Array<string> | null,
+  type: ElementType,
+|};
+
+export type OwnersList = {|
+  id: number,
+  owners: Array<Owner> | null,
+|};
+
+export type InspectedElement = {|
+  id: number,
+
+  // Does the current renderer support editable hooks?
+  canEditHooks: boolean,
+
+  // Does the current renderer support editable function props?
+  canEditFunctionProps: boolean,
+
+  // Is this Suspense, and can its value be overriden now?
+  canToggleSuspense: boolean,
+
+  // Can view component source location.
+  canViewSource: boolean,
+
+  // Does the component have legacy context attached to it.
+  hasLegacyContext: boolean,
+
+  // Inspectable properties.
+  context: Object | null,
+  hooks: Object | null,
+  props: Object | null,
+  state: Object | null,
+
+  // List of owners
+  owners: Array<Owner> | null,
+
+  // Location of component in source code.
+  source: Source | null,
+
+  type: ElementType,
+|};
+
+// TODO: Add profiling type
+
+export type DehydratedData = {|
+  cleaned: Array<Array<string | number>>,
+  data:
+    | string
+    | Dehydrated
+    | Unserializable
+    | Array<Dehydrated>
+    | Array<Unserializable>
+    | {[key: string]: string | Dehydrated | Unserializable, ...},
+  unserializable: Array<Array<string | number>>,
+|};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.css b/packages/react-devtools-shared/src/devtools/views/DevTools.css
new file mode 100644
index 0000000000000..3332c35f1f677
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.css
@@ -0,0 +1,61 @@
+.DevTools {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.TabBar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  background-color: var(--color-background);
+  border-top: 1px solid var(--color-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-large);
+  user-select: none;
+
+  /* Electron drag area */
+  -webkit-app-region: drag;
+}
+
+.Spacer {
+  flex: 1;
+}
+
+.TabContent {
+  flex: 1 1 100%;
+  overflow: auto;
+  -webkit-app-region: no-drag;
+}
+
+.DevToolsVersion {
+  font-size: var(--font-size-sans-normal);
+  margin-right: 0.5rem;
+}
+
+.DevToolsVersion:before {
+  font-size: var(--font-size-sans-large);
+  content: 'DevTools ';
+}
+
+@media screen and (max-width: 400px) {
+  .DevToolsVersion:before {
+    content: '';
+  }
+}
+
+@media screen and (max-width: 300px) {
+  .DevToolsVersion {
+    display: none;
+  }
+}
+
+.DevTools, .DevTools * {
+  box-sizing: border-box;
+
+  -webkit-font-smoothing: var(--font-smoothing);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
new file mode 100644
index 0000000000000..3d19c9390e682
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -0,0 +1,192 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// Reach styles need to come before any component styles.
+// This makes overriding the styles simpler.
+import '@reach/menu-button/styles.css';
+import '@reach/tooltip/styles.css';
+
+import React, {useEffect, useMemo, useState} from 'react';
+import Store from '../store';
+import {BridgeContext, ContextMenuContext, StoreContext} from './context';
+import Components from './Components/Components';
+import Profiler from './Profiler/Profiler';
+import TabBar from './TabBar';
+import {SettingsContextController} from './Settings/SettingsContext';
+import {TreeContextController} from './Components/TreeContext';
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
+import {ProfilerContextController} from './Profiler/ProfilerContext';
+import {ModalDialogContextController} from './ModalDialog';
+import ReactLogo from './ReactLogo';
+import UnsupportedVersionDialog from './UnsupportedVersionDialog';
+import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
+
+import styles from './DevTools.css';
+
+import './root.css';
+
+import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+export type BrowserTheme = 'dark' | 'light';
+export type TabID = 'components' | 'profiler';
+export type ViewElementSource = (
+  id: number,
+  inspectedElement: InspectedElement,
+) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+export type CanViewElementSource = (
+  inspectedElement: InspectedElement,
+) => boolean;
+
+export type Props = {|
+  bridge: FrontendBridge,
+  browserTheme?: BrowserTheme,
+  canViewElementSourceFunction?: ?CanViewElementSource,
+  defaultTab?: TabID,
+  enabledInspectedElementContextMenu?: boolean,
+  showTabBar?: boolean,
+  store: Store,
+  warnIfLegacyBackendDetected?: boolean,
+  warnIfUnsupportedVersionDetected?: boolean,
+  viewAttributeSourceFunction?: ?ViewAttributeSource,
+  viewElementSourceFunction?: ?ViewElementSource,
+
+  // This property is used only by the web extension target.
+  // The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.
+  // This is done to save space within the app.
+  // Because of this, the extension needs to be able to change which tab is active/rendered.
+  overrideTab?: TabID,
+
+  // To avoid potential multi-root trickiness, the web extension uses portals to render tabs.
+  // The root <DevTools> app is rendered in the top-level extension window,
+  // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
+  componentsPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+|};
+
+const componentsTab = {
+  id: ('components': TabID),
+  icon: 'components',
+  label: 'Components',
+  title: 'React Components',
+};
+const profilerTab = {
+  id: ('profiler': TabID),
+  icon: 'profiler',
+  label: 'Profiler',
+  title: 'React Profiler',
+};
+
+const tabs = [componentsTab, profilerTab];
+
+export default function DevTools({
+  bridge,
+  browserTheme = 'light',
+  canViewElementSourceFunction,
+  componentsPortalContainer,
+  defaultTab = 'components',
+  enabledInspectedElementContextMenu = false,
+  overrideTab,
+  profilerPortalContainer,
+  showTabBar = false,
+  store,
+  warnIfLegacyBackendDetected = false,
+  warnIfUnsupportedVersionDetected = false,
+  viewAttributeSourceFunction,
+  viewElementSourceFunction,
+}: Props) {
+  const [tab, setTab] = useState(defaultTab);
+  if (overrideTab != null && overrideTab !== tab) {
+    setTab(overrideTab);
+  }
+
+  const viewElementSource = useMemo(
+    () => ({
+      canViewElementSourceFunction: canViewElementSourceFunction || null,
+      viewElementSourceFunction: viewElementSourceFunction || null,
+    }),
+    [canViewElementSourceFunction, viewElementSourceFunction],
+  );
+
+  const contextMenu = useMemo(
+    () => ({
+      isEnabledForInspectedElement: enabledInspectedElementContextMenu,
+      viewAttributeSourceFunction: viewAttributeSourceFunction || null,
+    }),
+    [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
+  );
+
+  useEffect(() => {
+    return () => {
+      try {
+        bridge.shutdown();
+      } catch (error) {
+        // Attempting to use a disconnected port.
+      }
+    };
+  }, [bridge]);
+
+  return (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <ContextMenuContext.Provider value={contextMenu}>
+          <ModalDialogContextController>
+            <SettingsContextController
+              browserTheme={browserTheme}
+              componentsPortalContainer={componentsPortalContainer}
+              profilerPortalContainer={profilerPortalContainer}>
+              <ViewElementSourceContext.Provider value={viewElementSource}>
+                <TreeContextController>
+                  <ProfilerContextController>
+                    <div className={styles.DevTools}>
+                      {showTabBar && (
+                        <div className={styles.TabBar}>
+                          <ReactLogo />
+                          <span className={styles.DevToolsVersion}>
+                            {process.env.DEVTOOLS_VERSION}
+                          </span>
+                          <div className={styles.Spacer} />
+                          <TabBar
+                            currentTab={tab}
+                            id="DevTools"
+                            selectTab={setTab}
+                            tabs={tabs}
+                            type="navigation"
+                          />
+                        </div>
+                      )}
+                      <div
+                        className={styles.TabContent}
+                        hidden={tab !== 'components'}>
+                        <Components
+                          portalContainer={componentsPortalContainer}
+                        />
+                      </div>
+                      <div
+                        className={styles.TabContent}
+                        hidden={tab !== 'profiler'}>
+                        <Profiler portalContainer={profilerPortalContainer} />
+                      </div>
+                    </div>
+                  </ProfilerContextController>
+                </TreeContextController>
+              </ViewElementSourceContext.Provider>
+            </SettingsContextController>
+            {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+            {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
+          </ModalDialogContextController>
+        </ContextMenuContext.Provider>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css
new file mode 100644
index 0000000000000..8a4b506c855be
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css
@@ -0,0 +1,24 @@
+.ErrorBoundary {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  color: red;
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  font-weight: bold;
+}
+
+.Stack {
+  margin-top: 0.5rem;
+  white-space: pre-wrap;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  background-color: hsl(0, 100%, 97%);
+  border: 1px solid hsl(0, 100%, 92%);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
new file mode 100644
index 0000000000000..2c8cd35b31026
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
@@ -0,0 +1,114 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Component} from 'react';
+import styles from './ErrorBoundary.css';
+
+type Props = {|
+  children: React$Node,
+|};
+
+type State = {|
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+  hasError: boolean,
+|};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = {
+    callStack: null,
+    componentStack: null,
+    errorMessage: null,
+    hasError: false,
+  };
+
+  componentDidCatch(error: any, {componentStack}: any) {
+    const errorMessage =
+      typeof error === 'object' && error.hasOwnProperty('message')
+        ? error.message
+        : error;
+
+    const callStack =
+      typeof error === 'object' && error.hasOwnProperty('stack')
+        ? error.stack
+            .split('\n')
+            .slice(1)
+            .join('\n')
+        : null;
+
+    this.setState({
+      callStack,
+      componentStack,
+      errorMessage,
+      hasError: true,
+    });
+  }
+
+  render() {
+    const {children} = this.props;
+    const {callStack, componentStack, errorMessage, hasError} = this.state;
+
+    let bugURL = process.env.GITHUB_URL;
+    if (bugURL) {
+      const title = `Error: "${errorMessage || ''}"`;
+      const label = 'Component: Developer Tools';
+
+      let body = 'Describe what you were doing when the bug occurred:';
+      body += '\n1. ';
+      body += '\n2. ';
+      body += '\n3. ';
+      body += '\n\n---------------------------------------------';
+      body += '\nPlease do not remove the text below this line';
+      body += '\n---------------------------------------------';
+      body += `\n\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;
+      if (callStack) {
+        body += `\n\nCall stack: ${callStack.trim()}`;
+      }
+      if (componentStack) {
+        body += `\n\nComponent stack: ${componentStack.trim()}`;
+      }
+
+      bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
+        title,
+      )}&body=${encodeURI(body)}`;
+    }
+
+    if (hasError) {
+      return (
+        <div className={styles.ErrorBoundary}>
+          <div className={styles.Header}>
+            An error was thrown: "{errorMessage}"
+          </div>
+          {bugURL && (
+            <a
+              href={bugURL}
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Report bug">
+              Report this issue
+            </a>
+          )}
+          {!!callStack && (
+            <div className={styles.Stack}>
+              The error was thrown {callStack.trim()}
+            </div>
+          )}
+          {!!componentStack && (
+            <div className={styles.Stack}>
+              The error occurred {componentStack.trim()}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.css b/packages/react-devtools-shared/src/devtools/views/Icon.css
new file mode 100644
index 0000000000000..2141ede58bd79
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.css
@@ -0,0 +1,5 @@
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
new file mode 100644
index 0000000000000..ca1f24075a209
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -0,0 +1,145 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import styles from './Icon.css';
+
+export type IconType =
+  | 'arrow'
+  | 'code'
+  | 'components'
+  | 'copy'
+  | 'flame-chart'
+  | 'interactions'
+  | 'profiler'
+  | 'ranked-chart'
+  | 'search'
+  | 'settings'
+  | 'store-as-global-variable';
+
+type Props = {|
+  className?: string,
+  type: IconType,
+|};
+
+export default function Icon({className = '', type}: Props) {
+  let pathData = null;
+  switch (type) {
+    case 'arrow':
+      pathData = PATH_ARROW;
+      break;
+    case 'code':
+      pathData = PATH_CODE;
+      break;
+    case 'components':
+      pathData = PATH_COMPONENTS;
+      break;
+    case 'copy':
+      pathData = PATH_COPY;
+      break;
+    case 'flame-chart':
+      pathData = PATH_FLAME_CHART;
+      break;
+    case 'interactions':
+      pathData = PATH_INTERACTIONS;
+      break;
+    case 'profiler':
+      pathData = PATH_PROFILER;
+      break;
+    case 'ranked-chart':
+      pathData = PATH_RANKED_CHART;
+      break;
+    case 'search':
+      pathData = PATH_SEARCH;
+      break;
+    case 'settings':
+      pathData = PATH_SETTINGS;
+      break;
+    case 'store-as-global-variable':
+      pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
+      break;
+    default:
+      console.warn(`Unsupported type "${type}" specified for Icon`);
+      break;
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.Icon} ${className}`}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path fill="currentColor" d={pathData} />
+    </svg>
+  );
+}
+
+const PATH_ARROW = 'M8 5v14l11-7z';
+
+const PATH_CODE = `
+  M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
+  `;
+
+const PATH_COMPONENTS =
+  'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';
+
+const PATH_COPY = `
+  M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
+  2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
+`;
+
+const PATH_FLAME_CHART = `
+  M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627
+  5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,
+  10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569
+  19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462
+  C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087
+  12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412
+  C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763
+  C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669
+  12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669
+  13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z
+`;
+
+const PATH_INTERACTIONS = `
+  M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2
+  2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55
+  4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02
+  9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55
+  2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z
+`;
+
+const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
+
+const PATH_SEARCH = `
+  M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91
+  16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99
+  5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z
+`;
+
+const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';
+
+const PATH_SETTINGS = `
+  M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
+  1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
+  2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
+  1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
+  1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
+  1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
+  3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
+`;
+
+const PATH_STORE_AS_GLOBAL_VARIABLE = `
+  M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41
+  3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04
+  1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6
+  8h-4v-2h4v2zm0-4h-4v-2h4v2z
+`;
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.css b/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
new file mode 100644
index 0000000000000..378e8e73b4b3e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
@@ -0,0 +1,40 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--color-modal-background);
+  overflow: auto;
+}
+
+.Dialog {
+  position: relative;
+  z-index: 3;
+  width: 25rem;
+  min-width: 20rem;
+  max-width: 100%;
+  display: inline-block;
+  background-color: var(--color-background);
+  box-shadow: 0 2px 4px var(--color-shadow);
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  font-size: var(--font-size-sans-normal);
+}
+
+.Title {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.Buttons {
+  text-align: right;
+  margin-top: 0.5rem;
+}
+
+.Button {
+  font-size: var(--font-size-sans-large);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
new file mode 100644
index 0000000000000..34aa4b85257ec
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -0,0 +1,159 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import Button from './Button';
+import {useModalDismissSignal} from './hooks';
+
+import styles from './ModalDialog.css';
+
+type DIALOG_ACTION_HIDE = {|
+  type: 'HIDE',
+|};
+type DIALOG_ACTION_SHOW = {|
+  type: 'SHOW',
+  canBeDismissed?: boolean,
+  content: React$Node,
+  title?: React$Node | null,
+|};
+
+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
+
+type Dispatch = (action: Action) => void;
+
+type State = {|
+  canBeDismissed: boolean,
+  content: React$Node | null,
+  isVisible: boolean,
+  title: React$Node | null,
+|};
+
+type ModalDialogContextType = {|
+  ...State,
+  dispatch: Dispatch,
+|};
+
+const ModalDialogContext = createContext<ModalDialogContextType>(
+  ((null: any): ModalDialogContextType),
+);
+ModalDialogContext.displayName = 'ModalDialogContext';
+
+function dialogReducer(state, action) {
+  switch (action.type) {
+    case 'HIDE':
+      return {
+        canBeDismissed: true,
+        content: null,
+        isVisible: false,
+        title: null,
+      };
+    case 'SHOW':
+      return {
+        canBeDismissed: action.canBeDismissed !== false,
+        content: action.content,
+        isVisible: true,
+        title: action.title || null,
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ModalDialogContextController({children}: Props) {
+  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+    canBeDismissed: true,
+    content: null,
+    isVisible: false,
+    title: null,
+  });
+
+  const value = useMemo<ModalDialogContextType>(
+    () => ({
+      canBeDismissed: state.canBeDismissed,
+      content: state.content,
+      isVisible: state.isVisible,
+      title: state.title,
+      dispatch,
+    }),
+    [state, dispatch],
+  );
+
+  return (
+    <ModalDialogContext.Provider value={value}>
+      {children}
+    </ModalDialogContext.Provider>
+  );
+}
+
+function ModalDialog(_: {||}) {
+  const {isVisible} = useContext(ModalDialogContext);
+  return isVisible ? <ModalDialogImpl /> : null;
+}
+
+function ModalDialogImpl(_: {||}) {
+  const {canBeDismissed, content, dispatch, title} = useContext(
+    ModalDialogContext,
+  );
+  const dismissModal = useCallback(() => {
+    if (canBeDismissed) {
+      dispatch({type: 'HIDE'});
+    }
+  }, [canBeDismissed, dispatch]);
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+
+  // It's important to trap click events within the dialog,
+  // so the dismiss hook will use it for click hit detection.
+  // Because multiple tabs may be showing this ModalDialog,
+  // the normal `dialog.contains(target)` check would fail on a background tab.
+  useModalDismissSignal(dialogRef, dismissModal, false);
+
+  // Clicks on the dialog should not bubble.
+  // This way we can dismiss by listening to clicks on the background.
+  const handleDialogClick = (event: any) => {
+    event.stopPropagation();
+
+    // It is important that we don't also prevent default,
+    // or clicks within the dialog (e.g. on links) won't work.
+  };
+
+  return (
+    <div className={styles.Background} onClick={dismissModal}>
+      <div
+        ref={dialogRef}
+        className={styles.Dialog}
+        onClick={handleDialogClick}>
+        {title !== null && <div className={styles.Title}>{title}</div>}
+        {content}
+        {canBeDismissed && (
+          <div className={styles.Buttons}>
+            <Button
+              autoFocus={true}
+              className={styles.Button}
+              onClick={dismissModal}>
+              Okay
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export {ModalDialog, ModalDialogContext, ModalDialogContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.css b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.css
new file mode 100644
index 0000000000000..3117ea19322f9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.css
@@ -0,0 +1,31 @@
+.Group {
+  transition: all ease-in-out 250ms;
+}
+
+.Rect {
+  cursor: pointer;
+  stroke: var(--color-background);
+  transition: all ease-in-out 250ms;
+}
+
+.ForeignObject {
+  pointer-events: none;
+  transition: all ease-in-out 250ms;
+}
+
+.Div {
+  pointer-events: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  line-height: 1.5;
+  padding: 0 0 0;
+  font-weight: 400;
+  color: var(--color-commit-gradient-text);
+  text-align: left;
+  transition: all ease-in-out 250ms;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
new file mode 100644
index 0000000000000..4a85d18fe8478
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+import styles from './ChartNode.css';
+
+type Props = {|
+  color: string,
+  height: number,
+  isDimmed?: boolean,
+  label: string,
+  onClick: (event: SyntheticMouseEvent<*>) => mixed,
+  onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
+  placeLabelAboveNode?: boolean,
+  textStyle?: Object,
+  width: number,
+  x: number,
+  y: number,
+|};
+
+const minWidthToDisplay = 35;
+
+export default function ChartNode({
+  color,
+  height,
+  isDimmed = false,
+  label,
+  onClick,
+  onDoubleClick,
+  textStyle,
+  width,
+  x,
+  y,
+}: Props) {
+  return (
+    <g className={styles.Group} transform={`translate(${x},${y})`}>
+      <title>{label}</title>
+      <rect
+        width={width}
+        height={height}
+        fill={color}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        className={styles.Rect}
+        style={{
+          opacity: isDimmed ? 0.5 : 1,
+        }}
+      />
+      {width >= minWidthToDisplay && (
+        <foreignObject
+          width={width}
+          height={height}
+          className={styles.ForeignObject}
+          style={{
+            paddingLeft: x < 0 ? -x : 0,
+            opacity: isDimmed ? 0.75 : 1,
+            display: width < minWidthToDisplay ? 'none' : 'block',
+          }}
+          y={0}>
+          <div className={styles.Div} style={textStyle}>
+            {label}
+          </div>
+        </foreignObject>
+      )}
+    </g>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
new file mode 100644
index 0000000000000..92a2b7519a62b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+
+export default function ClearProfilingDataButton() {
+  const store = useContext(StoreContext);
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+  const {profilerStore} = store;
+
+  const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
+
+  return (
+    <Button
+      disabled={isProfiling || !didRecordCommits}
+      onClick={clear}
+      title="Clear profiling data">
+      <ButtonIcon type="clear" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.css b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.css
new file mode 100644
index 0000000000000..143f83b043251
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.css
@@ -0,0 +1,10 @@
+.Container {
+  width: 100%;
+  flex: 1;
+  padding: 0.5rem;
+}
+
+.PatternPath {
+  stroke: var(--color-commit-did-not-render-pattern);
+  stroke-width: 1;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
new file mode 100644
index 0000000000000..f58d18d5c5c8f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -0,0 +1,166 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {forwardRef, useCallback, useContext, useMemo} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
+import NoCommitData from './NoCommitData';
+import CommitFlamegraphListItem from './CommitFlamegraphListItem';
+import {scale} from './utils';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
+
+import styles from './CommitFlamegraph.css';
+
+import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
+import type {CommitTree} from './types';
+
+export type ItemData = {|
+  chartData: ChartData,
+  scaleX: (value: number, fallbackValue: number) => number,
+  selectedChartNode: ChartNode | null,
+  selectedChartNodeIndex: number,
+  selectFiber: (id: number | null, name: string | null) => void,
+  width: number,
+|};
+
+export default function CommitFlamegraphAutoSizer(_: {||}) {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} = useContext(
+    ProfilerContext,
+  );
+  const {profilingCache} = profilerStore;
+
+  const deselectCurrentFiber = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(null, null);
+    },
+    [selectFiber],
+  );
+
+  let commitTree: CommitTree | null = null;
+  let chartData: ChartData | null = null;
+  if (selectedCommitIndex !== null) {
+    commitTree = profilingCache.getCommitTree({
+      commitIndex: selectedCommitIndex,
+      rootID: ((rootID: any): number),
+    });
+
+    chartData = profilingCache.getFlamegraphChartData({
+      commitIndex: selectedCommitIndex,
+      commitTree,
+      rootID: ((rootID: any): number),
+    });
+  }
+
+  if (commitTree != null && chartData != null && chartData.depth > 0) {
+    return (
+      <div className={styles.Container} onClick={deselectCurrentFiber}>
+        <AutoSizer>
+          {({height, width}) => (
+            // Force Flow types to avoid checking for `null` here because there's no static proof that
+            // by the time this render prop function is called, the values of the `let` variables have not changed.
+            <CommitFlamegraph
+              chartData={((chartData: any): ChartData)}
+              commitTree={((commitTree: any): CommitTree)}
+              height={height}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  } else {
+    return <NoCommitData />;
+  }
+}
+
+type Props = {|
+  chartData: ChartData,
+  commitTree: CommitTree,
+  height: number,
+  width: number,
+|};
+
+function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
+
+  const selectedChartNodeIndex = useMemo<number>(() => {
+    if (selectedFiberID === null) {
+      return 0;
+    }
+    // The selected node might not be in the tree for this commit,
+    // so it's important that we have a fallback plan.
+    const depth = chartData.idToDepthMap.get(selectedFiberID);
+    return depth !== undefined ? depth - 1 : 0;
+  }, [chartData, selectedFiberID]);
+
+  const selectedChartNode = useMemo(() => {
+    if (selectedFiberID !== null) {
+      return (
+        chartData.rows[selectedChartNodeIndex].find(
+          chartNode => chartNode.id === selectedFiberID,
+        ) || null
+      );
+    }
+    return null;
+  }, [chartData, selectedFiberID, selectedChartNodeIndex]);
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      scaleX: scale(
+        0,
+        selectedChartNode !== null
+          ? selectedChartNode.treeBaseDuration
+          : chartData.baseDuration,
+        0,
+        width,
+      ),
+      selectedChartNode,
+      selectedChartNodeIndex,
+      selectFiber,
+      width,
+    }),
+    [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width],
+  );
+
+  return (
+    <FixedSizeList
+      height={height}
+      innerElementType={InnerElementType}
+      itemCount={chartData.depth}
+      itemData={itemData}
+      itemSize={lineHeight}
+      width={width}>
+      {CommitFlamegraphListItem}
+    </FixedSizeList>
+  );
+}
+
+const InnerElementType = forwardRef(({children, ...rest}, ref) => (
+  <svg ref={ref} {...rest}>
+    <defs>
+      <pattern
+        id="didNotRenderPattern"
+        patternUnits="userSpaceOnUse"
+        width="4"
+        height="4">
+        <path
+          d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
+          className={styles.PatternPath}
+        />
+      </pattern>
+    </defs>
+    {children}
+  </svg>
+));
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
new file mode 100644
index 0000000000000..66d2db36962c4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, memo, useCallback, useContext} from 'react';
+import {areEqual} from 'react-window';
+import {barWidthThreshold} from './constants';
+import {getGradientColor} from './utils';
+import ChartNode from './ChartNode';
+import {SettingsContext} from '../Settings/SettingsContext';
+
+import type {ItemData} from './CommitFlamegraph';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+function CommitFlamegraphListItem({data, index, style}: Props) {
+  const {
+    chartData,
+    scaleX,
+    selectedChartNode,
+    selectedChartNodeIndex,
+    selectFiber,
+    width,
+  } = data;
+  const {renderPathNodes, maxSelfDuration, rows} = chartData;
+
+  const {lineHeight} = useContext(SettingsContext);
+  const handleClick = useCallback(
+    (event: SyntheticMouseEvent<*>, id: number, name: string) => {
+      event.stopPropagation();
+      selectFiber(id, name);
+    },
+    [selectFiber],
+  );
+
+  // List items are absolutely positioned using the CSS "top" attribute.
+  // The "left" value will always be 0.
+  // Since height is fixed, and width is based on the node's duration,
+  // We can ignore those values as well.
+  const top = parseInt(style.top, 10);
+
+  const row = rows[index];
+
+  let selectedNodeOffset = scaleX(
+    selectedChartNode !== null ? selectedChartNode.offset : 0,
+    width,
+  );
+
+  return (
+    <Fragment>
+      {row.map(chartNode => {
+        const {
+          didRender,
+          id,
+          label,
+          name,
+          offset,
+          selfDuration,
+          treeBaseDuration,
+        } = chartNode;
+
+        const nodeOffset = scaleX(offset, width);
+        const nodeWidth = scaleX(treeBaseDuration, width);
+
+        // Filter out nodes that are too small to see or click.
+        // This also helps render large trees faster.
+        if (nodeWidth < barWidthThreshold) {
+          return null;
+        }
+
+        // Filter out nodes that are outside of the horizontal window.
+        if (
+          nodeOffset + nodeWidth < selectedNodeOffset ||
+          nodeOffset > selectedNodeOffset + width
+        ) {
+          return null;
+        }
+
+        let color = 'url(#didNotRenderPattern)';
+        let textColor = 'var(--color-commit-did-not-render-pattern-text)';
+        if (didRender) {
+          color = getGradientColor(selfDuration / maxSelfDuration);
+          textColor = 'var(--color-commit-gradient-text)';
+        } else if (renderPathNodes.has(id)) {
+          color = 'var(--color-commit-did-not-render-fill)';
+          textColor = 'var(--color-commit-did-not-render-fill-text)';
+        }
+
+        return (
+          <ChartNode
+            color={color}
+            height={lineHeight}
+            isDimmed={index < selectedChartNodeIndex}
+            key={id}
+            label={label}
+            onClick={event => handleClick(event, id, name)}
+            textStyle={{color: textColor}}
+            width={nodeWidth}
+            x={nodeOffset - selectedNodeOffset}
+            y={top}
+          />
+        );
+      })}
+    </Fragment>
+  );
+}
+
+export default memo<Props>(CommitFlamegraphListItem, areEqual);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.css b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.css
new file mode 100644
index 0000000000000..c226f30486bf9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.css
@@ -0,0 +1,5 @@
+.Container {
+  width: 100%;
+  flex: 1;
+  padding: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
new file mode 100644
index 0000000000000..f230f67359920
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -0,0 +1,136 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useMemo} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
+import NoCommitData from './NoCommitData';
+import CommitRankedListItem from './CommitRankedListItem';
+import {scale} from './utils';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
+
+import styles from './CommitRanked.css';
+
+import type {ChartData} from './RankedChartBuilder';
+import type {CommitTree} from './types';
+
+export type ItemData = {|
+  chartData: ChartData,
+  scaleX: (value: number, fallbackValue: number) => number,
+  selectedFiberID: number | null,
+  selectedFiberIndex: number,
+  selectFiber: (id: number | null, name: string | null) => void,
+  width: number,
+|};
+
+export default function CommitRankedAutoSizer(_: {||}) {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} = useContext(
+    ProfilerContext,
+  );
+  const {profilingCache} = profilerStore;
+
+  const deselectCurrentFiber = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(null, null);
+    },
+    [selectFiber],
+  );
+
+  let commitTree: CommitTree | null = null;
+  let chartData: ChartData | null = null;
+  if (selectedCommitIndex !== null) {
+    commitTree = profilingCache.getCommitTree({
+      commitIndex: selectedCommitIndex,
+      rootID: ((rootID: any): number),
+    });
+
+    chartData = profilingCache.getRankedChartData({
+      commitIndex: selectedCommitIndex,
+      commitTree,
+      rootID: ((rootID: any): number),
+    });
+  }
+
+  if (commitTree != null && chartData != null && chartData.nodes.length > 0) {
+    return (
+      <div className={styles.Container} onClick={deselectCurrentFiber}>
+        <AutoSizer>
+          {({height, width}) => (
+            <CommitRanked
+              chartData={((chartData: any): ChartData)}
+              commitTree={((commitTree: any): CommitTree)}
+              height={height}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  } else {
+    return <NoCommitData />;
+  }
+}
+
+type Props = {|
+  chartData: ChartData,
+  commitTree: CommitTree,
+  height: number,
+  width: number,
+|};
+
+function CommitRanked({chartData, commitTree, height, width}: Props) {
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
+
+  const selectedFiberIndex = useMemo(
+    () => getNodeIndex(chartData, selectedFiberID),
+    [chartData, selectedFiberID],
+  );
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
+      selectedFiberID,
+      selectedFiberIndex,
+      selectFiber,
+      width,
+    }),
+    [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width],
+  );
+
+  return (
+    <FixedSizeList
+      height={height}
+      innerElementType="svg"
+      itemCount={chartData.nodes.length}
+      itemData={itemData}
+      itemSize={lineHeight}
+      width={width}>
+      {CommitRankedListItem}
+    </FixedSizeList>
+  );
+}
+
+const getNodeIndex = (chartData: ChartData, id: number | null): number => {
+  if (id === null) {
+    return 0;
+  }
+  const {nodes} = chartData;
+  for (let index = 0; index < nodes.length; index++) {
+    if (nodes[index].id === id) {
+      return index;
+    }
+  }
+  return 0;
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
new file mode 100644
index 0000000000000..8c46e7de2730b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {memo, useCallback, useContext} from 'react';
+import {areEqual} from 'react-window';
+import {minBarWidth} from './constants';
+import {getGradientColor} from './utils';
+import ChartNode from './ChartNode';
+import {SettingsContext} from '../Settings/SettingsContext';
+
+import type {ItemData} from './CommitRanked';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+function CommitRankedListItem({data, index, style}: Props) {
+  const {chartData, scaleX, selectedFiberIndex, selectFiber, width} = data;
+
+  const node = chartData.nodes[index];
+
+  const {lineHeight} = useContext(SettingsContext);
+
+  const handleClick = useCallback(
+    event => {
+      event.stopPropagation();
+      selectFiber(node.id, node.name);
+    },
+    [node, selectFiber],
+  );
+
+  // List items are absolutely positioned using the CSS "top" attribute.
+  // The "left" value will always be 0.
+  // Since height is fixed, and width is based on the node's duration,
+  // We can ignore those values as well.
+  const top = parseInt(style.top, 10);
+
+  return (
+    <ChartNode
+      color={getGradientColor(node.value / chartData.maxValue)}
+      height={lineHeight}
+      isDimmed={index < selectedFiberIndex}
+      key={node.id}
+      label={node.label}
+      onClick={handleClick}
+      width={Math.max(minBarWidth, scaleX(node.value, width))}
+      x={0}
+      y={top}
+    />
+  );
+}
+
+export default memo<Props>(CommitRankedListItem, areEqual);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
new file mode 100644
index 0000000000000..e122465c617e3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -0,0 +1,371 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {
+  __DEBUG__,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from 'react-devtools-shared/src/constants';
+import {utfDecodeString} from 'react-devtools-shared/src/utils';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+
+import type {ElementType} from 'react-devtools-shared/src/types';
+import type {
+  CommitTree,
+  CommitTreeNode,
+  ProfilingDataForRootFrontend,
+} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+
+const debug = (methodName, ...args) => {
+  if (__DEBUG__) {
+    console.log(
+      `%cCommitTreeBuilder %c${methodName}`,
+      'color: pink; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+};
+
+const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();
+
+export function getCommitTree({
+  commitIndex,
+  profilerStore,
+  rootID,
+}: {|
+  commitIndex: number,
+  profilerStore: ProfilerStore,
+  rootID: number,
+|}): CommitTree {
+  if (!rootToCommitTreeMap.has(rootID)) {
+    rootToCommitTreeMap.set(rootID, []);
+  }
+
+  const commitTrees = ((rootToCommitTreeMap.get(
+    rootID,
+  ): any): Array<CommitTree>);
+
+  if (commitIndex < commitTrees.length) {
+    return commitTrees[commitIndex];
+  }
+
+  const {profilingData} = profilerStore;
+  if (profilingData === null) {
+    throw Error(`No profiling data available`);
+  }
+
+  const dataForRoot = profilingData.dataForRoots.get(rootID);
+  if (dataForRoot == null) {
+    throw Error(`Could not find profiling data for root "${rootID}"`);
+  }
+
+  const {operations} = dataForRoot;
+
+  // Commits are generated sequentially and cached.
+  // If this is the very first commit, start with the cached snapshot and apply the first mutation.
+  // Otherwise load (or generate) the previous commit and append a mutation to it.
+  if (commitIndex === 0) {
+    const nodes = new Map();
+
+    // Construct the initial tree.
+    recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
+
+    // Mutate the tree
+    if (operations != null && commitIndex < operations.length) {
+      const commitTree = updateTree({nodes, rootID}, operations[commitIndex]);
+
+      if (__DEBUG__) {
+        __printTree(commitTree);
+      }
+
+      commitTrees.push(commitTree);
+      return commitTree;
+    }
+  } else {
+    const previousCommitTree = getCommitTree({
+      commitIndex: commitIndex - 1,
+      profilerStore,
+      rootID,
+    });
+
+    if (operations != null && commitIndex < operations.length) {
+      const commitTree = updateTree(
+        previousCommitTree,
+        operations[commitIndex],
+      );
+
+      if (__DEBUG__) {
+        __printTree(commitTree);
+      }
+
+      commitTrees.push(commitTree);
+      return commitTree;
+    }
+  }
+
+  throw Error(
+    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`,
+  );
+}
+
+function recursivelyInitializeTree(
+  id: number,
+  parentID: number,
+  nodes: Map<number, CommitTreeNode>,
+  dataForRoot: ProfilingDataForRootFrontend,
+): void {
+  const node = dataForRoot.snapshots.get(id);
+  if (node != null) {
+    nodes.set(id, {
+      id,
+      children: node.children,
+      displayName: node.displayName,
+      key: node.key,
+      parentID,
+      treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
+        id,
+      ): any): number),
+      type: node.type,
+    });
+
+    node.children.forEach(childID =>
+      recursivelyInitializeTree(childID, id, nodes, dataForRoot),
+    );
+  }
+}
+
+function updateTree(
+  commitTree: CommitTree,
+  operations: Array<number>,
+): CommitTree {
+  // Clone the original tree so edits don't affect it.
+  const nodes = new Map(commitTree.nodes);
+
+  // Clone nodes before mutating them so edits don't affect them.
+  const getClonedNode = (id: number): CommitTreeNode => {
+    const clonedNode = ((Object.assign(
+      {},
+      nodes.get(id),
+    ): any): CommitTreeNode);
+    nodes.set(id, clonedNode);
+    return clonedNode;
+  };
+
+  let i = 2;
+  let id: number = ((null: any): number);
+
+  // Reassemble the string table.
+  const stringTable = [
+    null, // ID = 0 corresponds to the null string.
+  ];
+  const stringTableSize = operations[i++];
+  const stringTableEnd = i + stringTableSize;
+  while (i < stringTableEnd) {
+    const nextLength = operations[i++];
+    const nextString = utfDecodeString(
+      (operations.slice(i, i + nextLength): any),
+    );
+    stringTable.push(nextString);
+    i += nextLength;
+  }
+
+  while (i < operations.length) {
+    const operation = operations[i];
+
+    switch (operation) {
+      case TREE_OPERATION_ADD:
+        id = ((operations[i + 1]: any): number);
+        const type = ((operations[i + 2]: any): ElementType);
+
+        i += 3;
+
+        if (nodes.has(id)) {
+          throw new Error(
+            'Commit tree already contains fiber ' +
+              id +
+              '. This is a bug in React DevTools.',
+          );
+        }
+
+        if (type === ElementTypeRoot) {
+          i++; // supportsProfiling flag
+          i++; // hasOwnerMetadata flag
+
+          if (__DEBUG__) {
+            debug('Add', `new root fiber ${id}`);
+          }
+
+          const node: CommitTreeNode = {
+            children: [],
+            displayName: null,
+            id,
+            key: null,
+            parentID: 0,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
+          };
+
+          nodes.set(id, node);
+        } else {
+          const parentID = ((operations[i]: any): number);
+          i++;
+
+          i++; // ownerID
+
+          const displayNameStringID = operations[i];
+          const displayName = stringTable[displayNameStringID];
+          i++;
+
+          const keyStringID = operations[i];
+          const key = stringTable[keyStringID];
+          i++;
+
+          if (__DEBUG__) {
+            debug(
+              'Add',
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`,
+            );
+          }
+
+          const parentNode = getClonedNode(parentID);
+          parentNode.children = parentNode.children.concat(id);
+
+          const node: CommitTreeNode = {
+            children: [],
+            displayName,
+            id,
+            key,
+            parentID,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
+          };
+
+          nodes.set(id, node);
+        }
+
+        break;
+      case TREE_OPERATION_REMOVE: {
+        const removeLength = ((operations[i + 1]: any): number);
+        i += 2;
+
+        for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+          id = ((operations[i]: any): number);
+          i++;
+
+          if (!nodes.has(id)) {
+            throw new Error(
+              'Commit tree does not contain fiber ' +
+                id +
+                '. This is a bug in React DevTools.',
+            );
+          }
+
+          const node = getClonedNode(id);
+          const parentID = node.parentID;
+
+          nodes.delete(id);
+
+          if (!nodes.has(parentID)) {
+            // No-op
+          } else {
+            const parentNode = getClonedNode(parentID);
+
+            if (__DEBUG__) {
+              debug('Remove', `fiber ${id} from parent ${parentID}`);
+            }
+
+            parentNode.children = parentNode.children.filter(
+              childID => childID !== id,
+            );
+          }
+        }
+        break;
+      }
+      case TREE_OPERATION_REORDER_CHILDREN: {
+        id = ((operations[i + 1]: any): number);
+        const numChildren = ((operations[i + 2]: any): number);
+        const children = ((operations.slice(
+          i + 3,
+          i + 3 + numChildren,
+        ): any): Array<number>);
+
+        i = i + 3 + numChildren;
+
+        if (__DEBUG__) {
+          debug('Re-order', `fiber ${id} children ${children.join(',')}`);
+        }
+
+        const node = getClonedNode(id);
+        node.children = Array.from(children);
+
+        break;
+      }
+      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: {
+        id = operations[i + 1];
+
+        const node = getClonedNode(id);
+        node.treeBaseDuration = operations[i + 2] / 1000; // Convert microseconds back to milliseconds;
+
+        if (__DEBUG__) {
+          debug(
+            'Update',
+            `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`,
+          );
+        }
+
+        i += 3;
+        break;
+      }
+      default:
+        throw Error(`Unsupported Bridge operation ${operation}`);
+    }
+  }
+
+  return {
+    nodes,
+    rootID: commitTree.rootID,
+  };
+}
+
+export function invalidateCommitTrees(): void {
+  rootToCommitTreeMap.clear();
+}
+
+// DEBUG
+const __printTree = (commitTree: CommitTree) => {
+  if (__DEBUG__) {
+    const {nodes, rootID} = commitTree;
+    console.group('__printTree()');
+    const queue = [rootID, 0];
+    while (queue.length > 0) {
+      const id = queue.shift();
+      const depth = queue.shift();
+
+      const node = nodes.get(id);
+      if (node == null) {
+        throw Error(`Could not find node with id "${id}" in commit tree`);
+      }
+
+      console.log(
+        `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
+          node.key ? `key:"${node.key}"` : ''
+        } (${node.treeBaseDuration})`,
+      );
+
+      node.children.forEach(childID => {
+        queue.push(childID, depth + 1);
+      });
+    }
+    console.groupEnd();
+  }
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
new file mode 100644
index 0000000000000..500549db01260
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -0,0 +1,189 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import {formatDuration} from './utils';
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+
+import type {CommitTree} from './types';
+
+export type ChartNode = {|
+  actualDuration: number,
+  didRender: boolean,
+  id: number,
+  label: string,
+  name: string,
+  offset: number,
+  selfDuration: number,
+  treeBaseDuration: number,
+|};
+
+export type ChartData = {|
+  baseDuration: number,
+  depth: number,
+  idToDepthMap: Map<number, number>,
+  maxSelfDuration: number,
+  renderPathNodes: Set<number>,
+  rows: Array<Array<ChartNode>>,
+|};
+
+const cachedChartData: Map<string, ChartData> = new Map();
+
+export function getChartData({
+  commitIndex,
+  commitTree,
+  profilerStore,
+  rootID,
+}: {|
+  commitIndex: number,
+  commitTree: CommitTree,
+  profilerStore: ProfilerStore,
+  rootID: number,
+|}): ChartData {
+  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
+
+  const {fiberActualDurations, fiberSelfDurations} = commitDatum;
+  const {nodes} = commitTree;
+
+  const chartDataKey = `${rootID}-${commitIndex}`;
+  if (cachedChartData.has(chartDataKey)) {
+    return ((cachedChartData.get(chartDataKey): any): ChartData);
+  }
+
+  const idToDepthMap: Map<number, number> = new Map();
+  const renderPathNodes: Set<number> = new Set();
+  const rows: Array<Array<ChartNode>> = [];
+
+  let maxDepth = 0;
+  let maxSelfDuration = 0;
+
+  // Generate flame graph structure using tree base durations.
+  const walkTree = (id: number, rightOffset: number, currentDepth: number) => {
+    idToDepthMap.set(id, currentDepth);
+
+    const node = nodes.get(id);
+    if (node == null) {
+      throw Error(`Could not find node with id "${id}" in commit tree`);
+    }
+
+    const {children, displayName, key, treeBaseDuration, type} = node;
+
+    const actualDuration = fiberActualDurations.get(id) || 0;
+    const selfDuration = fiberSelfDurations.get(id) || 0;
+    const didRender = fiberActualDurations.has(id);
+
+    const name = displayName || 'Anonymous';
+    const maybeKey = key !== null ? ` key="${key}"` : '';
+
+    let maybeBadge = '';
+    if (type === ElementTypeForwardRef) {
+      maybeBadge = ' (ForwardRef)';
+    } else if (type === ElementTypeMemo) {
+      maybeBadge = ' (Memo)';
+    }
+
+    let label = `${name}${maybeBadge}${maybeKey}`;
+    if (didRender) {
+      label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
+        actualDuration,
+      )}ms)`;
+    }
+
+    maxDepth = Math.max(maxDepth, currentDepth);
+    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
+
+    const chartNode: ChartNode = {
+      actualDuration,
+      didRender,
+      id,
+      label,
+      name,
+      offset: rightOffset - treeBaseDuration,
+      selfDuration,
+      treeBaseDuration,
+    };
+
+    if (currentDepth > rows.length) {
+      rows.push([chartNode]);
+    } else {
+      rows[currentDepth - 1].push(chartNode);
+    }
+
+    for (let i = children.length - 1; i >= 0; i--) {
+      const childID = children[i];
+      const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);
+      rightOffset -= childChartNode.treeBaseDuration;
+    }
+
+    return chartNode;
+  };
+
+  let baseDuration = 0;
+
+  // Special case to handle unmounted roots.
+  if (nodes.size > 0) {
+    // Skip over the root; we don't want to show it in the flamegraph.
+    const root = nodes.get(rootID);
+    if (root == null) {
+      throw Error(
+        `Could not find root node with id "${rootID}" in commit tree`,
+      );
+    }
+
+    // Don't assume a single root.
+    // Component filters or Fragments might lead to multiple "roots" in a flame graph.
+    for (let i = root.children.length - 1; i >= 0; i--) {
+      const id = root.children[i];
+      const node = nodes.get(id);
+      if (node == null) {
+        throw Error(`Could not find node with id "${id}" in commit tree`);
+      }
+      baseDuration += node.treeBaseDuration;
+      walkTree(id, baseDuration, 1);
+    }
+
+    fiberActualDurations.forEach((duration, id) => {
+      let node = nodes.get(id);
+      if (node != null) {
+        let currentID = node.parentID;
+        while (currentID !== 0) {
+          if (renderPathNodes.has(currentID)) {
+            // We've already walked this path; we can skip it.
+            break;
+          } else {
+            renderPathNodes.add(currentID);
+          }
+
+          node = nodes.get(currentID);
+          currentID = node != null ? node.parentID : 0;
+        }
+      }
+    });
+  }
+
+  const chartData = {
+    baseDuration,
+    depth: maxDepth,
+    idToDepthMap,
+    maxSelfDuration,
+    renderPathNodes,
+    rows,
+  };
+
+  cachedChartData.set(chartDataKey, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css
new file mode 100644
index 0000000000000..62784d3333dc9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css
@@ -0,0 +1,43 @@
+.Interaction,
+.SelectedInteraction {
+  display: flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Interaction:hover {
+  background-color: var(--color-background-hover);
+}
+
+.SelectedInteraction {
+  background-color: var(--color-background-hover);
+}
+
+.Name {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.Timeline {
+  position: relative;
+  height: 100%;
+}
+
+.InteractionLine {
+  position: absolute;
+  height: 3px;
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
+  border-radius: 0.125rem;
+}
+
+.CommitBox {
+  position: absolute;
+  width: var(--interaction-commit-size);
+  height: var(--interaction-commit-size);
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
+  cursor: pointer;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
new file mode 100644
index 0000000000000..cfc5d1229a9bc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
@@ -0,0 +1,104 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {memo, useCallback} from 'react';
+import {areEqual} from 'react-window';
+import {getGradientColor} from './utils';
+
+import styles from './InteractionListItem.css';
+
+import type {ItemData} from './Interactions';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+function InteractionListItem({data: itemData, index, style}: Props) {
+  const {
+    chartData,
+    dataForRoot,
+    labelWidth,
+    scaleX,
+    selectedInteractionID,
+    selectCommitIndex,
+    selectInteraction,
+    selectTab,
+  } = itemData;
+
+  const {commitData, interactionCommits} = dataForRoot;
+  const {interactions, lastInteractionTime, maxCommitDuration} = chartData;
+
+  const interaction = interactions[index];
+  if (interaction == null) {
+    throw Error(`Could not find interaction #${index}`);
+  }
+
+  const handleClick = useCallback(() => {
+    selectInteraction(interaction.id);
+  }, [interaction, selectInteraction]);
+
+  const commits = interactionCommits.get(interaction.id) || [];
+
+  const startTime = interaction.timestamp;
+  const stopTime = lastInteractionTime;
+
+  const viewCommit = (commitIndex: number) => {
+    selectTab('flame-chart');
+    selectCommitIndex(commitIndex);
+  };
+
+  return (
+    <div
+      className={
+        selectedInteractionID === interaction.id
+          ? styles.SelectedInteraction
+          : styles.Interaction
+      }
+      onClick={handleClick}
+      style={style}>
+      <div
+        className={styles.Name}
+        style={{maxWidth: labelWidth}}
+        title={interaction.name}>
+        {interaction.name}
+      </div>
+      <div
+        className={styles.InteractionLine}
+        style={{
+          left: labelWidth + scaleX(startTime, 0),
+          width: scaleX(stopTime - startTime, 0),
+        }}
+      />
+      {commits.map(commitIndex => (
+        <div
+          className={styles.CommitBox}
+          key={commitIndex}
+          onClick={() => viewCommit(commitIndex)}
+          style={{
+            backgroundColor: getGradientColor(
+              Math.min(
+                1,
+                Math.max(
+                  0,
+                  commitData[commitIndex].duration / maxCommitDuration,
+                ),
+              ) || 0,
+            ),
+            left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default memo<Props>(InteractionListItem, areEqual);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css
new file mode 100644
index 0000000000000..81fd9da918e15
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css
@@ -0,0 +1,9 @@
+.Container {
+  width: 100%;
+  flex: 1;
+  padding: 0.5rem;
+}
+
+.FocusTarget:focus {
+  outline: none;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
new file mode 100644
index 0000000000000..ffbd07f8863bf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
@@ -0,0 +1,145 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useMemo} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
+import InteractionListItem from './InteractionListItem';
+import NoInteractions from './NoInteractions';
+import {StoreContext} from '../context';
+import {scale} from './utils';
+
+import styles from './Interactions.css';
+
+import type {ProfilingDataForRootFrontend} from './types';
+import type {ChartData} from './InteractionsChartBuilder';
+import type {TabID} from './ProfilerContext';
+
+export type ItemData = {|
+  chartData: ChartData,
+  dataForRoot: ProfilingDataForRootFrontend,
+  labelWidth: number,
+  scaleX: (value: number, fallbackValue: number) => number,
+  selectedInteractionID: number | null,
+  selectCommitIndex: (id: number | null) => void,
+  selectInteraction: (id: number | null) => void,
+  selectTab: (id: TabID) => void,
+|};
+
+export default function InteractionsAutoSizer(_: {||}) {
+  return (
+    <div className={styles.Container}>
+      <AutoSizer>
+        {({height, width}) => <Interactions height={height} width={width} />}
+      </AutoSizer>
+    </div>
+  );
+}
+
+function Interactions({height, width}: {|height: number, width: number|}) {
+  const {
+    rootID,
+    selectedInteractionID,
+    selectInteraction,
+    selectCommitIndex,
+    selectTab,
+  } = useContext(ProfilerContext);
+  const {profilerStore} = useContext(StoreContext);
+  const {profilingCache} = profilerStore;
+
+  const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
+
+  const chartData = profilingCache.getInteractionsChartData({
+    rootID: ((rootID: any): number),
+  });
+
+  const {interactions} = chartData;
+
+  const handleKeyDown = useCallback(
+    event => {
+      let index;
+      switch (event.key) {
+        case 'ArrowDown':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID,
+          );
+          selectInteraction(Math.min(interactions.length - 1, index + 1));
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID,
+          );
+          selectInteraction(Math.max(0, index - 1));
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [interactions, selectedInteractionID, selectInteraction],
+  );
+
+  const itemData = useMemo<ItemData>(() => {
+    const interactionCommitSize = parseInt(
+      getComputedStyle((document.body: any)).getPropertyValue(
+        '--interaction-commit-size',
+      ),
+      10,
+    );
+    const interactionLabelWidth = parseInt(
+      getComputedStyle((document.body: any)).getPropertyValue(
+        '--interaction-label-width',
+      ),
+      10,
+    );
+
+    const labelWidth = Math.min(interactionLabelWidth, width / 5);
+    const timelineWidth = width - labelWidth - interactionCommitSize;
+
+    return {
+      chartData,
+      dataForRoot,
+      labelWidth,
+      scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
+      selectedInteractionID,
+      selectCommitIndex,
+      selectInteraction,
+      selectTab,
+    };
+  }, [
+    chartData,
+    dataForRoot,
+    selectedInteractionID,
+    selectCommitIndex,
+    selectInteraction,
+    selectTab,
+    width,
+  ]);
+
+  // If a commit contains no fibers with an actualDuration > 0,
+  // Display a fallback message.
+  if (interactions.length === 0) {
+    return <NoInteractions height={height} width={width} />;
+  }
+
+  return (
+    <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>
+      <FixedSizeList
+        height={height}
+        itemCount={interactions.length}
+        itemData={itemData}
+        itemSize={30}
+        width={width}>
+        {InteractionListItem}
+      </FixedSizeList>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
new file mode 100644
index 0000000000000..90ebfade4cd9f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+
+import type {Interaction} from './types';
+
+export type ChartData = {|
+  interactions: Array<Interaction>,
+  lastInteractionTime: number,
+  maxCommitDuration: number,
+|};
+
+const cachedChartData: Map<number, ChartData> = new Map();
+
+export function getChartData({
+  profilerStore,
+  rootID,
+}: {|
+  profilerStore: ProfilerStore,
+  rootID: number,
+|}): ChartData {
+  if (cachedChartData.has(rootID)) {
+    return ((cachedChartData.get(rootID): any): ChartData);
+  }
+
+  const dataForRoot = profilerStore.getDataForRoot(rootID);
+  if (dataForRoot == null) {
+    throw Error(`Could not find profiling data for root "${rootID}"`);
+  }
+
+  const {commitData, interactions} = dataForRoot;
+
+  const lastInteractionTime =
+    commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;
+
+  let maxCommitDuration = 0;
+
+  commitData.forEach(commitDatum => {
+    maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);
+  });
+
+  const chartData = {
+    interactions: Array.from(interactions.values()),
+    lastInteractionTime,
+    maxCommitDuration,
+  };
+
+  cachedChartData.set(rootID, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.css b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.css
new file mode 100644
index 0000000000000..059e7c99380b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.css
@@ -0,0 +1,18 @@
+.NoCommitData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.FilterMessage {
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
new file mode 100644
index 0000000000000..314f397016fa8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+import styles from './NoCommitData.css';
+
+export default function NoCommitData(_: {||}) {
+  return (
+    <div className={styles.NoCommitData}>
+      <div className={styles.Header}>
+        There is no data matching the current filter criteria.
+      </div>
+      <div className={styles.FilterMessage}>
+        Try adjusting the commit filter in Profiler settings.
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css
new file mode 100644
index 0000000000000..6c6872058ac7b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css
@@ -0,0 +1,16 @@
+.NoInteractions {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+}
+
+.Link {
+  color: var(--color-button);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
new file mode 100644
index 0000000000000..993d7136ac036
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+import styles from './NoInteractions.css';
+
+export default function NoInteractions({
+  height,
+  width,
+}: {|
+  height: number,
+  width: number,
+|}) {
+  return (
+    <div className={styles.NoInteractions} style={{height, width}}>
+      <p className={styles.Header}>No interactions were recorded.</p>
+      <p>
+        <a
+          className={styles.Link}
+          href="http://fb.me/react-interaction-tracing"
+          rel="noopener noreferrer"
+          target="_blank">
+          Learn more about the interaction tracing API here.
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
new file mode 100644
index 0000000000000..e9157aa35c666
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -0,0 +1,112 @@
+.Profiler {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.LeftColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 2 1 200px;
+  border-top: 1px solid var(--color-border);
+}
+
+.RightColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100px;
+  max-width: 300px;
+  overflow-x: hidden;
+  border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.Content {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+}
+
+.Paragraph {
+  text-align: center;
+}
+
+.Row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.25rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+.Spacer {
+  flex: 1;
+}
+
+.StopRecordingButton {
+  font-size: var(--font-size-sans-large);
+  padding: 0.5rem;
+}
+
+.ContentFallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
+
+.SnapshotSelectorFallback {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
+
+.Link {
+  color: var(--color-button);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
new file mode 100644
index 0000000000000..868f4add55e8c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -0,0 +1,203 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext} from 'react';
+import {ModalDialog} from '../ModalDialog';
+import {ProfilerContext} from './ProfilerContext';
+import TabBar from '../TabBar';
+import ClearProfilingDataButton from './ClearProfilingDataButton';
+import CommitFlamegraph from './CommitFlamegraph';
+import CommitRanked from './CommitRanked';
+import Interactions from './Interactions';
+import RootSelector from './RootSelector';
+import RecordToggle from './RecordToggle';
+import ReloadAndProfileButton from './ReloadAndProfileButton';
+import ProfilingImportExportButtons from './ProfilingImportExportButtons';
+import SnapshotSelector from './SnapshotSelector';
+import SidebarCommitInfo from './SidebarCommitInfo';
+import SidebarInteractions from './SidebarInteractions';
+import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
+import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
+import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
+import portaledContent from '../portaledContent';
+
+import styles from './Profiler.css';
+
+function Profiler(_: {||}) {
+  const {
+    didRecordCommits,
+    isProcessingData,
+    isProfiling,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectedTabID,
+    selectTab,
+    supportsProfiling,
+  } = useContext(ProfilerContext);
+
+  let view = null;
+  if (didRecordCommits) {
+    switch (selectedTabID) {
+      case 'flame-chart':
+        view = <CommitFlamegraph />;
+        break;
+      case 'ranked-chart':
+        view = <CommitRanked />;
+        break;
+      case 'interactions':
+        view = <Interactions />;
+        break;
+      default:
+        break;
+    }
+  } else if (isProfiling) {
+    view = <RecordingInProgress />;
+  } else if (isProcessingData) {
+    view = <ProcessingData />;
+  } else if (supportsProfiling) {
+    view = <NoProfilingData />;
+  } else {
+    view = <ProfilingNotSupported />;
+  }
+
+  let sidebar = null;
+  if (!isProfiling && !isProcessingData && didRecordCommits) {
+    switch (selectedTabID) {
+      case 'interactions':
+        sidebar = <SidebarInteractions />;
+        break;
+      case 'flame-chart':
+      case 'ranked-chart':
+        // TRICKY
+        // Handle edge case where no commit is selected because of a min-duration filter update.
+        // In that case, the selected commit index would be null.
+        // We could still show a sidebar for the previously selected fiber,
+        // but it would be an odd user experience.
+        // TODO (ProfilerContext) This check should not be necessary.
+        if (selectedCommitIndex !== null) {
+          if (selectedFiberID !== null) {
+            sidebar = <SidebarSelectedFiberInfo />;
+          } else {
+            sidebar = <SidebarCommitInfo />;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  return (
+    <SettingsModalContextController>
+      <div className={styles.Profiler}>
+        <div className={styles.LeftColumn}>
+          <div className={styles.Toolbar}>
+            <RecordToggle disabled={!supportsProfiling} />
+            <ReloadAndProfileButton />
+            <ClearProfilingDataButton />
+            <ProfilingImportExportButtons />
+            <div className={styles.VRule} />
+            <TabBar
+              currentTab={selectedTabID}
+              id="Profiler"
+              selectTab={selectTab}
+              tabs={tabs}
+              type="profiler"
+            />
+            <RootSelector />
+            <div className={styles.Spacer} />
+            <SettingsModalContextToggle />
+            {didRecordCommits && (
+              <Fragment>
+                <div className={styles.VRule} />
+                <SnapshotSelector />
+              </Fragment>
+            )}
+          </div>
+          <div className={styles.Content}>
+            {view}
+            <ModalDialog />
+          </div>
+        </div>
+        <div className={styles.RightColumn}>{sidebar}</div>
+        <SettingsModal />
+      </div>
+    </SettingsModalContextController>
+  );
+}
+
+const tabs = [
+  {
+    id: 'flame-chart',
+    icon: 'flame-chart',
+    label: 'Flamegraph',
+    title: 'Flamegraph chart',
+  },
+  {
+    id: 'ranked-chart',
+    icon: 'ranked-chart',
+    label: 'Ranked',
+    title: 'Ranked chart',
+  },
+  {
+    id: 'interactions',
+    icon: 'interactions',
+    label: 'Interactions',
+    title: 'Profiled interactions',
+  },
+];
+
+const NoProfilingData = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>No profiling data has been recorded.</div>
+    <div className={styles.Row}>
+      Click the record button <RecordToggle /> to start recording.
+    </div>
+  </div>
+);
+
+const ProfilingNotSupported = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Profiling not supported.</div>
+    <p className={styles.Paragraph}>
+      Profiling support requires either a development or production-profiling
+      build of React v16.5+.
+    </p>
+    <p className={styles.Paragraph}>
+      Learn more at{' '}
+      <a
+        className={styles.Link}
+        href="https://fb.me/react-profiling"
+        rel="noopener noreferrer"
+        target="_blank">
+        fb.me/react-profiling
+      </a>
+      .
+    </p>
+  </div>
+);
+
+const ProcessingData = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Processing data...</div>
+    <div className={styles.Row}>This should only take a minute.</div>
+  </div>
+);
+
+const RecordingInProgress = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Profiling is in progress...</div>
+    <div className={styles.Row}>
+      Click the record button <RecordToggle /> to stop recording.
+    </div>
+  </div>
+);
+
+export default portaledContent(Profiler);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
new file mode 100644
index 0000000000000..4c3bc8834fa93
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -0,0 +1,298 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {useLocalStorage, useSubscription} from '../hooks';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
+import {StoreContext} from '../context';
+
+import type {ProfilingDataFrontend} from './types';
+
+export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
+
+export type Context = {|
+  // Which tab is selexted in the Profiler UI?
+  selectedTabID: TabID,
+  selectTab(id: TabID): void,
+
+  // Store subscription based values.
+  // The isProfiling value may be modified by the record button in the Profiler toolbar,
+  // or from the backend itself (after a reload-and-profile action).
+  // It is synced between the backend and frontend via a Store subscription.
+  didRecordCommits: boolean,
+  isProcessingData: boolean,
+  isProfiling: boolean,
+  profilingData: ProfilingDataFrontend | null,
+  startProfiling(): void,
+  stopProfiling(): void,
+  supportsProfiling: boolean,
+
+  // Which root should profiling data be shown for?
+  // This value should be initialized to either:
+  // 1. The selected root in the Components tree (if it has any profiling data) or
+  // 2. The first root in the list with profiling data.
+  rootID: number | null,
+  setRootID: (id: number) => void,
+
+  // Controls whether commits are filtered by duration.
+  // This value is controlled by a filter toggle UI in the Profiler toolbar.
+  // It impacts the commit selector UI as well as the fiber commits bar chart.
+  isCommitFilterEnabled: boolean,
+  setIsCommitFilterEnabled: (value: boolean) => void,
+  minCommitDuration: number,
+  setMinCommitDuration: (value: number) => void,
+
+  // Which commit is currently selected in the commit selector UI.
+  // Note that this is the index of the commit in all commits (non-filtered) that were profiled.
+  // This value is controlled by the commit selector UI in the Profiler toolbar.
+  // It impacts the flame graph and ranked charts.
+  selectedCommitIndex: number | null,
+  selectCommitIndex: (value: number | null) => void,
+
+  // Which fiber is currently selected in the Ranked or Flamegraph charts?
+  selectedFiberID: number | null,
+  selectedFiberName: string | null,
+  selectFiber: (id: number | null, name: string | null) => void,
+
+  // Which interaction is currently selected in the Interactions graph?
+  selectedInteractionID: number | null,
+  selectInteraction: (id: number | null) => void,
+|};
+
+const ProfilerContext = createContext<Context>(((null: any): Context));
+ProfilerContext.displayName = 'ProfilerContext';
+
+type StoreProfilingState = {|
+  didRecordCommits: boolean,
+  isProcessingData: boolean,
+  isProfiling: boolean,
+  profilingData: ProfilingDataFrontend | null,
+  supportsProfiling: boolean,
+|};
+
+type Props = {|
+  children: React$Node,
+|};
+
+function ProfilerContextController({children}: Props) {
+  const store = useContext(StoreContext);
+  const {selectedElementID} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const {profilerStore} = store;
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        didRecordCommits: profilerStore.didRecordCommits,
+        isProcessingData: profilerStore.isProcessingData,
+        isProfiling: profilerStore.isProfiling,
+        profilingData: profilerStore.profilingData,
+        supportsProfiling: store.supportsProfiling,
+      }),
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('profilingData', callback);
+        profilerStore.addListener('isProcessingData', callback);
+        profilerStore.addListener('isProfiling', callback);
+        store.addListener('supportsProfiling', callback);
+        return () => {
+          profilerStore.removeListener('profilingData', callback);
+          profilerStore.removeListener('isProcessingData', callback);
+          profilerStore.removeListener('isProfiling', callback);
+          store.removeListener('supportsProfiling', callback);
+        };
+      },
+    }),
+    [profilerStore, store],
+  );
+  const {
+    didRecordCommits,
+    isProcessingData,
+    isProfiling,
+    profilingData,
+    supportsProfiling,
+  } = useSubscription<StoreProfilingState>(subscription);
+
+  const [prevProfilingData, setPrevProfilingData] = useState();
+  const [rootID, setRootID] = useState<number | null>(null);
+
+  if (prevProfilingData !== profilingData) {
+    batchedUpdates(() => {
+      setPrevProfilingData(profilingData);
+
+      const dataForRoots =
+        profilingData !== null ? profilingData.dataForRoots : null;
+      if (dataForRoots != null) {
+        const firstRootID = dataForRoots.keys().next().value || null;
+
+        if (rootID === null || !dataForRoots.has(rootID)) {
+          let selectedElementRootID = null;
+          if (selectedElementID !== null) {
+            selectedElementRootID = store.getRootIDForElement(
+              selectedElementID,
+            );
+          }
+          if (
+            selectedElementRootID !== null &&
+            dataForRoots.has(selectedElementRootID)
+          ) {
+            setRootID(selectedElementRootID);
+          } else {
+            setRootID(firstRootID);
+          }
+        }
+      }
+    });
+  }
+
+  const startProfiling = useCallback(
+    () => store.profilerStore.startProfiling(),
+    [store],
+  );
+  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
+    store,
+  ]);
+
+  const [
+    isCommitFilterEnabled,
+    setIsCommitFilterEnabled,
+  ] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
+  const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
+    'minCommitDuration',
+    0,
+  );
+
+  const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
+    null,
+  );
+  const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
+  const [selectedFiberID, selectFiberID] = useState<number | null>(null);
+  const [selectedFiberName, selectFiberName] = useState<string | null>(null);
+  const [selectedInteractionID, selectInteraction] = useState<number | null>(
+    null,
+  );
+
+  const selectFiber = useCallback(
+    (id: number | null, name: string | null) => {
+      selectFiberID(id);
+      selectFiberName(name);
+
+      // Sync selection to the Components tab for convenience.
+      if (id !== null) {
+        const element = store.getElementByID(id);
+
+        // Keep in mind that profiling data may be from a previous session.
+        // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
+        if (element !== null && element.displayName === name) {
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: id,
+          });
+        }
+      }
+    },
+    [dispatch, selectFiberID, selectFiberName, store],
+  );
+
+  if (isProfiling) {
+    batchedUpdates(() => {
+      if (selectedCommitIndex !== null) {
+        selectCommitIndex(null);
+      }
+      if (selectedFiberID !== null) {
+        selectFiberID(null);
+        selectFiberName(null);
+      }
+      if (selectedInteractionID !== null) {
+        selectInteraction(null);
+      }
+    });
+  }
+
+  const value = useMemo(
+    () => ({
+      selectedTabID,
+      selectTab,
+
+      didRecordCommits,
+      isProcessingData,
+      isProfiling,
+      profilingData,
+      startProfiling,
+      stopProfiling,
+      supportsProfiling,
+
+      rootID,
+      setRootID,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      selectCommitIndex,
+
+      selectedFiberID,
+      selectedFiberName,
+      selectFiber,
+
+      selectedInteractionID,
+      selectInteraction,
+    }),
+    [
+      selectedTabID,
+      selectTab,
+
+      didRecordCommits,
+      isProcessingData,
+      isProfiling,
+      profilingData,
+      startProfiling,
+      stopProfiling,
+      supportsProfiling,
+
+      rootID,
+      setRootID,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      selectCommitIndex,
+
+      selectedFiberID,
+      selectedFiberName,
+      selectFiber,
+
+      selectedInteractionID,
+      selectInteraction,
+    ],
+  );
+
+  return (
+    <ProfilerContext.Provider value={value}>
+      {children}
+    </ProfilerContext.Provider>
+  );
+}
+
+export {ProfilerContext, ProfilerContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.css b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.css
new file mode 100644
index 0000000000000..8d24f565052b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.css
@@ -0,0 +1,25 @@
+.VRule {
+  height: 20px;
+  width: 1px;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
+ */
+.Input {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.ErrorMessage {
+  margin: 0.5rem 0;
+  color: var(--color-dim);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
new file mode 100644
index 0000000000000..b23d797aa3274
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -0,0 +1,128 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useCallback, useRef} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {ModalDialogContext} from '../ModalDialog';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+import {
+  prepareProfilingDataExport,
+  prepareProfilingDataFrontendFromExport,
+} from './utils';
+import {downloadFile} from '../utils';
+
+import styles from './ProfilingImportExportButtons.css';
+
+import type {ProfilingDataExport} from './types';
+
+export default function ProfilingImportExportButtons() {
+  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
+  const store = useContext(StoreContext);
+  const {profilerStore} = store;
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const downloadRef = useRef<HTMLAnchorElement | null>(null);
+
+  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
+
+  const downloadData = useCallback(() => {
+    if (rootID === null) {
+      return;
+    }
+
+    if (profilingData !== null && downloadRef.current !== null) {
+      const profilingDataExport = prepareProfilingDataExport(profilingData);
+      const date = new Date();
+      const dateString = date
+        .toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
+        .replace(/\//g, '-');
+      const timeString = date
+        .toLocaleTimeString(undefined, {
+          hour12: false,
+        })
+        .replace(/:/g, '-');
+      downloadFile(
+        downloadRef.current,
+        `profiling-data.${dateString}.${timeString}.json`,
+        JSON.stringify(profilingDataExport, null, 2),
+      );
+    }
+  }, [rootID, profilingData]);
+
+  const uploadData = useCallback(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.click();
+    }
+  }, []);
+
+  const handleFiles = useCallback(() => {
+    const input = inputRef.current;
+    if (input !== null && input.files.length > 0) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => {
+        try {
+          const raw = ((fileReader.result: any): string);
+          const profilingDataExport = ((JSON.parse(
+            raw,
+          ): any): ProfilingDataExport);
+          profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
+            profilingDataExport,
+          );
+        } catch (error) {
+          modalDialogDispatch({
+            type: 'SHOW',
+            title: 'Import failed',
+            content: (
+              <Fragment>
+                <div>The profiling data you selected cannot be imported.</div>
+                {error !== null && (
+                  <div className={styles.ErrorMessage}>{error.message}</div>
+                )}
+              </Fragment>
+            ),
+          });
+        }
+      });
+      // TODO (profiling) Handle fileReader errors.
+      fileReader.readAsText(input.files[0]);
+    }
+  }, [modalDialogDispatch, profilerStore]);
+
+  return (
+    <Fragment>
+      <div className={styles.VRule} />
+      <input
+        ref={inputRef}
+        className={styles.Input}
+        type="file"
+        onChange={handleFiles}
+        tabIndex={-1}
+      />
+      <a ref={downloadRef} className={styles.Input} />
+      <Button
+        disabled={isProfiling}
+        onClick={uploadData}
+        title="Load profile...">
+        <ButtonIcon type="import" />
+      </Button>
+      <Button
+        disabled={isProfiling || !profilerStore.didRecordCommits}
+        onClick={downloadData}
+        title="Save profile...">
+        <ButtonIcon type="export" />
+      </Button>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
new file mode 100644
index 0000000000000..e3f6c178a5b03
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -0,0 +1,106 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import {formatDuration} from './utils';
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+
+import type {CommitTree} from './types';
+
+export type ChartNode = {|
+  id: number,
+  label: string,
+  name: string,
+  value: number,
+|};
+
+export type ChartData = {|
+  maxValue: number,
+  nodes: Array<ChartNode>,
+|};
+
+const cachedChartData: Map<string, ChartData> = new Map();
+
+export function getChartData({
+  commitIndex,
+  commitTree,
+  profilerStore,
+  rootID,
+}: {|
+  commitIndex: number,
+  commitTree: CommitTree,
+  profilerStore: ProfilerStore,
+  rootID: number,
+|}): ChartData {
+  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
+
+  const {fiberActualDurations, fiberSelfDurations} = commitDatum;
+  const {nodes} = commitTree;
+
+  const chartDataKey = `${rootID}-${commitIndex}`;
+  if (cachedChartData.has(chartDataKey)) {
+    return ((cachedChartData.get(chartDataKey): any): ChartData);
+  }
+
+  let maxSelfDuration = 0;
+
+  const chartNodes: Array<ChartNode> = [];
+  fiberActualDurations.forEach((actualDuration, id) => {
+    const node = nodes.get(id);
+
+    if (node == null) {
+      throw Error(`Could not find node with id "${id}" in commit tree`);
+    }
+
+    const {displayName, key, parentID, type} = node;
+
+    // Don't show the root node in this chart.
+    if (parentID === 0) {
+      return;
+    }
+    const selfDuration = fiberSelfDurations.get(id) || 0;
+    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
+
+    const name = displayName || 'Anonymous';
+    const maybeKey = key !== null ? ` key="${key}"` : '';
+
+    let maybeBadge = '';
+    if (type === ElementTypeForwardRef) {
+      maybeBadge = ' (ForwardRef)';
+    } else if (type === ElementTypeMemo) {
+      maybeBadge = ' (Memo)';
+    }
+
+    const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
+      selfDuration,
+    )}ms)`;
+    chartNodes.push({
+      id,
+      label,
+      name,
+      value: selfDuration,
+    });
+  });
+
+  const chartData = {
+    maxValue: maxSelfDuration,
+    nodes: chartNodes.sort((a, b) => b.value - a.value),
+  };
+
+  cachedChartData.set(chartDataKey, chartData);
+
+  return chartData;
+}
+
+export function invalidateChartData(): void {
+  cachedChartData.clear();
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.css b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.css
new file mode 100644
index 0000000000000..467bca27e3d12
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.css
@@ -0,0 +1,38 @@
+.ActiveRecordToggle {
+  color: var(--color-record-active);
+}
+.ActiveRecordToggle:hover {
+  color: var(--color-record-active);
+}
+.ActiveRecordToggle:focus {
+  color: var(--color-record-active);
+}
+.ActiveRecordToggle:active {
+  color: var(--color-record-hover);
+}
+
+.InactiveRecordToggle {
+  color: var(--color-record-inactive);
+}
+.InactiveRecordToggle:hover {
+  color: var(--color-record-hover);
+}
+.InactiveRecordToggle:focus {
+  color: var(--color-record-inactive);
+}
+.InactiveRecordToggle:active {
+  color: var(--color-record-hover);
+}
+
+.DisabledRecordToggle {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:hover {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:focus {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:active {
+  color: var(--color-button-disabled);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
new file mode 100644
index 0000000000000..db03e74aa85ee
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -0,0 +1,42 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {ProfilerContext} from './ProfilerContext';
+
+import styles from './RecordToggle.css';
+
+export type Props = {|
+  disabled?: boolean,
+|};
+
+export default function RecordToggle({disabled}: Props) {
+  const {isProfiling, startProfiling, stopProfiling} = useContext(
+    ProfilerContext,
+  );
+
+  let className = styles.InactiveRecordToggle;
+  if (disabled) {
+    className = styles.DisabledRecordToggle;
+  } else if (isProfiling) {
+    className = styles.ActiveRecordToggle;
+  }
+
+  return (
+    <Button
+      className={className}
+      disabled={disabled}
+      onClick={isProfiling ? stopProfiling : startProfiling}
+      title={isProfiling ? 'Stop profiling' : 'Start profiling'}>
+      <ButtonIcon type="record" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
new file mode 100644
index 0000000000000..d3772ead4d167
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -0,0 +1,69 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useMemo} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {BridgeContext, StoreContext} from '../context';
+import {useSubscription} from '../hooks';
+
+type SubscriptionData = {|
+  recordChangeDescriptions: boolean,
+  supportsReloadAndProfile: boolean,
+|};
+
+export default function ReloadAndProfileButton() {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        recordChangeDescriptions: store.recordChangeDescriptions,
+        supportsReloadAndProfile: store.supportsReloadAndProfile,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('recordChangeDescriptions', callback);
+        store.addListener('supportsReloadAndProfile', callback);
+        return () => {
+          store.removeListener('recordChangeDescriptions', callback);
+          store.removeListener('supportsReloadAndProfile', callback);
+        };
+      },
+    }),
+    [store],
+  );
+  const {
+    recordChangeDescriptions,
+    supportsReloadAndProfile,
+  } = useSubscription<SubscriptionData>(subscription);
+
+  const reloadAndProfile = useCallback(() => {
+    // TODO If we want to support reload-and-profile for e.g. React Native,
+    // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
+    // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
+    // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
+    // startProfiling();
+
+    bridge.send('reloadAndProfile', recordChangeDescriptions);
+  }, [bridge, recordChangeDescriptions]);
+
+  if (!supportsReloadAndProfile) {
+    return null;
+  }
+
+  return (
+    <Button
+      disabled={!store.supportsProfiling}
+      onClick={reloadAndProfile}
+      title="Reload and start profiling">
+      <ButtonIcon type="reload" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.css b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.css
new file mode 100644
index 0000000000000..ff1a970d46ce4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.css
@@ -0,0 +1,3 @@
+.Spacer {
+  flex: 1;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
new file mode 100644
index 0000000000000..b911faff35b9a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+
+import styles from './RootSelector.css';
+
+export default function RootSelector(_: {||}) {
+  const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
+
+  const options = [];
+  if (profilingData !== null) {
+    profilingData.dataForRoots.forEach((dataForRoot, id) => {
+      options.push(
+        <option key={id} value={id}>
+          {dataForRoot.displayName}
+        </option>,
+      );
+    });
+  }
+
+  const handleChange = useCallback(
+    ({currentTarget}) => {
+      setRootID(parseInt(currentTarget.value, 10));
+    },
+    [setRootID],
+  );
+
+  if (profilingData === null || profilingData.dataForRoots.size <= 1) {
+    // Don't take up visual space if there's only one root.
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Spacer} />
+      <select value={rootID} onChange={handleChange}>
+        {options}
+      </select>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
new file mode 100644
index 0000000000000..c0564e0d8c520
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -0,0 +1,65 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+  user-select: none;
+  overflow: auto;
+}
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ListItem {
+  margin: 0 0 0.5rem;
+}
+
+.NoInteractions {
+  color: var(--color-dim);
+}
+
+.Interactions {
+  margin: 0 0 0.5rem;
+}
+.Interaction {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  color: var(--color-text);
+}
+.Interaction:focus,
+.Interaction:hover {
+  outline: none;
+  background-color: var(--color-background-hover);
+}
+
+.Label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: bold;
+}
+
+.Value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.NothingSelected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-dim);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
new file mode 100644
index 0000000000000..735065f2809cc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -0,0 +1,91 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+
+import styles from './SidebarCommitInfo.css';
+
+export type Props = {||};
+
+export default function SidebarCommitInfo(_: Props) {
+  const {
+    selectedCommitIndex,
+    rootID,
+    selectInteraction,
+    selectTab,
+  } = useContext(ProfilerContext);
+
+  const {profilerStore} = useContext(StoreContext);
+
+  if (rootID === null || selectedCommitIndex === null) {
+    return <div className={styles.NothingSelected}>Nothing selected</div>;
+  }
+
+  const {interactions} = profilerStore.getDataForRoot(rootID);
+  const {
+    duration,
+    interactionIDs,
+    priorityLevel,
+    timestamp,
+  } = profilerStore.getCommitData(rootID, selectedCommitIndex);
+
+  const viewInteraction = interactionID => {
+    selectTab('interactions');
+    selectInteraction(interactionID);
+  };
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>Commit information</div>
+      <div className={styles.Content}>
+        <ul className={styles.List}>
+          {priorityLevel !== null && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Priority</label>:{' '}
+              <span className={styles.Value}>{priorityLevel}</span>
+            </li>
+          )}
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Committed at</label>:{' '}
+            <span className={styles.Value}>{formatTime(timestamp)}s</span>
+          </li>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Render duration</label>:{' '}
+            <span className={styles.Value}>{formatDuration(duration)}ms</span>
+          </li>
+          <li className={styles.Interactions}>
+            <label className={styles.Label}>Interactions</label>:
+            <div className={styles.InteractionList}>
+              {interactionIDs.length === 0 ? (
+                <div className={styles.NoInteractions}>None</div>
+              ) : null}
+              {interactionIDs.map(interactionID => {
+                const interaction = interactions.get(interactionID);
+                if (interaction == null) {
+                  throw Error(`Invalid interaction "${interactionID}"`);
+                }
+                return (
+                  <button
+                    key={interactionID}
+                    className={styles.Interaction}
+                    onClick={() => viewInteraction(interactionID)}>
+                    {interaction.name}
+                  </button>
+                );
+              })}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css
new file mode 100644
index 0000000000000..c5643dfcd79f1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css
@@ -0,0 +1,55 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.Content {
+  padding: 0.5rem;
+  user-select: none;
+  border-top: 1px solid var(--color-border);
+  overflow: auto;
+}
+
+.Name {
+  font-size: var(--font-size-sans-large);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.NothingSelected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-dim);
+}
+
+.Commits {
+  font-weight: bold;
+}
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ListItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+}
+.ListItem:hover {
+  background-color: var(--color-background-hover);
+}
+
+.CommitBox {
+  width: 20px;
+  height: 20px;
+  margin-right: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
new file mode 100644
index 0000000000000..21787d5fb1f50
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
@@ -0,0 +1,99 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+import {getGradientColor} from './utils';
+
+import styles from './SidebarInteractions.css';
+
+export type Props = {||};
+
+export default function SidebarInteractions(_: Props) {
+  const {
+    selectedInteractionID,
+    rootID,
+    selectCommitIndex,
+    selectTab,
+  } = useContext(ProfilerContext);
+
+  const {profilerStore} = useContext(StoreContext);
+  const {profilingCache} = profilerStore;
+
+  if (selectedInteractionID === null) {
+    return <div className={styles.NothingSelected}>Nothing selected</div>;
+  }
+
+  const {interactionCommits, interactions} = profilerStore.getDataForRoot(
+    ((rootID: any): number),
+  );
+  const interaction = interactions.get(selectedInteractionID);
+  if (interaction == null) {
+    throw Error(
+      `Could not find interaction by selected interaction id "${selectedInteractionID}"`,
+    );
+  }
+
+  const {maxCommitDuration} = profilingCache.getInteractionsChartData({
+    rootID: ((rootID: any): number),
+  });
+
+  const viewCommit = (commitIndex: number) => {
+    selectTab('flame-chart');
+    selectCommitIndex(commitIndex);
+  };
+
+  const listItems: Array<React$Node> = [];
+  const commitIndices = interactionCommits.get(selectedInteractionID);
+  if (commitIndices != null) {
+    commitIndices.forEach(commitIndex => {
+      const {duration, timestamp} = profilerStore.getCommitData(
+        ((rootID: any): number),
+        commitIndex,
+      );
+
+      listItems.push(
+        <li
+          key={commitIndex}
+          className={styles.ListItem}
+          onClick={() => viewCommit(commitIndex)}>
+          <div
+            className={styles.CommitBox}
+            style={{
+              backgroundColor: getGradientColor(
+                Math.min(1, Math.max(0, duration / maxCommitDuration)) || 0,
+              ),
+            }}
+          />
+          <div>
+            timestamp: {formatTime(timestamp)}s
+            <br />
+            duration: {formatDuration(duration)}ms
+          </div>
+        </li>,
+      );
+    });
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>
+        <div className={styles.Name} title={interaction.name}>
+          {interaction.name}
+        </div>
+      </div>
+      <div className={styles.Content}>
+        <div className={styles.Commits}>Commits:</div>
+        <ul className={styles.List}>{listItems}</ul>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
new file mode 100644
index 0000000000000..2ea9526d9653a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -0,0 +1,76 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+  user-select: none;
+  overflow-y: auto;
+}
+
+.WhatChanged {
+  margin-bottom: 1rem;
+}
+
+.Component {
+  flex: 1;
+  color: var(--color-component-name);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.Label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.CurrentCommit,
+.Commit {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  color: var(--color-text);
+}
+.Commit:focus,
+.Commit:hover {
+  outline: none;
+  background-color: var(--color-background-hover);
+}
+
+.CurrentCommit {
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
+}
+.CurrentCommit:focus {
+  outline: none;
+}
+
+.WhatChangedItem {
+  margin-top: 0.25rem;
+}
+
+.WhatChangedKey {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  line-height: 1;
+}
+.WhatChangedKey:first-of-type::before {
+  content: ' (';
+}
+.WhatChangedKey::after {
+  content: ', ';
+}
+.WhatChangedKey:last-of-type::after {
+  content: ')';
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
new file mode 100644
index 0000000000000..595d0e0e17439
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -0,0 +1,221 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext} from 'react';
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './SidebarSelectedFiberInfo.css';
+
+export type Props = {||};
+
+export default function SidebarSelectedFiberInfo(_: Props) {
+  const {profilerStore} = useContext(StoreContext);
+  const {
+    rootID,
+    selectCommitIndex,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectedFiberName,
+    selectFiber,
+  } = useContext(ProfilerContext);
+  const {profilingCache} = profilerStore;
+
+  const commitIndices = profilingCache.getFiberCommits({
+    fiberID: ((selectedFiberID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const listItems = [];
+  let i = 0;
+  for (i = 0; i < commitIndices.length; i++) {
+    const commitIndex = commitIndices[i];
+
+    const {duration, timestamp} = profilerStore.getCommitData(
+      ((rootID: any): number),
+      commitIndex,
+    );
+
+    listItems.push(
+      <button
+        key={commitIndex}
+        className={
+          selectedCommitIndex === commitIndex
+            ? styles.CurrentCommit
+            : styles.Commit
+        }
+        onClick={() => selectCommitIndex(commitIndex)}>
+        {formatTime(timestamp)}s for {formatDuration(duration)}ms
+      </button>,
+    );
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>
+        <div className={styles.Component}>
+          {selectedFiberName || 'Selected component'}
+        </div>
+
+        <Button
+          className={styles.IconButton}
+          onClick={() => selectFiber(null, null)}
+          title="Back to commit view">
+          <ButtonIcon type="close" />
+        </Button>
+      </div>
+      <div className={styles.Content}>
+        <WhatChanged
+          commitIndex={((selectedCommitIndex: any): number)}
+          fiberID={((selectedFiberID: any): number)}
+          profilerStore={profilerStore}
+          rootID={((rootID: any): number)}
+        />
+        {listItems.length > 0 && (
+          <Fragment>
+            <label className={styles.Label}>Rendered at</label>: {listItems}
+          </Fragment>
+        )}
+        {listItems.length === 0 && (
+          <div>Did not render during this profiling session.</div>
+        )}
+      </div>
+    </Fragment>
+  );
+}
+
+type WhatChangedProps = {|
+  commitIndex: number | null,
+  fiberID: number,
+  profilerStore: ProfilerStore,
+  rootID: number,
+|};
+
+function WhatChanged({
+  commitIndex,
+  fiberID,
+  profilerStore,
+  rootID,
+}: WhatChangedProps) {
+  // TRICKY
+  // Handle edge case where no commit is selected because of a min-duration filter update.
+  // If the commit index is null, suspending for data below would throw an error.
+  // TODO (ProfilerContext) This check should not be necessary.
+  if (commitIndex === null) {
+    return null;
+  }
+
+  const {changeDescriptions} = profilerStore.getCommitData(
+    ((rootID: any): number),
+    commitIndex,
+  );
+  if (changeDescriptions === null) {
+    return null;
+  }
+
+  const changeDescription = changeDescriptions.get(fiberID);
+  if (changeDescription == null) {
+    return null;
+  }
+
+  if (changeDescription.isFirstMount) {
+    return (
+      <div className={styles.WhatChanged}>
+        <label className={styles.Label}>Why did this render?</label>
+        <div className={styles.WhatChangedItem}>
+          This is the first time the component rendered.
+        </div>
+      </div>
+    );
+  }
+
+  const changes = [];
+
+  if (changeDescription.context === true) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed
+      </div>,
+    );
+  } else if (
+    typeof changeDescription.context === 'object' &&
+    changeDescription.context !== null &&
+    changeDescription.context.length !== 0
+  ) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed:
+        {changeDescription.context.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (changeDescription.didHooksChange) {
+    changes.push(
+      <div key="hooks" className={styles.WhatChangedItem}>
+        • Hooks changed
+      </div>,
+    );
+  }
+
+  if (
+    changeDescription.props !== null &&
+    changeDescription.props.length !== 0
+  ) {
+    changes.push(
+      <div key="props" className={styles.WhatChangedItem}>
+        • Props changed:
+        {changeDescription.props.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (
+    changeDescription.state !== null &&
+    changeDescription.state.length !== 0
+  ) {
+    changes.push(
+      <div key="state" className={styles.WhatChangedItem}>
+        • State changed:
+        {changeDescription.state.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (changes.length === 0) {
+    changes.push(
+      <div key="nothing" className={styles.WhatChangedItem}>
+        The parent component rendered.
+      </div>,
+    );
+  }
+
+  return (
+    <div className={styles.WhatChanged}>
+      <label className={styles.Label}>Why did this render?</label>
+      {changes}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
new file mode 100644
index 0000000000000..53faae5c38129
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
@@ -0,0 +1,9 @@
+.List {
+  /**
+   * The decision to suppress the default (horizontal) scroll bars is intentional.
+   * The snapshot selector is small enough that the scrollbar renders it essentially useless.
+   * There are two alternative navigation mechanisms (arrow keys and arrow buttons).
+   * If necessary, we could also expand the click-and-drag mechanism to scroll.
+   */
+  overflow-x: hidden !important;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
new file mode 100644
index 0000000000000..1723b9d5c7fe1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -0,0 +1,173 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {FixedSizeList} from 'react-window';
+import SnapshotCommitListItem from './SnapshotCommitListItem';
+import {minBarWidth} from './constants';
+
+import styles from './SnapshotCommitList.css';
+
+export type ItemData = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
+  isMouseDown: boolean,
+  maxDuration: number,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+|};
+
+type Props = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+|};
+
+export default function SnapshotCommitList({
+  commitDurations,
+  commitTimes,
+  filteredCommitIndices,
+  selectedCommitIndex,
+  selectedFilteredCommitIndex,
+  selectCommitIndex,
+}: Props) {
+  return (
+    <AutoSizer>
+      {({height, width}) => (
+        <List
+          commitDurations={commitDurations}
+          commitTimes={commitTimes}
+          height={height}
+          filteredCommitIndices={filteredCommitIndices}
+          selectedCommitIndex={selectedCommitIndex}
+          selectedFilteredCommitIndex={selectedFilteredCommitIndex}
+          selectCommitIndex={selectCommitIndex}
+          width={width}
+        />
+      )}
+    </AutoSizer>
+  );
+}
+
+type ListProps = {|
+  commitDurations: Array<number>,
+  commitTimes: Array<number>,
+  height: number,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+  width: number,
+|};
+
+function List({
+  commitDurations,
+  selectedCommitIndex,
+  commitTimes,
+  height,
+  filteredCommitIndices,
+  selectedFilteredCommitIndex,
+  selectCommitIndex,
+  width,
+}: ListProps) {
+  const listRef = useRef<FixedSizeList<ItemData> | null>(null);
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const prevCommitIndexRef = useRef<number | null>(null);
+
+  // Make sure a newly selected snapshot is fully visible within the list.
+  useEffect(() => {
+    if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
+      prevCommitIndexRef.current = selectedFilteredCommitIndex;
+      if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
+        listRef.current.scrollToItem(selectedFilteredCommitIndex);
+      }
+    }
+  }, [listRef, selectedFilteredCommitIndex]);
+
+  // When the mouse is down, dragging over a commit should auto-select it.
+  // This provides a nice way for users to swipe across a range of commits to compare them.
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const handleMouseDown = useCallback(() => {
+    setIsMouseDown(true);
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    setIsMouseDown(false);
+  }, []);
+  useEffect(() => {
+    if (divRef.current === null) {
+      return () => {};
+    }
+
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = divRef.current.ownerDocument;
+    ownerDocument.addEventListener('mouseup', handleMouseUp);
+    return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);
+  }, [divRef, handleMouseUp]);
+
+  const itemSize = useMemo(
+    () => Math.max(minBarWidth, width / filteredCommitIndices.length),
+    [filteredCommitIndices, width],
+  );
+  const maxDuration = useMemo(
+    () => commitDurations.reduce((max, duration) => Math.max(max, duration), 0),
+    [commitDurations],
+  );
+
+  // Pass required contextual data down to the ListItem renderer.
+  const itemData = useMemo<ItemData>(
+    () => ({
+      commitDurations,
+      commitTimes,
+      filteredCommitIndices,
+      isMouseDown,
+      maxDuration,
+      selectedCommitIndex,
+      selectedFilteredCommitIndex,
+      selectCommitIndex,
+    }),
+    [
+      commitDurations,
+      commitTimes,
+      filteredCommitIndices,
+      isMouseDown,
+      maxDuration,
+      selectedCommitIndex,
+      selectedFilteredCommitIndex,
+      selectCommitIndex,
+    ],
+  );
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      ref={divRef}
+      style={{height, width}}>
+      <FixedSizeList
+        className={styles.List}
+        layout="horizontal"
+        height={height}
+        itemCount={filteredCommitIndices.length}
+        itemData={itemData}
+        itemSize={itemSize}
+        ref={(listRef: any) /* Flow bug? */}
+        width={width}>
+        {SnapshotCommitListItem}
+      </FixedSizeList>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
new file mode 100644
index 0000000000000..dc6592a931706
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -0,0 +1,16 @@
+.Outer {
+  user-select: none;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  padding-top: 4px;
+  padding-bottom: 1px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.Inner {
+  width: 100%;
+  min-height: 5px;
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
new file mode 100644
index 0000000000000..feb69c8f7c84a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -0,0 +1,81 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {memo, useCallback} from 'react';
+import {areEqual} from 'react-window';
+import {getGradientColor, formatDuration, formatTime} from './utils';
+
+import styles from './SnapshotCommitListItem.css';
+
+import type {ItemData} from './SnapshotCommitList';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+function SnapshotCommitListItem({data: itemData, index, style}: Props) {
+  const {
+    commitDurations,
+    commitTimes,
+    filteredCommitIndices,
+    isMouseDown,
+    maxDuration,
+    selectedCommitIndex,
+    selectCommitIndex,
+  } = itemData;
+
+  index = filteredCommitIndices[index];
+
+  const commitDuration = commitDurations[index];
+  const commitTime = commitTimes[index];
+
+  const handleClick = useCallback(() => selectCommitIndex(index), [
+    index,
+    selectCommitIndex,
+  ]);
+
+  // Guard against commits with duration 0
+  const percentage =
+    Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
+  const isSelected = selectedCommitIndex === index;
+
+  // Leave a 1px gap between snapshots
+  const width = parseFloat(style.width) - 1;
+
+  return (
+    <div
+      className={styles.Outer}
+      onClick={handleClick}
+      onMouseEnter={isMouseDown ? handleClick : null}
+      style={{
+        ...style,
+        width,
+        borderBottom: isSelected
+          ? '3px solid var(--color-tab-selected-border)'
+          : undefined,
+      }}
+      title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
+        commitTime,
+      )}s`}>
+      <div
+        className={styles.Inner}
+        style={{
+          height: `${Math.round(percentage * 100)}%`,
+          backgroundColor:
+            percentage > 0 ? getGradientColor(percentage) : undefined,
+        }}
+      />
+    </div>
+  );
+}
+
+export default memo<Props>(SnapshotCommitListItem, areEqual);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
new file mode 100644
index 0000000000000..e4f8aec57d4ed
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
@@ -0,0 +1,30 @@
+.Button {
+  flex: 0 0 auto;
+  margin-left: 0.25rem;
+}
+
+.Commits {
+  height: 100%;
+  min-width: 30px;
+  margin-left: 0.25rem;
+  overflow: hidden;
+}
+.Commits:focus {
+  outline: none;
+  background-color: var(--color-button-background-focus);
+}
+
+.IndexLabel {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-family: var(--font-family-monospace);
+  margin-left: 0.25rem;
+}
+
+.NoCommits {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-dim);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
new file mode 100644
index 0000000000000..41d5e7a77ed03
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -0,0 +1,174 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback, useContext, useMemo} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {ProfilerContext} from './ProfilerContext';
+import SnapshotCommitList from './SnapshotCommitList';
+import {maxBarWidth} from './constants';
+import {StoreContext} from '../context';
+
+import styles from './SnapshotSelector.css';
+
+export type Props = {||};
+
+export default function SnapshotSelector(_: Props) {
+  const {
+    isCommitFilterEnabled,
+    minCommitDuration,
+    rootID,
+    selectedCommitIndex,
+    selectCommitIndex,
+  } = useContext(ProfilerContext);
+
+  const {profilerStore} = useContext(StoreContext);
+  const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));
+
+  const commitDurations: Array<number> = [];
+  const commitTimes: Array<number> = [];
+  commitData.forEach(commitDatum => {
+    commitDurations.push(commitDatum.duration);
+    commitTimes.push(commitDatum.timestamp);
+  });
+
+  const filteredCommitIndices = useMemo(
+    () =>
+      commitData.reduce((reduced, commitDatum, index) => {
+        if (
+          !isCommitFilterEnabled ||
+          commitDatum.duration >= minCommitDuration
+        ) {
+          reduced.push(index);
+        }
+        return reduced;
+      }, []),
+    [commitData, isCommitFilterEnabled, minCommitDuration],
+  );
+
+  const numFilteredCommits = filteredCommitIndices.length;
+
+  // Map the (unfiltered) selected commit index to an index within the filtered data.
+  const selectedFilteredCommitIndex = useMemo(() => {
+    if (selectedCommitIndex !== null) {
+      for (let i = 0; i < filteredCommitIndices.length; i++) {
+        if (filteredCommitIndices[i] === selectedCommitIndex) {
+          return i;
+        }
+      }
+    }
+    return null;
+  }, [filteredCommitIndices, selectedCommitIndex]);
+
+  // TODO (ProfilerContext) This should be managed by the context controller (reducer).
+  // It doesn't currently know about the filtered commits though (since it doesn't suspend).
+  // Maybe this component should pass filteredCommitIndices up?
+  if (selectedFilteredCommitIndex === null) {
+    if (numFilteredCommits > 0) {
+      selectCommitIndex(0);
+    } else {
+      selectCommitIndex(null);
+    }
+  } else if (selectedFilteredCommitIndex >= numFilteredCommits) {
+    selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1);
+  }
+
+  let label = null;
+  if (numFilteredCommits > 0) {
+    label =
+      `${selectedFilteredCommitIndex + 1}`.padStart(
+        `${numFilteredCommits}`.length,
+        '0',
+      ) +
+      ' / ' +
+      numFilteredCommits;
+  }
+
+  const viewNextCommit = useCallback(() => {
+    let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) + 1;
+    if (nextCommitIndex === filteredCommitIndices.length) {
+      nextCommitIndex = 0;
+    }
+    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+  const viewPrevCommit = useCallback(() => {
+    let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) - 1;
+    if (nextCommitIndex < 0) {
+      nextCommitIndex = filteredCommitIndices.length - 1;
+    }
+    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+
+  const handleKeyDown = useCallback(
+    event => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          viewPrevCommit();
+          event.stopPropagation();
+          break;
+        case 'ArrowRight':
+          viewNextCommit();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [viewNextCommit, viewPrevCommit],
+  );
+
+  if (commitData.length === 0) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <span className={styles.IndexLabel}>{label}</span>
+      <Button
+        className={styles.Button}
+        disabled={numFilteredCommits === 0}
+        onClick={viewPrevCommit}
+        title="Select previous commit">
+        <ButtonIcon type="previous" />
+      </Button>
+      <div
+        className={styles.Commits}
+        onKeyDown={handleKeyDown}
+        style={{
+          flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',
+          maxWidth:
+            numFilteredCommits > 0
+              ? numFilteredCommits * maxBarWidth
+              : undefined,
+        }}
+        tabIndex={0}>
+        {numFilteredCommits > 0 && (
+          <SnapshotCommitList
+            commitDurations={commitDurations}
+            commitTimes={commitTimes}
+            filteredCommitIndices={filteredCommitIndices}
+            selectedCommitIndex={selectedCommitIndex}
+            selectedFilteredCommitIndex={selectedFilteredCommitIndex}
+            selectCommitIndex={selectCommitIndex}
+          />
+        )}
+        {numFilteredCommits === 0 && (
+          <div className={styles.NoCommits}>No commits</div>
+        )}
+      </div>
+      <Button
+        className={styles.Button}
+        disabled={numFilteredCommits === 0}
+        onClick={viewNextCommit}
+        title="Select next commit">
+        <ButtonIcon type="next" />
+      </Button>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js b/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
new file mode 100644
index 0000000000000..fd6b4365f23ac
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export const barWidthThreshold = 2;
+export const interactionCommitSize = 10;
+export const interactionLabelWidth = 200;
+export const maxBarWidth = 30;
+export const minBarWidth = 5;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
new file mode 100644
index 0000000000000..4156aa592c4e8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -0,0 +1,139 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {ElementType} from 'react-devtools-shared/src/types';
+
+export type CommitTreeNode = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+  parentID: number,
+  treeBaseDuration: number,
+  type: ElementType,
+|};
+
+export type CommitTree = {|
+  nodes: Map<number, CommitTreeNode>,
+  rootID: number,
+|};
+
+export type Interaction = {|
+  id: number,
+  name: string,
+  timestamp: number,
+|};
+
+export type SnapshotNode = {|
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  key: number | string | null,
+  type: ElementType,
+|};
+
+export type ChangeDescription = {|
+  context: Array<string> | boolean | null,
+  didHooksChange: boolean,
+  isFirstMount: boolean,
+  props: Array<string> | null,
+  state: Array<string> | null,
+|};
+
+export type CommitDataFrontend = {|
+  // Map of Fiber (ID) to a description of what changed in this commit.
+  changeDescriptions: Map<number, ChangeDescription> | null,
+
+  // How long was this commit?
+  duration: number,
+
+  // Map of Fiber (ID) to actual duration for this commit;
+  // Fibers that did not render will not have entries in this Map.
+  fiberActualDurations: Map<number, number>,
+
+  // Map of Fiber (ID) to "self duration" for this commit;
+  // Fibers that did not render will not have entries in this Map.
+  fiberSelfDurations: Map<number, number>,
+
+  // Which interactions (IDs) were associated with this commit.
+  interactionIDs: Array<number>,
+
+  // Priority level of the commit (if React provided this info)
+  priorityLevel: string | null,
+
+  // When did this commit occur (relative to the start of profiling)
+  timestamp: number,
+|};
+
+export type ProfilingDataForRootFrontend = {|
+  // Timing, duration, and other metadata about each commit.
+  commitData: Array<CommitDataFrontend>,
+
+  // Display name of the nearest descendant component (ideally a function or class component).
+  // This value is used by the root selector UI.
+  displayName: string,
+
+  // Map of fiber id to (initial) tree base duration when Profiling session was started.
+  // This info can be used along with commitOperations to reconstruct the tree for any commit.
+  initialTreeBaseDurations: Map<number, number>,
+
+  // All interactions recorded (for this root) during the current session.
+  interactionCommits: Map<number, Array<number>>,
+
+  // All interactions recorded (for this root) during the current session.
+  interactions: Map<number, Interaction>,
+
+  // List of tree mutation that occur during profiling.
+  // These mutations can be used along with initial snapshots to reconstruct the tree for any commit.
+  operations: Array<Array<number>>,
+
+  // Identifies the root this profiler data corresponds to.
+  rootID: number,
+
+  // Map of fiber id to node when the Profiling session was started.
+  // This info can be used along with commitOperations to reconstruct the tree for any commit.
+  snapshots: Map<number, SnapshotNode>,
+|};
+
+// Combination of profiling data collected by the renderer interface (backend) and Store (frontend).
+export type ProfilingDataFrontend = {|
+  // Profiling data per root.
+  dataForRoots: Map<number, ProfilingDataForRootFrontend>,
+|};
+
+export type CommitDataExport = {|
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
+  duration: number,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  interactionIDs: Array<number>,
+  priorityLevel: string | null,
+  timestamp: number,
+|};
+
+export type ProfilingDataForRootExport = {|
+  commitData: Array<CommitDataExport>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  // Tuple of Interaction ID and commit indices
+  interactionCommits: Array<[number, Array<number>]>,
+  interactions: Array<[number, Interaction]>,
+  operations: Array<Array<number>>,
+  rootID: number,
+  snapshots: Array<[number, SnapshotNode]>,
+|};
+
+// Serializable vefrsion of ProfilingDataFrontend data.
+export type ProfilingDataExport = {|
+  version: 4,
+  dataForRoots: Array<ProfilingDataForRootExport>,
+|};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
new file mode 100644
index 0000000000000..b7aa9b88b6e0a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -0,0 +1,264 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {PROFILER_EXPORT_VERSION} from 'react-devtools-shared/src/constants';
+
+import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
+import type {
+  ProfilingDataExport,
+  ProfilingDataForRootExport,
+  ProfilingDataForRootFrontend,
+  ProfilingDataFrontend,
+  SnapshotNode,
+} from './types';
+
+const commitGradient = [
+  'var(--color-commit-gradient-0)',
+  'var(--color-commit-gradient-1)',
+  'var(--color-commit-gradient-2)',
+  'var(--color-commit-gradient-3)',
+  'var(--color-commit-gradient-4)',
+  'var(--color-commit-gradient-5)',
+  'var(--color-commit-gradient-6)',
+  'var(--color-commit-gradient-7)',
+  'var(--color-commit-gradient-8)',
+  'var(--color-commit-gradient-9)',
+];
+
+// Combines info from the Store (frontend) and renderer interfaces (backend) into the format required by the Profiler UI.
+// This format can then be quickly exported (and re-imported).
+export function prepareProfilingDataFrontendFromBackendAndStore(
+  dataBackends: Array<ProfilingDataBackend>,
+  operationsByRootID: Map<number, Array<Array<number>>>,
+  snapshotsByRootID: Map<number, Map<number, SnapshotNode>>,
+): ProfilingDataFrontend {
+  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
+
+  dataBackends.forEach(dataBackend => {
+    dataBackend.dataForRoots.forEach(
+      ({
+        commitData,
+        displayName,
+        initialTreeBaseDurations,
+        interactionCommits,
+        interactions,
+        rootID,
+      }) => {
+        const operations = operationsByRootID.get(rootID);
+        if (operations == null) {
+          throw Error(`Could not find profiling operations for root ${rootID}`);
+        }
+
+        const snapshots = snapshotsByRootID.get(rootID);
+        if (snapshots == null) {
+          throw Error(`Could not find profiling snapshots for root ${rootID}`);
+        }
+
+        const filteredCommitData = [];
+        const filteredOperations = [];
+
+        // Filter empty commits from the profiler data.
+        // It is very important to keep operations and commit data arrays perfect in sync.
+        // So we must use the same criteria to filter both.
+        // If these two arrays were to get out of sync, the profiler would runtime error.
+        // We choose to filter on commit metadata, rather than the operations array,
+        // because the latter may have false positives,
+        // (e.g. a commit that re-rendered a component with the same treeBaseDuration as before).
+        commitData.forEach((commitDataBackend, commitIndex) => {
+          if (commitDataBackend.fiberActualDurations.length > 0) {
+            filteredCommitData.push({
+              changeDescriptions:
+                commitDataBackend.changeDescriptions != null
+                  ? new Map(commitDataBackend.changeDescriptions)
+                  : null,
+              duration: commitDataBackend.duration,
+              fiberActualDurations: new Map(
+                commitDataBackend.fiberActualDurations,
+              ),
+              fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
+              interactionIDs: commitDataBackend.interactionIDs,
+              priorityLevel: commitDataBackend.priorityLevel,
+              timestamp: commitDataBackend.timestamp,
+            });
+            filteredOperations.push(operations[commitIndex]);
+          }
+        });
+
+        dataForRoots.set(rootID, {
+          commitData: filteredCommitData,
+          displayName,
+          initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+          interactionCommits: new Map(interactionCommits),
+          interactions: new Map(interactions),
+          operations: filteredOperations,
+          rootID,
+          snapshots,
+        });
+
+        dataForRoots.set(rootID, {
+          commitData: filteredCommitData,
+          displayName,
+          initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+          interactionCommits: new Map(interactionCommits),
+          interactions: new Map(interactions),
+          operations: filteredOperations,
+          rootID,
+          snapshots,
+        });
+      },
+    );
+  });
+
+  return {dataForRoots};
+}
+
+// Converts a Profiling data export into the format required by the Store.
+export function prepareProfilingDataFrontendFromExport(
+  profilingDataExport: ProfilingDataExport,
+): ProfilingDataFrontend {
+  const {version} = profilingDataExport;
+
+  if (version !== PROFILER_EXPORT_VERSION) {
+    throw Error(`Unsupported profiler export version "${version}"`);
+  }
+
+  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
+  profilingDataExport.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      interactionCommits,
+      interactions,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.set(rootID, {
+        commitData: commitData.map(
+          ({
+            changeDescriptions,
+            duration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            timestamp,
+          }) => ({
+            changeDescriptions:
+              changeDescriptions != null ? new Map(changeDescriptions) : null,
+            duration,
+            fiberActualDurations: new Map(fiberActualDurations),
+            fiberSelfDurations: new Map(fiberSelfDurations),
+            interactionIDs,
+            priorityLevel,
+            timestamp,
+          }),
+        ),
+        displayName,
+        initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+        interactionCommits: new Map(interactionCommits),
+        interactions: new Map(interactions),
+        operations,
+        rootID,
+        snapshots: new Map(snapshots),
+      });
+    },
+  );
+
+  return {dataForRoots};
+}
+
+// Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.
+export function prepareProfilingDataExport(
+  profilingDataFrontend: ProfilingDataFrontend,
+): ProfilingDataExport {
+  const dataForRoots: Array<ProfilingDataForRootExport> = [];
+  profilingDataFrontend.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      interactionCommits,
+      interactions,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.push({
+        commitData: commitData.map(
+          ({
+            changeDescriptions,
+            duration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            interactionIDs,
+            priorityLevel,
+            timestamp,
+          }) => ({
+            changeDescriptions:
+              changeDescriptions != null
+                ? Array.from(changeDescriptions.entries())
+                : null,
+            duration,
+            fiberActualDurations: Array.from(fiberActualDurations.entries()),
+            fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
+            interactionIDs,
+            priorityLevel,
+            timestamp,
+          }),
+        ),
+        displayName,
+        initialTreeBaseDurations: Array.from(
+          initialTreeBaseDurations.entries(),
+        ),
+        interactionCommits: Array.from(interactionCommits.entries()),
+        interactions: Array.from(interactions.entries()),
+        operations,
+        rootID,
+        snapshots: Array.from(snapshots.entries()),
+      });
+    },
+  );
+
+  return {
+    version: PROFILER_EXPORT_VERSION,
+    dataForRoots,
+  };
+}
+
+export const getGradientColor = (value: number) => {
+  const maxIndex = commitGradient.length - 1;
+  let index;
+  if (Number.isNaN(value)) {
+    index = 0;
+  } else if (!Number.isFinite(value)) {
+    index = maxIndex;
+  } else {
+    index = Math.max(0, Math.min(maxIndex, value)) * maxIndex;
+  }
+  return commitGradient[Math.round(index)];
+};
+
+export const formatDuration = (duration: number) =>
+  Math.round(duration * 10) / 10 || '<0.1';
+export const formatPercentage = (percentage: number) =>
+  Math.round(percentage * 100);
+export const formatTime = (timestamp: number) =>
+  Math.round(Math.round(timestamp) / 100) / 10;
+
+export const scale = (
+  minValue: number,
+  maxValue: number,
+  minRange: number,
+  maxRange: number,
+) => (value: number, fallbackValue: number) =>
+  maxValue - minValue === 0
+    ? fallbackValue
+    : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.css b/packages/react-devtools-shared/src/devtools/views/ReactLogo.css
new file mode 100644
index 0000000000000..a209f908d7f29
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.css
@@ -0,0 +1,6 @@
+.ReactLogo {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: 0 0.75rem 0 0.25rem;
+  color: var(--color-button-active);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
new file mode 100644
index 0000000000000..5ae9e09e9d41c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+import styles from './ReactLogo.css';
+
+type Props = {|
+  className?: string,
+|};
+
+export default function ReactLogo({className}: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.ReactLogo} ${className || ''}`}
+      viewBox="-11.5 -10.23174 23 20.46348">
+      <circle cx="0" cy="0" r="2.05" fill="currentColor" />
+      <g stroke="currentColor" strokeWidth="1" fill="none">
+        <ellipse rx="11" ry="4.2" />
+        <ellipse rx="11" ry="4.2" transform="rotate(60)" />
+        <ellipse rx="11" ry="4.2" transform="rotate(120)" />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
new file mode 100644
index 0000000000000..8244a4b83d622
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -0,0 +1,398 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {useSubscription} from '../hooks';
+import {StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
+  ComponentFilterLocation,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeSuspense,
+} from 'react-devtools-shared/src/types';
+
+import styles from './SettingsShared.css';
+
+import type {
+  BooleanComponentFilter,
+  ComponentFilter,
+  ComponentFilterType,
+  ElementType,
+  ElementTypeComponentFilter,
+  RegExpComponentFilter,
+} from 'react-devtools-shared/src/types';
+
+export default function ComponentsSettings(_: {||}) {
+  const store = useContext(StoreContext);
+
+  const collapseNodesByDefaultSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.collapseNodesByDefault,
+      subscribe: (callback: Function) => {
+        store.addListener('collapseNodesByDefault', callback);
+        return () => store.removeListener('collapseNodesByDefault', callback);
+      },
+    }),
+    [store],
+  );
+  const collapseNodesByDefault = useSubscription<boolean>(
+    collapseNodesByDefaultSubscription,
+  );
+
+  const updateCollapseNodesByDefault = useCallback(
+    ({currentTarget}) => {
+      store.collapseNodesByDefault = !currentTarget.checked;
+    },
+    [store],
+  );
+
+  const [componentFilters, setComponentFilters] = useState<
+    Array<ComponentFilter>,
+  >(() => [...store.componentFilters]);
+
+  const addFilter = useCallback(() => {
+    setComponentFilters(prevComponentFilters => {
+      return [
+        ...prevComponentFilters,
+        {
+          type: ComponentFilterElementType,
+          value: ElementTypeHostComponent,
+          isEnabled: true,
+        },
+      ];
+    });
+  }, []);
+
+  const changeFilterType = useCallback(
+    (componentFilter: ComponentFilter, type: ComponentFilterType) => {
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        const index = prevComponentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          if (type === ComponentFilterElementType) {
+            cloned[index] = {
+              type: ComponentFilterElementType,
+              isEnabled: componentFilter.isEnabled,
+              value: ElementTypeHostComponent,
+            };
+          } else if (type === ComponentFilterDisplayName) {
+            cloned[index] = {
+              type: ComponentFilterDisplayName,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            };
+          } else if (type === ComponentFilterLocation) {
+            cloned[index] = {
+              type: ComponentFilterLocation,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: '',
+            };
+          } else if (type === ComponentFilterHOC) {
+            cloned[index] = {
+              type: ComponentFilterHOC,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
+  const updateFilterValueElementType = useCallback(
+    (componentFilter: ComponentFilter, value: ElementType) => {
+      if (componentFilter.type !== ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        if (componentFilter.type === ComponentFilterElementType) {
+          const index = prevComponentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            cloned[index] = {
+              ...componentFilter,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
+  const updateFilterValueRegExp = useCallback(
+    (componentFilter: ComponentFilter, value: string) => {
+      if (componentFilter.type === ComponentFilterElementType) {
+        throw Error('Invalid value for element type filter');
+      }
+
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        if (
+          componentFilter.type === ComponentFilterDisplayName ||
+          componentFilter.type === ComponentFilterLocation
+        ) {
+          const index = prevComponentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            let isValid = true;
+            try {
+              new RegExp(value); // eslint-disable-line no-new
+            } catch (error) {
+              isValid = false;
+            }
+            cloned[index] = {
+              ...componentFilter,
+              isValid,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
+  const removeFilter = useCallback((index: number) => {
+    setComponentFilters(prevComponentFilters => {
+      const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+      cloned.splice(index, 1);
+      return cloned;
+    });
+  }, []);
+
+  const toggleFilterIsEnabled = useCallback(
+    (componentFilter: ComponentFilter, isEnabled: boolean) => {
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        const index = prevComponentFilters.indexOf(componentFilter);
+        if (index >= 0) {
+          if (componentFilter.type === ComponentFilterElementType) {
+            cloned[index] = {
+              ...((cloned[index]: any): ElementTypeComponentFilter),
+              isEnabled,
+            };
+          } else if (
+            componentFilter.type === ComponentFilterDisplayName ||
+            componentFilter.type === ComponentFilterLocation
+          ) {
+            cloned[index] = {
+              ...((cloned[index]: any): RegExpComponentFilter),
+              isEnabled,
+            };
+          } else if (componentFilter.type === ComponentFilterHOC) {
+            cloned[index] = {
+              ...((cloned[index]: any): BooleanComponentFilter),
+              isEnabled,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
+  // Filter updates are expensive to apply (since they impact the entire tree).
+  // Only apply them on unmount.
+  // The Store will avoid doing any expensive work unless they've changed.
+  // We just want to batch the work in the event that they do change.
+  const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);
+  useEffect(() => {
+    componentFiltersRef.current = componentFilters;
+    return () => {};
+  }, [componentFilters]);
+  useEffect(
+    () => () => {
+      store.componentFilters = [...componentFiltersRef.current];
+    },
+    [store],
+  );
+
+  return (
+    <div className={styles.Settings}>
+      <label className={styles.Setting}>
+        <input
+          type="checkbox"
+          checked={!collapseNodesByDefault}
+          onChange={updateCollapseNodesByDefault}
+        />{' '}
+        Expand component tree by default
+      </label>
+
+      <div className={styles.Header}>Hide components where...</div>
+
+      <table className={styles.Table}>
+        <tbody>
+          {componentFilters.length === 0 && (
+            <tr className={styles.TableRow}>
+              <td className={styles.NoFiltersCell}>
+                No filters have been added.
+              </td>
+            </tr>
+          )}
+          {componentFilters.map((componentFilter, index) => (
+            <tr className={styles.TableRow} key={index}>
+              <td className={styles.TableCell}>
+                <Toggle
+                  className={
+                    componentFilter.isValid !== false
+                      ? ''
+                      : styles.InvalidRegExp
+                  }
+                  isChecked={componentFilter.isEnabled}
+                  onChange={isEnabled =>
+                    toggleFilterIsEnabled(componentFilter, isEnabled)
+                  }
+                  title={
+                    componentFilter.isValid === false
+                      ? 'Filter invalid'
+                      : componentFilter.isEnabled
+                      ? 'Filter enabled'
+                      : 'Filter disabled'
+                  }>
+                  <ToggleIcon
+                    isEnabled={componentFilter.isEnabled}
+                    isValid={
+                      componentFilter.isValid == null ||
+                      componentFilter.isValid === true
+                    }
+                  />
+                </Toggle>
+              </td>
+              <td className={styles.TableCell}>
+                <select
+                  className={styles.Select}
+                  value={componentFilter.type}
+                  onChange={({currentTarget}) =>
+                    changeFilterType(
+                      componentFilter,
+                      ((parseInt(
+                        currentTarget.value,
+                        10,
+                      ): any): ComponentFilterType),
+                    )
+                  }>
+                  <option value={ComponentFilterLocation}>location</option>
+                  <option value={ComponentFilterDisplayName}>name</option>
+                  <option value={ComponentFilterElementType}>type</option>
+                  <option value={ComponentFilterHOC}>hoc</option>
+                </select>
+              </td>
+              <td className={styles.TableCell}>
+                {componentFilter.type === ComponentFilterElementType &&
+                  'equals'}
+                {(componentFilter.type === ComponentFilterLocation ||
+                  componentFilter.type === ComponentFilterDisplayName) &&
+                  'matches'}
+              </td>
+              <td className={styles.TableCell}>
+                {componentFilter.type === ComponentFilterElementType && (
+                  <select
+                    className={styles.Select}
+                    value={componentFilter.value}
+                    onChange={({currentTarget}) =>
+                      updateFilterValueElementType(
+                        componentFilter,
+                        ((parseInt(currentTarget.value, 10): any): ElementType),
+                      )
+                    }>
+                    <option value={ElementTypeClass}>class</option>
+                    <option value={ElementTypeContext}>context</option>
+                    <option value={ElementTypeFunction}>function</option>
+                    <option value={ElementTypeForwardRef}>forward ref</option>
+                    <option value={ElementTypeHostComponent}>
+                      host (e.g. &lt;div&gt;)
+                    </option>
+                    <option value={ElementTypeMemo}>memo</option>
+                    <option value={ElementTypeOtherOrUnknown}>other</option>
+                    <option value={ElementTypeProfiler}>profiler</option>
+                    <option value={ElementTypeSuspense}>suspense</option>
+                  </select>
+                )}
+                {(componentFilter.type === ComponentFilterLocation ||
+                  componentFilter.type === ComponentFilterDisplayName) && (
+                  <input
+                    className={styles.Input}
+                    type="text"
+                    placeholder="Regular expression"
+                    onChange={({currentTarget}) =>
+                      updateFilterValueRegExp(
+                        componentFilter,
+                        currentTarget.value,
+                      )
+                    }
+                    value={componentFilter.value}
+                  />
+                )}
+              </td>
+              <td className={styles.TableCell}>
+                <Button
+                  onClick={() => removeFilter(index)}
+                  title="Delete filter">
+                  <ButtonIcon type="delete" />
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <Button onClick={addFilter}>
+        <ButtonIcon className={styles.ButtonIcon} type="add" />
+        Add filter
+      </Button>
+    </div>
+  );
+}
+
+type ToggleIconProps = {|
+  isEnabled: boolean,
+  isValid: boolean,
+|};
+function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
+  let className;
+  if (isValid) {
+    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
+  } else {
+    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
+  }
+  return (
+    <div className={className}>
+      <div
+        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
+      />
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
new file mode 100644
index 0000000000000..4e7ce6357c638
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -0,0 +1,98 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext} from 'react';
+import {SettingsContext} from './SettingsContext';
+import {StoreContext} from '../context';
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
+
+import styles from './SettingsShared.css';
+
+export default function GeneralSettings(_: {||}) {
+  const {
+    appendComponentStack,
+    displayDensity,
+    setAppendComponentStack,
+    setDisplayDensity,
+    setTheme,
+    setTraceUpdatesEnabled,
+    theme,
+    traceUpdatesEnabled,
+  } = useContext(SettingsContext);
+
+  const {supportsTraceUpdates} = useContext(StoreContext);
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Setting}>
+        <div className={styles.RadioLabel}>Theme</div>
+        <select
+          className={styles.Select}
+          value={theme}
+          onChange={({currentTarget}) => setTheme(currentTarget.value)}>
+          <option value="auto">Auto</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
+
+      <div className={styles.Setting}>
+        <div className={styles.RadioLabel}>Display density</div>
+        <select
+          className={styles.Select}
+          value={displayDensity}
+          onChange={({currentTarget}) =>
+            setDisplayDensity(currentTarget.value)
+          }>
+          <option value="compact">Compact</option>
+          <option value="comfortable">Comfortable</option>
+        </select>
+      </div>
+
+      {supportsTraceUpdates && (
+        <div className={styles.Setting}>
+          <label>
+            <input
+              type="checkbox"
+              checked={traceUpdatesEnabled}
+              onChange={({currentTarget}) =>
+                setTraceUpdatesEnabled(currentTarget.checked)
+              }
+            />{' '}
+            Highlight updates when components render.
+          </label>
+        </div>
+      )}
+
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={appendComponentStack}
+            onChange={({currentTarget}) =>
+              setAppendComponentStack(currentTarget.checked)
+            }
+          />{' '}
+          Append component stacks to console warnings and errors.
+        </label>
+      </div>
+
+      <div className={styles.ReleaseNotes}>
+        <a
+          className={styles.ReleaseNotesLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          href={CHANGE_LOG_URL}>
+          View release notes
+        </a>{' '}
+        for DevTools version {process.env.DEVTOOLS_VERSION}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
new file mode 100644
index 0000000000000..7265154229442
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -0,0 +1,103 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useMemo, useRef} from 'react';
+import {useSubscription} from '../hooks';
+import {StoreContext} from '../context';
+import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+
+import styles from './SettingsShared.css';
+
+export default function ProfilerSettings(_: {||}) {
+  const {
+    isCommitFilterEnabled,
+    minCommitDuration,
+    setIsCommitFilterEnabled,
+    setMinCommitDuration,
+  } = useContext(ProfilerContext);
+  const store = useContext(StoreContext);
+
+  const recordChangeDescriptionsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.recordChangeDescriptions,
+      subscribe: (callback: Function) => {
+        store.addListener('recordChangeDescriptions', callback);
+        return () => store.removeListener('recordChangeDescriptions', callback);
+      },
+    }),
+    [store],
+  );
+  const recordChangeDescriptions = useSubscription<boolean>(
+    recordChangeDescriptionsSubscription,
+  );
+
+  const updateRecordChangeDescriptions = useCallback(
+    ({currentTarget}) => {
+      store.recordChangeDescriptions = currentTarget.checked;
+    },
+    [store],
+  );
+  const updateMinCommitDuration = useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const newValue = parseFloat(event.currentTarget.value);
+      setMinCommitDuration(
+        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue,
+      );
+    },
+    [setMinCommitDuration],
+  );
+  const updateIsCommitFilterEnabled = useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) => {
+      const checked = event.currentTarget.checked;
+      setIsCommitFilterEnabled(checked);
+      if (checked) {
+        if (minCommitDurationInputRef.current !== null) {
+          minCommitDurationInputRef.current.focus();
+        }
+      }
+    },
+    [setIsCommitFilterEnabled],
+  );
+
+  const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={recordChangeDescriptions}
+            onChange={updateRecordChangeDescriptions}
+          />{' '}
+          Record why each component rendered while profiling.
+        </label>
+      </div>
+
+      <div className={styles.Setting}>
+        <label>
+          <input
+            checked={isCommitFilterEnabled}
+            onChange={updateIsCommitFilterEnabled}
+            type="checkbox"
+          />{' '}
+          Hide commits below
+        </label>{' '}
+        <input
+          className={styles.Input}
+          onChange={updateMinCommitDuration}
+          ref={minCommitDurationInputRef}
+          type="number"
+          value={minCommitDuration}
+        />{' '}
+        (ms)
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
new file mode 100644
index 0000000000000..ce6dc6022f261
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -0,0 +1,360 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import {
+  COMFORTABLE_LINE_HEIGHT,
+  COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+} from 'react-devtools-shared/src/constants';
+import {useLocalStorage} from '../hooks';
+import {BridgeContext} from '../context';
+
+import type {BrowserTheme} from '../DevTools';
+
+export type DisplayDensity = 'comfortable' | 'compact';
+export type Theme = 'auto' | 'light' | 'dark';
+
+type Context = {|
+  displayDensity: DisplayDensity,
+  setDisplayDensity(value: DisplayDensity): void,
+
+  // Derived from display density.
+  // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
+  lineHeight: number,
+
+  appendComponentStack: boolean,
+  setAppendComponentStack: (value: boolean) => void,
+
+  theme: Theme,
+  setTheme(value: Theme): void,
+
+  traceUpdatesEnabled: boolean,
+  setTraceUpdatesEnabled: (value: boolean) => void,
+|};
+
+const SettingsContext = createContext<Context>(((null: any): Context));
+SettingsContext.displayName = 'SettingsContext';
+
+type DocumentElements = Array<HTMLElement>;
+
+type Props = {|
+  browserTheme: BrowserTheme,
+  children: React$Node,
+  componentsPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+|};
+
+function SettingsContextController({
+  browserTheme,
+  children,
+  componentsPortalContainer,
+  profilerPortalContainer,
+}: Props) {
+  const bridge = useContext(BridgeContext);
+
+  const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
+    'React::DevTools::displayDensity',
+    'compact',
+  );
+  const [theme, setTheme] = useLocalStorage<Theme>(
+    'React::DevTools::theme',
+    'auto',
+  );
+  const [
+    appendComponentStack,
+    setAppendComponentStack,
+  ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
+  const [
+    traceUpdatesEnabled,
+    setTraceUpdatesEnabled,
+  ] = useLocalStorage<boolean>(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);
+
+  const documentElements = useMemo<DocumentElements>(() => {
+    const array: Array<HTMLElement> = [
+      ((document.documentElement: any): HTMLElement),
+    ];
+    if (componentsPortalContainer != null) {
+      array.push(
+        ((componentsPortalContainer.ownerDocument
+          .documentElement: any): HTMLElement),
+      );
+    }
+    if (profilerPortalContainer != null) {
+      array.push(
+        ((profilerPortalContainer.ownerDocument
+          .documentElement: any): HTMLElement),
+      );
+    }
+    return array;
+  }, [componentsPortalContainer, profilerPortalContainer]);
+
+  useLayoutEffect(() => {
+    switch (displayDensity) {
+      case 'comfortable':
+        updateDisplayDensity('comfortable', documentElements);
+        break;
+      case 'compact':
+        updateDisplayDensity('compact', documentElements);
+        break;
+      default:
+        throw Error(`Unsupported displayDensity value "${displayDensity}"`);
+    }
+  }, [displayDensity, documentElements]);
+
+  useLayoutEffect(() => {
+    switch (theme) {
+      case 'light':
+        updateThemeVariables('light', documentElements);
+        break;
+      case 'dark':
+        updateThemeVariables('dark', documentElements);
+        break;
+      case 'auto':
+        updateThemeVariables(browserTheme, documentElements);
+        break;
+      default:
+        throw Error(`Unsupported theme value "${theme}"`);
+    }
+  }, [browserTheme, theme, documentElements]);
+
+  useEffect(() => {
+    bridge.send('updateAppendComponentStack', appendComponentStack);
+  }, [bridge, appendComponentStack]);
+
+  useEffect(() => {
+    bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
+  }, [bridge, traceUpdatesEnabled]);
+
+  const value = useMemo(
+    () => ({
+      appendComponentStack,
+      displayDensity,
+      lineHeight:
+        displayDensity === 'compact'
+          ? COMPACT_LINE_HEIGHT
+          : COMFORTABLE_LINE_HEIGHT,
+      setAppendComponentStack,
+      setDisplayDensity,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      traceUpdatesEnabled,
+    }),
+    [
+      appendComponentStack,
+      displayDensity,
+      setAppendComponentStack,
+      setDisplayDensity,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      traceUpdatesEnabled,
+    ],
+  );
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+function setStyleVariable(
+  name: string,
+  value: string,
+  documentElements: DocumentElements,
+) {
+  documentElements.forEach(documentElement =>
+    documentElement.style.setProperty(name, value),
+  );
+}
+
+function updateStyleHelper(
+  themeKey: string,
+  style: string,
+  documentElements: DocumentElements,
+) {
+  setStyleVariable(
+    `--${style}`,
+    `var(--${themeKey}-${style})`,
+    documentElements,
+  );
+}
+
+function updateDisplayDensity(
+  displayDensity: DisplayDensity,
+  documentElements: DocumentElements,
+): void {
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-normal',
+    documentElements,
+  );
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-large',
+    documentElements,
+  );
+  updateStyleHelper(
+    displayDensity,
+    'font-size-monospace-small',
+    documentElements,
+  );
+  updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
+  updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
+  updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
+  updateStyleHelper(displayDensity, 'line-height-data', documentElements);
+
+  // Sizes and paddings/margins are all rem-based,
+  // so update the root font-size as well when the display preference changes.
+  const computedStyle = getComputedStyle((document.body: any));
+  const fontSize = computedStyle.getPropertyValue(
+    `--${displayDensity}-root-font-size`,
+  );
+  const root = ((document.querySelector(':root'): any): HTMLElement);
+  root.style.fontSize = fontSize;
+}
+
+function updateThemeVariables(
+  theme: Theme,
+  documentElements: DocumentElements,
+): void {
+  updateStyleHelper(theme, 'color-attribute-name', documentElements);
+  updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
+  updateStyleHelper(theme, 'color-attribute-value', documentElements);
+  updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
+  updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
+  updateStyleHelper(theme, 'color-background', documentElements);
+  updateStyleHelper(theme, 'color-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-background-inactive', documentElements);
+  updateStyleHelper(theme, 'color-background-invalid', documentElements);
+  updateStyleHelper(theme, 'color-background-selected', documentElements);
+  updateStyleHelper(theme, 'color-border', documentElements);
+  updateStyleHelper(theme, 'color-button-background', documentElements);
+  updateStyleHelper(theme, 'color-button-background-focus', documentElements);
+  updateStyleHelper(theme, 'color-button', documentElements);
+  updateStyleHelper(theme, 'color-button-active', documentElements);
+  updateStyleHelper(theme, 'color-button-disabled', documentElements);
+  updateStyleHelper(theme, 'color-button-focus', documentElements);
+  updateStyleHelper(theme, 'color-button-hover', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-fill',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-fill-text',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-pattern',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-commit-did-not-render-pattern-text',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);
+  updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
+  updateStyleHelper(theme, 'color-component-name', documentElements);
+  updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-component-badge-background',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-component-badge-background-inverted',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-component-badge-count', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-component-badge-count-inverted',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-context-background', documentElements);
+  updateStyleHelper(theme, 'color-context-background-hover', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-context-background-selected',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-context-border', documentElements);
+  updateStyleHelper(theme, 'color-context-text', documentElements);
+  updateStyleHelper(theme, 'color-context-text-selected', documentElements);
+  updateStyleHelper(theme, 'color-dim', documentElements);
+  updateStyleHelper(theme, 'color-dimmer', documentElements);
+  updateStyleHelper(theme, 'color-dimmest', documentElements);
+  updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
+  updateStyleHelper(theme, 'color-modal-background', documentElements);
+  updateStyleHelper(theme, 'color-record-active', documentElements);
+  updateStyleHelper(theme, 'color-record-hover', documentElements);
+  updateStyleHelper(theme, 'color-record-inactive', documentElements);
+  updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
+  updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
+  updateStyleHelper(theme, 'color-search-match', documentElements);
+  updateStyleHelper(theme, 'color-shadow', documentElements);
+  updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-active',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-inactive',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
+  updateStyleHelper(theme, 'color-text', documentElements);
+  updateStyleHelper(theme, 'color-text-invalid', documentElements);
+  updateStyleHelper(theme, 'color-text-selected', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
+  updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
+  updateStyleHelper(theme, 'color-toggle-text', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
+
+  // Font smoothing varies based on the theme.
+  updateStyleHelper(theme, 'font-smoothing', documentElements);
+
+  // Update scrollbar color to match theme.
+  // this CSS property is currently only supported in Firefox,
+  // but it makes a significant UI improvement in dark mode.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  documentElements.forEach(documentElement => {
+    // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
+    documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
+  });
+}
+
+export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
new file mode 100644
index 0000000000000..af400ba9161d0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
@@ -0,0 +1,45 @@
+.Background {
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  background-color: var(--color-modal-background);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  font-size: var(--font-size-sans-normal);
+  padding: 1rem;
+}
+
+.Modal {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  max-height: 100%;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 2px 4px var(--color-shadow);
+  border-radius: 0.25rem;
+  overflow: auto;
+  width: 400px;
+  max-width: 100%;
+}
+
+.Spacer {
+  flex: 1;
+}
+
+.Tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--color-border);
+  padding-right: 0.25rem;
+  flex: 0 0 auto;
+}
+
+.Content {
+  padding: 0.5rem;
+  flex: 0 1 auto;
+  overflow: auto;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
new file mode 100644
index 0000000000000..e76dae6518203
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -0,0 +1,137 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {SettingsModalContext} from './SettingsModalContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import TabBar from '../TabBar';
+import {StoreContext} from '../context';
+import {
+  useLocalStorage,
+  useModalDismissSignal,
+  useSubscription,
+} from '../hooks';
+import ComponentsSettings from './ComponentsSettings';
+import GeneralSettings from './GeneralSettings';
+import ProfilerSettings from './ProfilerSettings';
+
+import styles from './SettingsModal.css';
+
+type TabID = 'general' | 'components' | 'profiler';
+
+export default function SettingsModal(_: {||}) {
+  const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
+  const store = useContext(StoreContext);
+  const {profilerStore} = store;
+
+  // Updating preferences while profiling is in progress could break things (e.g. filtering)
+  // Explicitly disallow it for now.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => profilerStore.isProfiling,
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
+      },
+    }),
+    [profilerStore],
+  );
+  const isProfiling = useSubscription<boolean>(isProfilingSubscription);
+  if (isProfiling && isModalShowing) {
+    setIsModalShowing(false);
+  }
+
+  if (!isModalShowing) {
+    return null;
+  }
+
+  return <SettingsModalImpl />;
+}
+
+function SettingsModalImpl(_: {||}) {
+  const {setIsModalShowing} = useContext(SettingsModalContext);
+  const dismissModal = useCallback(() => setIsModalShowing(false), [
+    setIsModalShowing,
+  ]);
+
+  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
+    'React::DevTools::selectedSettingsTabID',
+    'general',
+  );
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  useModalDismissSignal(modalRef, dismissModal);
+
+  useEffect(() => {
+    if (modalRef.current !== null) {
+      modalRef.current.focus();
+    }
+  }, [modalRef]);
+
+  let view = null;
+  switch (selectedTabID) {
+    case 'general':
+      view = <GeneralSettings />;
+      break;
+    case 'profiler':
+      view = <ProfilerSettings />;
+      break;
+    case 'components':
+      view = <ComponentsSettings />;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.Background}>
+      <div className={styles.Modal} ref={modalRef}>
+        <div className={styles.Tabs}>
+          <TabBar
+            currentTab={selectedTabID}
+            id="Settings"
+            selectTab={selectTab}
+            tabs={tabs}
+            type="settings"
+          />
+          <div className={styles.Spacer} />
+          <Button onClick={dismissModal} title="Close settings dialog">
+            <ButtonIcon type="close" />
+          </Button>
+        </div>
+        <div className={styles.Content}>{view}</div>
+      </div>
+    </div>
+  );
+}
+
+const tabs = [
+  {
+    id: 'general',
+    icon: 'settings',
+    label: 'General',
+  },
+  {
+    id: 'components',
+    icon: 'components',
+    label: 'Components',
+  },
+  {
+    id: 'profiler',
+    icon: 'profiler',
+    label: 'Profiler',
+  },
+];
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
new file mode 100644
index 0000000000000..694e859808730
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {createContext, useMemo, useState} from 'react';
+
+export type DisplayDensity = 'comfortable' | 'compact';
+export type Theme = 'auto' | 'light' | 'dark';
+
+type Context = {
+  isModalShowing: boolean,
+  setIsModalShowing: (value: boolean) => void,
+  ...
+};
+
+const SettingsModalContext = createContext<Context>(((null: any): Context));
+SettingsModalContext.displayName = 'SettingsModalContext';
+
+function SettingsModalContextController({children}: {|children: React$Node|}) {
+  const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
+
+  const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
+    isModalShowing,
+    setIsModalShowing,
+  ]);
+
+  return (
+    <SettingsModalContext.Provider value={value}>
+      {children}
+    </SettingsModalContext.Provider>
+  );
+}
+
+export {SettingsModalContext, SettingsModalContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
new file mode 100644
index 0000000000000..465f835a05aa3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback, useContext, useMemo} from 'react';
+import {SettingsModalContext} from './SettingsModalContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
+
+export default function SettingsModalContextToggle() {
+  const {setIsModalShowing} = useContext(SettingsModalContext);
+  const store = useContext(StoreContext);
+  const {profilerStore} = store;
+
+  const showFilterModal = useCallback(() => setIsModalShowing(true), [
+    setIsModalShowing,
+  ]);
+
+  // Updating preferences while profiling is in progress could break things (e.g. filtering)
+  // Explicitly disallow it for now.
+  const isProfilingSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => profilerStore.isProfiling,
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('isProfiling', callback);
+        return () => profilerStore.removeListener('isProfiling', callback);
+      },
+    }),
+    [profilerStore],
+  );
+  const isProfiling = useSubscription<boolean>(isProfilingSubscription);
+
+  return (
+    <Button
+      disabled={isProfiling}
+      onClick={showFilterModal}
+      title="View settings">
+      <ButtonIcon type="settings" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
new file mode 100644
index 0000000000000..bcdc427668df3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -0,0 +1,140 @@
+.Settings {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+}
+
+.Setting {
+  margin-bottom: 0.5rem;
+}
+.Setting:last-of-type {
+  margin-bottom: 0;
+}
+
+.OptionGroup {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+  margin: 0 1rem 0.5rem 0;
+}
+.OptionGroup:last-of-type {
+  margin-right: 0;
+}
+
+.RadioLabel {
+  display: inline;
+  margin-right: 0.5rem;
+}
+
+.Select {
+}
+
+.CheckboxOption {
+  display: block;
+  padding: 0 0 0.5rem;
+}
+
+.HRule {
+  height: 1px;
+  background-color: var(--color-border);
+  width: 100%;
+  border: none;
+  margin: 0.5rem 0;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-top: 0.5rem;
+}
+
+.ButtonIcon {
+  margin-right: 0.25rem;
+}
+
+.NoFiltersCell {
+  padding: 0.25rem 0;
+  color: var(--color-dim);
+}
+
+.Table {
+  min-width: 20rem;
+  margin-top: 0.5rem;
+  border-spacing: 0;
+}
+
+.TableRow {
+  padding-bottom: 0.5rem;
+}
+
+.TableCell {
+  padding: 0;
+  padding-right: 0.5rem;
+}
+.TableCell:last-of-type {
+  text-align: right;
+  padding-right: 0;
+}
+
+.Input {
+  border: 1px solid var(--color-border);
+  border-radius: 0.125rem;
+  padding: 0.125rem;
+}
+
+.InvalidRegExp,
+.InvalidRegExp:active,
+.InvalidRegExp:focus,
+.InvalidRegExp:hover {
+  color: var(--color-value-invalid);
+}
+
+.ToggleOffInvalid,
+.ToggleOnInvalid,
+.ToggleOff,
+.ToggleOn {
+  border-radius: 0.75rem;
+  width: 1rem;
+  height: 0.625rem;
+  display: flex;
+  align-items: center;
+  padding: 0.125rem;
+}
+.ToggleOffInvalid {
+  background-color: var(--color-toggle-background-invalid);
+  justify-content: flex-start;
+}
+.ToggleOnInvalid {
+  background-color: var(--color-toggle-background-invalid);
+  justify-content: flex-end;
+}
+.ToggleOff {
+  background-color: var(--color-toggle-background-off);
+  justify-content: flex-start;
+}
+.ToggleOn {
+  background-color: var(--color-toggle-background-on);
+  justify-content: flex-end;
+}
+
+.ToggleInsideOff,
+.ToggleInsideOn {
+  border-radius: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: var(--color-toggle-text);
+}
+
+.ReleaseNotes {
+  width: 100%;
+  background-color: var(--color-background-hover);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.ReleaseNotesLink {
+  color: var(--color-button-active);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.css b/packages/react-devtools-shared/src/devtools/views/TabBar.css
new file mode 100644
index 0000000000000..a29770a0d0106
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.css
@@ -0,0 +1,110 @@
+.Tab,
+.TabCurrent,
+.TabDisabled {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  user-select: none;
+  color: var(--color-text);
+
+  /* Electron drag area */
+  -webkit-app-region: no-drag;
+}
+.Tab:hover,
+.TabCurrent:hover {
+  background-color: var(--color-background-hover);
+}
+.Tab:focus-within,
+.TabCurrent:focus-within {
+  background-color: var(--color-background-hover);
+}
+
+.TabCurrent {
+  border-bottom: 3px solid var(--color-tab-selected-border);
+}
+
+.TabDisabled {
+  color: var(--color-dim);
+  cursor: default;
+}
+
+.TabSizeNavigation {
+  font-size: var(--font-size-sans-large);
+  padding: 0.5rem 1rem;
+}
+.TabSizeProfiler {
+  font-size: var(--font-size-sans-normal);
+  padding: 0.25rem 0.5rem;
+}
+.TabSizeSettings {
+  font-size: var(--font-size-sans-normal);
+  padding: 0.25rem 0.5rem;
+}
+
+.Input {
+  width: 0;
+  margin: 0;
+  opacity: 0;
+}
+
+.IconSizeNavigation,
+.IconSizeProfiler,
+.IconSizeSettings {
+  margin-right: 0.5rem;
+  color: var(--color-button-active);
+}
+
+.IconDisabled {
+  color: var(--color-dim);
+}
+
+.IconSizeNavigation {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.IconSizeProfiler {
+  width: 1rem;
+  height: 1rem;
+}
+.IconSizeSettings {
+  width: 1rem;
+  height: 1rem;
+}
+
+.TabLabelNavigation,
+.TabLabelProfiler,
+.TabLabelSettings {
+}
+
+@media screen and (max-width: 525px) {
+  .IconSizeNavigation {
+    margin-right: 0;
+  }
+
+  .TabLabelNavigation {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .TabLabelProfiler {
+    display: none;
+  }
+
+  .IconSizeProfiler {
+    margin-right: 0;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .TabLabelSettings {
+    display: none;
+  }
+
+  .IconSizeSettings {
+    margin-right: 0;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
new file mode 100644
index 0000000000000..7e6b9b9e9866f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -0,0 +1,132 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback} from 'react';
+import Tooltip from '@reach/tooltip';
+import Icon from './Icon';
+
+import styles from './TabBar.css';
+import tooltipStyles from './Tooltip.css';
+
+import type {IconType} from './Icon';
+
+type TabInfo = {|
+  icon: IconType,
+  id: string,
+  label: string,
+  title?: string,
+|};
+
+export type Props = {|
+  currentTab: any,
+  disabled?: boolean,
+  id: string,
+  selectTab: (tabID: any) => void,
+  tabs: Array<TabInfo>,
+  type: 'navigation' | 'profiler' | 'settings',
+|};
+
+export default function TabBar({
+  currentTab,
+  disabled = false,
+  id: groupName,
+  selectTab,
+  tabs,
+  type,
+}: Props) {
+  if (!tabs.some(tab => tab.id === currentTab)) {
+    selectTab(tabs[0].id);
+  }
+
+  const onChange = useCallback(
+    ({currentTarget}) => selectTab(currentTarget.value),
+    [selectTab],
+  );
+
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  }, []);
+
+  let iconSizeClassName;
+  let tabLabelClassName;
+  let tabSizeClassName;
+  switch (type) {
+    case 'navigation':
+      iconSizeClassName = styles.IconSizeNavigation;
+      tabLabelClassName = styles.TabLabelNavigation;
+      tabSizeClassName = styles.TabSizeNavigation;
+      break;
+    case 'profiler':
+      iconSizeClassName = styles.IconSizeProfiler;
+      tabLabelClassName = styles.TabLabelProfiler;
+      tabSizeClassName = styles.TabSizeProfiler;
+      break;
+    case 'settings':
+      iconSizeClassName = styles.IconSizeSettings;
+      tabLabelClassName = styles.TabLabelSettings;
+      tabSizeClassName = styles.TabSizeSettings;
+      break;
+    default:
+      throw Error(`Unsupported type "${type}"`);
+  }
+
+  return (
+    <Fragment>
+      {tabs.map(({icon, id, label, title}) => {
+        let button = (
+          <label
+            className={[
+              tabSizeClassName,
+              disabled ? styles.TabDisabled : styles.Tab,
+              !disabled && currentTab === id ? styles.TabCurrent : '',
+            ].join(' ')}
+            key={id}
+            onKeyDown={handleKeyDown}
+            onMouseDown={() => selectTab(id)}>
+            <input
+              type="radio"
+              className={styles.Input}
+              checked={currentTab === id}
+              disabled={disabled}
+              name={groupName}
+              value={id}
+              onChange={onChange}
+            />
+            <Icon
+              className={`${
+                disabled ? styles.IconDisabled : ''
+              } ${iconSizeClassName}`}
+              type={icon}
+            />
+            <span className={tabLabelClassName}>{label}</span>
+          </label>
+        );
+
+        if (title) {
+          button = (
+            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
+              {button}
+            </Tooltip>
+          );
+        }
+
+        return button;
+      })}
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.css b/packages/react-devtools-shared/src/devtools/views/Toggle.css
new file mode 100644
index 0000000000000..a5f273bda43b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.css
@@ -0,0 +1,54 @@
+.ToggleDisabled,
+.ToggleOn,
+.ToggleOff {
+  background: var(--color-button-background);
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+.ToggleContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
+
+.ToggleOff {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+}
+.ToggleOff:hover {
+  color: var(--color-button-hover);
+}
+
+.ToggleOn,
+.ToggleOn:active {
+  color: var(--color-button-active);
+  outline: none;
+}
+
+.ToggleOn:focus,
+.ToggleOff:focus,
+.ToggleContent:focus {
+  outline: none;
+}
+
+.ToggleOn:focus > .ToggleContent,
+.ToggleOff:focus > .ToggleContent {
+  background: var(--color-button-background-focus);
+}
+
+.ToggleDisabled {
+  background: var(--color-button-background);
+  color: var(--color-button-disabled);
+  cursor: default;
+}
+
+.Input {
+  width: 0;
+  margin: 0;
+  opacity: 0;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
new file mode 100644
index 0000000000000..1eaaa73738905
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -0,0 +1,68 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useCallback} from 'react';
+import Tooltip from '@reach/tooltip';
+
+import styles from './Toggle.css';
+import tooltipStyles from './Tooltip.css';
+
+type Props = {
+  children: React$Node,
+  className?: string,
+  isChecked: boolean,
+  isDisabled?: boolean,
+  onChange: (isChecked: boolean) => void,
+  title?: string,
+  ...
+};
+
+export default function Toggle({
+  children,
+  className = '',
+  isDisabled = false,
+  isChecked,
+  onChange,
+  title,
+}: Props) {
+  let defaultClassName;
+  if (isDisabled) {
+    defaultClassName = styles.ToggleDisabled;
+  } else if (isChecked) {
+    defaultClassName = styles.ToggleOn;
+  } else {
+    defaultClassName = styles.ToggleOff;
+  }
+
+  const handleClick = useCallback(() => onChange(!isChecked), [
+    isChecked,
+    onChange,
+  ]);
+
+  let toggle = (
+    <button
+      className={`${defaultClassName} ${className}`}
+      disabled={isDisabled}
+      onClick={handleClick}>
+      <span className={styles.ToggleContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
+  );
+
+  if (title) {
+    toggle = (
+      <Tooltip className={tooltipStyles.Tooltip} label={title}>
+        {toggle}
+      </Tooltip>
+    );
+  }
+
+  return toggle;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Tooltip.css
new file mode 100644
index 0000000000000..e06518219d701
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Tooltip.css
@@ -0,0 +1,12 @@
+.Tooltip {
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--font-family-sans);
+  font-size: 12px;
+  background-color: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
+
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
new file mode 100644
index 0000000000000..5c183f1fe60fa
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
@@ -0,0 +1,20 @@
+.Row {  
+  display: flex;  
+  flex-direction: row;  
+  align-items: center;  
+} 
+
+.Column { 
+  display: flex;  
+  flex-direction: column; 
+  align-items: center;  
+} 
+
+.Title {  
+  font-size: var(--font-size-sans-large); 
+  margin-bottom: 0.5rem;  
+} 
+
+.ReleaseNotesLink { 
+  color: var(--color-button-active);  
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
new file mode 100644
index 0000000000000..1f35eee3c85e4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -0,0 +1,81 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useEffect, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {ModalDialogContext} from './ModalDialog';
+import {StoreContext} from './context';
+import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared/src/constants';
+
+import styles from './UnsupportedVersionDialog.css';
+
+type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
+
+export default function UnsupportedVersionDialog(_: {||}) {
+  const {dispatch} = useContext(ModalDialogContext);
+  const store = useContext(StoreContext);
+  const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');
+
+  useEffect(() => {
+    if (state === 'dialog-not-shown') {
+      const showDialog = () => {
+        batchedUpdates(() => {
+          setState('show-dialog');
+          dispatch({
+            canBeDismissed: true,
+            type: 'SHOW',
+            content: <DialogContent />,
+          });
+        });
+      };
+
+      if (store.unsupportedRendererVersionDetected) {
+        showDialog();
+      } else {
+        store.addListener('unsupportedRendererVersionDetected', showDialog);
+        return () => {
+          store.removeListener(
+            'unsupportedRendererVersionDetected',
+            showDialog,
+          );
+        };
+      }
+    }
+  }, [state, store]);
+
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <div className={styles.Row}>
+        <div>
+          <div className={styles.Title}>Unsupported React version detected</div>
+          <p>
+            This version of React DevTools supports React DOM v15+ and React
+            Native v61+.
+          </p>
+          <p>
+            In order to use DevTools with an older version of React, you'll need
+            to{' '}
+            <a
+              className={styles.ReleaseNotesLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              href={UNSUPPORTED_VERSION_URL}>
+              install an older version of the extension
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.css b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.css
new file mode 100644
index 0000000000000..e1c3817309f6c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.css
@@ -0,0 +1,6 @@
+.Command {
+  background-color: var(--color-dimmest);
+  padding: 0.25rem 0.5rem;
+  display: block;
+  border-radius: 0.125rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
new file mode 100644
index 0000000000000..cb4933f8dbda2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -0,0 +1,83 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useEffect} from 'react';
+import {BridgeContext} from './context';
+import {ModalDialogContext} from './ModalDialog';
+
+import styles from './WarnIfLegacyBackendDetected.css';
+
+export default function WarnIfLegacyBackendDetected(_: {||}) {
+  const bridge = useContext(BridgeContext);
+  const {dispatch} = useContext(ModalDialogContext);
+
+  // Detect pairing with legacy v3 backend.
+  // We do this by listening to a message that it broadcasts but the v4 backend doesn't.
+  // In this case the frontend should show upgrade instructions.
+  useEffect(() => {
+    // Wall.listen returns a cleanup function
+    let unlisten = bridge.wall.listen(message => {
+      switch (message.type) {
+        case 'call':
+        case 'event':
+        case 'many-events':
+          // Any of these types indicate the v3 backend.
+          dispatch({
+            canBeDismissed: false,
+            type: 'SHOW',
+            title: 'DevTools v4 is incompatible with this version of React',
+            content: <InvalidBackendDetected />,
+          });
+
+          // Once we've identified the backend version, it's safe to unsubscribe.
+          if (typeof unlisten === 'function') {
+            unlisten();
+            unlisten = null;
+          }
+          break;
+        default:
+          break;
+      }
+
+      switch (message.event) {
+        case 'isBackendStorageAPISupported':
+        case 'isNativeStyleEditorSupported':
+        case 'operations':
+        case 'overrideComponentFilters':
+          // Any of these is sufficient to indicate a v4 backend.
+          // Once we've identified the backend version, it's safe to unsubscribe.
+          if (typeof unlisten === 'function') {
+            unlisten();
+            unlisten = null;
+          }
+          break;
+        default:
+          break;
+      }
+    });
+
+    return () => {
+      if (typeof unlisten === 'function') {
+        unlisten();
+        unlisten = null;
+      }
+    };
+  }, [bridge, dispatch]);
+
+  return null;
+}
+
+function InvalidBackendDetected(_: {||}) {
+  return (
+    <Fragment>
+      <p>Either upgrade React or install React DevTools v3:</p>
+      <code className={styles.Command}>npm install -d react-devtools@^3</code>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
new file mode 100644
index 0000000000000..fcc59935d4551
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {createContext} from 'react';
+import Store from '../store';
+
+import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+export const BridgeContext = createContext<FrontendBridge>(
+  ((null: any): FrontendBridge),
+);
+BridgeContext.displayName = 'BridgeContext';
+
+export const StoreContext = createContext<Store>(((null: any): Store));
+StoreContext.displayName = 'StoreContext';
+
+export type ContextMenuContextType = {|
+  isEnabledForInspectedElement: boolean,
+  viewAttributeSourceFunction?: ?ViewAttributeSource,
+|};
+
+export const ContextMenuContext = createContext<ContextMenuContextType>({
+  isEnabledForInspectedElement: false,
+  viewAttributeSourceFunction: null,
+});
+ContextMenuContext.displayName = 'ContextMenuContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
new file mode 100644
index 0000000000000..a8fb43dd61a12
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -0,0 +1,302 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import throttle from 'lodash.throttle';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useState,
+} from 'react';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import {sanitizeForParse, smartParse, smartStringify} from '../utils';
+
+type ACTION_RESET = {|
+  type: 'RESET',
+  externalValue: any,
+|};
+type ACTION_UPDATE = {|
+  type: 'UPDATE',
+  editableValue: any,
+  externalValue: any,
+|};
+
+type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE;
+type UseEditableValueDispatch = (action: UseEditableValueAction) => void;
+type UseEditableValueState = {|
+  editableValue: any,
+  externalValue: any,
+  hasPendingChanges: boolean,
+  isValid: boolean,
+  parsedValue: any,
+|};
+
+function useEditableValueReducer(state, action) {
+  switch (action.type) {
+    case 'RESET':
+      return {
+        ...state,
+        editableValue: smartStringify(action.externalValue),
+        externalValue: action.externalValue,
+        hasPendingChanges: false,
+        isValid: true,
+        parsedValue: action.externalValue,
+      };
+    case 'UPDATE':
+      let isNewValueValid = false;
+      let newParsedValue;
+      try {
+        newParsedValue = smartParse(action.editableValue);
+        isNewValueValid = true;
+      } catch (error) {}
+      return {
+        ...state,
+        editableValue: sanitizeForParse(action.editableValue),
+        externalValue: action.externalValue,
+        hasPendingChanges:
+          smartStringify(action.externalValue) !== action.editableValue,
+        isValid: isNewValueValid,
+        parsedValue: isNewValueValid ? newParsedValue : state.parsedValue,
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
+// Convenience hook for working with an editable value that is validated via JSON.parse.
+export function useEditableValue(
+  externalValue: any,
+): [UseEditableValueState, UseEditableValueDispatch] {
+  const [state, dispatch] = useReducer<
+    UseEditableValueState,
+    UseEditableValueAction,
+  >(useEditableValueReducer, {
+    editableValue: smartStringify(externalValue),
+    externalValue,
+    hasPendingChanges: false,
+    isValid: true,
+    parsedValue: externalValue,
+  });
+  if (!Object.is(state.externalValue, externalValue)) {
+    if (!state.hasPendingChanges) {
+      dispatch({
+        type: 'RESET',
+        externalValue,
+      });
+    } else {
+      dispatch({
+        type: 'UPDATE',
+        editableValue: state.editableValue,
+        externalValue,
+      });
+    }
+  }
+
+  return [state, dispatch];
+}
+
+export function useIsOverflowing(
+  containerRef: {current: HTMLDivElement | null, ...},
+  totalChildWidth: number,
+): boolean {
+  const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
+
+  // It's important to use a layout effect, so that we avoid showing a flash of overflowed content.
+  useLayoutEffect(() => {
+    if (containerRef.current === null) {
+      return () => {};
+    }
+
+    const container = ((containerRef.current: any): HTMLDivElement);
+
+    const handleResize = throttle(
+      () => setIsOverflowing(container.clientWidth <= totalChildWidth),
+      100,
+    );
+
+    handleResize();
+
+    // It's important to listen to the ownerDocument.defaultView to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerWindow = container.ownerDocument.defaultView;
+    ownerWindow.addEventListener('resize', handleResize);
+    return () => ownerWindow.removeEventListener('resize', handleResize);
+  }, [containerRef, totalChildWidth]);
+
+  return isOverflowing;
+}
+
+// Forked from https://usehooks.com/useLocalStorage/
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T | (() => T),
+): [T, (value: T | (() => T)) => void] {
+  const getValueFromLocalStorage = useCallback(() => {
+    try {
+      const item = localStorageGetItem(key);
+      if (item != null) {
+        return JSON.parse(item);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+    if (typeof initialValue === 'function') {
+      return ((initialValue: any): () => T)();
+    } else {
+      return initialValue;
+    }
+  }, [initialValue, key]);
+
+  const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);
+
+  const setValue = useCallback(
+    value => {
+      try {
+        const valueToStore =
+          value instanceof Function ? (value: any)(storedValue) : value;
+        setStoredValue(valueToStore);
+        localStorageSetItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    [key, storedValue],
+  );
+
+  // Listen for changes to this local storage value made from other windows.
+  // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
+  useLayoutEffect(() => {
+    const onStorage = event => {
+      const newValue = getValueFromLocalStorage();
+      if (key === event.key && storedValue !== newValue) {
+        setValue(newValue);
+      }
+    };
+
+    window.addEventListener('storage', onStorage);
+
+    return () => {
+      window.removeEventListener('storage', onStorage);
+    };
+  }, [getValueFromLocalStorage, key, storedValue, setValue]);
+
+  return [storedValue, setValue];
+}
+
+export function useModalDismissSignal(
+  modalRef: {current: HTMLDivElement | null, ...},
+  dismissCallback: () => void,
+  dismissOnClickOutside?: boolean = true,
+): void {
+  useEffect(() => {
+    if (modalRef.current === null) {
+      return () => {};
+    }
+
+    const handleDocumentKeyDown = ({key}: any) => {
+      if (key === 'Escape') {
+        dismissCallback();
+      }
+    };
+
+    const handleDocumentClick = (event: any) => {
+      // $FlowFixMe
+      if (
+        modalRef.current !== null &&
+        !modalRef.current.contains(event.target)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        dismissCallback();
+      }
+    };
+
+    // It's important to listen to the ownerDocument to support the browser extension.
+    // Here we use portals to render individual tabs (e.g. Profiler),
+    // and the root document might belong to a different window.
+    const ownerDocument = modalRef.current.ownerDocument;
+    ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
+    if (dismissOnClickOutside) {
+      ownerDocument.addEventListener('click', handleDocumentClick);
+    }
+
+    return () => {
+      ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
+      ownerDocument.removeEventListener('click', handleDocumentClick);
+    };
+  }, [modalRef, dismissCallback, dismissOnClickOutside]);
+}
+
+// Copied from https://github.com/facebook/react/pull/15022
+export function useSubscription<Value>({
+  getCurrentValue,
+  subscribe,
+}: {|
+  getCurrentValue: () => Value,
+  subscribe: (callback: Function) => () => void,
+|}): Value {
+  const [state, setState] = useState({
+    getCurrentValue,
+    subscribe,
+    value: getCurrentValue(),
+  });
+
+  if (
+    state.getCurrentValue !== getCurrentValue ||
+    state.subscribe !== subscribe
+  ) {
+    setState({
+      getCurrentValue,
+      subscribe,
+      value: getCurrentValue(),
+    });
+  }
+
+  useEffect(() => {
+    let didUnsubscribe = false;
+
+    const checkForUpdates = () => {
+      if (didUnsubscribe) {
+        return;
+      }
+
+      setState(prevState => {
+        if (
+          prevState.getCurrentValue !== getCurrentValue ||
+          prevState.subscribe !== subscribe
+        ) {
+          return prevState;
+        }
+
+        const value = getCurrentValue();
+        if (prevState.value === value) {
+          return prevState;
+        }
+
+        return {...prevState, value};
+      });
+    };
+    const unsubscribe = subscribe(checkForUpdates);
+
+    checkForUpdates();
+
+    return () => {
+      didUnsubscribe = true;
+      unsubscribe();
+    };
+  }, [getCurrentValue, subscribe]);
+
+  return state.value;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
new file mode 100644
index 0000000000000..cf312787f5ea7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import {createPortal} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary';
+
+export type Props = {portalContainer?: Element, ...};
+
+export default function portaledContent(
+  Component: React$StatelessFunctionalComponent<any>,
+): React$StatelessFunctionalComponent<any> {
+  return function PortaledContent({portalContainer, ...rest}: Props) {
+    const children = (
+      <ErrorBoundary>
+        <Component {...rest} />
+      </ErrorBoundary>
+    );
+
+    return portalContainer != null
+      ? createPortal(children, portalContainer)
+      : children;
+  };
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
new file mode 100644
index 0000000000000..55610f824772c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -0,0 +1,184 @@
+:root {
+  /**
+   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
+   */
+
+  /* Light theme */
+  --light-color-attribute-name: #ef6632;
+  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-attribute-value: #1a1aa6;
+  --light-color-attribute-value-inverted: #ffffff;
+  --light-color-attribute-editable-value: #1a1aa6;
+  --light-color-background: #ffffff;
+  --light-color-background-hover: rgba(0, 136, 250, 0.1);
+  --light-color-background-inactive: #e5e5e5;
+  --light-color-background-invalid: #fff0f0;
+  --light-color-background-selected: #0088fa;
+  --light-color-button-background: #ffffff;
+  --light-color-button-background-focus: #ededed;
+  --light-color-button: #5f6673;
+  --light-color-button-disabled: #cfd1d5;
+  --light-color-button-active: #0088fa;
+  --light-color-button-focus: #23272f;
+  --light-color-button-hover: #23272f;
+  --light-color-border: #eeeeee;
+  --light-color-commit-did-not-render-fill: #cfd1d5;
+  --light-color-commit-did-not-render-fill-text: #000000;
+  --light-color-commit-did-not-render-pattern: #cfd1d5;
+  --light-color-commit-did-not-render-pattern-text: #333333;
+  --light-color-commit-gradient-0: #37afa9;
+  --light-color-commit-gradient-1: #63b19e;
+  --light-color-commit-gradient-2: #80b393;
+  --light-color-commit-gradient-3: #97b488;
+  --light-color-commit-gradient-4: #abb67d;
+  --light-color-commit-gradient-5: #beb771;
+  --light-color-commit-gradient-6: #cfb965;
+  --light-color-commit-gradient-7: #dfba57;
+  --light-color-commit-gradient-8: #efbb49;
+  --light-color-commit-gradient-9: #febc38;
+  --light-color-commit-gradient-text: #000000;
+  --light-color-component-name: #6a51b2;
+  --light-color-component-name-inverted: #ffffff;
+  --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
+  --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
+  --light-color-component-badge-count: #777d88;
+  --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-context-background: rgba(0,0,0,.9);
+  --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
+  --light-color-context-background-selected: #178fb9;
+  --light-color-context-border: #3d424a;
+  --light-color-context-text: #ffffff;
+  --light-color-context-text-selected: #ffffff;
+  --light-color-dim: #777d88;
+  --light-color-dimmer: #cfd1d5;
+  --light-color-dimmest: #eff0f1;
+  --light-color-expand-collapse-toggle: #777d88;
+  --light-color-modal-background: rgba(255, 255, 255, 0.75);
+  --light-color-record-active: #fc3a4b;
+  --light-color-record-hover: #3578e5;
+  --light-color-record-inactive: #0088fa;
+  --light-color-scroll-thumb: #c2c2c2;
+  --light-color-scroll-track: #fafafa;
+  --light-color-search-match: yellow;
+  --light-color-search-match-current: #f7923b;
+  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
+  --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
+  --light-color-shadow: rgba(0, 0, 0, 0.25);
+  --light-color-tab-selected-border: #0088fa;
+  --light-color-text: #000000;
+  --light-color-text-invalid: #ff0000;
+  --light-color-text-selected: #ffffff;
+  --light-color-toggle-background-invalid: #fc3a4b;
+  --light-color-toggle-background-on: #0088fa;
+  --light-color-toggle-background-off: #cfd1d5;
+  --light-color-toggle-text: #ffffff;
+  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
+  --light-color-tooltip-text: #ffffff;
+
+  /* Dark theme */
+  --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-name-inverted: #282828;
+  --dark-color-attribute-value: #cedae0;
+  --dark-color-attribute-value-inverted: #ffffff;
+  --dark-color-attribute-editable-value: yellow;
+  --dark-color-background: #282c34;
+  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
+  --dark-color-background-inactive: #3d424a;
+  --dark-color-background-invalid: #5c0000;
+  --dark-color-background-selected: #178fb9;
+  --dark-color-button-background: #282c34;
+  --dark-color-button-background-focus: #3d424a;
+  --dark-color-button: #afb3b9;
+  --dark-color-button-active: #61dafb;
+  --dark-color-button-disabled: #4f5766;
+  --dark-color-button-focus: #a2e9fc;
+  --dark-color-button-hover: #ededed;
+  --dark-color-border: #3d424a;
+  --dark-color-commit-did-not-render-fill: #777d88;
+  --dark-color-commit-did-not-render-fill-text: #000000;
+  --dark-color-commit-did-not-render-pattern: #666c77;
+  --dark-color-commit-did-not-render-pattern-text: #ffffff;
+  --dark-color-commit-gradient-0: #37afa9;
+  --dark-color-commit-gradient-1: #63b19e;
+  --dark-color-commit-gradient-2: #80b393;
+  --dark-color-commit-gradient-3: #97b488;
+  --dark-color-commit-gradient-4: #abb67d;
+  --dark-color-commit-gradient-5: #beb771;
+  --dark-color-commit-gradient-6: #cfb965;
+  --dark-color-commit-gradient-7: #dfba57;
+  --dark-color-commit-gradient-8: #efbb49;
+  --dark-color-commit-gradient-9: #febc38;
+  --dark-color-commit-gradient-text: #000000;
+  --dark-color-component-name: #61dafb;
+  --dark-color-component-name-inverted: #282828;
+  --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
+  --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
+  --dark-color-component-badge-count: #8f949d;
+  --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-context-background: rgba(255,255,255,.9);
+  --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
+  --dark-color-context-background-selected: #0088fa;
+  --dark-color-context-border: #eeeeee;
+  --dark-color-context-text: #000000;
+  --dark-color-context-text-selected: #ffffff;
+  --dark-color-dim: #8f949d;
+  --dark-color-dimmer: #777d88;
+  --dark-color-dimmest: #4f5766;
+  --dark-color-expand-collapse-toggle: #8f949d;
+  --dark-color-modal-background: rgba(0, 0, 0, 0.75);
+  --dark-color-record-active: #fc3a4b;
+  --dark-color-record-hover: #a2e9fc;
+  --dark-color-record-inactive: #61dafb;
+  --dark-color-scroll-thumb: #afb3b9;
+  --dark-color-scroll-track: #313640;
+  --dark-color-search-match: yellow;
+  --dark-color-search-match-current: #f7923b;
+  --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
+  --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
+  --dark-color-shadow: rgba(0, 0, 0, 0.5);
+  --dark-color-tab-selected-border: #178fb9;
+  --dark-color-text: #ffffff;
+  --dark-color-text-invalid: #ff8080;
+  --dark-color-text-selected: #ffffff;
+  --dark-color-toggle-background-invalid: #fc3a4b;
+  --dark-color-toggle-background-on: #178fb9;
+  --dark-color-toggle-background-off: #777d88;
+  --dark-color-toggle-text: #ffffff;
+  --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
+  --dark-color-tooltip-text: #000000;
+
+  /* Font smoothing */
+  --light-font-smoothing: auto;
+  --dark-font-smoothing: antialiased;
+  --font-smoothing: auto;
+
+  /* Compact density */
+  --compact-font-size-monospace-small: 9px;
+  --compact-font-size-monospace-normal: 11px;
+  --compact-font-size-monospace-large: 15px;
+  --compact-font-size-sans-small: 10px;
+  --compact-font-size-sans-normal: 12px;
+  --compact-font-size-sans-large: 14px;
+  --compact-line-height-data: 18px;
+  --compact-root-font-size: 16px;
+
+  /* Comfortable density */
+  --comfortable-font-size-monospace-small: 10px;
+  --comfortable-font-size-monospace-normal: 13px;
+  --comfortable-font-size-monospace-large: 17px;
+  --comfortable-font-size-sans-small: 12px;
+  --comfortable-font-size-sans-normal: 14px;
+  --comfortable-font-size-sans-large: 16px;
+  --comfortable-line-height-data: 22px;
+  --comfortable-root-font-size: 20px;
+
+  /* GitHub.com system fonts */
+  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+
+  /* Constant values shared between JS and CSS */
+  --interaction-commit-size: 10px;
+  --interaction-label-width: 200px;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
new file mode 100644
index 0000000000000..b326996daa05a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -0,0 +1,192 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import escapeStringRegExp from 'escape-string-regexp';
+import {meta} from '../../hydration';
+import {formatDataForPreview} from '../../utils';
+
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+
+export function alphaSortEntries(
+  entryA: [string, mixed],
+  entryB: [string, mixed],
+): number {
+  const a = entryA[0];
+  const b = entryB[0];
+  if ('' + +a === a) {
+    if ('' + +b !== b) {
+      return -1;
+    }
+    return +a < +b ? -1 : 1;
+  }
+  return a < b ? -1 : 1;
+}
+
+export function createRegExp(string: string): RegExp {
+  // Allow /regex/ syntax with optional last /
+  if (string[0] === '/') {
+    // Cut off first slash
+    string = string.substring(1);
+    // Cut off last slash, but only if it's there
+    if (string[string.length - 1] === '/') {
+      string = string.substring(0, string.length - 1);
+    }
+    try {
+      return new RegExp(string, 'i');
+    } catch (err) {
+      // Bad regex. Make it not match anything.
+      // TODO: maybe warn in console?
+      return new RegExp('.^');
+    }
+  }
+
+  function isLetter(char: string) {
+    return char.toLowerCase() !== char.toUpperCase();
+  }
+
+  function matchAnyCase(char: string) {
+    if (!isLetter(char)) {
+      // Don't mess with special characters like [.
+      return char;
+    }
+    return '[' + char.toLowerCase() + char.toUpperCase() + ']';
+  }
+
+  // 'item' should match 'Item' and 'ListItem', but not 'InviteMom'.
+  // To do this, we'll slice off 'tem' and check first letter separately.
+  const escaped = escapeStringRegExp(string);
+  const firstChar = escaped[0];
+  let restRegex = '';
+  // For 'item' input, restRegex becomes '[tT][eE][mM]'
+  // We can't simply make it case-insensitive because first letter case matters.
+  for (let i = 1; i < escaped.length; i++) {
+    restRegex += matchAnyCase(escaped[i]);
+  }
+
+  if (!isLetter(firstChar)) {
+    // We can't put a non-character like [ in a group
+    // so we fall back to the simple case.
+    return new RegExp(firstChar + restRegex);
+  }
+
+  // Construct a smarter regex.
+  return new RegExp(
+    // For example:
+    // (^[iI]|I)[tT][eE][mM]
+    // Matches:
+    // 'Item'
+    // 'ListItem'
+    // but not 'InviteMom'
+    '(^' +
+      matchAnyCase(firstChar) +
+      '|' +
+      firstChar.toUpperCase() +
+      ')' +
+      restRegex,
+  );
+}
+
+export function getMetaValueLabel(data: Object): string | null {
+  if (hasOwnProperty.call(data, meta.preview_long)) {
+    return data[meta.preview_long];
+  } else {
+    return formatDataForPreview(data, true);
+  }
+}
+
+function sanitize(data: Object): void {
+  for (const key in data) {
+    const value = data[key];
+
+    if (value && value[meta.type]) {
+      data[key] = getMetaValueLabel(value);
+    } else if (value != null) {
+      if (Array.isArray(value)) {
+        sanitize(value);
+      } else if (typeof value === 'object') {
+        sanitize(value);
+      }
+    }
+  }
+}
+
+export function serializeDataForCopy(props: Object): string {
+  const cloned = Object.assign({}, props);
+
+  sanitize(cloned);
+
+  try {
+    return JSON.stringify(cloned, null, 2);
+  } catch (error) {
+    return '';
+  }
+}
+
+export function serializeHooksForCopy(hooks: HooksTree | null): string {
+  // $FlowFixMe "HooksTree is not an object"
+  const cloned = Object.assign([], hooks);
+
+  const queue = [...cloned];
+
+  while (queue.length > 0) {
+    const current = queue.pop();
+
+    // These aren't meaningful
+    delete current.id;
+    delete current.isStateEditable;
+
+    if (current.subHooks.length > 0) {
+      queue.push(...current.subHooks);
+    }
+  }
+
+  sanitize(cloned);
+
+  try {
+    return JSON.stringify(cloned, null, 2);
+  } catch (error) {
+    return '';
+  }
+}
+
+// Keeping this in memory seems to be enough to enable the browser to download larger profiles.
+// Without this, we would see a "Download failed: network error" failure.
+let downloadUrl = null;
+
+export function downloadFile(
+  element: HTMLAnchorElement,
+  filename: string,
+  text: string,
+): void {
+  const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
+
+  if (downloadUrl !== null) {
+    URL.revokeObjectURL(downloadUrl);
+  }
+
+  downloadUrl = URL.createObjectURL(blob);
+
+  element.setAttribute('href', downloadUrl);
+  element.setAttribute('download', filename);
+
+  element.click();
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  const {length} = text;
+  if (length > maxLength) {
+    return (
+      text.substr(0, Math.floor(maxLength / 2)) +
+      '…' +
+      text.substr(length - Math.ceil(maxLength / 2) - 1)
+    );
+  } else {
+    return text;
+  }
+}
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
new file mode 100644
index 0000000000000..f63346bdbe409
--- /dev/null
+++ b/packages/react-devtools-shared/src/hook.js
@@ -0,0 +1,316 @@
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note because Chrome content scripts cannot directly modify the window object,
+ * we are evaling this function by inserting a script tag.
+ * That's why we have to inline the whole event emitter implementation here.
+ *
+ * @flow
+ */
+
+import {
+  patch as patchConsole,
+  registerRenderer as registerRendererWithConsole,
+} from './backend/console';
+
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
+
+declare var window: any;
+
+export function installHook(target: any): DevToolsHook | null {
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
+    return null;
+  }
+
+  function detectReactBuildType(renderer) {
+    try {
+      if (typeof renderer.version === 'string') {
+        // React DOM Fiber (16+)
+        if (renderer.bundleType > 0) {
+          // This is not a production build.
+          // We are currently only using 0 (PROD) and 1 (DEV)
+          // but might add 2 (PROFILE) in the future.
+          return 'development';
+        }
+
+        // React 16 uses flat bundles. If we report the bundle as production
+        // version, it means we also minified and envified it ourselves.
+        return 'production';
+        // Note: There is still a risk that the CommonJS entry point has not
+        // been envified or uglified. In this case the user would have *both*
+        // development and production bundle, but only the prod one would run.
+        // This would be really bad. We have a separate check for this because
+        // it happens *outside* of the renderer injection. See `checkDCE` below.
+      }
+
+      const toString = Function.prototype.toString;
+      if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
+        // React DOM Stack
+        const renderRootCode = toString.call(
+          renderer.Mount._renderNewRootComponent,
+        );
+        // Filter out bad results (if that is even possible):
+        if (renderRootCode.indexOf('function') !== 0) {
+          // Hope for the best if we're not sure.
+          return 'production';
+        }
+        // Check for React DOM Stack < 15.1.0 in development.
+        // If it contains "storedMeasure" call, it's wrapped in ReactPerf (DEV only).
+        // This would be true even if it's minified, as method name still matches.
+        if (renderRootCode.indexOf('storedMeasure') !== -1) {
+          return 'development';
+        }
+        // For other versions (and configurations) it's not so easy.
+        // Let's quickly exclude proper production builds.
+        // If it contains a warning message, it's either a DEV build,
+        // or an PROD build without proper dead code elimination.
+        if (renderRootCode.indexOf('should be a pure function') !== -1) {
+          // Now how do we tell a DEV build from a bad PROD build?
+          // If we see NODE_ENV, we're going to assume this is a dev build
+          // because most likely it is referring to an empty shim.
+          if (renderRootCode.indexOf('NODE_ENV') !== -1) {
+            return 'development';
+          }
+          // If we see "development", we're dealing with an envified DEV build
+          // (such as the official React DEV UMD).
+          if (renderRootCode.indexOf('development') !== -1) {
+            return 'development';
+          }
+          // I've seen process.env.NODE_ENV !== 'production' being smartly
+          // replaced by `true` in DEV by Webpack. I don't know how that
+          // works but we can safely guard against it because `true` was
+          // never used in the function source since it was written.
+          if (renderRootCode.indexOf('true') !== -1) {
+            return 'development';
+          }
+          // By now either it is a production build that has not been minified,
+          // or (worse) this is a minified development build using non-standard
+          // environment (e.g. "staging"). We're going to look at whether
+          // the function argument name is mangled:
+          if (
+            // 0.13 to 15
+            renderRootCode.indexOf('nextElement') !== -1 ||
+            // 0.12
+            renderRootCode.indexOf('nextComponent') !== -1
+          ) {
+            // We can't be certain whether this is a development build or not,
+            // but it is definitely unminified.
+            return 'unminified';
+          } else {
+            // This is likely a minified development build.
+            return 'development';
+          }
+        }
+        // By now we know that it's envified and dead code elimination worked,
+        // but what if it's still not minified? (Is this even possible?)
+        // Let's check matches for the first argument name.
+        if (
+          // 0.13 to 15
+          renderRootCode.indexOf('nextElement') !== -1 ||
+          // 0.12
+          renderRootCode.indexOf('nextComponent') !== -1
+        ) {
+          return 'unminified';
+        }
+        // Seems like we're using the production version.
+        // However, the branch above is Stack-only so this is 15 or earlier.
+        return 'outdated';
+      }
+    } catch (err) {
+      // Weird environments may exist.
+      // This code needs a higher fault tolerance
+      // because it runs even with closed DevTools.
+      // TODO: should we catch errors in all injected code, and not just this part?
+    }
+    return 'production';
+  }
+
+  function checkDCE(fn: Function) {
+    // This runs for production versions of React.
+    // Needs to be super safe.
+    try {
+      const toString = Function.prototype.toString;
+      const code = toString.call(fn);
+
+      // This is a string embedded in the passed function under DEV-only
+      // condition. However the function executes only in PROD. Therefore,
+      // if we see it, dead code elimination did not work.
+      if (code.indexOf('^_^') > -1) {
+        // Remember to report during next injection.
+        hasDetectedBadDCE = true;
+
+        // Bonus: throw an exception hoping that it gets picked up by a reporting system.
+        // Not synchronously so that it doesn't break the calling code.
+        setTimeout(function() {
+          throw new Error(
+            'React is running in production mode, but dead code ' +
+              'elimination has not been applied. Read how to correctly ' +
+              'configure React for production: ' +
+              'https://fb.me/react-perf-use-the-production-build',
+          );
+        });
+      }
+    } catch (err) {}
+  }
+
+  let uidCounter = 0;
+
+  function inject(renderer) {
+    const id = ++uidCounter;
+    renderers.set(id, renderer);
+
+    const reactBuildType = hasDetectedBadDCE
+      ? 'deadcode'
+      : detectReactBuildType(renderer);
+
+    // Patching the console enables DevTools to do a few useful things:
+    // * Append component stacks to warnings and error messages
+    // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
+    //
+    // For React Native, we intentionally patch early (during injection).
+    // This provides React Native developers with components stacks even if they don't run DevTools.
+    // This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.
+    // In that case, we'll patch later (when the frontend attaches).
+    //
+    // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
+    if (process.env.NODE_ENV !== 'test') {
+      try {
+        // The installHook() function is injected by being stringified in the browser,
+        // so imports outside of this function do not get included.
+        //
+        // Normally we could check "typeof patchConsole === 'function'",
+        // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
+        // and the object itself will be undefined as well for the reasons mentioned above,
+        // so we use try/catch instead.
+        if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {
+          registerRendererWithConsole(renderer);
+          patchConsole();
+        }
+      } catch (error) {}
+    }
+
+    // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
+    // Otherwise the renderer won't yet exist and we can skip this step.
+    const attach = target.__REACT_DEVTOOLS_ATTACH__;
+    if (typeof attach === 'function') {
+      const rendererInterface = attach(hook, id, renderer, target);
+      hook.rendererInterfaces.set(id, rendererInterface);
+    }
+
+    hook.emit('renderer', {id, renderer, reactBuildType});
+
+    return id;
+  }
+
+  let hasDetectedBadDCE = false;
+
+  function sub(event, fn) {
+    hook.on(event, fn);
+    return () => hook.off(event, fn);
+  }
+
+  function on(event, fn) {
+    if (!listeners[event]) {
+      listeners[event] = [];
+    }
+    listeners[event].push(fn);
+  }
+
+  function off(event, fn) {
+    if (!listeners[event]) {
+      return;
+    }
+    const index = listeners[event].indexOf(fn);
+    if (index !== -1) {
+      listeners[event].splice(index, 1);
+    }
+    if (!listeners[event].length) {
+      delete listeners[event];
+    }
+  }
+
+  function emit(event, data) {
+    if (listeners[event]) {
+      listeners[event].map(fn => fn(data));
+    }
+  }
+
+  function getFiberRoots(rendererID) {
+    const roots = fiberRoots;
+    if (!roots[rendererID]) {
+      roots[rendererID] = new Set();
+    }
+    return roots[rendererID];
+  }
+
+  function onCommitFiberUnmount(rendererID, fiber) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handleCommitFiberUnmount(fiber);
+    }
+  }
+
+  function onCommitFiberRoot(rendererID, root, priorityLevel) {
+    const mountedRoots = hook.getFiberRoots(rendererID);
+    const current = root.current;
+    const isKnownRoot = mountedRoots.has(root);
+    const isUnmounting =
+      current.memoizedState == null || current.memoizedState.element == null;
+
+    // Keep track of mounted roots so we can hydrate when DevTools connect.
+    if (!isKnownRoot && !isUnmounting) {
+      mountedRoots.add(root);
+    } else if (isKnownRoot && isUnmounting) {
+      mountedRoots.delete(root);
+    }
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handleCommitFiberRoot(root, priorityLevel);
+    }
+  }
+
+  // TODO: More meaningful names for "rendererInterfaces" and "renderers".
+  const fiberRoots = {};
+  const rendererInterfaces = new Map();
+  const listeners = {};
+  const renderers = new Map();
+
+  const hook: DevToolsHook = {
+    rendererInterfaces,
+    listeners,
+
+    // Fast Refresh for web relies on this.
+    renderers,
+
+    emit,
+    getFiberRoots,
+    inject,
+    on,
+    off,
+    sub,
+
+    // This is a legacy flag.
+    // React v16 checks the hook for this to ensure DevTools is new enough.
+    supportsFiber: true,
+
+    // React calls these methods.
+    checkDCE,
+    onCommitFiberUnmount,
+    onCommitFiberRoot,
+  };
+
+  Object.defineProperty(
+    target,
+    '__REACT_DEVTOOLS_GLOBAL_HOOK__',
+    ({
+      // This property needs to be configurable for the test environment,
+      // else we won't be able to delete and recreate it beween tests.
+      configurable: __DEV__,
+      enumerable: false,
+      get() {
+        return hook;
+      },
+    }: Object),
+  );
+
+  return hook;
+}
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
new file mode 100644
index 0000000000000..01e0432d2a5d3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -0,0 +1,465 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Symbol from 'es6-symbol';
+import {
+  getDataType,
+  getDisplayNameForReactElement,
+  getInObject,
+  formatDataForPreview,
+  setInObject,
+} from './utils';
+
+import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+export const meta = {
+  inspectable: Symbol('inspectable'),
+  inspected: Symbol('inspected'),
+  name: Symbol('name'),
+  preview_long: Symbol('preview_long'),
+  preview_short: Symbol('preview_short'),
+  readonly: Symbol('readonly'),
+  size: Symbol('size'),
+  type: Symbol('type'),
+  unserializable: Symbol('unserializable'),
+};
+
+export type Dehydrated = {|
+  inspectable: boolean,
+  name: string | null,
+  preview_long: string | null,
+  preview_short: string | null,
+  readonly?: boolean,
+  size?: number,
+  type: string,
+|};
+
+// Typed arrays and other complex iteratable objects (e.g. Map, Set, ImmutableJS) need special handling.
+// These objects can't be serialized without losing type information,
+// so a "Unserializable" type wrapper is used (with meta-data keys) to send nested values-
+// while preserving the original type and name.
+export type Unserializable = {
+  name: string | null,
+  preview_long: string | null,
+  preview_short: string | null,
+  readonly?: boolean,
+  size?: number,
+  type: string,
+  unserializable: boolean,
+  ...
+};
+
+// This threshold determines the depth at which the bridge "dehydrates" nested data.
+// Dehydration means that we don't serialize the data for e.g. postMessage or stringify,
+// unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
+//
+// Reducing this threshold will improve the speed of initial component inspection,
+// but may decrease the responsiveness of expanding objects/arrays to inspect further.
+const LEVEL_THRESHOLD = 2;
+
+/**
+ * Generate the dehydrated metadata for complex object instances
+ */
+function createDehydrated(
+  type: string,
+  inspectable: boolean,
+  data: Object,
+  cleaned: Array<Array<string | number>>,
+  path: Array<string | number>,
+): Dehydrated {
+  cleaned.push(path);
+
+  const dehydrated: Dehydrated = {
+    inspectable,
+    type,
+    preview_long: formatDataForPreview(data, true),
+    preview_short: formatDataForPreview(data, false),
+    name:
+      !data.constructor || data.constructor.name === 'Object'
+        ? ''
+        : data.constructor.name,
+  };
+
+  if (type === 'array' || type === 'typed_array') {
+    dehydrated.size = data.length;
+  } else if (type === 'object') {
+    dehydrated.size = Object.keys(data).length;
+  }
+
+  if (type === 'iterator' || type === 'typed_array') {
+    dehydrated.readonly = true;
+  }
+
+  return dehydrated;
+}
+
+/**
+ * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
+ * The paths of the stripped out objects are appended to the `cleaned` list.
+ * On the other side of the barrier, the cleaned list is used to "re-hydrate" the cleaned representation into
+ * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.
+ *
+ * Input: {"some": {"attr": fn()}, "other": AnInstance}
+ * Output: {
+ *   "some": {
+ *     "attr": {"name": the fn.name, type: "function"}
+ *   },
+ *   "other": {
+ *     "name": "AnInstance",
+ *     "type": "object",
+ *   },
+ * }
+ * and cleaned = [["some", "attr"], ["other"]]
+ */
+export function dehydrate(
+  data: Object,
+  cleaned: Array<Array<string | number>>,
+  unserializable: Array<Array<string | number>>,
+  path: Array<string | number>,
+  isPathWhitelisted: (path: Array<string | number>) => boolean,
+  level?: number = 0,
+):
+  | string
+  | Dehydrated
+  | Unserializable
+  | Array<Dehydrated>
+  | Array<Unserializable>
+  | {[key: string]: string | Dehydrated | Unserializable, ...} {
+  const type = getDataType(data);
+
+  let isPathWhitelistedCheck;
+
+  switch (type) {
+    case 'html_element':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.tagName,
+        type,
+      };
+
+    case 'function':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.name || 'function',
+        type,
+      };
+
+    case 'string':
+      return data.length <= 500 ? data : data.slice(0, 500) + '...';
+
+    case 'bigint':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.toString(),
+        type,
+      };
+
+    case 'symbol':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.toString(),
+        type,
+      };
+
+    // React Elements aren't very inspector-friendly,
+    // and often contain private fields or circular references.
+    case 'react_element':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: getDisplayNameForReactElement(data) || 'Unknown',
+        type,
+      };
+
+    // ArrayBuffers error if you try to inspect them.
+    case 'array_buffer':
+    case 'data_view':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: type === 'data_view' ? 'DataView' : 'ArrayBuffer',
+        size: data.byteLength,
+        type,
+      };
+
+    case 'array':
+      isPathWhitelistedCheck = isPathWhitelisted(path);
+      if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      }
+      return data.map((item, i) =>
+        dehydrate(
+          item,
+          cleaned,
+          unserializable,
+          path.concat([i]),
+          isPathWhitelisted,
+          isPathWhitelistedCheck ? 1 : level + 1,
+        ),
+      );
+
+    case 'typed_array':
+    case 'iterator':
+      isPathWhitelistedCheck = isPathWhitelisted(path);
+      if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      } else {
+        const unserializableValue: Unserializable = {
+          unserializable: true,
+          type: type,
+          readonly: true,
+          size: type === 'typed_array' ? data.length : undefined,
+          preview_short: formatDataForPreview(data, false),
+          preview_long: formatDataForPreview(data, true),
+          name:
+            !data.constructor || data.constructor.name === 'Object'
+              ? ''
+              : data.constructor.name,
+        };
+
+        if (typeof data[Symbol.iterator]) {
+          // TRICKY
+          // Don't use [...spread] syntax for this purpose.
+          // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
+          // Other types (e.g. typed arrays, Sets) will not spread correctly.
+          Array.from(data).forEach(
+            (item, i) =>
+              (unserializableValue[i] = dehydrate(
+                item,
+                cleaned,
+                unserializable,
+                path.concat([i]),
+                isPathWhitelisted,
+                isPathWhitelistedCheck ? 1 : level + 1,
+              )),
+          );
+        }
+
+        unserializable.push(path);
+
+        return unserializableValue;
+      }
+
+    case 'date':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.toString(),
+        type,
+      };
+
+    case 'regexp':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.toString(),
+        type,
+      };
+
+    case 'object':
+      isPathWhitelistedCheck = isPathWhitelisted(path);
+      if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      } else {
+        const object = {};
+        for (let name in data) {
+          object[name] = dehydrate(
+            data[name],
+            cleaned,
+            unserializable,
+            path.concat([name]),
+            isPathWhitelisted,
+            isPathWhitelistedCheck ? 1 : level + 1,
+          );
+        }
+        return object;
+      }
+
+    case 'infinity':
+    case 'nan':
+    case 'undefined':
+      // Some values are lossy when sent through a WebSocket.
+      // We dehydrate+rehydrate them to preserve their type.
+      cleaned.push(path);
+      return {
+        type,
+      };
+
+    default:
+      return data;
+  }
+}
+
+export function fillInPath(
+  object: Object,
+  data: DehydratedData,
+  path: Array<string | number>,
+  value: any,
+) {
+  const target = getInObject(object, path);
+  if (target != null) {
+    if (!target[meta.unserializable]) {
+      delete target[meta.inspectable];
+      delete target[meta.inspected];
+      delete target[meta.name];
+      delete target[meta.preview_long];
+      delete target[meta.preview_short];
+      delete target[meta.readonly];
+      delete target[meta.size];
+      delete target[meta.type];
+    }
+  }
+
+  if (value !== null && data.unserializable.length > 0) {
+    const unserializablePath = data.unserializable[0];
+    let isMatch = unserializablePath.length === path.length;
+    for (let i = 0; i < path.length; i++) {
+      if (path[i] !== unserializablePath[i]) {
+        isMatch = false;
+        break;
+      }
+    }
+    if (isMatch) {
+      upgradeUnserializable(value, value);
+    }
+  }
+
+  setInObject(object, path, value);
+}
+
+export function hydrate(
+  object: any,
+  cleaned: Array<Array<string | number>>,
+  unserializable: Array<Array<string | number>>,
+): Object {
+  cleaned.forEach((path: Array<string | number>) => {
+    const length = path.length;
+    const last = path[length - 1];
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (!parent || !parent.hasOwnProperty(last)) {
+      return;
+    }
+
+    const value = parent[last];
+
+    if (value.type === 'infinity') {
+      parent[last] = Infinity;
+    } else if (value.type === 'nan') {
+      parent[last] = NaN;
+    } else if (value.type === 'undefined') {
+      parent[last] = undefined;
+    } else {
+      // Replace the string keys with Symbols so they're non-enumerable.
+      const replaced: {[key: Symbol]: boolean | string, ...} = {};
+      replaced[meta.inspectable] = !!value.inspectable;
+      replaced[meta.inspected] = false;
+      replaced[meta.name] = value.name;
+      replaced[meta.preview_long] = value.preview_long;
+      replaced[meta.preview_short] = value.preview_short;
+      replaced[meta.size] = value.size;
+      replaced[meta.readonly] = !!value.readonly;
+      replaced[meta.type] = value.type;
+
+      parent[last] = replaced;
+    }
+  });
+  unserializable.forEach((path: Array<string | number>) => {
+    const length = path.length;
+    const last = path[length - 1];
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (!parent || !parent.hasOwnProperty(last)) {
+      return;
+    }
+
+    const node = parent[last];
+
+    const replacement = {
+      ...node,
+    };
+
+    upgradeUnserializable(replacement, node);
+
+    parent[last] = replacement;
+  });
+  return object;
+}
+
+function upgradeUnserializable(destination: Object, source: Object) {
+  Object.defineProperties(destination, {
+    [meta.inspected]: {
+      configurable: true,
+      enumerable: false,
+      value: !!source.inspected,
+    },
+    [meta.name]: {
+      configurable: true,
+      enumerable: false,
+      value: source.name,
+    },
+    [meta.preview_long]: {
+      configurable: true,
+      enumerable: false,
+      value: source.preview_long,
+    },
+    [meta.preview_short]: {
+      configurable: true,
+      enumerable: false,
+      value: source.preview_short,
+    },
+    [meta.size]: {
+      configurable: true,
+      enumerable: false,
+      value: source.size,
+    },
+    [meta.readonly]: {
+      configurable: true,
+      enumerable: false,
+      value: !!source.readonly,
+    },
+    [meta.type]: {
+      configurable: true,
+      enumerable: false,
+      value: source.type,
+    },
+    [meta.unserializable]: {
+      configurable: true,
+      enumerable: false,
+      value: !!source.unserializable,
+    },
+  });
+
+  delete destination.inspected;
+  delete destination.name;
+  delete destination.preview_long;
+  delete destination.preview_short;
+  delete destination.size;
+  delete destination.readonly;
+  delete destination.type;
+  delete destination.unserializable;
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md b/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md
new file mode 100644
index 0000000000000..7030d4ee8e91c
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md
@@ -0,0 +1,96 @@
+Changelog
+------------
+
+### 1.8.0
+* 🎉 Added new "smart" align option for grid and list scroll-to-item methods ([gaearon](https://github.com/gaearon) - [#209](https://github.com/bvaughn/react-window/pull/209))
+
+### 1.7.2
+* 🐛 Add guards to avoid invalid scroll offsets when `scrollTo()` is called with a negative offset or when `scrollToItem` is called with invalid indices (negative or too large).
+
+### 1.7.1
+* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https://github.com/Betree) - [#185](https://github.com/bvaughn/react-window/pull/185))
+
+### 1.7.0
+* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https://github.com/jgoz) - [#174](https://github.com/bvaughn/react-window/pull/174))
+* DEV mode checks for `WeakSet` support before using it to avoid requiring a polyfill for IE11 - ([jgoz](https://github.com/jgoz) - [#167](https://github.com/bvaughn/react-window/pull/167))
+
+### 1.6.2
+* 🐛 Bugfix for RTL  when scrolling back towards the beginning (right) of the list.
+
+### 1.6.1
+* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.
+
+### 1.6.0
+* 🎉 RTL support added for lists and grids. Special thanks to [davidgarsan](https://github.com/davidgarsan) for his support. - [#156](https://github.com/bvaughn/react-window/pull/156)
+* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https://github.com/bvaughn/react-window/issues/153)
+
+### 1.5.2
+* 🐛 Edge case bug fix for `VariableSizeList` and `VariableSizeGrid` when the number of items decreases while a scroll is in progress. - ([iamsolankiamit](https://github.com/iamsolankiamit) - [#138](https://github.com/bvaughn/react-window/pull/138))
+
+### 1.5.1
+* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.
+
+### 1.5.0
+* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https://github.com/bvaughn/react-window/issues/114)
+
+### 1.4.0
+* 🎉 List and Grid components now "overscan" (pre-render) in both directions when scrolling is not active. When scrolling is in progress, cells are only pre-rendered in the direction being scrolled. This change has been made in an effort to reduce visible flicker when scrolling starts without adding additional overhead during scroll (which is the most performance sensitive time).
+* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.
+* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https://github.com/bvaughn/react-window/issues/106)
+* 🎉 Renamed List and Grid `innerTagName` and `outerTagName` props to `innerElementType` and `outerElementType` to formalize support for attaching arbitrary props (e.g. test ids) to List and Grid inner and outer DOM elements. Legacy `innerTagName` and `outerTagName` props will continue to work, but with a deprecation warning in DEV mode.
+* 🐛 List re-renders items if `direction` prop changes. - [#104](https://github.com/bvaughn/react-window/issues/104)
+
+### 1.3.1
+* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https://github.com/bvaughn/react-window/issues/90))
+
+### 1.3.0
+* (Skipped)
+
+### 1.2.4
+* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow
+
+### 1.2.3
+* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.
+
+### 1.2.2
+* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https://github.com/nicholas-l) - [#77](https://github.com/bvaughn/react-window/pull/77))
+
+### 1.2.1
+* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https://github.com/TrySound) - [#66](https://github.com/bvaughn/react-window/pull/66))
+* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.
+
+### 1.2.0
+* 🎉 Flow types added to NPM package. ([TrySound](https://github.com/TrySound) - [#40](https://github.com/bvaughn/react-window/pull/40))
+* 🎉 Relaxed grid `scrollTo` method to make `scrollLeft` and `scrollTop` params _optional_ (so you can only update one axis if desired). - [#63](https://github.com/bvaughn/react-window/pull/63))
+* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https://github.com/bvaughn/react-window/pull/58))
+* Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. ([TrySound](https://github.com/TrySound) - [#48](https://github.com/bvaughn/react-window/pull/48))
+* Remove `overflow:hidden` from inner container ([souporserious](https://github.com/souporserious) - [#56](https://github.com/bvaughn/react-window/pull/56))
+
+### 1.1.2
+* 🐛 Fixed edge case `scrollToItem` bug that caused lists/grids with very few items to have negative scroll offsets.
+
+### 1.1.1
+* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.
+
+### 1.1.0
+* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https://github.com/Andarist) - [#26](https://github.com/bvaughn/react-window/pull/26))
+* 🎉 Add optional `shouldForceUpdate` param reset-index methods to specify `forceUpdate` behavior. ([nihgwu](https://github.com/nihgwu) - [#32](https://github.com/bvaughn/react-window/pull/32))
+
+### 1.0.3
+* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.
+
+### 1.0.2
+
+* 🎉 Enable Babel `annotate-pure-calls` option so that classes compiled by "transform-es2015-classes" are annotated with `#__PURE__`. This enables [UglifyJS to remove them if they are not referenced](https://github.com/mishoo/UglifyJS2/pull/1448), improving dead code elimination in application code. ([Andarist](https://github.com/Andarist) - [#20](https://github.com/bvaughn/react-window/pull/20))
+* 🎉 Update "rollup-plugin-peer-deps-external" and use new `includeDependencies` flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. ([Andarist](https://github.com/Andarist) - [#19](https://github.com/bvaughn/react-window/pull/19))
+* 🎉 Enable [Babel "loose" mode](https://babeljs.io/docs/en/babel-preset-env#loose) to reduce package size (-8%). ([Andarist](https://github.com/Andarist) - [#18](https://github.com/bvaughn/react-window/pull/18))
+
+### 1.0.1
+Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.
+
+# 1.0.0
+Initial release of library. Includes the following components:
+* `FixedSizeGrid`
+* `FixedSizeList`
+* `VariableSizeGrid`
+* `VariableSizeList`
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md b/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md
new file mode 100644
index 0000000000000..0569d0a7b8b21
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/README.md b/packages/react-devtools-shared/src/node_modules/react-window/README.md
new file mode 100644
index 0000000000000..8603c9c5bcc53
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/README.md
@@ -0,0 +1,88 @@
+# react-window
+
+> React components for efficiently rendering large lists and tabular data
+
+[![NPM registry](https://img.shields.io/npm/v/react-window.svg?style=for-the-badge)](https://yarnpkg.com/en/package/react-window) [![Travis](https://img.shields.io/badge/ci-travis-green.svg?style=for-the-badge)](https://travis-ci.org/bvaughn/react-window) [![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](LICENSE.md)
+
+## Install
+
+```bash
+# Yarn
+yarn add react-window
+
+# NPM
+npm install --save react-window
+```
+
+## Usage
+
+Learn more at [react-window.now.sh](https://react-window.now.sh/):
+
+## Related libraries
+
+* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
+* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
+
+## Frequently asked questions
+
+### How is `react-window` different from `react-virtualized`?
+I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
+
+`react-window` is a complete rewrite of `react-virtualized`. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package **smaller**<sup>1</sup> and **faster**. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
+
+If `react-window` provides the functionality your project needs, I would strongly recommend using it instead of `react-virtualized`. However if you need features that only `react-virtualized` provides, you have two options:
+
+1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)
+2. Create a component that decorates one of the `react-window` primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂
+
+<sup>1 - Adding a `react-virtualized` list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a `react-window` list to a CRA project increases the (gzipped) build size by &lt;2 KB.</sup>
+
+### Can a list or a grid fill 100% the width or height of a page?
+
+Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
+
+<img width="336" alt="screen shot 2019-03-07 at 7 29 08 pm" src="https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
+
+### Why is my list blank when I scroll?
+
+If your list looks something like this...
+
+<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152">
+
+...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
+
+<img width="257" alt="screen shot 2019-03-07 at 7 21 48 pm" src="https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png">
+
+### Can I lazy load data for my list?
+
+Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
+
+<img width="368" alt="screen shot 2019-03-07 at 7 32 32 pm" src="https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
+
+### Can I attach custom properties or event handlers?
+
+Yes, using the `outerElementType` prop.
+
+<img width="412" alt="Screen Shot 2019-03-12 at 8 58 09 AM" src="https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
+
+### Can I add gutter or padding between items?
+
+Yes, although it requires a bit of inline styling.
+
+<img width="416" alt="Screen Shot 2019-03-26 at 6 33 56 PM" src="https://user-images.githubusercontent.com/29597/55043972-c14ad700-4ff5-11e9-9caa-2e9f4d85f96c.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
+
+### Does this library support "sticky" items?
+
+Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
+
+## License
+
+MIT © [bvaughn](https://github.com/bvaughn)
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js
new file mode 100644
index 0000000000000..96dc2ae17a611
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactWindow={},e.React)}(this,function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var i=function(e,t){return e.length===t.length&&e.every(function(e,r){return n=e,o=t[r],n===o;var n,o})};function a(e,t){var r;void 0===t&&(t=i);var n,o=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&t(l,o)?n:(n=e.apply(this,l),a=!0,r=this,o=l,n)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(e){cancelAnimationFrame(e.id)}function c(e,t){var r=l();var n={id:requestAnimationFrame(function o(){l()-r>=t?e.call(null):n.id=requestAnimationFrame(o)})};return n}var u=-1;var d=null;function f(e){if(void 0===e&&(e=!1),null===d||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var n=document.createElement("div"),o=n.style;return o.width="100px",o.height="100px",t.appendChild(n),document.body.appendChild(t),t.scrollLeft>0?d="positive-descending":(t.scrollLeft=1,d=0===t.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(t),d}return d}var h=150,p=function(e){var t=e.columnIndex;e.data;return e.rowIndex+":"+t},m=null,v=null,g=null;function w(e){var i,l,d=e.getColumnOffset,m=e.getColumnStartIndexForOffset,v=e.getColumnStopIndexForStartIndex,g=e.getColumnWidth,w=e.getEstimatedTotalHeight,I=e.getEstimatedTotalWidth,M=e.getOffsetForColumnAndAlignment,y=e.getOffsetForRowAndAlignment,x=e.getRowHeight,C=e.getRowOffset,_=e.getRowStartIndexForOffset,b=e.getRowStopIndexForStartIndex,R=e.initInstanceProps,T=e.shouldResetStyleCacheOnItemSizeChange,z=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=R(r.props,o(o(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:o(o(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:e,overscanColumnStopIndex:t,overscanRowStartIndex:n,overscanRowStopIndex:o,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n,o,i){return r.props.onScroll({horizontalScrollDirection:n,scrollLeft:e,scrollTop:t,verticalScrollDirection:o,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(e,t){var n,o,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(T&&a,T&&l,T&&s),u=e+":"+t;c.hasOwnProperty(u)?n=c[u]:c[u]=((o={position:"absolute"})["rtl"===l?"right":"left"]=d(r.props,t,r._instanceProps),o.top=C(r.props,e,r._instanceProps),o.height=x(r.props,e,r._instanceProps),o.width=g(r.props,t,r._instanceProps),n=o);return n},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScroll=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.clientWidth,i=t.scrollLeft,a=t.scrollTop,l=t.scrollHeight,s=t.scrollWidth;r.setState(function(e){if(e.scrollLeft===i&&e.scrollTop===a)return null;var t=r.props.direction,c=i;if("rtl"===t)switch(f()){case"negative":c=-i;break;case"positive-descending":c=s-o-i}c=Math.max(0,Math.min(c,s-o));var u=Math.max(0,Math.min(a,l-n));return{isScrolling:!0,horizontalScrollDirection:e.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:e.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return S(e,t),z(e),null};var l=i.prototype;return l.scrollTo=function(e){var t=e.scrollLeft,r=e.scrollTop;void 0!==t&&(t=Math.max(0,t)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(e){return void 0===t&&(t=e.scrollLeft),void 0===r&&(r=e.scrollTop),e.scrollLeft===t&&e.scrollTop===r?null:{horizontalScrollDirection:e.scrollLeft<t?"forward":"backward",scrollLeft:t,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:e.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e){var t=e.align,r=void 0===t?"auto":t,n=e.columnIndex,o=e.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,d=this.state,f=d.scrollLeft,h=d.scrollTop,p=function(e){if(void 0===e&&(e=!1),-1===u||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(t),u=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return u}();void 0!==n&&(n=Math.max(0,Math.min(n,a-1))),void 0!==o&&(o=Math.max(0,Math.min(o,s-1)));var m=w(this.props,this._instanceProps),v=I(this.props,this._instanceProps)>c?p:0,g=m>l?p:0;this.scrollTo({scrollLeft:void 0!==n?M(this.props,n,r,f,this._instanceProps,g):f,scrollTop:void 0!==o?y(this.props,o,r,h,this._instanceProps,v):h})},l.componentDidMount=function(){var e=this.props,t=e.initialScrollLeft,r=e.initialScrollTop;if(null!=this._outerRef){var n=this._outerRef;"number"==typeof t&&(n.scrollLeft=t),"number"==typeof r&&(n.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props.direction,t=this.state,r=t.scrollLeft,n=t.scrollTop;if(t.scrollUpdateWasRequested&&null!=this._outerRef){var o=this._outerRef;if("rtl"===e)switch(f()){case"negative":o.scrollLeft=-r;break;case"positive-ascending":o.scrollLeft=r;break;default:var i=o.clientWidth,a=o.scrollWidth;o.scrollLeft=a-i-r}else o.scrollLeft=Math.max(0,r);o.scrollTop=Math.max(0,n)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.columnCount,a=e.direction,l=e.height,s=e.innerRef,c=e.innerElementType,u=e.innerTagName,d=e.itemData,f=e.itemKey,h=void 0===f?p:f,m=e.outerElementType,v=e.outerTagName,g=e.rowCount,S=e.style,M=e.useIsScrolling,y=e.width,x=this.state.isScrolling,C=this._getHorizontalRangeToRender(),_=C[0],b=C[1],R=this._getVerticalRangeToRender(),T=R[0],z=R[1],O=[];if(i>0&&g)for(var P=T;P<=z;P++)for(var W=_;W<=b;W++)O.push(t.createElement(n,{columnIndex:W,data:d,isScrolling:M?x:void 0,key:h({columnIndex:W,data:d,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var E=w(this.props,this._instanceProps),A=I(this.props,this._instanceProps);return t.createElement(m||v||"div",{className:o,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:y,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},t.createElement(c||u||"div",{children:O,ref:s,style:{height:E,pointerEvents:x?"none":void 0,width:A}}))},l._callPropsCallbacks=function(){var e=this.props,t=e.columnCount,r=e.onItemsRendered,n=e.onScroll,o=e.rowCount;if("function"==typeof r&&t>0&&o>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),d=u[0],f=u[1],h=u[2],p=u[3];this._callOnItemsRendered(a,l,d,f,s,c,h,p)}if("function"==typeof n){var m=this.state,v=m.horizontalScrollDirection,g=m.scrollLeft,w=m.scrollTop,S=m.scrollUpdateWasRequested,I=m.verticalScrollDirection;this._callOnScroll(g,w,v,I,S)}},l._getHorizontalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanColumnCount,n=e.overscanColumnsCount,o=e.overscanCount,i=e.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||n||o||1;if(0===t||0===i)return[0,0,0,0];var d=m(this.props,c,this._instanceProps),f=v(this.props,d,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),p=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(t-1,f+p)),d,f]},l._getVerticalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanCount,n=e.overscanRowCount,o=e.overscanRowsCount,i=e.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=n||o||r||1;if(0===t||0===i)return[0,0,0,0];var d=_(this.props,c,this._instanceProps),f=b(this.props,d,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),p=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(i-1,f+p)),d,f]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(m=new WeakSet,v=new WeakSet,g=new WeakSet);var S=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.innerTagName,a=e.outerTagName,l=e.overscanColumnsCount,s=e.overscanCount,c=e.overscanRowsCount,u=e.width,d=t.instance;if("number"==typeof s&&m&&!m.has(d)&&(m.add(d),console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),"number"!=typeof l&&"number"!=typeof c||v&&!v.has(d)&&(v.add(d),console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),null==i&&null==a||g&&!g.has(d)&&(g.add(d),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")),null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');switch(n){case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}if("number"!=typeof u)throw Error('An invalid "width" prop has been specified. Grids must specify a number for width. "'+(null===u?"null":typeof u)+'" was specified.');if("number"!=typeof o)throw Error('An invalid "height" prop has been specified. Grids must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},I=function(e,t){var r=e.rowCount,n=t.rowMetadataMap,o=t.estimatedRowHeight,i=t.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},M=function(e,t){var r=e.columnCount,n=t.columnMetadataMap,o=t.estimatedColumnWidth,i=t.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},y=function(e,t,r,n){var o,i,a;if("column"===e?(o=n.columnMetadataMap,i=t.columnWidth,a=n.lastMeasuredColumnIndex):(o=n.rowMetadataMap,i=t.rowHeight,a=n.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=o[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);o[c]={offset:l,size:u},l+=u}"column"===e?n.lastMeasuredColumnIndex=r:n.lastMeasuredRowIndex=r}return o[r]},x=function(e,t,r,n){var o,i;return"column"===e?(o=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(o=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?o[i].offset:0)>=n?C(e,t,r,i,0,n):_(e,t,r,Math.max(0,i),n)},C=function(e,t,r,n,o,i){for(;o<=n;){var a=o+Math.floor((n-o)/2),l=y(e,t,a,r).offset;if(l===i)return a;l<i?o=a+1:l>i&&(n=a-1)}return o>0?o-1:0},_=function(e,t,r,n,o){for(var i="column"===e?t.columnCount:t.rowCount,a=1;n<i&&y(e,t,n,r).offset<o;)n+=a,a*=2;return C(e,t,r,Math.min(n,i-1),Math.floor(n/2),o)},b=function(e,t,r,n,o,i,a){var l="column"===e?t.width:t.height,s=y(e,t,r,i),c="column"===e?M(t,i):I(t,i),u=Math.max(0,Math.min(c-l,s.offset)),d=Math.max(0,s.offset-l+a+s.size);switch("smart"===n&&(n=o>=d-l&&o<=u+l?"auto":"center"),n){case"start":return u;case"end":return d;case"center":return Math.round(d+(u-d)/2);case"auto":default:return o>=d&&o<=u?o:d>u?d:o<d?d:u}},R=w({getColumnOffset:function(e,t,r){return y("column",e,t,r).offset},getColumnStartIndexForOffset:function(e,t,r){return x("column",e,r,t)},getColumnStopIndexForStartIndex:function(e,t,r,n){for(var o=e.columnCount,i=e.width,a=y("column",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("column",e,++c,n).size;return c},getColumnWidth:function(e,t,r){return r.columnMetadataMap[t].size},getEstimatedTotalHeight:I,getEstimatedTotalWidth:M,getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){return b("column",e,t,r,n,o,i)},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){return b("row",e,t,r,n,o,i)},getRowOffset:function(e,t,r){return y("row",e,t,r).offset},getRowHeight:function(e,t,r){return r.rowMetadataMap[t].size},getRowStartIndexForOffset:function(e,t,r){return x("row",e,r,t)},getRowStopIndexForStartIndex:function(e,t,r,n){for(var o=e.rowCount,i=e.height,a=y("row",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("row",e,++c,n).size;return c},initInstanceProps:function(e,t){var r=e,n={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return t.resetAfterColumnIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({columnIndex:e,shouldForceUpdate:r})},t.resetAfterRowIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({rowIndex:e,shouldForceUpdate:r})},t.resetAfterIndices=function(e){var r=e.columnIndex,o=e.rowIndex,i=e.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(n.lastMeasuredColumnIndex=Math.min(n.lastMeasuredColumnIndex,r-1)),"number"==typeof o&&(n.lastMeasuredRowIndex=Math.min(n.lastMeasuredRowIndex,o-1)),t._getItemStyleCache(-1),a&&t.forceUpdate()},n},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("function"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.');if("function"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a function. "'+(null===r?"null":typeof r)+'" was specified.')}}),T=150,z=function(e,t){return e},O=null,P=null;function W(e){var i,l,u=e.getItemOffset,d=e.getEstimatedTotalSize,h=e.getItemSize,p=e.getOffsetForIndexAndAlignment,m=e.getStartIndexForOffset,v=e.getStopIndexForStartIndex,g=e.initInstanceProps,w=e.shouldResetStyleCacheOnItemSizeChange,S=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=g(r.props,o(o(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:o(o(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o){return r.props.onItemsRendered({overscanStartIndex:e,overscanStopIndex:t,visibleStartIndex:n,visibleStopIndex:o})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n){return r.props.onScroll({scrollDirection:e,scrollOffset:t,scrollUpdateWasRequested:n})}),r._getItemStyle=void 0,r._getItemStyle=function(e){var t,n=r.props,o=n.direction,i=n.itemSize,a=n.layout,l=r._getItemStyleCache(w&&i,w&&a,w&&o);if(l.hasOwnProperty(e))t=l[e];else{var s,c=u(r.props,e,r._instanceProps),d=h(r.props,e,r._instanceProps),f="horizontal"===o||"horizontal"===a;l[e]=((s={position:"absolute"})["rtl"===o?"right":"left"]=f?c:0,s.top=f?0:c,s.height=f?"100%":d,s.width=f?d:"100%",t=s)}return t},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScrollHorizontal=function(e){var t=e.currentTarget,n=t.clientWidth,o=t.scrollLeft,i=t.scrollWidth;r.setState(function(e){if(e.scrollOffset===o)return null;var t=r.props.direction,a=o;if("rtl"===t)switch(f()){case"negative":a=-o;break;case"positive-descending":a=i-n-o}return a=Math.max(0,Math.min(a,i-n)),{isScrolling:!0,scrollDirection:e.scrollOffset<o?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.scrollHeight,i=t.scrollTop;r.setState(function(e){if(e.scrollOffset===i)return null;var t=Math.max(0,Math.min(i,o-n));return{isScrolling:!0,scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,T)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return E(e,t),S(e),null};var l=i.prototype;return l.scrollTo=function(e){e=Math.max(0,e),this.setState(function(t){return t.scrollOffset===e?null:{scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e,t){void 0===t&&(t="auto");var r=this.props.itemCount,n=this.state.scrollOffset;e=Math.max(0,Math.min(e,r-1)),this.scrollTo(p(this.props,e,t,n,this._instanceProps))},l.componentDidMount=function(){var e=this.props,t=e.direction,r=e.initialScrollOffset,n=e.layout;if("number"==typeof r&&null!=this._outerRef){var o=this._outerRef;"horizontal"===t||"horizontal"===n?o.scrollLeft=r:o.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props,t=e.direction,r=e.layout,n=this.state,o=n.scrollOffset;if(n.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===t||"horizontal"===r)if("rtl"===t)switch(f()){case"negative":i.scrollLeft=-o;break;case"positive-ascending":i.scrollLeft=o;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-o}else i.scrollLeft=o;else i.scrollTop=o}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.direction,a=e.height,l=e.innerRef,s=e.innerElementType,c=e.innerTagName,u=e.itemCount,f=e.itemData,h=e.itemKey,p=void 0===h?z:h,m=e.layout,v=e.outerElementType,g=e.outerTagName,w=e.style,S=e.useIsScrolling,I=e.width,M=this.state.isScrolling,y="horizontal"===i||"horizontal"===m,x=y?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),_=C[0],b=C[1],R=[];if(u>0)for(var T=_;T<=b;T++)R.push(t.createElement(n,{data:f,key:p(T,f),index:T,isScrolling:S?M:void 0,style:this._getItemStyle(T)}));var O=d(this.props,this._instanceProps);return t.createElement(v||g||"div",{className:o,onScroll:x,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:I,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},w)},t.createElement(s||c||"div",{children:R,ref:l,style:{height:y?"100%":O,pointerEvents:M?"none":void 0,width:y?O:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var e=this._getRangeToRender(),t=e[0],r=e[1],n=e[2],o=e[3];this._callOnItemsRendered(t,r,n,o)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var e=this.props,t=e.itemCount,r=e.overscanCount,n=this.state,o=n.isScrolling,i=n.scrollDirection,a=n.scrollOffset;if(0===t)return[0,0,0,0];var l=m(this.props,a,this._instanceProps),s=v(this.props,l,a,this._instanceProps),c=o&&"backward"!==i?1:Math.max(1,r),u=o&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(t-1,s+u)),l,s]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(O=new WeakSet,P=new WeakSet);var E=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.layout,a=e.innerTagName,l=e.outerTagName,s=e.width,c=t.instance;null==a&&null==l||P&&!P.has(c)&&(P.add(c),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));var u="horizontal"===n||"horizontal"===i;switch(n){case"horizontal":case"vertical":O&&!O.has(c)&&(O.add(c),console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));break;case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}switch(i){case"horizontal":case"vertical":break;default:throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". "'+i+'" was specified.')}if(null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');if(u&&"number"!=typeof s)throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. "'+(null===s?"null":typeof s)+'" was specified.');if(!u&&"number"!=typeof o)throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},A=function(e,t,r){var n=e.itemSize,o=r.itemMetadataMap,i=r.lastMeasuredIndex;if(t>i){var a=0;if(i>=0){var l=o[i];a=l.offset+l.size}for(var s=i+1;s<=t;s++){var c=n(s);o[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=t}return o[t]},k=function(e,t,r,n,o){for(;n<=r;){var i=n+Math.floor((r-n)/2),a=A(e,i,t).offset;if(a===o)return i;a<o?n=i+1:a>o&&(r=i-1)}return n>0?n-1:0},D=function(e,t,r,n){for(var o=e.itemCount,i=1;r<o&&A(e,r,t).offset<n;)r+=i,i*=2;return k(e,t,Math.min(r,o-1),Math.floor(r/2),n)},F=function(e,t){var r=e.itemCount,n=t.itemMetadataMap,o=t.estimatedItemSize,i=t.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},L=W({getItemOffset:function(e,t,r){return A(e,t,r).offset},getItemSize:function(e,t,r){return r.itemMetadataMap[t].size},getEstimatedTotalSize:F,getOffsetForIndexAndAlignment:function(e,t,r,n,o){var i=e.direction,a=e.height,l=e.layout,s=e.width,c="horizontal"===i||"horizontal"===l?s:a,u=A(e,t,o),d=F(e,o),f=Math.max(0,Math.min(d-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=n>=h-c&&n<=f+c?"auto":"center"),r){case"start":return f;case"end":return h;case"center":return Math.round(h+(f-h)/2);case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t,r){return function(e,t,r){var n=t.itemMetadataMap,o=t.lastMeasuredIndex;return(o>0?n[o].offset:0)>=r?k(e,t,o,0,r):D(e,t,Math.max(0,o),r)}(e,r,t)},getStopIndexForStartIndex:function(e,t,r,n){for(var o=e.direction,i=e.height,a=e.itemCount,l=e.layout,s=e.width,c="horizontal"===o||"horizontal"===l?s:i,u=A(e,t,n),d=r+c,f=u.offset+u.size,h=t;h<a-1&&f<d;)f+=A(e,++h,n).size;return h},initInstanceProps:function(e,t){var r={itemMetadataMap:{},estimatedItemSize:e.estimatedItemSize||50,lastMeasuredIndex:-1};return t.resetAfterIndex=function(e,n){void 0===n&&(n=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,e-1),t._getItemStyleCache(-1),n&&t.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.itemSize;if("function"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.')}}),H=w({getColumnOffset:function(e,t){return t*e.columnWidth},getColumnWidth:function(e,t){return e.columnWidth},getRowOffset:function(e,t){return t*e.rowHeight},getRowHeight:function(e,t){return e.rowHeight},getEstimatedTotalHeight:function(e){var t=e.rowCount;return e.rowHeight*t},getEstimatedTotalWidth:function(e){var t=e.columnCount;return e.columnWidth*t},getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){var a=e.columnCount,l=e.columnWidth,s=e.width,c=Math.max(0,a*l-s),u=Math.min(c,t*l),d=Math.max(0,t*l-s+i+l);switch("smart"===r&&(r=n>=d-s&&n<=u+s?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(s/2)?0:f>c+Math.floor(s/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){var a=e.rowHeight,l=e.height,s=e.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,t*a),d=Math.max(0,t*a-l+i+a);switch("smart"===r&&(r=n>=d-l&&n<=u+l?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(l/2)?0:f>c+Math.floor(l/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getColumnStartIndexForOffset:function(e,t){var r=e.columnWidth,n=e.columnCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getColumnStopIndexForStartIndex:function(e,t,r){var n=e.columnWidth,o=e.columnCount,i=e.width,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},getRowStartIndexForOffset:function(e,t){var r=e.rowHeight,n=e.rowCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getRowStopIndexForStartIndex:function(e,t,r){var n=e.rowHeight,o=e.rowCount,i=e.height,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("number"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.');if("number"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a number. "'+(null===r?"null":typeof r)+'" was specified.')}}),U=W({getItemOffset:function(e,t){return t*e.itemSize},getItemSize:function(e,t){return e.itemSize},getEstimatedTotalSize:function(e){var t=e.itemCount;return e.itemSize*t},getOffsetForIndexAndAlignment:function(e,t,r,n){var o=e.direction,i=e.height,a=e.itemCount,l=e.itemSize,s=e.layout,c=e.width,u="horizontal"===o||"horizontal"===s?c:i,d=Math.max(0,a*l-u),f=Math.min(d,t*l),h=Math.max(0,t*l-u+l);switch("smart"===r&&(r=n>=h-u&&n<=f+u?"auto":"center"),r){case"start":return f;case"end":return h;case"center":var p=Math.round(h+(f-h)/2);return p<Math.ceil(u/2)?0:p>d+Math.floor(u/2)?d:p;case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t){var r=e.itemCount,n=e.itemSize;return Math.max(0,Math.min(r-1,Math.floor(t/n)))},getStopIndexForStartIndex:function(e,t,r){var n=e.direction,o=e.height,i=e.itemCount,a=e.itemSize,l=e.layout,s=e.width,c=t*a,u="horizontal"===n||"horizontal"===l?s:o,d=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,t+d-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.itemSize;if("number"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.')}});function V(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function q(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1}function N(e,t){var r=e.style,n=V(e,["style"]),o=t.style,i=V(t,["style"]);return!q(r,o)&&!q(n,i)}e.VariableSizeGrid=R,e.VariableSizeList=L,e.FixedSizeGrid=H,e.FixedSizeList=U,e.areEqual=N,e.shouldComponentUpdate=function(e,t){return!N(this.props,e)||q(this.state,t)},Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=index-dev.umd.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js
new file mode 100644
index 0000000000000..ca33541ed54f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactWindow={},t.React)}(this,function(t,e){"use strict";function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t}).apply(this,arguments)}function o(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var i=function(t,e){return t.length===e.length&&t.every(function(t,r){return o=t,n=e[r],o===n;var o,n})};function a(t,e){var r;void 0===e&&(e=i);var o,n=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&e(l,n)?o:(o=t.apply(this,l),a=!0,r=this,n=l,o)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(t){cancelAnimationFrame(t.id)}function c(t,e){var r=l();var o={id:requestAnimationFrame(function n(){l()-r>=e?t.call(null):o.id=requestAnimationFrame(n)})};return o}var u=-1;var f=null;function d(t){if(void 0===t&&(t=!1),null===f||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var o=document.createElement("div"),n=o.style;return n.width="100px",n.height="100px",e.appendChild(o),document.body.appendChild(e),e.scrollLeft>0?f="positive-descending":(e.scrollLeft=1,f=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),f}return f}var h=150,m=function(t){var e=t.columnIndex;t.data;return t.rowIndex+":"+e};function p(t){var i,l,f=t.getColumnOffset,p=t.getColumnStartIndexForOffset,v=t.getColumnStopIndexForStartIndex,S=t.getColumnWidth,I=t.getEstimatedTotalHeight,w=t.getEstimatedTotalWidth,M=t.getOffsetForColumnAndAlignment,x=t.getOffsetForRowAndAlignment,_=t.getRowHeight,C=t.getRowOffset,R=t.getRowStartIndexForOffset,y=t.getRowStopIndexForStartIndex,T=t.initInstanceProps,O=t.shouldResetStyleCacheOnItemSizeChange,z=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=T(r.props,n(n(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:n(n(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:t,overscanColumnStopIndex:e,overscanRowStartIndex:o,overscanRowStopIndex:n,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o,n,i){return r.props.onScroll({horizontalScrollDirection:o,scrollLeft:t,scrollTop:e,verticalScrollDirection:n,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(t,e){var o,n,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(O&&a,O&&l,O&&s),u=t+":"+e;c.hasOwnProperty(u)?o=c[u]:c[u]=((n={position:"absolute"})["rtl"===l?"right":"left"]=f(r.props,e,r._instanceProps),n.top=C(r.props,t,r._instanceProps),n.height=_(r.props,t,r._instanceProps),n.width=S(r.props,e,r._instanceProps),o=n);return o},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScroll=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.clientWidth,i=e.scrollLeft,a=e.scrollTop,l=e.scrollHeight,s=e.scrollWidth;r.setState(function(t){if(t.scrollLeft===i&&t.scrollTop===a)return null;var e=r.props.direction,c=i;if("rtl"===e)switch(d()){case"negative":c=-i;break;case"positive-descending":c=s-n-i}c=Math.max(0,Math.min(c,s-n));var u=Math.max(0,Math.min(a,l-o));return{isScrolling:!0,horizontalScrollDirection:t.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:t.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return g(t,e),z(t),null};var l=i.prototype;return l.scrollTo=function(t){var e=t.scrollLeft,r=t.scrollTop;void 0!==e&&(e=Math.max(0,e)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(t){return void 0===e&&(e=t.scrollLeft),void 0===r&&(r=t.scrollTop),t.scrollLeft===e&&t.scrollTop===r?null:{horizontalScrollDirection:t.scrollLeft<e?"forward":"backward",scrollLeft:e,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:t.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t){var e=t.align,r=void 0===e?"auto":e,o=t.columnIndex,n=t.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,f=this.state,d=f.scrollLeft,h=f.scrollTop,m=function(t){if(void 0===t&&(t=!1),-1===u||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(e),u=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}return u}();void 0!==o&&(o=Math.max(0,Math.min(o,a-1))),void 0!==n&&(n=Math.max(0,Math.min(n,s-1)));var p=I(this.props,this._instanceProps),g=w(this.props,this._instanceProps)>c?m:0,v=p>l?m:0;this.scrollTo({scrollLeft:void 0!==o?M(this.props,o,r,d,this._instanceProps,v):d,scrollTop:void 0!==n?x(this.props,n,r,h,this._instanceProps,g):h})},l.componentDidMount=function(){var t=this.props,e=t.initialScrollLeft,r=t.initialScrollTop;if(null!=this._outerRef){var o=this._outerRef;"number"==typeof e&&(o.scrollLeft=e),"number"==typeof r&&(o.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props.direction,e=this.state,r=e.scrollLeft,o=e.scrollTop;if(e.scrollUpdateWasRequested&&null!=this._outerRef){var n=this._outerRef;if("rtl"===t)switch(d()){case"negative":n.scrollLeft=-r;break;case"positive-ascending":n.scrollLeft=r;break;default:var i=n.clientWidth,a=n.scrollWidth;n.scrollLeft=a-i-r}else n.scrollLeft=Math.max(0,r);n.scrollTop=Math.max(0,o)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.columnCount,a=t.direction,l=t.height,s=t.innerRef,c=t.innerElementType,u=t.innerTagName,f=t.itemData,d=t.itemKey,h=void 0===d?m:d,p=t.outerElementType,g=t.outerTagName,v=t.rowCount,S=t.style,M=t.useIsScrolling,x=t.width,_=this.state.isScrolling,C=this._getHorizontalRangeToRender(),R=C[0],y=C[1],T=this._getVerticalRangeToRender(),O=T[0],z=T[1],b=[];if(i>0&&v)for(var P=O;P<=z;P++)for(var W=R;W<=y;W++)b.push(e.createElement(o,{columnIndex:W,data:f,isScrolling:M?_:void 0,key:h({columnIndex:W,data:f,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var D=I(this.props,this._instanceProps),F=w(this.props,this._instanceProps);return e.createElement(p||g||"div",{className:n,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:x,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},e.createElement(c||u||"div",{children:b,ref:s,style:{height:D,pointerEvents:_?"none":void 0,width:F}}))},l._callPropsCallbacks=function(){var t=this.props,e=t.columnCount,r=t.onItemsRendered,o=t.onScroll,n=t.rowCount;if("function"==typeof r&&e>0&&n>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),f=u[0],d=u[1],h=u[2],m=u[3];this._callOnItemsRendered(a,l,f,d,s,c,h,m)}if("function"==typeof o){var p=this.state,g=p.horizontalScrollDirection,v=p.scrollLeft,S=p.scrollTop,I=p.scrollUpdateWasRequested,w=p.verticalScrollDirection;this._callOnScroll(v,S,g,w,I)}},l._getHorizontalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanColumnCount,o=t.overscanColumnsCount,n=t.overscanCount,i=t.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||o||n||1;if(0===e||0===i)return[0,0,0,0];var f=p(this.props,c,this._instanceProps),d=v(this.props,f,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),m=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(e-1,d+m)),f,d]},l._getVerticalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanCount,o=t.overscanRowCount,n=t.overscanRowsCount,i=t.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=o||n||r||1;if(0===e||0===i)return[0,0,0,0];var f=R(this.props,c,this._instanceProps),d=y(this.props,f,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),m=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(i-1,d+m)),f,d]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}var g=function(t,e){t.children,t.direction,t.height,t.innerTagName,t.outerTagName,t.overscanColumnsCount,t.overscanCount,t.overscanRowsCount,t.width,e.instance},v=function(t,e){var r=t.rowCount,o=e.rowMetadataMap,n=e.estimatedRowHeight,i=e.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},S=function(t,e){var r=t.columnCount,o=e.columnMetadataMap,n=e.estimatedColumnWidth,i=e.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},I=function(t,e,r,o){var n,i,a;if("column"===t?(n=o.columnMetadataMap,i=e.columnWidth,a=o.lastMeasuredColumnIndex):(n=o.rowMetadataMap,i=e.rowHeight,a=o.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=n[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);n[c]={offset:l,size:u},l+=u}"column"===t?o.lastMeasuredColumnIndex=r:o.lastMeasuredRowIndex=r}return n[r]},w=function(t,e,r,o){var n,i;return"column"===t?(n=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(n=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?n[i].offset:0)>=o?M(t,e,r,i,0,o):x(t,e,r,Math.max(0,i),o)},M=function(t,e,r,o,n,i){for(;n<=o;){var a=n+Math.floor((o-n)/2),l=I(t,e,a,r).offset;if(l===i)return a;l<i?n=a+1:l>i&&(o=a-1)}return n>0?n-1:0},x=function(t,e,r,o,n){for(var i="column"===t?e.columnCount:e.rowCount,a=1;o<i&&I(t,e,o,r).offset<n;)o+=a,a*=2;return M(t,e,r,Math.min(o,i-1),Math.floor(o/2),n)},_=function(t,e,r,o,n,i,a){var l="column"===t?e.width:e.height,s=I(t,e,r,i),c="column"===t?S(e,i):v(e,i),u=Math.max(0,Math.min(c-l,s.offset)),f=Math.max(0,s.offset-l+a+s.size);switch("smart"===o&&(o=n>=f-l&&n<=u+l?"auto":"center"),o){case"start":return u;case"end":return f;case"center":return Math.round(f+(u-f)/2);case"auto":default:return n>=f&&n<=u?n:f>u?f:n<f?f:u}},C=p({getColumnOffset:function(t,e,r){return I("column",t,e,r).offset},getColumnStartIndexForOffset:function(t,e,r){return w("column",t,r,e)},getColumnStopIndexForStartIndex:function(t,e,r,o){for(var n=t.columnCount,i=t.width,a=I("column",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("column",t,++c,o).size;return c},getColumnWidth:function(t,e,r){return r.columnMetadataMap[e].size},getEstimatedTotalHeight:v,getEstimatedTotalWidth:S,getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){return _("column",t,e,r,o,n,i)},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){return _("row",t,e,r,o,n,i)},getRowOffset:function(t,e,r){return I("row",t,e,r).offset},getRowHeight:function(t,e,r){return r.rowMetadataMap[e].size},getRowStartIndexForOffset:function(t,e,r){return w("row",t,r,e)},getRowStopIndexForStartIndex:function(t,e,r,o){for(var n=t.rowCount,i=t.height,a=I("row",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("row",t,++c,o).size;return c},initInstanceProps:function(t,e){var r=t,o={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return e.resetAfterColumnIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({columnIndex:t,shouldForceUpdate:r})},e.resetAfterRowIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({rowIndex:t,shouldForceUpdate:r})},e.resetAfterIndices=function(t){var r=t.columnIndex,n=t.rowIndex,i=t.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(o.lastMeasuredColumnIndex=Math.min(o.lastMeasuredColumnIndex,r-1)),"number"==typeof n&&(o.lastMeasuredRowIndex=Math.min(o.lastMeasuredRowIndex,n-1)),e._getItemStyleCache(-1),a&&e.forceUpdate()},o},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.columnWidth,t.rowHeight}}),R=150,y=function(t,e){return t};function T(t){var i,l,u=t.getItemOffset,f=t.getEstimatedTotalSize,h=t.getItemSize,m=t.getOffsetForIndexAndAlignment,p=t.getStartIndexForOffset,g=t.getStopIndexForStartIndex,v=t.initInstanceProps,S=t.shouldResetStyleCacheOnItemSizeChange,I=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=v(r.props,n(n(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:n(n(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n){return r.props.onItemsRendered({overscanStartIndex:t,overscanStopIndex:e,visibleStartIndex:o,visibleStopIndex:n})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o){return r.props.onScroll({scrollDirection:t,scrollOffset:e,scrollUpdateWasRequested:o})}),r._getItemStyle=void 0,r._getItemStyle=function(t){var e,o=r.props,n=o.direction,i=o.itemSize,a=o.layout,l=r._getItemStyleCache(S&&i,S&&a,S&&n);if(l.hasOwnProperty(t))e=l[t];else{var s,c=u(r.props,t,r._instanceProps),f=h(r.props,t,r._instanceProps),d="horizontal"===n||"horizontal"===a;l[t]=((s={position:"absolute"})["rtl"===n?"right":"left"]=d?c:0,s.top=d?0:c,s.height=d?"100%":f,s.width=d?f:"100%",e=s)}return e},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScrollHorizontal=function(t){var e=t.currentTarget,o=e.clientWidth,n=e.scrollLeft,i=e.scrollWidth;r.setState(function(t){if(t.scrollOffset===n)return null;var e=r.props.direction,a=n;if("rtl"===e)switch(d()){case"negative":a=-n;break;case"positive-descending":a=i-o-n}return a=Math.max(0,Math.min(a,i-o)),{isScrolling:!0,scrollDirection:t.scrollOffset<n?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.scrollHeight,i=e.scrollTop;r.setState(function(t){if(t.scrollOffset===i)return null;var e=Math.max(0,Math.min(i,n-o));return{isScrolling:!0,scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,R)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return O(t,e),I(t),null};var l=i.prototype;return l.scrollTo=function(t){t=Math.max(0,t),this.setState(function(e){return e.scrollOffset===t?null:{scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t,e){void 0===e&&(e="auto");var r=this.props.itemCount,o=this.state.scrollOffset;t=Math.max(0,Math.min(t,r-1)),this.scrollTo(m(this.props,t,e,o,this._instanceProps))},l.componentDidMount=function(){var t=this.props,e=t.direction,r=t.initialScrollOffset,o=t.layout;if("number"==typeof r&&null!=this._outerRef){var n=this._outerRef;"horizontal"===e||"horizontal"===o?n.scrollLeft=r:n.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props,e=t.direction,r=t.layout,o=this.state,n=o.scrollOffset;if(o.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===e||"horizontal"===r)if("rtl"===e)switch(d()){case"negative":i.scrollLeft=-n;break;case"positive-ascending":i.scrollLeft=n;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-n}else i.scrollLeft=n;else i.scrollTop=n}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.direction,a=t.height,l=t.innerRef,s=t.innerElementType,c=t.innerTagName,u=t.itemCount,d=t.itemData,h=t.itemKey,m=void 0===h?y:h,p=t.layout,g=t.outerElementType,v=t.outerTagName,S=t.style,I=t.useIsScrolling,w=t.width,M=this.state.isScrolling,x="horizontal"===i||"horizontal"===p,_=x?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),R=C[0],T=C[1],O=[];if(u>0)for(var z=R;z<=T;z++)O.push(e.createElement(o,{data:d,key:m(z,d),index:z,isScrolling:I?M:void 0,style:this._getItemStyle(z)}));var b=f(this.props,this._instanceProps);return e.createElement(g||v||"div",{className:n,onScroll:_,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:w,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},S)},e.createElement(s||c||"div",{children:O,ref:l,style:{height:x?"100%":b,pointerEvents:M?"none":void 0,width:x?b:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var t=this._getRangeToRender(),e=t[0],r=t[1],o=t[2],n=t[3];this._callOnItemsRendered(e,r,o,n)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var t=this.props,e=t.itemCount,r=t.overscanCount,o=this.state,n=o.isScrolling,i=o.scrollDirection,a=o.scrollOffset;if(0===e)return[0,0,0,0];var l=p(this.props,a,this._instanceProps),s=g(this.props,l,a,this._instanceProps),c=n&&"backward"!==i?1:Math.max(1,r),u=n&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(e-1,s+u)),l,s]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}var O=function(t,e){t.children,t.direction,t.height,t.layout,t.innerTagName,t.outerTagName,t.width,e.instance},z=function(t,e,r){var o=t.itemSize,n=r.itemMetadataMap,i=r.lastMeasuredIndex;if(e>i){var a=0;if(i>=0){var l=n[i];a=l.offset+l.size}for(var s=i+1;s<=e;s++){var c=o(s);n[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=e}return n[e]},b=function(t,e,r,o,n){for(;o<=r;){var i=o+Math.floor((r-o)/2),a=z(t,i,e).offset;if(a===n)return i;a<n?o=i+1:a>n&&(r=i-1)}return o>0?o-1:0},P=function(t,e,r,o){for(var n=t.itemCount,i=1;r<n&&z(t,r,e).offset<o;)r+=i,i*=2;return b(t,e,Math.min(r,n-1),Math.floor(r/2),o)},W=function(t,e){var r=t.itemCount,o=e.itemMetadataMap,n=e.estimatedItemSize,i=e.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},D=T({getItemOffset:function(t,e,r){return z(t,e,r).offset},getItemSize:function(t,e,r){return r.itemMetadataMap[e].size},getEstimatedTotalSize:W,getOffsetForIndexAndAlignment:function(t,e,r,o,n){var i=t.direction,a=t.height,l=t.layout,s=t.width,c="horizontal"===i||"horizontal"===l?s:a,u=z(t,e,n),f=W(t,n),d=Math.max(0,Math.min(f-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=o>=h-c&&o<=d+c?"auto":"center"),r){case"start":return d;case"end":return h;case"center":return Math.round(h+(d-h)/2);case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e,r){return function(t,e,r){var o=e.itemMetadataMap,n=e.lastMeasuredIndex;return(n>0?o[n].offset:0)>=r?b(t,e,n,0,r):P(t,e,Math.max(0,n),r)}(t,r,e)},getStopIndexForStartIndex:function(t,e,r,o){for(var n=t.direction,i=t.height,a=t.itemCount,l=t.layout,s=t.width,c="horizontal"===n||"horizontal"===l?s:i,u=z(t,e,o),f=r+c,d=u.offset+u.size,h=e;h<a-1&&d<f;)d+=z(t,++h,o).size;return h},initInstanceProps:function(t,e){var r={itemMetadataMap:{},estimatedItemSize:t.estimatedItemSize||50,lastMeasuredIndex:-1};return e.resetAfterIndex=function(t,o){void 0===o&&(o=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,t-1),e._getItemStyleCache(-1),o&&e.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.itemSize}}),F=p({getColumnOffset:function(t,e){return e*t.columnWidth},getColumnWidth:function(t,e){return t.columnWidth},getRowOffset:function(t,e){return e*t.rowHeight},getRowHeight:function(t,e){return t.rowHeight},getEstimatedTotalHeight:function(t){var e=t.rowCount;return t.rowHeight*e},getEstimatedTotalWidth:function(t){var e=t.columnCount;return t.columnWidth*e},getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){var a=t.columnCount,l=t.columnWidth,s=t.width,c=Math.max(0,a*l-s),u=Math.min(c,e*l),f=Math.max(0,e*l-s+i+l);switch("smart"===r&&(r=o>=f-s&&o<=u+s?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(s/2)?0:d>c+Math.floor(s/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){var a=t.rowHeight,l=t.height,s=t.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,e*a),f=Math.max(0,e*a-l+i+a);switch("smart"===r&&(r=o>=f-l&&o<=u+l?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(l/2)?0:d>c+Math.floor(l/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getColumnStartIndexForOffset:function(t,e){var r=t.columnWidth,o=t.columnCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getColumnStopIndexForStartIndex:function(t,e,r){var o=t.columnWidth,n=t.columnCount,i=t.width,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},getRowStartIndexForOffset:function(t,e){var r=t.rowHeight,o=t.rowCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getRowStopIndexForStartIndex:function(t,e,r){var o=t.rowHeight,n=t.rowCount,i=t.height,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.columnWidth,t.rowHeight}}),L=T({getItemOffset:function(t,e){return e*t.itemSize},getItemSize:function(t,e){return t.itemSize},getEstimatedTotalSize:function(t){var e=t.itemCount;return t.itemSize*e},getOffsetForIndexAndAlignment:function(t,e,r,o){var n=t.direction,i=t.height,a=t.itemCount,l=t.itemSize,s=t.layout,c=t.width,u="horizontal"===n||"horizontal"===s?c:i,f=Math.max(0,a*l-u),d=Math.min(f,e*l),h=Math.max(0,e*l-u+l);switch("smart"===r&&(r=o>=h-u&&o<=d+u?"auto":"center"),r){case"start":return d;case"end":return h;case"center":var m=Math.round(h+(d-h)/2);return m<Math.ceil(u/2)?0:m>f+Math.floor(u/2)?f:m;case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e){var r=t.itemCount,o=t.itemSize;return Math.max(0,Math.min(r-1,Math.floor(e/o)))},getStopIndexForStartIndex:function(t,e,r){var o=t.direction,n=t.height,i=t.itemCount,a=t.itemSize,l=t.layout,s=t.width,c=e*a,u="horizontal"===o||"horizontal"===l?s:n,f=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,e+f-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.itemSize}});function A(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}function H(t,e){for(var r in t)if(!(r in e))return!0;for(var o in e)if(t[o]!==e[o])return!0;return!1}function k(t,e){var r=t.style,o=A(t,["style"]),n=e.style,i=A(e,["style"]);return!H(r,n)&&!H(o,i)}t.VariableSizeGrid=C,t.VariableSizeList=D,t.FixedSizeGrid=F,t.FixedSizeList=L,t.areEqual=k,t.shouldComponentUpdate=function(t,e){return!k(this.props,t)||H(this.state,e)},Object.defineProperty(t,"__esModule",{value:!0})});
+//# sourceMappingURL=index-prod.umd.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js
new file mode 100644
index 0000000000000..83875b5ee0193
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js
@@ -0,0 +1,2079 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
+var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
+var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
+var memoizeOne = _interopDefault(require('memoize-one'));
+var react = require('react');
+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+var now = hasNativePerformanceNow ? function () {
+  return performance.now();
+} : function () {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+
+var size = -1; // This utility copied from "dom-helpers" package.
+
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (size === -1 || recalculate) {
+    var div = document.createElement('div');
+    var style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return size;
+}
+var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+var defaultItemKey = function defaultItemKey(_ref) {
+  var columnIndex = _ref.columnIndex,
+      data = _ref.data,
+      rowIndex = _ref.rowIndex;
+  return rowIndex + ":" + columnIndex;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
+var devWarningsTagName = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsOverscanRowsColumnsCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createGridComponent(_ref2) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref2.getColumnOffset,
+      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref2.getColumnWidth,
+      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
+      getRowHeight = _ref2.getRowHeight,
+      getRowOffset = _ref2.getRowOffset,
+      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref2.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref2.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(Grid, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function Grid(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
+        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
+        scrollUpdateWasRequested: false,
+        verticalScrollDirection: 'forward'
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanColumnStartIndex: overscanColumnStartIndex,
+          overscanColumnStopIndex: overscanColumnStopIndex,
+          overscanRowStartIndex: overscanRowStartIndex,
+          overscanRowStopIndex: overscanRowStopIndex,
+          visibleColumnStartIndex: visibleColumnStartIndex,
+          visibleColumnStopIndex: visibleColumnStopIndex,
+          visibleRowStartIndex: visibleRowStartIndex,
+          visibleRowStopIndex: visibleRowStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (rowIndex, columnIndex) {
+        var _this$props = _this.props,
+            columnWidth = _this$props.columnWidth,
+            direction = _this$props.direction,
+            rowHeight = _this$props.rowHeight;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+
+        var key = rowIndex + ":" + columnIndex;
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(key)) {
+          style = itemStyleCache[key];
+        } else {
+          var _style;
+
+          itemStyleCache[key] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientHeight = _event$currentTarget.clientHeight,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop,
+            scrollHeight = _event$currentTarget.scrollHeight,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+
+          var calculatedScrollLeft = scrollLeft;
+
+          if (direction === 'rtl') {
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                calculatedScrollLeft = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+          calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
+          var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: calculatedScrollLeft,
+            scrollTop: calculatedScrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1);
+        });
+      };
+
+      return _this;
+    }
+
+    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = Grid.prototype;
+
+    _proto.scrollTo = function scrollTo(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+          scrollTop = _ref3.scrollTop;
+
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(function (prevState) {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(_ref4) {
+      var _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
+      var _this$props2 = this.props,
+          columnCount = _this$props2.columnCount,
+          height = _this$props2.height,
+          rowCount = _this$props2.rowCount,
+          width = _this$props2.width;
+      var _this$state = this.state,
+          scrollLeft = _this$state.scrollLeft,
+          scrollTop = _this$state.scrollTop;
+      var scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+
+      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      this.scrollTo({
+        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
+        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
+      });
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props,
+          initialScrollLeft = _this$props3.initialScrollLeft,
+          initialScrollTop = _this$props3.initialScrollTop;
+
+      if (this._outerRef != null) {
+        var outerRef = this._outerRef;
+
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var direction = this.props.direction;
+      var _this$state2 = this.state,
+          scrollLeft = _this$state2.scrollLeft,
+          scrollTop = _this$state2.scrollTop,
+          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        var outerRef = this._outerRef;
+
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          columnCount = _this$props4.columnCount,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          rowCount = _this$props4.rowCount,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling;
+
+      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
+          columnStartIndex = _this$_getHorizontalR[0],
+          columnStopIndex = _this$_getHorizontalR[1];
+
+      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
+          rowStartIndex = _this$_getVerticalRan[0],
+          rowStopIndex = _this$_getVerticalRan[1];
+
+      var items = [];
+
+      if (columnCount > 0 && rowCount) {
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            items.push(react.createElement(children, {
+              columnIndex: _columnIndex,
+              data: itemData,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              key: itemKey({
+                columnIndex: _columnIndex,
+                data: itemData,
+                rowIndex: _rowIndex
+              }),
+              rowIndex: _rowIndex,
+              style: this._getItemStyle(_rowIndex, _columnIndex)
+            }));
+          }
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      return react.createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: this._onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, react.createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: estimatedTotalHeight,
+          pointerEvents: isScrolling ? 'none' : undefined,
+          width: estimatedTotalWidth
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      var _this$props5 = this.props,
+          columnCount = _this$props5.columnCount,
+          onItemsRendered = _this$props5.onItemsRendered,
+          onScroll = _this$props5.onScroll,
+          rowCount = _this$props5.rowCount;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
+              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
+              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
+              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
+              _visibleColumnStopIndex = _this$_getHorizontalR2[3];
+
+          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
+              _overscanRowStartIndex = _this$_getVerticalRan2[0],
+              _overscanRowStopIndex = _this$_getVerticalRan2[1],
+              _visibleRowStartIndex = _this$_getVerticalRan2[2],
+              _visibleRowStopIndex = _this$_getVerticalRan2[3];
+
+          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        var _this$state3 = this.state,
+            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
+            _scrollLeft = _this$state3.scrollLeft,
+            _scrollTop = _this$state3.scrollTop,
+            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
+            _verticalScrollDirection = _this$state3.verticalScrollDirection;
+
+        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
+      var _this$props6 = this.props,
+          columnCount = _this$props6.columnCount,
+          overscanColumnCount = _this$props6.overscanColumnCount,
+          overscanColumnsCount = _this$props6.overscanColumnsCount,
+          overscanCount = _this$props6.overscanCount,
+          rowCount = _this$props6.rowCount;
+      var _this$state4 = this.state,
+          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
+          isScrolling = _this$state4.isScrolling,
+          scrollLeft = _this$state4.scrollLeft;
+      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
+      var _this$props7 = this.props,
+          columnCount = _this$props7.columnCount,
+          overscanCount = _this$props7.overscanCount,
+          overscanRowCount = _this$props7.overscanRowCount,
+          overscanRowsCount = _this$props7.overscanRowsCount,
+          rowCount = _this$props7.rowCount;
+      var _this$state5 = this.state,
+          isScrolling = _this$state5.isScrolling,
+          verticalScrollDirection = _this$state5.verticalScrollDirection,
+          scrollTop = _this$state5.scrollTop;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return Grid;
+  }(react.PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
+  var children = _ref5.children,
+      direction = _ref5.direction,
+      height = _ref5.height,
+      innerTagName = _ref5.innerTagName,
+      outerTagName = _ref5.outerTagName,
+      overscanColumnsCount = _ref5.overscanColumnsCount,
+      overscanCount = _ref5.overscanCount,
+      overscanRowsCount = _ref5.overscanRowsCount,
+      width = _ref5.width;
+  var instance = _ref6.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
+      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
+  var rowCount = _ref.rowCount;
+  var rowMetadataMap = _ref2.rowMetadataMap,
+      estimatedRowHeight = _ref2.estimatedRowHeight,
+      lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
+  var columnCount = _ref3.columnCount;
+  var columnMetadataMap = _ref4.columnMetadataMap,
+      estimatedColumnWidth = _ref4.estimatedColumnWidth,
+      lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
+  var itemMetadataMap, itemSize, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = props.columnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = props.rowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
+  var itemMetadataMap, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
+  var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+  var size = itemType === 'column' ? props.width : props.height;
+  var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+
+  var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
+  var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+  var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+
+    case 'end':
+      return minOffset;
+
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+
+  }
+};
+
+var VariableSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getItemMetadata('column', props, index, instanceProps).offset;
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
+    return findNearestItem('column', props, instanceProps, scrollLeft);
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+    var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = scrollLeft + width;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+  getEstimatedTotalHeight: getEstimatedTotalHeight,
+  getEstimatedTotalWidth: getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getItemMetadata('row', props, index, instanceProps).offset;
+  },
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
+    return findNearestItem('row', props, instanceProps, scrollTop);
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+    var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = scrollTop + height;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        columnIndex: columnIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        rowIndex: rowIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterIndices = function (_ref6) {
+      var columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex,
+          _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
+          shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
+
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
+      }
+
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
+      } // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref7) {
+    var columnWidth = _ref7.columnWidth,
+        rowHeight = _ref7.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
+var defaultItemKey$1 = function defaultItemKey(index, data) {
+  return index;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName$1 =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createListComponent(_ref) {
+  var _class, _temp;
+
+  var getItemOffset = _ref.getItemOffset,
+      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
+      getItemSize = _ref.getItemSize,
+      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
+      getStartIndexForOffset = _ref.getStartIndexForOffset,
+      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(List, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function List(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        scrollDirection: 'forward',
+        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex: overscanStartIndex,
+          overscanStopIndex: overscanStopIndex,
+          visibleStartIndex: visibleStartIndex,
+          visibleStopIndex: visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection: scrollDirection,
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (index) {
+        var _this$props = _this.props,
+            direction = _this$props.direction,
+            itemSize = _this$props.itemSize,
+            layout = _this$props.layout;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(index)) {
+          style = itemStyleCache[index];
+        } else {
+          var _style;
+
+          var _offset = getItemOffset(_this.props, index, _this._instanceProps);
+
+          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
+
+          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+          itemStyleCache[index] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScrollHorizontal = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction;
+          var scrollOffset = scrollLeft;
+
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                scrollOffset = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+            scrollOffset: scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._onScrollVertical = function (event) {
+        var _event$currentTarget2 = event.currentTarget,
+            clientHeight = _event$currentTarget2.clientHeight,
+            scrollHeight = _event$currentTarget2.scrollHeight,
+            scrollTop = _event$currentTarget2.scrollTop;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+            scrollOffset: scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+
+      return _this;
+    }
+
+    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = List.prototype;
+
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function (prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(index, align) {
+      if (align === void 0) {
+        align = 'auto';
+      }
+
+      var itemCount = this.props.itemCount;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props2 = this.props,
+          direction = _this$props2.direction,
+          initialScrollOffset = _this$props2.initialScrollOffset,
+          layout = _this$props2.layout;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props3 = this.props,
+          direction = _this$props3.direction,
+          layout = _this$props3.layout;
+      var _this$state = this.state,
+          scrollOffset = _this$state.scrollOffset,
+          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+
+              default:
+                var clientWidth = outerRef.clientWidth,
+                    scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemCount = _this$props4.itemCount,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
+          layout = _this$props4.layout,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
+
+      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+
+      var _this$_getRangeToRend = this._getRangeToRender(),
+          startIndex = _this$_getRangeToRend[0],
+          stopIndex = _this$_getRangeToRend[1];
+
+      var items = [];
+
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(react.createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : undefined,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
+      return react.createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, react.createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? '100%' : estimatedTotalSize,
+          pointerEvents: isScrolling ? 'none' : undefined,
+          width: isHorizontal ? estimatedTotalSize : '100%'
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        var itemCount = this.props.itemCount;
+
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(),
+              _overscanStartIndex = _this$_getRangeToRend2[0],
+              _overscanStopIndex = _this$_getRangeToRend2[1],
+              _visibleStartIndex = _this$_getRangeToRend2[2],
+              _visibleStopIndex = _this$_getRangeToRend2[3];
+
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        var _this$state2 = this.state,
+            _scrollDirection = _this$state2.scrollDirection,
+            _scrollOffset = _this$state2.scrollOffset,
+            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props5 = this.props,
+          itemCount = _this$props5.itemCount,
+          overscanCount = _this$props5.overscanCount;
+      var _this$state3 = this.state,
+          isScrolling = _this$state3.isScrolling,
+          scrollDirection = _this$state3.scrollDirection,
+          scrollOffset = _this$state3.scrollOffset;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return List;
+  }(react.PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    layout: 'vertical',
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _temp;
+} // NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
+  var children = _ref2.children,
+      direction = _ref2.direction,
+      height = _ref2.height,
+      layout = _ref2.layout,
+      innerTagName = _ref2.innerTagName,
+      outerTagName = _ref2.outerTagName,
+      width = _ref2.width;
+  var instance = _ref3.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    } // TODO Deprecate direction "horizontal"
+
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+
+        break;
+
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
+
+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
+  var _ref = props,
+      itemSize = _ref.itemSize;
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
+  var itemCount = props.itemCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
+  var itemCount = _ref2.itemCount;
+  var itemMetadataMap = _ref3.itemMetadataMap,
+      estimatedItemSize = _ref3.estimatedItemSize,
+      lastMeasuredIndex = _ref3.lastMeasuredIndex;
+  var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+var VariableSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(props, index, instanceProps) {
+    return getItemMetadata$1(props, index, instanceProps).offset;
+  },
+  getItemSize: function getItemSize(props, index, instanceProps) {
+    return instanceProps.itemMetadataMap[index].size;
+  },
+  getEstimatedTotalSize: getEstimatedTotalSize,
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+
+    var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+    var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestItem$1(props, instanceProps, offset);
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        itemCount = props.itemCount,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
+    var maxOffset = scrollOffset + size;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref4 = props,
+        estimatedItemSize = _ref4.estimatedItemSize;
+    var instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
+      lastMeasuredIndex: -1
+    };
+
+    instance.resetAfterIndex = function (index, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref5) {
+    var itemSize = _ref5.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(_ref, index) {
+    var columnWidth = _ref.columnWidth;
+    return index * columnWidth;
+  },
+  getColumnWidth: function getColumnWidth(_ref2, index) {
+    var columnWidth = _ref2.columnWidth;
+    return columnWidth;
+  },
+  getRowOffset: function getRowOffset(_ref3, index) {
+    var rowHeight = _ref3.rowHeight;
+    return index * rowHeight;
+  },
+  getRowHeight: function getRowHeight(_ref4, index) {
+    var rowHeight = _ref4.rowHeight;
+    return rowHeight;
+  },
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
+    var rowCount = _ref5.rowCount,
+        rowHeight = _ref5.rowHeight;
+    return rowHeight * rowCount;
+  },
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
+    var columnCount = _ref6.columnCount,
+        columnWidth = _ref6.columnWidth;
+    return columnWidth * columnCount;
+  },
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
+    var columnCount = _ref7.columnCount,
+        columnWidth = _ref7.columnWidth,
+        width = _ref7.width;
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
+    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
+    var rowHeight = _ref8.rowHeight,
+        height = _ref8.height,
+        rowCount = _ref8.rowCount;
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
+    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
+    var columnWidth = _ref9.columnWidth,
+        columnCount = _ref9.columnCount;
+    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
+    var columnWidth = _ref10.columnWidth,
+        columnCount = _ref10.columnCount,
+        width = _ref10.width;
+    var left = startIndex * columnWidth;
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
+    var rowHeight = _ref11.rowHeight,
+        rowCount = _ref11.rowCount;
+    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
+    var rowHeight = _ref12.rowHeight,
+        rowCount = _ref12.rowCount,
+        height = _ref12.height;
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref13) {
+    var columnWidth = _ref13.columnWidth,
+        rowHeight = _ref13.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(_ref, index) {
+    var itemSize = _ref.itemSize;
+    return index * itemSize;
+  },
+  getItemSize: function getItemSize(_ref2, index) {
+    var itemSize = _ref2.itemSize;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
+    var itemCount = _ref3.itemCount,
+        itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
+    var direction = _ref4.direction,
+        height = _ref4.height,
+        itemCount = _ref4.itemCount,
+        itemSize = _ref4.itemSize,
+        layout = _ref4.layout,
+        width = _ref4.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
+    var maxOffset = Math.min(lastItemOffset, index * itemSize);
+    var minOffset = Math.max(0, index * itemSize - size + itemSize);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        {
+          // "Centered" offset is usually the average of the min and max.
+          // But near the edges of the list, this doesn't hold true.
+          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+          if (middleOffset < Math.ceil(size / 2)) {
+            return 0; // near the beginning
+          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+            return lastItemOffset; // near the end
+          } else {
+            return middleOffset;
+          }
+        }
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
+    var itemCount = _ref5.itemCount,
+        itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction,
+        height = _ref6.height,
+        itemCount = _ref6.itemCount,
+        itemSize = _ref6.itemSize,
+        layout = _ref6.layout,
+        width = _ref6.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var offset = startIndex * itemSize;
+    var size = isHorizontal ? width : height;
+    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref7) {
+    var itemSize = _ref7.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+function shallowDiffers(prev, next) {
+  for (var attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+
+  for (var _attribute in next) {
+    if (prev[_attribute] !== next[_attribute]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+
+function areEqual(prevProps, nextProps) {
+  var prevStyle = prevProps.style,
+      prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
+
+  var nextStyle = nextProps.style,
+      nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
+
+  return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+
+function shouldComponentUpdate(nextProps, nextState) {
+  return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
+}
+
+exports.VariableSizeGrid = VariableSizeGrid;
+exports.VariableSizeList = VariableSizeList;
+exports.FixedSizeGrid = FixedSizeGrid;
+exports.FixedSizeList = FixedSizeList;
+exports.areEqual = areEqual;
+exports.shouldComponentUpdate = shouldComponentUpdate;
+//# sourceMappingURL=index.cjs.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow
new file mode 100644
index 0000000000000..6a6528bbe5384
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow
@@ -0,0 +1,3 @@
+// @flow
+
+export * from '../src';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js
new file mode 100644
index 0000000000000..fed3a77c2cdce
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js
@@ -0,0 +1,2078 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
+import memoizeOne from 'memoize-one';
+import { createElement, PureComponent } from 'react';
+import { flushSync } from 'react-dom';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+var now = hasNativePerformanceNow ? function () {
+  return performance.now();
+} : function () {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+
+var size = -1; // This utility copied from "dom-helpers" package.
+
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (size === -1 || recalculate) {
+    var div = document.createElement('div');
+    var style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return size;
+}
+var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+var defaultItemKey = function defaultItemKey(_ref) {
+  var columnIndex = _ref.columnIndex,
+      data = _ref.data,
+      rowIndex = _ref.rowIndex;
+  return rowIndex + ":" + columnIndex;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
+var devWarningsTagName = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsOverscanRowsColumnsCount =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createGridComponent(_ref2) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref2.getColumnOffset,
+      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref2.getColumnWidth,
+      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
+      getRowHeight = _ref2.getRowHeight,
+      getRowOffset = _ref2.getRowOffset,
+      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref2.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref2.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(Grid, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function Grid(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
+        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
+        scrollUpdateWasRequested: false,
+        verticalScrollDirection: 'forward'
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanColumnStartIndex: overscanColumnStartIndex,
+          overscanColumnStopIndex: overscanColumnStopIndex,
+          overscanRowStartIndex: overscanRowStartIndex,
+          overscanRowStopIndex: overscanRowStopIndex,
+          visibleColumnStartIndex: visibleColumnStartIndex,
+          visibleColumnStopIndex: visibleColumnStopIndex,
+          visibleRowStartIndex: visibleRowStartIndex,
+          visibleRowStopIndex: visibleRowStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (rowIndex, columnIndex) {
+        var _this$props = _this.props,
+            columnWidth = _this$props.columnWidth,
+            direction = _this$props.direction,
+            rowHeight = _this$props.rowHeight;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+
+        var key = rowIndex + ":" + columnIndex;
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(key)) {
+          style = itemStyleCache[key];
+        } else {
+          var _style;
+
+          itemStyleCache[key] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientHeight = _event$currentTarget.clientHeight,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop,
+            scrollHeight = _event$currentTarget.scrollHeight,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            }
+
+            var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+
+            var calculatedScrollLeft = scrollLeft;
+
+            if (direction === 'rtl') {
+              switch (getRTLOffsetType()) {
+                case 'negative':
+                  calculatedScrollLeft = -scrollLeft;
+                  break;
+
+                case 'positive-descending':
+                  calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                  break;
+              }
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+            calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
+            var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+            return {
+              isScrolling: true,
+              horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+              scrollLeft: calculatedScrollLeft,
+              scrollTop: calculatedScrollTop,
+              verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1);
+        });
+      };
+
+      return _this;
+    }
+
+    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = Grid.prototype;
+
+    _proto.scrollTo = function scrollTo(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+          scrollTop = _ref3.scrollTop;
+
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(function (prevState) {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(_ref4) {
+      var _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
+      var _this$props2 = this.props,
+          columnCount = _this$props2.columnCount,
+          height = _this$props2.height,
+          rowCount = _this$props2.rowCount,
+          width = _this$props2.width;
+      var _this$state = this.state,
+          scrollLeft = _this$state.scrollLeft,
+          scrollTop = _this$state.scrollTop;
+      var scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+
+      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      this.scrollTo({
+        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
+        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
+      });
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props,
+          initialScrollLeft = _this$props3.initialScrollLeft,
+          initialScrollTop = _this$props3.initialScrollTop;
+
+      if (this._outerRef != null) {
+        var outerRef = this._outerRef;
+
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var direction = this.props.direction;
+      var _this$state2 = this.state,
+          scrollLeft = _this$state2.scrollLeft,
+          scrollTop = _this$state2.scrollTop,
+          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        var outerRef = this._outerRef;
+
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          columnCount = _this$props4.columnCount,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          rowCount = _this$props4.rowCount,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling;
+
+      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
+          columnStartIndex = _this$_getHorizontalR[0],
+          columnStopIndex = _this$_getHorizontalR[1];
+
+      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
+          rowStartIndex = _this$_getVerticalRan[0],
+          rowStopIndex = _this$_getVerticalRan[1];
+
+      var items = [];
+
+      if (columnCount > 0 && rowCount) {
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            items.push(createElement(children, {
+              columnIndex: _columnIndex,
+              data: itemData,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              key: itemKey({
+                columnIndex: _columnIndex,
+                data: itemData,
+                rowIndex: _rowIndex
+              }),
+              rowIndex: _rowIndex,
+              style: this._getItemStyle(_rowIndex, _columnIndex)
+            }));
+          }
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: this._onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: estimatedTotalHeight,
+          pointerEvents: isScrolling ? 'none' : undefined,
+          width: estimatedTotalWidth
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      var _this$props5 = this.props,
+          columnCount = _this$props5.columnCount,
+          onItemsRendered = _this$props5.onItemsRendered,
+          onScroll = _this$props5.onScroll,
+          rowCount = _this$props5.rowCount;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
+              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
+              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
+              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
+              _visibleColumnStopIndex = _this$_getHorizontalR2[3];
+
+          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
+              _overscanRowStartIndex = _this$_getVerticalRan2[0],
+              _overscanRowStopIndex = _this$_getVerticalRan2[1],
+              _visibleRowStartIndex = _this$_getVerticalRan2[2],
+              _visibleRowStopIndex = _this$_getVerticalRan2[3];
+
+          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        var _this$state3 = this.state,
+            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
+            _scrollLeft = _this$state3.scrollLeft,
+            _scrollTop = _this$state3.scrollTop,
+            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
+            _verticalScrollDirection = _this$state3.verticalScrollDirection;
+
+        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
+      var _this$props6 = this.props,
+          columnCount = _this$props6.columnCount,
+          overscanColumnCount = _this$props6.overscanColumnCount,
+          overscanColumnsCount = _this$props6.overscanColumnsCount,
+          overscanCount = _this$props6.overscanCount,
+          rowCount = _this$props6.rowCount;
+      var _this$state4 = this.state,
+          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
+          isScrolling = _this$state4.isScrolling,
+          scrollLeft = _this$state4.scrollLeft;
+      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
+      var _this$props7 = this.props,
+          columnCount = _this$props7.columnCount,
+          overscanCount = _this$props7.overscanCount,
+          overscanRowCount = _this$props7.overscanRowCount,
+          overscanRowsCount = _this$props7.overscanRowsCount,
+          rowCount = _this$props7.rowCount;
+      var _this$state5 = this.state,
+          isScrolling = _this$state5.isScrolling,
+          verticalScrollDirection = _this$state5.verticalScrollDirection,
+          scrollTop = _this$state5.scrollTop;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return Grid;
+  }(PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
+  var children = _ref5.children,
+      direction = _ref5.direction,
+      height = _ref5.height,
+      innerTagName = _ref5.innerTagName,
+      outerTagName = _ref5.outerTagName,
+      overscanColumnsCount = _ref5.overscanColumnsCount,
+      overscanCount = _ref5.overscanCount,
+      overscanRowsCount = _ref5.overscanRowsCount,
+      width = _ref5.width;
+  var instance = _ref6.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
+      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
+  var rowCount = _ref.rowCount;
+  var rowMetadataMap = _ref2.rowMetadataMap,
+      estimatedRowHeight = _ref2.estimatedRowHeight,
+      lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
+  var columnCount = _ref3.columnCount;
+  var columnMetadataMap = _ref4.columnMetadataMap,
+      estimatedColumnWidth = _ref4.estimatedColumnWidth,
+      lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+  var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
+  var itemMetadataMap, itemSize, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = props.columnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = props.rowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
+  var itemMetadataMap, lastMeasuredIndex;
+
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
+  var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+  var size = itemType === 'column' ? props.width : props.height;
+  var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+
+  var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
+  var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+  var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+
+    case 'end':
+      return minOffset;
+
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+
+  }
+};
+
+var VariableSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getItemMetadata('column', props, index, instanceProps).offset;
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
+    return findNearestItem('column', props, instanceProps, scrollLeft);
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+    var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = scrollLeft + width;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+  getEstimatedTotalHeight: getEstimatedTotalHeight,
+  getEstimatedTotalWidth: getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
+  },
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getItemMetadata('row', props, index, instanceProps).offset;
+  },
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
+    return findNearestItem('row', props, instanceProps, scrollTop);
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+    var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = scrollTop + height;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        columnIndex: columnIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instance.resetAfterIndices({
+        rowIndex: rowIndex,
+        shouldForceUpdate: shouldForceUpdate
+      });
+    };
+
+    instance.resetAfterIndices = function (_ref6) {
+      var columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex,
+          _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
+          shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
+
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
+      }
+
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
+      } // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref7) {
+    var columnWidth = _ref7.columnWidth,
+        rowHeight = _ref7.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
+var defaultItemKey$1 = function defaultItemKey(index, data) {
+  return index;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection =
+    /*#__PURE__*/
+    new WeakSet();
+    devWarningsTagName$1 =
+    /*#__PURE__*/
+    new WeakSet();
+  }
+}
+
+function createListComponent(_ref) {
+  var _class, _temp;
+
+  var getItemOffset = _ref.getItemOffset,
+      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
+      getItemSize = _ref.getItemSize,
+      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
+      getStartIndexForOffset = _ref.getStartIndexForOffset,
+      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref.validateProps;
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(List, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function List(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        isScrolling: false,
+        scrollDirection: 'forward',
+        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex: overscanStartIndex,
+          overscanStopIndex: overscanStopIndex,
+          visibleStartIndex: visibleStartIndex,
+          visibleStopIndex: visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection: scrollDirection,
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (index) {
+        var _this$props = _this.props,
+            direction = _this$props.direction,
+            itemSize = _this$props.itemSize,
+            layout = _this$props.layout;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(index)) {
+          style = itemStyleCache[index];
+        } else {
+          var _style;
+
+          var _offset = getItemOffset(_this.props, index, _this._instanceProps);
+
+          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
+
+          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+          itemStyleCache[index] = style = (_style = {
+            position: 'absolute'
+          }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScrollHorizontal = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollOffset === scrollLeft) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            }
+
+            var direction = _this.props.direction;
+            var scrollOffset = scrollLeft;
+
+            if (direction === 'rtl') {
+              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+              // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+              // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+              switch (getRTLOffsetType()) {
+                case 'negative':
+                  scrollOffset = -scrollLeft;
+                  break;
+
+                case 'positive-descending':
+                  scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                  break;
+              }
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+            scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+            return {
+              isScrolling: true,
+              scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+              scrollOffset: scrollOffset,
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
+      };
+
+      _this._onScrollVertical = function (event) {
+        var _event$currentTarget2 = event.currentTarget,
+            clientHeight = _event$currentTarget2.clientHeight,
+            scrollHeight = _event$currentTarget2.scrollHeight,
+            scrollTop = _event$currentTarget2.scrollTop;
+
+        // Force flush sync for scroll updates to reduce visual checkerboarding.
+        flushSync(() => {
+          _this.setState(function (prevState) {
+            if (prevState.scrollOffset === scrollTop) {
+              // Scroll position may have been updated by cDM/cDU,
+              // In which case we don't need to trigger another render,
+              // And we don't want to update state.isScrolling.
+              return null;
+            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+            var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+            return {
+              isScrolling: true,
+              scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+              scrollOffset: scrollOffset,
+              scrollUpdateWasRequested: false
+            };
+          }, _this._resetIsScrollingDebounced);
+        });
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+
+      return _this;
+    }
+
+    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = List.prototype;
+
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function (prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(index, align) {
+      if (align === void 0) {
+        align = 'auto';
+      }
+
+      var itemCount = this.props.itemCount;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props2 = this.props,
+          direction = _this$props2.direction,
+          initialScrollOffset = _this$props2.initialScrollOffset,
+          layout = _this$props2.layout;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props3 = this.props,
+          direction = _this$props3.direction,
+          layout = _this$props3.layout;
+      var _this$state = this.state,
+          scrollOffset = _this$state.scrollOffset,
+          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
+
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+
+              default:
+                var clientWidth = outerRef.clientWidth,
+                    scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemCount = _this$props4.itemCount,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
+          layout = _this$props4.layout,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
+
+      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+
+      var _this$_getRangeToRend = this._getRangeToRender(),
+          startIndex = _this$_getRangeToRend[0],
+          stopIndex = _this$_getRangeToRend[1];
+
+      var items = [];
+
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : undefined,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? '100%' : estimatedTotalSize,
+          pointerEvents: isScrolling ? 'none' : undefined,
+          width: isHorizontal ? estimatedTotalSize : '100%'
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        var itemCount = this.props.itemCount;
+
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(),
+              _overscanStartIndex = _this$_getRangeToRend2[0],
+              _overscanStopIndex = _this$_getRangeToRend2[1],
+              _visibleStartIndex = _this$_getRangeToRend2[2],
+              _visibleStopIndex = _this$_getRangeToRend2[3];
+
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        var _this$state2 = this.state,
+            _scrollDirection = _this$state2.scrollDirection,
+            _scrollOffset = _this$state2.scrollOffset,
+            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    }; // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+
+
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props5 = this.props,
+          itemCount = _this$props5.itemCount,
+          overscanCount = _this$props5.overscanCount;
+      var _this$state3 = this.state,
+          isScrolling = _this$state3.isScrolling,
+          scrollDirection = _this$state3.scrollDirection,
+          scrollOffset = _this$state3.scrollOffset;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return List;
+  }(PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    layout: 'vertical',
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _temp;
+} // NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
+  var children = _ref2.children,
+      direction = _ref2.direction,
+      height = _ref2.height,
+      layout = _ref2.layout,
+      innerTagName = _ref2.innerTagName,
+      outerTagName = _ref2.outerTagName,
+      width = _ref2.width;
+  var instance = _ref3.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    } // TODO Deprecate direction "horizontal"
+
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+
+        break;
+
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
+
+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
+  var _ref = props,
+      itemSize = _ref.itemSize;
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+
+  if (index > lastMeasuredIndex) {
+    var offset = 0;
+
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var size = itemSize(i);
+      itemMetadataMap[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
+  var itemMetadataMap = instanceProps.itemMetadataMap,
+      lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
+  }
+};
+
+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
+  var itemCount = props.itemCount;
+  var interval = 1;
+
+  while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
+};
+
+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
+  var itemCount = _ref2.itemCount;
+  var itemMetadataMap = _ref3.itemMetadataMap,
+      estimatedItemSize = _ref3.estimatedItemSize,
+      lastMeasuredIndex = _ref3.lastMeasuredIndex;
+  var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+var VariableSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(props, index, instanceProps) {
+    return getItemMetadata$1(props, index, instanceProps).offset;
+  },
+  getItemSize: function getItemSize(props, index, instanceProps) {
+    return instanceProps.itemMetadataMap[index].size;
+  },
+  getEstimatedTotalSize: getEstimatedTotalSize,
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+
+    var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+    var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestItem$1(props, instanceProps, offset);
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
+    var direction = props.direction,
+        height = props.height,
+        itemCount = props.itemCount,
+        layout = props.layout,
+        width = props.width; // TODO Deprecate direction "horizontal"
+
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
+    var maxOffset = scrollOffset + size;
+    var offset = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref4 = props,
+        estimatedItemSize = _ref4.estimatedItemSize;
+    var instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
+      lastMeasuredIndex: -1
+    };
+
+    instance.resetAfterIndex = function (index, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+
+      instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps(_ref5) {
+    var itemSize = _ref5.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeGrid =
+/*#__PURE__*/
+createGridComponent({
+  getColumnOffset: function getColumnOffset(_ref, index) {
+    var columnWidth = _ref.columnWidth;
+    return index * columnWidth;
+  },
+  getColumnWidth: function getColumnWidth(_ref2, index) {
+    var columnWidth = _ref2.columnWidth;
+    return columnWidth;
+  },
+  getRowOffset: function getRowOffset(_ref3, index) {
+    var rowHeight = _ref3.rowHeight;
+    return index * rowHeight;
+  },
+  getRowHeight: function getRowHeight(_ref4, index) {
+    var rowHeight = _ref4.rowHeight;
+    return rowHeight;
+  },
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
+    var rowCount = _ref5.rowCount,
+        rowHeight = _ref5.rowHeight;
+    return rowHeight * rowCount;
+  },
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
+    var columnCount = _ref6.columnCount,
+        columnWidth = _ref6.columnWidth;
+    return columnWidth * columnCount;
+  },
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
+    var columnCount = _ref7.columnCount,
+        columnWidth = _ref7.columnWidth,
+        width = _ref7.width;
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
+    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
+    var rowHeight = _ref8.rowHeight,
+        height = _ref8.height,
+        rowCount = _ref8.rowCount;
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
+    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
+    var columnWidth = _ref9.columnWidth,
+        columnCount = _ref9.columnCount;
+    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
+    var columnWidth = _ref10.columnWidth,
+        columnCount = _ref10.columnCount,
+        width = _ref10.width;
+    var left = startIndex * columnWidth;
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
+    var rowHeight = _ref11.rowHeight,
+        rowCount = _ref11.rowCount;
+    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
+    var rowHeight = _ref12.rowHeight,
+        rowCount = _ref12.rowCount,
+        height = _ref12.height;
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref13) {
+    var columnWidth = _ref13.columnWidth,
+        rowHeight = _ref13.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var FixedSizeList =
+/*#__PURE__*/
+createListComponent({
+  getItemOffset: function getItemOffset(_ref, index) {
+    var itemSize = _ref.itemSize;
+    return index * itemSize;
+  },
+  getItemSize: function getItemSize(_ref2, index) {
+    var itemSize = _ref2.itemSize;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
+    var itemCount = _ref3.itemCount,
+        itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
+    var direction = _ref4.direction,
+        height = _ref4.height,
+        itemCount = _ref4.itemCount,
+        itemSize = _ref4.itemSize,
+        layout = _ref4.layout,
+        width = _ref4.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var size = isHorizontal ? width : height;
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
+    var maxOffset = Math.min(lastItemOffset, index * itemSize);
+    var minOffset = Math.max(0, index * itemSize - size + itemSize);
+
+    if (align === 'smart') {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        {
+          // "Centered" offset is usually the average of the min and max.
+          // But near the edges of the list, this doesn't hold true.
+          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+          if (middleOffset < Math.ceil(size / 2)) {
+            return 0; // near the beginning
+          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+            return lastItemOffset; // near the end
+          } else {
+            return middleOffset;
+          }
+        }
+
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
+    var itemCount = _ref5.itemCount,
+        itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction,
+        height = _ref6.height,
+        itemCount = _ref6.itemCount,
+        itemSize = _ref6.itemSize,
+        layout = _ref6.layout,
+        width = _ref6.width;
+    // TODO Deprecate direction "horizontal"
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    var offset = startIndex * itemSize;
+    var size = isHorizontal ? width : height;
+    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref7) {
+    var itemSize = _ref7.itemSize;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
+      }
+    }
+  }
+});
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+function shallowDiffers(prev, next) {
+  for (var attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+
+  for (var _attribute in next) {
+    if (prev[_attribute] !== next[_attribute]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+
+function areEqual(prevProps, nextProps) {
+  var prevStyle = prevProps.style,
+      prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
+
+  var nextStyle = nextProps.style,
+      nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
+
+  return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+}
+
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+
+function shouldComponentUpdate(nextProps, nextState) {
+  return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
+}
+
+export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
+//# sourceMappingURL=index.esm.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow
new file mode 100644
index 0000000000000..6a6528bbe5384
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow
@@ -0,0 +1,3 @@
+// @flow
+
+export * from '../src';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/package.json b/packages/react-devtools-shared/src/node_modules/react-window/package.json
new file mode 100644
index 0000000000000..d10a25a04ffdc
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/package.json
@@ -0,0 +1,110 @@
+{
+  "name": "react-window",
+  "version": "1.8.5",
+  "description":
+    "React components for efficiently rendering large, scrollable lists and tabular data",
+  "author":
+    "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
+  "contributors": [
+    "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)"
+  ],
+  "license": "MIT",
+  "homepage": "http://react-window.now.sh/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bvaughn/react-window.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bvaughn/react-window/issues"
+  },
+  "engines": {
+    "node": ">8.0.0"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "virtual",
+    "window",
+    "windowed",
+    "list",
+    "scrolling",
+    "infinite",
+    "virtualized",
+    "table",
+    "grid",
+    "spreadsheet"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "files": ["dist", "src/*.js"],
+  "scripts": {
+    "flow": "flow check --max-warnings=0 src && flow check website",
+    "precommit": "lint-staged",
+    "prettier": "prettier --write '**/*.{js,json,css}'",
+    "linc": "lint-staged",
+    "lint": "eslint '**/*.js'",
+    "test": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "build:flow":
+      "cp flow-template dist/index.cjs.js.flow && cp flow-template dist/index.esm.js.flow",
+    "build:source": "rollup -c",
+    "build": "del dist && mkdir dist && yarn build:flow && yarn build:source",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build",
+    "website:build": "cd website && yarn build",
+    "website:deploy": "cd website && yarn deploy",
+    "website:run": "cd website && yarn start"
+  },
+  "lint-staged": {
+    "{website,src}/**/*.{js,json,css}": ["prettier --write", "git add"],
+    "**/*.js": "eslint --max-warnings 0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "memoize-one": ">=3.1.1 <6"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-plugin-annotate-pure-calls": "^0.3.0",
+    "cross-env": "^5.1.4",
+    "del-cli": "^1.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-config-standard-react": "^6.0.0",
+    "eslint-plugin-flowtype": "^2.47.1",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^5",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "flow-bin": "^0.103.0",
+    "gh-pages": "^1.1.0",
+    "lint-staged": "^7.0.5",
+    "prettier": "^1.12.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-is": "^16.8.4",
+    "react-scripts": "^1.1.1",
+    "react-test-renderer": "^16.7.0",
+    "rollup": "^1.4.1",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.0"
+  }
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js
new file mode 100644
index 0000000000000..685ad33478205
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js
@@ -0,0 +1,244 @@
+// @flow
+
+import createGridComponent from './createGridComponent';
+
+import type { Props, ScrollToAlign } from './createGridComponent';
+
+const FixedSizeGrid = createGridComponent({
+  getColumnOffset: ({ columnWidth }: Props<any>, index: number): number =>
+    index * ((columnWidth: any): number),
+
+  getColumnWidth: ({ columnWidth }: Props<any>, index: number): number =>
+    ((columnWidth: any): number),
+
+  getRowOffset: ({ rowHeight }: Props<any>, index: number): number =>
+    index * ((rowHeight: any): number),
+
+  getRowHeight: ({ rowHeight }: Props<any>, index: number): number =>
+    ((rowHeight: any): number),
+
+  getEstimatedTotalHeight: ({ rowCount, rowHeight }: Props<any>) =>
+    ((rowHeight: any): number) * rowCount,
+
+  getEstimatedTotalWidth: ({ columnCount, columnWidth }: Props<any>) =>
+    ((columnWidth: any): number) * columnCount,
+
+  getOffsetForColumnAndAlignment: (
+    { columnCount, columnWidth, width }: Props<any>,
+    columnIndex: number,
+    align: ScrollToAlign,
+    scrollLeft: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
+  ): number => {
+    const lastColumnOffset = Math.max(
+      0,
+      columnCount * ((columnWidth: any): number) - width
+    );
+    const maxOffset = Math.min(
+      lastColumnOffset,
+      columnIndex * ((columnWidth: any): number)
+    );
+    const minOffset = Math.max(
+      0,
+      columnIndex * ((columnWidth: any): number) -
+        width +
+        scrollbarSize +
+        ((columnWidth: any): number)
+    );
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getOffsetForRowAndAlignment: (
+    { rowHeight, height, rowCount }: Props<any>,
+    rowIndex: number,
+    align: ScrollToAlign,
+    scrollTop: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
+  ): number => {
+    const lastRowOffset = Math.max(
+      0,
+      rowCount * ((rowHeight: any): number) - height
+    );
+    const maxOffset = Math.min(
+      lastRowOffset,
+      rowIndex * ((rowHeight: any): number)
+    );
+    const minOffset = Math.max(
+      0,
+      rowIndex * ((rowHeight: any): number) -
+        height +
+        scrollbarSize +
+        ((rowHeight: any): number)
+    );
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getColumnStartIndexForOffset: (
+    { columnWidth, columnCount }: Props<any>,
+    scrollLeft: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(
+        columnCount - 1,
+        Math.floor(scrollLeft / ((columnWidth: any): number))
+      )
+    ),
+
+  getColumnStopIndexForStartIndex: (
+    { columnWidth, columnCount, width }: Props<any>,
+    startIndex: number,
+    scrollLeft: number
+  ): number => {
+    const left = startIndex * ((columnWidth: any): number);
+    const numVisibleColumns = Math.ceil(
+      (width + scrollLeft - left) / ((columnWidth: any): number)
+    );
+    return Math.max(
+      0,
+      Math.min(
+        columnCount - 1,
+        startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+      )
+    );
+  },
+
+  getRowStartIndexForOffset: (
+    { rowHeight, rowCount }: Props<any>,
+    scrollTop: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(rowCount - 1, Math.floor(scrollTop / ((rowHeight: any): number)))
+    ),
+
+  getRowStopIndexForStartIndex: (
+    { rowHeight, rowCount, height }: Props<any>,
+    startIndex: number,
+    scrollTop: number
+  ): number => {
+    const top = startIndex * ((rowHeight: any): number);
+    const numVisibleRows = Math.ceil(
+      (height + scrollTop - top) / ((rowHeight: any): number)
+    );
+    return Math.max(
+      0,
+      Math.min(
+        rowCount - 1,
+        startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+      )
+    );
+  },
+
+  initInstanceProps(props: Props<any>): any {
+    // Noop
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: true,
+
+  validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error(
+          'An invalid "columnWidth" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${
+              columnWidth === null ? 'null' : typeof columnWidth
+            }" was specified.`
+        );
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error(
+          'An invalid "rowHeight" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default FixedSizeGrid;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js
new file mode 100644
index 0000000000000..0e0fc305bc301
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js
@@ -0,0 +1,130 @@
+// @flow
+
+import createListComponent from './createListComponent';
+
+import type { Props, ScrollToAlign } from './createListComponent';
+
+const FixedSizeList = createListComponent({
+  getItemOffset: ({ itemSize }: Props<any>, index: number): number =>
+    index * ((itemSize: any): number),
+
+  getItemSize: ({ itemSize }: Props<any>, index: number): number =>
+    ((itemSize: any): number),
+
+  getEstimatedTotalSize: ({ itemCount, itemSize }: Props<any>) =>
+    ((itemSize: any): number) * itemCount,
+
+  getOffsetForIndexAndAlignment: (
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number
+  ): number => {
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const lastItemOffset = Math.max(
+      0,
+      itemCount * ((itemSize: any): number) - size
+    );
+    const maxOffset = Math.min(
+      lastItemOffset,
+      index * ((itemSize: any): number)
+    );
+    const minOffset = Math.max(
+      0,
+      index * ((itemSize: any): number) - size + ((itemSize: any): number)
+    );
+
+    if (align === 'smart') {
+      if (
+        scrollOffset >= minOffset - size &&
+        scrollOffset <= maxOffset + size
+      ) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center': {
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(size / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+          return lastItemOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+      }
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getStartIndexForOffset: (
+    { itemCount, itemSize }: Props<any>,
+    offset: number
+  ): number =>
+    Math.max(
+      0,
+      Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
+    ),
+
+  getStopIndexForStartIndex: (
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
+    startIndex: number,
+    scrollOffset: number
+  ): number => {
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const offset = startIndex * ((itemSize: any): number);
+    const size = (((isHorizontal ? width : height): any): number);
+    const numVisibleItems = Math.ceil(
+      (size + scrollOffset - offset) / ((itemSize: any): number)
+    );
+    return Math.max(
+      0,
+      Math.min(
+        itemCount - 1,
+        startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+      )
+    );
+  },
+
+  initInstanceProps(props: Props<any>): any {
+    // Noop
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: true,
+
+  validateProps: ({ itemSize }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'number') {
+        throw Error(
+          'An invalid "itemSize" prop has been specified. ' +
+            'Value should be a number. ' +
+            `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default FixedSizeList;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
new file mode 100644
index 0000000000000..46d59521f1978
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
@@ -0,0 +1,507 @@
+// @flow
+
+import createGridComponent from './createGridComponent';
+
+import type { Props, ScrollToAlign } from './createGridComponent';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+type VariableSizeProps = {|
+  estimatedColumnWidth: number,
+  estimatedRowHeight: number,
+  ...Props<any>,
+|};
+
+type itemSizeGetter = (index: number) => number;
+type ItemType = 'column' | 'row';
+
+type ItemMetadata = {|
+  offset: number,
+  size: number,
+|};
+type ItemMetadataMap = { [index: number]: ItemMetadata };
+type InstanceProps = {|
+  columnMetadataMap: ItemMetadataMap,
+  estimatedColumnWidth: number,
+  estimatedRowHeight: number,
+  lastMeasuredColumnIndex: number,
+  lastMeasuredRowIndex: number,
+  rowMetadataMap: ItemMetadataMap,
+|};
+
+const getEstimatedTotalHeight = (
+  { rowCount }: Props<any>,
+  { rowMetadataMap, estimatedRowHeight, lastMeasuredRowIndex }: InstanceProps
+) => {
+  let totalSizeOfMeasuredRows = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredRowIndex >= rowCount) {
+    lastMeasuredRowIndex = rowCount - 1;
+  }
+
+  if (lastMeasuredRowIndex >= 0) {
+    const itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getEstimatedTotalWidth = (
+  { columnCount }: Props<any>,
+  {
+    columnMetadataMap,
+    estimatedColumnWidth,
+    lastMeasuredColumnIndex,
+  }: InstanceProps
+) => {
+  let totalSizeOfMeasuredRows = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredColumnIndex >= columnCount) {
+    lastMeasuredColumnIndex = columnCount - 1;
+  }
+
+  if (lastMeasuredColumnIndex >= 0) {
+    const itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+    totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+
+  return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getItemMetadata = (
+  itemType: ItemType,
+  props: Props<any>,
+  index: number,
+  instanceProps: InstanceProps
+): ItemMetadata => {
+  let itemMetadataMap, itemSize, lastMeasuredIndex;
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    itemSize = ((props.columnWidth: any): itemSizeGetter);
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    itemSize = ((props.rowHeight: any): itemSizeGetter);
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    let offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+      let size = itemSize(i);
+
+      itemMetadataMap[i] = {
+        offset,
+        size,
+      };
+
+      offset += size;
+    }
+
+    if (itemType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return itemMetadataMap[index];
+};
+
+const findNearestItem = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  offset: number
+) => {
+  let itemMetadataMap, lastMeasuredIndex;
+  if (itemType === 'column') {
+    itemMetadataMap = instanceProps.columnMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    itemMetadataMap = instanceProps.rowMetadataMap;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  const lastMeasuredItemOffset =
+    lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(
+      itemType,
+      props,
+      instanceProps,
+      lastMeasuredIndex,
+      0,
+      offset
+    );
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(
+      itemType,
+      props,
+      instanceProps,
+      Math.max(0, lastMeasuredIndex),
+      offset
+    );
+  }
+};
+
+const findNearestItemBinarySearch = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  high: number,
+  low: number,
+  offset: number
+): number => {
+  while (low <= high) {
+    const middle = low + Math.floor((high - low) / 2);
+    const currentOffset = getItemMetadata(
+      itemType,
+      props,
+      middle,
+      instanceProps
+    ).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+const findNearestItemExponentialSearch = (
+  itemType: ItemType,
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  index: number,
+  offset: number
+): number => {
+  const itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+  let interval = 1;
+
+  while (
+    index < itemCount &&
+    getItemMetadata(itemType, props, index, instanceProps).offset < offset
+  ) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(
+    itemType,
+    props,
+    instanceProps,
+    Math.min(index, itemCount - 1),
+    Math.floor(index / 2),
+    offset
+  );
+};
+
+const getOffsetForIndexAndAlignment = (
+  itemType: ItemType,
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: InstanceProps,
+  scrollbarSize: number
+): number => {
+  const size = itemType === 'column' ? props.width : props.height;
+  const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
+
+  // Get estimated total size after ItemMetadata is computed,
+  // To ensure it reflects actual measurements instead of just estimates.
+  const estimatedTotalSize =
+    itemType === 'column'
+      ? getEstimatedTotalWidth(props, instanceProps)
+      : getEstimatedTotalHeight(props, instanceProps);
+
+  const maxOffset = Math.max(
+    0,
+    Math.min(estimatedTotalSize - size, itemMetadata.offset)
+  );
+  const minOffset = Math.max(
+    0,
+    itemMetadata.offset - size + scrollbarSize + itemMetadata.size
+  );
+
+  if (align === 'smart') {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      align = 'auto';
+    } else {
+      align = 'center';
+    }
+  }
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+    case 'end':
+      return minOffset;
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+  }
+};
+
+const VariableSizeGrid = createGridComponent({
+  getColumnOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata('column', props, index, instanceProps).offset,
+
+  getColumnStartIndexForOffset: (
+    props: Props<any>,
+    scrollLeft: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem('column', props, instanceProps, scrollLeft),
+
+  getColumnStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollLeft: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { columnCount, width } = props;
+
+    const itemMetadata = getItemMetadata(
+      'column',
+      props,
+      startIndex,
+      instanceProps
+    );
+    const maxOffset = scrollLeft + width;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  getColumnWidth: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.columnMetadataMap[index].size,
+
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+
+  getOffsetForColumnAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
+  ): number =>
+    getOffsetForIndexAndAlignment(
+      'column',
+      props,
+      index,
+      align,
+      scrollOffset,
+      instanceProps,
+      scrollbarSize
+    ),
+
+  getOffsetForRowAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
+  ): number =>
+    getOffsetForIndexAndAlignment(
+      'row',
+      props,
+      index,
+      align,
+      scrollOffset,
+      instanceProps,
+      scrollbarSize
+    ),
+
+  getRowOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata('row', props, index, instanceProps).offset,
+
+  getRowHeight: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.rowMetadataMap[index].size,
+
+  getRowStartIndexForOffset: (
+    props: Props<any>,
+    scrollTop: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem('row', props, instanceProps, scrollTop),
+
+  getRowStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollTop: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { rowCount, height } = props;
+
+    const itemMetadata = getItemMetadata(
+      'row',
+      props,
+      startIndex,
+      instanceProps
+    );
+    const maxOffset = scrollTop + height;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps(props: Props<any>, instance: any): InstanceProps {
+    const {
+      estimatedColumnWidth,
+      estimatedRowHeight,
+    } = ((props: any): VariableSizeProps);
+
+    const instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {},
+    };
+
+    instance.resetAfterColumnIndex = (
+      columnIndex: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instance.resetAfterIndices({ columnIndex, shouldForceUpdate });
+    };
+
+    instance.resetAfterRowIndex = (
+      rowIndex: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instance.resetAfterIndices({ rowIndex, shouldForceUpdate });
+    };
+
+    instance.resetAfterIndices = ({
+      columnIndex,
+      rowIndex,
+      shouldForceUpdate = true,
+    }: {
+      columnIndex?: number,
+      rowIndex?: number,
+      shouldForceUpdate: boolean,
+    }) => {
+      if (typeof columnIndex === 'number') {
+        instanceProps.lastMeasuredColumnIndex = Math.min(
+          instanceProps.lastMeasuredColumnIndex,
+          columnIndex - 1
+        );
+      }
+      if (typeof rowIndex === 'number') {
+        instanceProps.lastMeasuredRowIndex = Math.min(
+          instanceProps.lastMeasuredRowIndex,
+          rowIndex - 1
+        );
+      }
+
+      // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: false,
+
+  validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error(
+          'An invalid "columnWidth" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${
+              columnWidth === null ? 'null' : typeof columnWidth
+            }" was specified.`
+        );
+      } else if (typeof rowHeight !== 'function') {
+        throw Error(
+          'An invalid "rowHeight" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default VariableSizeGrid;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
new file mode 100644
index 0000000000000..f4ad103231017
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
@@ -0,0 +1,316 @@
+// @flow
+
+import createListComponent from './createListComponent';
+
+import type { Props, ScrollToAlign } from './createListComponent';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+type VariableSizeProps = {|
+  estimatedItemSize: number,
+  ...Props<any>,
+|};
+
+type itemSizeGetter = (index: number) => number;
+
+type ItemMetadata = {|
+  offset: number,
+  size: number,
+|};
+type InstanceProps = {|
+  itemMetadataMap: { [index: number]: ItemMetadata },
+  estimatedItemSize: number,
+  lastMeasuredIndex: number,
+|};
+
+const getItemMetadata = (
+  props: Props<any>,
+  index: number,
+  instanceProps: InstanceProps
+): ItemMetadata => {
+  const { itemSize } = ((props: any): VariableSizeProps);
+  const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
+
+  if (index > lastMeasuredIndex) {
+    let offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset = itemMetadata.offset + itemMetadata.size;
+    }
+
+    for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+      let size = ((itemSize: any): itemSizeGetter)(i);
+
+      itemMetadataMap[i] = {
+        offset,
+        size,
+      };
+
+      offset += size;
+    }
+
+    instanceProps.lastMeasuredIndex = index;
+  }
+
+  return itemMetadataMap[index];
+};
+
+const findNearestItem = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  offset: number
+) => {
+  const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
+
+  const lastMeasuredItemOffset =
+    lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredItemOffset >= offset) {
+    // If we've already measured items within this range just use a binary search as it's faster.
+    return findNearestItemBinarySearch(
+      props,
+      instanceProps,
+      lastMeasuredIndex,
+      0,
+      offset
+    );
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestItemExponentialSearch(
+      props,
+      instanceProps,
+      Math.max(0, lastMeasuredIndex),
+      offset
+    );
+  }
+};
+
+const findNearestItemBinarySearch = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  high: number,
+  low: number,
+  offset: number
+): number => {
+  while (low <= high) {
+    const middle = low + Math.floor((high - low) / 2);
+    const currentOffset = getItemMetadata(props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+const findNearestItemExponentialSearch = (
+  props: Props<any>,
+  instanceProps: InstanceProps,
+  index: number,
+  offset: number
+): number => {
+  const { itemCount } = props;
+  let interval = 1;
+
+  while (
+    index < itemCount &&
+    getItemMetadata(props, index, instanceProps).offset < offset
+  ) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestItemBinarySearch(
+    props,
+    instanceProps,
+    Math.min(index, itemCount - 1),
+    Math.floor(index / 2),
+    offset
+  );
+};
+
+const getEstimatedTotalSize = (
+  { itemCount }: Props<any>,
+  { itemMetadataMap, estimatedItemSize, lastMeasuredIndex }: InstanceProps
+) => {
+  let totalSizeOfMeasuredItems = 0;
+
+  // Edge case check for when the number of items decreases while a scroll is in progress.
+  // https://github.com/bvaughn/react-window/pull/138
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+
+  if (lastMeasuredIndex >= 0) {
+    const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+
+  const numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+
+const VariableSizeList = createListComponent({
+  getItemOffset: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => getItemMetadata(props, index, instanceProps).offset,
+
+  getItemSize: (
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+  ): number => instanceProps.itemMetadataMap[index].size,
+
+  getEstimatedTotalSize,
+
+  getOffsetForIndexAndAlignment: (
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { direction, height, layout, width } = props;
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const itemMetadata = getItemMetadata(props, index, instanceProps);
+
+    // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+    const estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+
+    const maxOffset = Math.max(
+      0,
+      Math.min(estimatedTotalSize - size, itemMetadata.offset)
+    );
+    const minOffset = Math.max(
+      0,
+      itemMetadata.offset - size + itemMetadata.size
+    );
+
+    if (align === 'smart') {
+      if (
+        scrollOffset >= minOffset - size &&
+        scrollOffset <= maxOffset + size
+      ) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+      case 'end':
+        return minOffset;
+      case 'center':
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'auto':
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+
+  getStartIndexForOffset: (
+    props: Props<any>,
+    offset: number,
+    instanceProps: InstanceProps
+  ): number => findNearestItem(props, instanceProps, offset),
+
+  getStopIndexForStartIndex: (
+    props: Props<any>,
+    startIndex: number,
+    scrollOffset: number,
+    instanceProps: InstanceProps
+  ): number => {
+    const { direction, height, itemCount, layout, width } = props;
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
+    const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
+    const maxOffset = scrollOffset + size;
+
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+
+    while (stopIndex < itemCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemMetadata(props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps(props: Props<any>, instance: any): InstanceProps {
+    const { estimatedItemSize } = ((props: any): VariableSizeProps);
+
+    const instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE,
+      lastMeasuredIndex: -1,
+    };
+
+    instance.resetAfterIndex = (
+      index: number,
+      shouldForceUpdate?: boolean = true
+    ) => {
+      instanceProps.lastMeasuredIndex = Math.min(
+        instanceProps.lastMeasuredIndex,
+        index - 1
+      );
+
+      // We could potentially optimize further by only evicting styles after this index,
+      // But since styles are only cached while scrolling is in progress-
+      // It seems an unnecessary optimization.
+      // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+      instance._getItemStyleCache(-1);
+
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+
+    return instanceProps;
+  },
+
+  shouldResetStyleCacheOnItemSizeChange: false,
+
+  validateProps: ({ itemSize }: Props<any>): void => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof itemSize !== 'function') {
+        throw Error(
+          'An invalid "itemSize" prop has been specified. ' +
+            'Value should be a function. ' +
+            `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
+        );
+      }
+    }
+  },
+});
+
+export default VariableSizeList;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js b/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js
new file mode 100644
index 0000000000000..072951ef67753
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js
@@ -0,0 +1,18 @@
+// @flow
+
+import shallowDiffers from './shallowDiffers';
+
+// Custom comparison function for React.memo().
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-api.html#reactmemo
+export default function areEqual(
+  prevProps: Object,
+  nextProps: Object
+): boolean {
+  const { style: prevStyle, ...prevRest } = prevProps;
+  const { style: nextStyle, ...nextRest } = nextProps;
+
+  return (
+    !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest)
+  );
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
new file mode 100644
index 0000000000000..24f07403b0d8b
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
@@ -0,0 +1,916 @@
+// @flow
+
+import memoizeOne from 'memoize-one';
+import React, { createElement, PureComponent } from 'react';
+import { cancelTimeout, requestTimeout } from './timer';
+import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
+
+import type { TimeoutID } from './timer';
+
+type Direction = 'ltr' | 'rtl';
+export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
+
+type itemSize = number | ((index: number) => number);
+
+type RenderComponentProps<T> = {|
+  columnIndex: number,
+  data: T,
+  isScrolling?: boolean,
+  rowIndex: number,
+  style: Object,
+|};
+export type RenderComponent<T> = React$ComponentType<
+  $Shape<RenderComponentProps<T>>
+>;
+
+type ScrollDirection = 'forward' | 'backward';
+
+type OnItemsRenderedCallback = ({
+  overscanColumnStartIndex: number,
+  overscanColumnStopIndex: number,
+  overscanRowStartIndex: number,
+  overscanRowStopIndex: number,
+  visibleColumnStartIndex: number,
+  visibleColumnStopIndex: number,
+  visibleRowStartIndex: number,
+  visibleRowStopIndex: number,
+}) => void;
+type OnScrollCallback = ({
+  horizontalScrollDirection: ScrollDirection,
+  scrollLeft: number,
+  scrollTop: number,
+  scrollUpdateWasRequested: boolean,
+  verticalScrollDirection: ScrollDirection,
+}) => void;
+
+type ScrollEvent = SyntheticEvent<HTMLDivElement>;
+type ItemStyleCache = { [key: string]: Object };
+
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+export type Props<T> = {|
+  children: RenderComponent<T>,
+  className?: string,
+  columnCount: number,
+  columnWidth: itemSize,
+  direction: Direction,
+  height: number,
+  initialScrollLeft?: number,
+  initialScrollTop?: number,
+  innerRef?: any,
+  innerElementType?: string | React.AbstractComponent<InnerProps, any>,
+  innerTagName?: string, // deprecated
+  itemData: T,
+  itemKey?: (params: {|
+    columnIndex: number,
+    data: T,
+    rowIndex: number,
+  |}) => any,
+  onItemsRendered?: OnItemsRenderedCallback,
+  onScroll?: OnScrollCallback,
+  outerRef?: any,
+  outerElementType?: string | React.AbstractComponent<OuterProps, any>,
+  outerTagName?: string, // deprecated
+  overscanColumnCount?: number,
+  overscanColumnsCount?: number, // deprecated
+  overscanCount?: number, // deprecated
+  overscanRowCount?: number,
+  overscanRowsCount?: number, // deprecated
+  rowCount: number,
+  rowHeight: itemSize,
+  style?: Object,
+  useIsScrolling: boolean,
+  width: number,
+|};
+
+type State = {|
+  instance: any,
+  isScrolling: boolean,
+  horizontalScrollDirection: ScrollDirection,
+  scrollLeft: number,
+  scrollTop: number,
+  scrollUpdateWasRequested: boolean,
+  verticalScrollDirection: ScrollDirection,
+|};
+
+type getItemOffset = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type getItemSize = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type getEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
+type GetOffsetForItemAndAlignment = (
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: any,
+  scrollbarSize: number
+) => number;
+type GetStartIndexForOffset = (
+  props: Props<any>,
+  offset: number,
+  instanceProps: any
+) => number;
+type GetStopIndexForStartIndex = (
+  props: Props<any>,
+  startIndex: number,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type InitInstanceProps = (props: Props<any>, instance: any) => any;
+type ValidateProps = (props: Props<any>) => void;
+
+const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+const defaultItemKey = ({ columnIndex, data, rowIndex }) =>
+  `${rowIndex}:${columnIndex}`;
+
+// In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+let devWarningsOverscanCount = null;
+let devWarningsOverscanRowsColumnsCount = null;
+let devWarningsTagName = null;
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount = new WeakSet();
+    devWarningsOverscanRowsColumnsCount = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
+}
+
+export default function createGridComponent({
+  getColumnOffset,
+  getColumnStartIndexForOffset,
+  getColumnStopIndexForStartIndex,
+  getColumnWidth,
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+  getOffsetForColumnAndAlignment,
+  getOffsetForRowAndAlignment,
+  getRowHeight,
+  getRowOffset,
+  getRowStartIndexForOffset,
+  getRowStopIndexForStartIndex,
+  initInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange,
+  validateProps,
+}: {|
+  getColumnOffset: getItemOffset,
+  getColumnStartIndexForOffset: GetStartIndexForOffset,
+  getColumnStopIndexForStartIndex: GetStopIndexForStartIndex,
+  getColumnWidth: getItemSize,
+  getEstimatedTotalHeight: getEstimatedTotalSize,
+  getEstimatedTotalWidth: getEstimatedTotalSize,
+  getOffsetForColumnAndAlignment: GetOffsetForItemAndAlignment,
+  getOffsetForRowAndAlignment: GetOffsetForItemAndAlignment,
+  getRowOffset: getItemOffset,
+  getRowHeight: getItemSize,
+  getRowStartIndexForOffset: GetStartIndexForOffset,
+  getRowStopIndexForStartIndex: GetStopIndexForStartIndex,
+  initInstanceProps: InitInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange: boolean,
+  validateProps: ValidateProps,
+|}) {
+  return class Grid<T> extends PureComponent<Props<T>, State> {
+    _instanceProps: any = initInstanceProps(this.props, this);
+    _resetIsScrollingTimeoutId: TimeoutID | null = null;
+    _outerRef: ?HTMLDivElement;
+
+    static defaultProps = {
+      direction: 'ltr',
+      itemData: undefined,
+      useIsScrolling: false,
+    };
+
+    state: State = {
+      instance: this,
+      isScrolling: false,
+      horizontalScrollDirection: 'forward',
+      scrollLeft:
+        typeof this.props.initialScrollLeft === 'number'
+          ? this.props.initialScrollLeft
+          : 0,
+      scrollTop:
+        typeof this.props.initialScrollTop === 'number'
+          ? this.props.initialScrollTop
+          : 0,
+      scrollUpdateWasRequested: false,
+      verticalScrollDirection: 'forward',
+    };
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props: Props<T>) {
+      super(props);
+    }
+
+    static getDerivedStateFromProps(
+      nextProps: Props<T>,
+      prevState: State
+    ): $Shape<State> | null {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    }
+
+    scrollTo({
+      scrollLeft,
+      scrollTop,
+    }: {
+      scrollLeft: number,
+      scrollTop: number,
+    }): void {
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(prevState => {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (
+          prevState.scrollLeft === scrollLeft &&
+          prevState.scrollTop === scrollTop
+        ) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection:
+            prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection:
+            prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+        };
+      }, this._resetIsScrollingDebounced);
+    }
+
+    scrollToItem({
+      align = 'auto',
+      columnIndex,
+      rowIndex,
+    }: {
+      align: ScrollToAlign,
+      columnIndex?: number,
+      rowIndex?: number,
+    }): void {
+      const { columnCount, height, rowCount, width } = this.props;
+      const { scrollLeft, scrollTop } = this.state;
+      const scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      const estimatedTotalHeight = getEstimatedTotalHeight(
+        this.props,
+        this._instanceProps
+      );
+      const estimatedTotalWidth = getEstimatedTotalWidth(
+        this.props,
+        this._instanceProps
+      );
+
+      // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+      const horizontalScrollbarSize =
+        estimatedTotalWidth > width ? scrollbarSize : 0;
+      const verticalScrollbarSize =
+        estimatedTotalHeight > height ? scrollbarSize : 0;
+
+      this.scrollTo({
+        scrollLeft:
+          columnIndex !== undefined
+            ? getOffsetForColumnAndAlignment(
+                this.props,
+                columnIndex,
+                align,
+                scrollLeft,
+                this._instanceProps,
+                verticalScrollbarSize
+              )
+            : scrollLeft,
+        scrollTop:
+          rowIndex !== undefined
+            ? getOffsetForRowAndAlignment(
+                this.props,
+                rowIndex,
+                align,
+                scrollTop,
+                this._instanceProps,
+                horizontalScrollbarSize
+              )
+            : scrollTop,
+      });
+    }
+
+    componentDidMount() {
+      const { initialScrollLeft, initialScrollTop } = this.props;
+
+      if (this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentDidUpdate() {
+      const { direction } = this.props;
+      const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+            default:
+              const { clientWidth, scrollWidth } = outerRef;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    }
+
+    render() {
+      const {
+        children,
+        className,
+        columnCount,
+        direction,
+        height,
+        innerRef,
+        innerElementType,
+        innerTagName,
+        itemData,
+        itemKey = defaultItemKey,
+        outerElementType,
+        outerTagName,
+        rowCount,
+        style,
+        useIsScrolling,
+        width,
+      } = this.props;
+      const { isScrolling } = this.state;
+
+      const [
+        columnStartIndex,
+        columnStopIndex,
+      ] = this._getHorizontalRangeToRender();
+      const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
+
+      const items = [];
+      if (columnCount > 0 && rowCount) {
+        for (
+          let rowIndex = rowStartIndex;
+          rowIndex <= rowStopIndex;
+          rowIndex++
+        ) {
+          for (
+            let columnIndex = columnStartIndex;
+            columnIndex <= columnStopIndex;
+            columnIndex++
+          ) {
+            items.push(
+              createElement(children, {
+                columnIndex,
+                data: itemData,
+                isScrolling: useIsScrolling ? isScrolling : undefined,
+                key: itemKey({ columnIndex, data: itemData, rowIndex }),
+                rowIndex,
+                style: this._getItemStyle(rowIndex, columnIndex),
+              })
+            );
+          }
+        }
+      }
+
+      // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+      const estimatedTotalHeight = getEstimatedTotalHeight(
+        this.props,
+        this._instanceProps
+      );
+      const estimatedTotalWidth = getEstimatedTotalWidth(
+        this.props,
+        this._instanceProps
+      );
+
+      return createElement(
+        outerElementType || outerTagName || 'div',
+        {
+          className,
+          onScroll: this._onScroll,
+          ref: this._outerRefSetter,
+          style: {
+            position: 'relative',
+            height,
+            width,
+            overflow: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            willChange: 'transform',
+            direction,
+            ...style,
+          },
+        },
+        createElement(innerElementType || innerTagName || 'div', {
+          children: items,
+          ref: innerRef,
+          style: {
+            height: estimatedTotalHeight,
+            pointerEvents: isScrolling ? 'none' : undefined,
+            width: estimatedTotalWidth,
+          },
+        })
+      );
+    }
+
+    _callOnItemsRendered: (
+      overscanColumnStartIndex: number,
+      overscanColumnStopIndex: number,
+      overscanRowStartIndex: number,
+      overscanRowStopIndex: number,
+      visibleColumnStartIndex: number,
+      visibleColumnStopIndex: number,
+      visibleRowStartIndex: number,
+      visibleRowStopIndex: number
+    ) => void;
+    _callOnItemsRendered = memoizeOne(
+      (
+        overscanColumnStartIndex: number,
+        overscanColumnStopIndex: number,
+        overscanRowStartIndex: number,
+        overscanRowStopIndex: number,
+        visibleColumnStartIndex: number,
+        visibleColumnStopIndex: number,
+        visibleRowStartIndex: number,
+        visibleRowStopIndex: number
+      ) =>
+        ((this.props.onItemsRendered: any): OnItemsRenderedCallback)({
+          overscanColumnStartIndex,
+          overscanColumnStopIndex,
+          overscanRowStartIndex,
+          overscanRowStopIndex,
+          visibleColumnStartIndex,
+          visibleColumnStopIndex,
+          visibleRowStartIndex,
+          visibleRowStopIndex,
+        })
+    );
+
+    _callOnScroll: (
+      scrollLeft: number,
+      scrollTop: number,
+      horizontalScrollDirection: ScrollDirection,
+      verticalScrollDirection: ScrollDirection,
+      scrollUpdateWasRequested: boolean
+    ) => void;
+    _callOnScroll = memoizeOne(
+      (
+        scrollLeft: number,
+        scrollTop: number,
+        horizontalScrollDirection: ScrollDirection,
+        verticalScrollDirection: ScrollDirection,
+        scrollUpdateWasRequested: boolean
+      ) =>
+        ((this.props.onScroll: any): OnScrollCallback)({
+          horizontalScrollDirection,
+          scrollLeft,
+          scrollTop,
+          verticalScrollDirection,
+          scrollUpdateWasRequested,
+        })
+    );
+
+    _callPropsCallbacks() {
+      const { columnCount, onItemsRendered, onScroll, rowCount } = this.props;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          const [
+            overscanColumnStartIndex,
+            overscanColumnStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+          ] = this._getHorizontalRangeToRender();
+          const [
+            overscanRowStartIndex,
+            overscanRowStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex,
+          ] = this._getVerticalRangeToRender();
+          this._callOnItemsRendered(
+            overscanColumnStartIndex,
+            overscanColumnStopIndex,
+            overscanRowStartIndex,
+            overscanRowStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex
+          );
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        const {
+          horizontalScrollDirection,
+          scrollLeft,
+          scrollTop,
+          scrollUpdateWasRequested,
+          verticalScrollDirection,
+        } = this.state;
+        this._callOnScroll(
+          scrollLeft,
+          scrollTop,
+          horizontalScrollDirection,
+          verticalScrollDirection,
+          scrollUpdateWasRequested
+        );
+      }
+    }
+
+    // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    _getItemStyle: (rowIndex: number, columnIndex: number) => Object;
+    _getItemStyle = (rowIndex: number, columnIndex: number): Object => {
+      const { columnWidth, direction, rowHeight } = this.props;
+
+      const itemStyleCache = this._getItemStyleCache(
+        shouldResetStyleCacheOnItemSizeChange && columnWidth,
+        shouldResetStyleCacheOnItemSizeChange && direction,
+        shouldResetStyleCacheOnItemSizeChange && rowHeight
+      );
+
+      const key = `${rowIndex}:${columnIndex}`;
+
+      let style;
+      if (itemStyleCache.hasOwnProperty(key)) {
+        style = itemStyleCache[key];
+      } else {
+        itemStyleCache[key] = style = {
+          position: 'absolute',
+          [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
+            this.props,
+            columnIndex,
+            this._instanceProps
+          ),
+          top: getRowOffset(this.props, rowIndex, this._instanceProps),
+          height: getRowHeight(this.props, rowIndex, this._instanceProps),
+          width: getColumnWidth(this.props, columnIndex, this._instanceProps),
+        };
+      }
+
+      return style;
+    };
+
+    _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache;
+    _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({}));
+
+    _getHorizontalRangeToRender(): [number, number, number, number] {
+      const {
+        columnCount,
+        overscanColumnCount,
+        overscanColumnsCount,
+        overscanCount,
+        rowCount,
+      } = this.props;
+      const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
+
+      const overscanCountResolved: number =
+        overscanColumnCount || overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getColumnStartIndexForOffset(
+        this.props,
+        scrollLeft,
+        this._instanceProps
+      );
+      const stopIndex = getColumnStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollLeft,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || horizontalScrollDirection === 'backward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+      const overscanForward =
+        !isScrolling || horizontalScrollDirection === 'forward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _getVerticalRangeToRender(): [number, number, number, number] {
+      const {
+        columnCount,
+        overscanCount,
+        overscanRowCount,
+        overscanRowsCount,
+        rowCount,
+      } = this.props;
+      const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
+
+      const overscanCountResolved: number =
+        overscanRowCount || overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getRowStartIndexForOffset(
+        this.props,
+        scrollTop,
+        this._instanceProps
+      );
+      const stopIndex = getRowStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollTop,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || verticalScrollDirection === 'backward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+      const overscanForward =
+        !isScrolling || verticalScrollDirection === 'forward'
+          ? Math.max(1, overscanCountResolved)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _onScroll = (event: ScrollEvent): void => {
+      const {
+        clientHeight,
+        clientWidth,
+        scrollLeft,
+        scrollTop,
+        scrollHeight,
+        scrollWidth,
+      } = event.currentTarget;
+      this.setState(prevState => {
+        if (
+          prevState.scrollLeft === scrollLeft &&
+          prevState.scrollTop === scrollTop
+        ) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        const { direction } = this.props;
+
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+        // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+        let calculatedScrollLeft = scrollLeft;
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              calculatedScrollLeft = -scrollLeft;
+              break;
+            case 'positive-descending':
+              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        }
+
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        calculatedScrollLeft = Math.max(
+          0,
+          Math.min(calculatedScrollLeft, scrollWidth - clientWidth)
+        );
+        const calculatedScrollTop = Math.max(
+          0,
+          Math.min(scrollTop, scrollHeight - clientHeight)
+        );
+
+        return {
+          isScrolling: true,
+          horizontalScrollDirection:
+            prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: calculatedScrollLeft,
+          scrollTop: calculatedScrollTop,
+          verticalScrollDirection:
+            prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _outerRefSetter = (ref: any): void => {
+      const { outerRef } = this.props;
+
+      this._outerRef = ((ref: any): HTMLDivElement);
+
+      if (typeof outerRef === 'function') {
+        outerRef(ref);
+      } else if (
+        outerRef != null &&
+        typeof outerRef === 'object' &&
+        outerRef.hasOwnProperty('current')
+      ) {
+        outerRef.current = ref;
+      }
+    };
+
+    _resetIsScrollingDebounced = () => {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+
+      this._resetIsScrollingTimeoutId = requestTimeout(
+        this._resetIsScrolling,
+        IS_SCROLLING_DEBOUNCE_INTERVAL
+      );
+    };
+
+    _resetIsScrolling = () => {
+      this._resetIsScrollingTimeoutId = null;
+
+      this.setState({ isScrolling: false }, () => {
+        // Clear style cache after state update has been committed.
+        // This way we don't break pure sCU for items that don't use isScrolling param.
+        this._getItemStyleCache(-1);
+      });
+    };
+  };
+}
+
+const validateSharedProps = (
+  {
+    children,
+    direction,
+    height,
+    innerTagName,
+    outerTagName,
+    overscanColumnsCount,
+    overscanCount,
+    overscanRowsCount,
+    width,
+  }: Props<any>,
+  { instance }: State
+): void => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn(
+          'The overscanCount prop has been deprecated. ' +
+            'Please use the overscanColumnCount and overscanRowCount props instead.'
+        );
+      }
+    }
+
+    if (
+      typeof overscanColumnsCount === 'number' ||
+      typeof overscanRowsCount === 'number'
+    ) {
+      if (
+        devWarningsOverscanRowsColumnsCount &&
+        !devWarningsOverscanRowsColumnsCount.has(instance)
+      ) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn(
+          'The overscanColumnsCount and overscanRowsCount props have been deprecated. ' +
+            'Please use the overscanColumnCount and overscanRowCount props instead.'
+        );
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn(
+          'The innerTagName and outerTagName props have been deprecated. ' +
+            'Please use the innerElementType and outerElementType props instead.'
+        );
+      }
+    }
+
+    if (children == null) {
+      throw Error(
+        'An invalid "children" prop has been specified. ' +
+          'Value should be a React component. ' +
+          `"${children === null ? 'null' : typeof children}" was specified.`
+      );
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "direction" prop has been specified. ' +
+            'Value should be either "ltr" or "rtl". ' +
+            `"${direction}" was specified.`
+        );
+    }
+
+    if (typeof width !== 'number') {
+      throw Error(
+        'An invalid "width" prop has been specified. ' +
+          'Grids must specify a number for width. ' +
+          `"${width === null ? 'null' : typeof width}" was specified.`
+      );
+    }
+
+    if (typeof height !== 'number') {
+      throw Error(
+        'An invalid "height" prop has been specified. ' +
+          'Grids must specify a number for height. ' +
+          `"${height === null ? 'null' : typeof height}" was specified.`
+      );
+    }
+  }
+};
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
new file mode 100644
index 0000000000000..5b5f1a15c7c1b
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
@@ -0,0 +1,722 @@
+// @flow
+
+import memoizeOne from 'memoize-one';
+import React, { createElement, PureComponent } from 'react';
+import { cancelTimeout, requestTimeout } from './timer';
+import { getRTLOffsetType } from './domHelpers';
+
+import type { TimeoutID } from './timer';
+
+export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
+
+type itemSize = number | ((index: number) => number);
+// TODO Deprecate directions "horizontal" and "vertical"
+type Direction = 'ltr' | 'rtl' | 'horizontal' | 'vertical';
+type Layout = 'horizontal' | 'vertical';
+
+type RenderComponentProps<T> = {|
+  data: T,
+  index: number,
+  isScrolling?: boolean,
+  style: Object,
+|};
+type RenderComponent<T> = React$ComponentType<$Shape<RenderComponentProps<T>>>;
+
+type ScrollDirection = 'forward' | 'backward';
+
+type onItemsRenderedCallback = ({
+  overscanStartIndex: number,
+  overscanStopIndex: number,
+  visibleStartIndex: number,
+  visibleStopIndex: number,
+}) => void;
+type onScrollCallback = ({
+  scrollDirection: ScrollDirection,
+  scrollOffset: number,
+  scrollUpdateWasRequested: boolean,
+}) => void;
+
+type ScrollEvent = SyntheticEvent<HTMLDivElement>;
+type ItemStyleCache = { [index: number]: Object };
+
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+export type Props<T> = {|
+  children: RenderComponent<T>,
+  className?: string,
+  direction: Direction,
+  height: number | string,
+  initialScrollOffset?: number,
+  innerRef?: any,
+  innerElementType?: string | React.AbstractComponent<InnerProps, any>,
+  innerTagName?: string, // deprecated
+  itemCount: number,
+  itemData: T,
+  itemKey?: (index: number, data: T) => any,
+  itemSize: itemSize,
+  layout: Layout,
+  onItemsRendered?: onItemsRenderedCallback,
+  onScroll?: onScrollCallback,
+  outerRef?: any,
+  outerElementType?: string | React.AbstractComponent<OuterProps, any>,
+  outerTagName?: string, // deprecated
+  overscanCount: number,
+  style?: Object,
+  useIsScrolling: boolean,
+  width: number | string,
+|};
+
+type State = {|
+  instance: any,
+  isScrolling: boolean,
+  scrollDirection: ScrollDirection,
+  scrollOffset: number,
+  scrollUpdateWasRequested: boolean,
+|};
+
+type GetItemOffset = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type GetItemSize = (
+  props: Props<any>,
+  index: number,
+  instanceProps: any
+) => number;
+type GetEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
+type GetOffsetForIndexAndAlignment = (
+  props: Props<any>,
+  index: number,
+  align: ScrollToAlign,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type GetStartIndexForOffset = (
+  props: Props<any>,
+  offset: number,
+  instanceProps: any
+) => number;
+type GetStopIndexForStartIndex = (
+  props: Props<any>,
+  startIndex: number,
+  scrollOffset: number,
+  instanceProps: any
+) => number;
+type InitInstanceProps = (props: Props<any>, instance: any) => any;
+type ValidateProps = (props: Props<any>) => void;
+
+const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+const defaultItemKey = (index: number, data: any) => index;
+
+// In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+let devWarningsDirection = null;
+let devWarningsTagName = null;
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
+}
+
+export default function createListComponent({
+  getItemOffset,
+  getEstimatedTotalSize,
+  getItemSize,
+  getOffsetForIndexAndAlignment,
+  getStartIndexForOffset,
+  getStopIndexForStartIndex,
+  initInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange,
+  validateProps,
+}: {|
+  getItemOffset: GetItemOffset,
+  getEstimatedTotalSize: GetEstimatedTotalSize,
+  getItemSize: GetItemSize,
+  getOffsetForIndexAndAlignment: GetOffsetForIndexAndAlignment,
+  getStartIndexForOffset: GetStartIndexForOffset,
+  getStopIndexForStartIndex: GetStopIndexForStartIndex,
+  initInstanceProps: InitInstanceProps,
+  shouldResetStyleCacheOnItemSizeChange: boolean,
+  validateProps: ValidateProps,
+|}) {
+  return class List<T> extends PureComponent<Props<T>, State> {
+    _instanceProps: any = initInstanceProps(this.props, this);
+    _outerRef: ?HTMLDivElement;
+    _resetIsScrollingTimeoutId: TimeoutID | null = null;
+
+    static defaultProps = {
+      direction: 'ltr',
+      itemData: undefined,
+      layout: 'vertical',
+      overscanCount: 2,
+      useIsScrolling: false,
+    };
+
+    state: State = {
+      instance: this,
+      isScrolling: false,
+      scrollDirection: 'forward',
+      scrollOffset:
+        typeof this.props.initialScrollOffset === 'number'
+          ? this.props.initialScrollOffset
+          : 0,
+      scrollUpdateWasRequested: false,
+    };
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props: Props<T>) {
+      super(props);
+    }
+
+    static getDerivedStateFromProps(
+      nextProps: Props<T>,
+      prevState: State
+    ): $Shape<State> | null {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    }
+
+    scrollTo(scrollOffset: number): void {
+      scrollOffset = Math.max(0, scrollOffset);
+
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection:
+            prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true,
+        };
+      }, this._resetIsScrollingDebounced);
+    }
+
+    scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
+      const { itemCount } = this.props;
+      const { scrollOffset } = this.state;
+
+      index = Math.max(0, Math.min(index, itemCount - 1));
+
+      this.scrollTo(
+        getOffsetForIndexAndAlignment(
+          this.props,
+          index,
+          align,
+          scrollOffset,
+          this._instanceProps
+        )
+      );
+    }
+
+    componentDidMount() {
+      const { direction, initialScrollOffset, layout } = this.props;
+
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentDidUpdate() {
+      const { direction, layout } = this.props;
+      const { scrollOffset, scrollUpdateWasRequested } = this.state;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+
+        // TODO Deprecate direction "horizontal"
+        if (direction === 'horizontal' || layout === 'horizontal') {
+          if (direction === 'rtl') {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                const { clientWidth, scrollWidth } = outerRef;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+
+      this._callPropsCallbacks();
+    }
+
+    componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    }
+
+    render() {
+      const {
+        children,
+        className,
+        direction,
+        height,
+        innerRef,
+        innerElementType,
+        innerTagName,
+        itemCount,
+        itemData,
+        itemKey = defaultItemKey,
+        layout,
+        outerElementType,
+        outerTagName,
+        style,
+        useIsScrolling,
+        width,
+      } = this.props;
+      const { isScrolling } = this.state;
+
+      // TODO Deprecate direction "horizontal"
+      const isHorizontal =
+        direction === 'horizontal' || layout === 'horizontal';
+
+      const onScroll = isHorizontal
+        ? this._onScrollHorizontal
+        : this._onScrollVertical;
+
+      const [startIndex, stopIndex] = this._getRangeToRender();
+
+      const items = [];
+      if (itemCount > 0) {
+        for (let index = startIndex; index <= stopIndex; index++) {
+          items.push(
+            createElement(children, {
+              data: itemData,
+              key: itemKey(index, itemData),
+              index,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              style: this._getItemStyle(index),
+            })
+          );
+        }
+      }
+
+      // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+      const estimatedTotalSize = getEstimatedTotalSize(
+        this.props,
+        this._instanceProps
+      );
+
+      return createElement(
+        outerElementType || outerTagName || 'div',
+        {
+          className,
+          onScroll,
+          ref: this._outerRefSetter,
+          style: {
+            position: 'relative',
+            height,
+            width,
+            overflow: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            willChange: 'transform',
+            direction,
+            ...style,
+          },
+        },
+        createElement(innerElementType || innerTagName || 'div', {
+          children: items,
+          ref: innerRef,
+          style: {
+            height: isHorizontal ? '100%' : estimatedTotalSize,
+            pointerEvents: isScrolling ? 'none' : undefined,
+            width: isHorizontal ? estimatedTotalSize : '100%',
+          },
+        })
+      );
+    }
+
+    _callOnItemsRendered: (
+      overscanStartIndex: number,
+      overscanStopIndex: number,
+      visibleStartIndex: number,
+      visibleStopIndex: number
+    ) => void;
+    _callOnItemsRendered = memoizeOne(
+      (
+        overscanStartIndex: number,
+        overscanStopIndex: number,
+        visibleStartIndex: number,
+        visibleStopIndex: number
+      ) =>
+        ((this.props.onItemsRendered: any): onItemsRenderedCallback)({
+          overscanStartIndex,
+          overscanStopIndex,
+          visibleStartIndex,
+          visibleStopIndex,
+        })
+    );
+
+    _callOnScroll: (
+      scrollDirection: ScrollDirection,
+      scrollOffset: number,
+      scrollUpdateWasRequested: boolean
+    ) => void;
+    _callOnScroll = memoizeOne(
+      (
+        scrollDirection: ScrollDirection,
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+      ) =>
+        ((this.props.onScroll: any): onScrollCallback)({
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested,
+        })
+    );
+
+    _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === 'function') {
+        const { itemCount } = this.props;
+        if (itemCount > 0) {
+          const [
+            overscanStartIndex,
+            overscanStopIndex,
+            visibleStartIndex,
+            visibleStopIndex,
+          ] = this._getRangeToRender();
+          this._callOnItemsRendered(
+            overscanStartIndex,
+            overscanStopIndex,
+            visibleStartIndex,
+            visibleStopIndex
+          );
+        }
+      }
+
+      if (typeof this.props.onScroll === 'function') {
+        const {
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested,
+        } = this.state;
+        this._callOnScroll(
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested
+        );
+      }
+    }
+
+    // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    _getItemStyle: (index: number) => Object;
+    _getItemStyle = (index: number): Object => {
+      const { direction, itemSize, layout } = this.props;
+
+      const itemStyleCache = this._getItemStyleCache(
+        shouldResetStyleCacheOnItemSizeChange && itemSize,
+        shouldResetStyleCacheOnItemSizeChange && layout,
+        shouldResetStyleCacheOnItemSizeChange && direction
+      );
+
+      let style;
+      if (itemStyleCache.hasOwnProperty(index)) {
+        style = itemStyleCache[index];
+      } else {
+        const offset = getItemOffset(this.props, index, this._instanceProps);
+        const size = getItemSize(this.props, index, this._instanceProps);
+
+        // TODO Deprecate direction "horizontal"
+        const isHorizontal =
+          direction === 'horizontal' || layout === 'horizontal';
+
+        itemStyleCache[index] = style = {
+          position: 'absolute',
+          [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
+          top: !isHorizontal ? offset : 0,
+          height: !isHorizontal ? size : '100%',
+          width: isHorizontal ? size : '100%',
+        };
+      }
+
+      return style;
+    };
+
+    _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache;
+    _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({}));
+
+    _getRangeToRender(): [number, number, number, number] {
+      const { itemCount, overscanCount } = this.props;
+      const { isScrolling, scrollDirection, scrollOffset } = this.state;
+
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      const startIndex = getStartIndexForOffset(
+        this.props,
+        scrollOffset,
+        this._instanceProps
+      );
+      const stopIndex = getStopIndexForStartIndex(
+        this.props,
+        startIndex,
+        scrollOffset,
+        this._instanceProps
+      );
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward =
+        !isScrolling || scrollDirection === 'backward'
+          ? Math.max(1, overscanCount)
+          : 1;
+      const overscanForward =
+        !isScrolling || scrollDirection === 'forward'
+          ? Math.max(1, overscanCount)
+          : 1;
+
+      return [
+        Math.max(0, startIndex - overscanBackward),
+        Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)),
+        startIndex,
+        stopIndex,
+      ];
+    }
+
+    _onScrollHorizontal = (event: ScrollEvent): void => {
+      const { clientWidth, scrollLeft, scrollWidth } = event.currentTarget;
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollLeft) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        const { direction } = this.props;
+
+        let scrollOffset = scrollLeft;
+        if (direction === 'rtl') {
+          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              scrollOffset = -scrollLeft;
+              break;
+            case 'positive-descending':
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        }
+
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        scrollOffset = Math.max(
+          0,
+          Math.min(scrollOffset, scrollWidth - clientWidth)
+        );
+
+        return {
+          isScrolling: true,
+          scrollDirection:
+            prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+          scrollOffset,
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _onScrollVertical = (event: ScrollEvent): void => {
+      const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
+      this.setState(prevState => {
+        if (prevState.scrollOffset === scrollTop) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        const scrollOffset = Math.max(
+          0,
+          Math.min(scrollTop, scrollHeight - clientHeight)
+        );
+
+        return {
+          isScrolling: true,
+          scrollDirection:
+            prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset,
+          scrollUpdateWasRequested: false,
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _outerRefSetter = (ref: any): void => {
+      const { outerRef } = this.props;
+
+      this._outerRef = ((ref: any): HTMLDivElement);
+
+      if (typeof outerRef === 'function') {
+        outerRef(ref);
+      } else if (
+        outerRef != null &&
+        typeof outerRef === 'object' &&
+        outerRef.hasOwnProperty('current')
+      ) {
+        outerRef.current = ref;
+      }
+    };
+
+    _resetIsScrollingDebounced = () => {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+
+      this._resetIsScrollingTimeoutId = requestTimeout(
+        this._resetIsScrolling,
+        IS_SCROLLING_DEBOUNCE_INTERVAL
+      );
+    };
+
+    _resetIsScrolling = () => {
+      this._resetIsScrollingTimeoutId = null;
+
+      this.setState({ isScrolling: false }, () => {
+        // Clear style cache after state update has been committed.
+        // This way we don't break pure sCU for items that don't use isScrolling param.
+        this._getItemStyleCache(-1, null);
+      });
+    };
+  };
+}
+
+// NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+
+const validateSharedProps = (
+  {
+    children,
+    direction,
+    height,
+    layout,
+    innerTagName,
+    outerTagName,
+    width,
+  }: Props<any>,
+  { instance }: State
+): void => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn(
+          'The innerTagName and outerTagName props have been deprecated. ' +
+            'Please use the innerElementType and outerElementType props instead.'
+        );
+      }
+    }
+
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn(
+            'The direction prop should be either "ltr" (default) or "rtl". ' +
+              'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'
+          );
+        }
+        break;
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "direction" prop has been specified. ' +
+            'Value should be either "ltr" or "rtl". ' +
+            `"${direction}" was specified.`
+        );
+    }
+
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+      default:
+        throw Error(
+          'An invalid "layout" prop has been specified. ' +
+            'Value should be either "horizontal" or "vertical". ' +
+            `"${layout}" was specified.`
+        );
+    }
+
+    if (children == null) {
+      throw Error(
+        'An invalid "children" prop has been specified. ' +
+          'Value should be a React component. ' +
+          `"${children === null ? 'null' : typeof children}" was specified.`
+      );
+    }
+
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error(
+        'An invalid "width" prop has been specified. ' +
+          'Horizontal lists must specify a number for width. ' +
+          `"${width === null ? 'null' : typeof width}" was specified.`
+      );
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error(
+        'An invalid "height" prop has been specified. ' +
+          'Vertical lists must specify a number for height. ' +
+          `"${height === null ? 'null' : typeof height}" was specified.`
+      );
+    }
+  }
+};
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js b/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js
new file mode 100644
index 0000000000000..1bdc9dddc10aa
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js
@@ -0,0 +1,72 @@
+// @flow
+
+let size: number = -1;
+
+// This utility copied from "dom-helpers" package.
+export function getScrollbarSize(recalculate?: boolean = false): number {
+  if (size === -1 || recalculate) {
+    const div = document.createElement('div');
+    const style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+
+    ((document.body: any): HTMLBodyElement).appendChild(div);
+
+    size = div.offsetWidth - div.clientWidth;
+
+    ((document.body: any): HTMLBodyElement).removeChild(div);
+  }
+
+  return size;
+}
+
+export type RTLOffsetType =
+  | 'negative'
+  | 'positive-descending'
+  | 'positive-ascending';
+
+let cachedRTLResult: RTLOffsetType | null = null;
+
+// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
+  if (cachedRTLResult === null || recalculate) {
+    const outerDiv = document.createElement('div');
+    const outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+
+    const innerDiv = document.createElement('div');
+    const innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+
+    outerDiv.appendChild(innerDiv);
+
+    ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    ((document.body: any): HTMLBodyElement).removeChild(outerDiv);
+
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/index.js b/packages/react-devtools-shared/src/node_modules/react-window/src/index.js
new file mode 100644
index 0000000000000..dff39bf11968e
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/index.js
@@ -0,0 +1,9 @@
+// @flow
+
+export { default as VariableSizeGrid } from './VariableSizeGrid';
+export { default as VariableSizeList } from './VariableSizeList';
+export { default as FixedSizeGrid } from './FixedSizeGrid';
+export { default as FixedSizeList } from './FixedSizeList';
+
+export { default as areEqual } from './areEqual';
+export { default as shouldComponentUpdate } from './shouldComponentUpdate';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js b/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js
new file mode 100644
index 0000000000000..c2395f6378f27
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js
@@ -0,0 +1,17 @@
+// @flow
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+export default function shallowDiffers(prev: Object, next: Object): boolean {
+  for (let attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+  for (let attribute in next) {
+    if (prev[attribute] !== next[attribute]) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js b/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js
new file mode 100644
index 0000000000000..6b891bd4d2e50
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js
@@ -0,0 +1,16 @@
+// @flow
+
+import areEqual from './areEqual';
+import shallowDiffers from './shallowDiffers';
+
+// Custom shouldComponentUpdate for class components.
+// It knows to compare individual style props and ignore the wrapper object.
+// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
+export default function shouldComponentUpdate(
+  nextProps: Object,
+  nextState: Object
+): boolean {
+  return (
+    !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)
+  );
+}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js b/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js
new file mode 100644
index 0000000000000..aea75e5fd7c28
--- /dev/null
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js
@@ -0,0 +1,37 @@
+// @flow
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+
+const hasNativePerformanceNow =
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+const now = hasNativePerformanceNow
+  ? () => performance.now()
+  : () => Date.now();
+
+export type TimeoutID = {|
+  id: AnimationFrameID,
+|};
+
+export function cancelTimeout(timeoutID: TimeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+
+export function requestTimeout(callback: Function, delay: number): TimeoutID {
+  const start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  const timeoutID: TimeoutID = {
+    id: requestAnimationFrame(tick),
+  };
+
+  return timeoutID;
+}
diff --git a/packages/react-devtools-shared/src/storage.js b/packages/react-devtools-shared/src/storage.js
new file mode 100644
index 0000000000000..4451ef1d61092
--- /dev/null
+++ b/packages/react-devtools-shared/src/storage.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export function localStorageGetItem(key: string): any {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    return null;
+  }
+}
+
+export function localStorageRemoveItem(key: string): void {
+  try {
+    localStorage.removeItem(key);
+  } catch (error) {}
+}
+
+export function localStorageSetItem(key: string, value: any): void {
+  try {
+    return localStorage.setItem(key, value);
+  } catch (error) {}
+}
+
+export function sessionStorageGetItem(key: string): any {
+  try {
+    return sessionStorage.getItem(key);
+  } catch (error) {
+    return null;
+  }
+}
+
+export function sessionStorageRemoveItem(key: string): void {
+  try {
+    sessionStorage.removeItem(key);
+  } catch (error) {}
+}
+
+export function sessionStorageSetItem(key: string, value: any): void {
+  try {
+    return sessionStorage.setItem(key, value);
+  } catch (error) {}
+}
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
new file mode 100644
index 0000000000000..e2463a6aad26c
--- /dev/null
+++ b/packages/react-devtools-shared/src/types.js
@@ -0,0 +1,78 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type Wall = {|
+  // `listen` returns the "unlisten" function.
+  listen: (fn: Function) => Function,
+  send: (event: string, payload: any, transferable?: Array<any>) => void,
+|};
+
+// WARNING
+// The values below are referenced by ComponentFilters (which are saved via localStorage).
+// Do not change them or it will break previously saved user customizations.
+// If new element types are added, use new numbers rather than re-ordering existing ones.
+//
+// Changing these types is also a backwards breaking change for the standalone shell,
+// since the frontend and backend must share the same values-
+// and the backend is embedded in certain environments (like React Native).
+export const ElementTypeClass = 1;
+export const ElementTypeContext = 2;
+export const ElementTypeFunction = 5;
+export const ElementTypeForwardRef = 6;
+export const ElementTypeHostComponent = 7;
+export const ElementTypeMemo = 8;
+export const ElementTypeOtherOrUnknown = 9;
+export const ElementTypeProfiler = 10;
+export const ElementTypeRoot = 11;
+export const ElementTypeSuspense = 12;
+export const ElementTypeSuspenseList = 13;
+
+// Different types of elements displayed in the Elements tree.
+// These types may be used to visually distinguish types,
+// or to enable/disable certain functionality.
+export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+
+// WARNING
+// The values below are referenced by ComponentFilters (which are saved via localStorage).
+// Do not change them or it will break previously saved user customizations.
+// If new filter types are added, use new numbers rather than re-ordering existing ones.
+export const ComponentFilterElementType = 1;
+export const ComponentFilterDisplayName = 2;
+export const ComponentFilterLocation = 3;
+export const ComponentFilterHOC = 4;
+
+export type ComponentFilterType = 1 | 2 | 3 | 4;
+
+// Hide all elements of types in this Set.
+// We hide host components only by default.
+export type ElementTypeComponentFilter = {|
+  isEnabled: boolean,
+  type: 1,
+  value: ElementType,
+|};
+
+// Hide all elements with displayNames or paths matching one or more of the RegExps in this Set.
+// Path filters are only used when elements include debug source location.
+export type RegExpComponentFilter = {|
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 2 | 3,
+  value: string,
+|};
+
+export type BooleanComponentFilter = {|
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 4,
+|};
+
+export type ComponentFilter =
+  | BooleanComponentFilter
+  | ElementTypeComponentFilter
+  | RegExpComponentFilter;
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
new file mode 100644
index 0000000000000..c40e94f32537e
--- /dev/null
+++ b/packages/react-devtools-shared/src/utils.js
@@ -0,0 +1,645 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import Symbol from 'es6-symbol';
+import LRU from 'lru-cache';
+import {
+  isElement,
+  typeOf,
+  AsyncMode,
+  ConcurrentMode,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+} from 'react-is';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+} from './constants';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
+import {
+  LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+} from './constants';
+import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
+import {
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import {localStorageGetItem, localStorageSetItem} from './storage';
+import {meta} from './hydration';
+
+import type {ComponentFilter, ElementType} from './types';
+
+const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
+
+// On large trees, encoding takes significant time.
+// Try to reuse the already encoded strings.
+let encodedStringCache = new LRU({max: 1000});
+
+export function alphaSortKeys(a: string, b: string): number {
+  if (a > b) {
+    return 1;
+  } else if (b > a) {
+    return -1;
+  } else {
+    return 0;
+  }
+}
+
+export function getDisplayName(
+  type: Function,
+  fallbackName: string = 'Anonymous',
+): string {
+  const nameFromCache = cachedDisplayNames.get(type);
+  if (nameFromCache != null) {
+    return nameFromCache;
+  }
+
+  let displayName = fallbackName;
+
+  // The displayName property is not guaranteed to be a string.
+  // It's only safe to use for our purposes if it's a string.
+  // github.com/facebook/react-devtools/issues/803
+  if (typeof type.displayName === 'string') {
+    displayName = type.displayName;
+  } else if (typeof type.name === 'string' && type.name !== '') {
+    displayName = type.name;
+  }
+
+  cachedDisplayNames.set(type, displayName);
+  return displayName;
+}
+
+let uidCounter: number = 0;
+
+export function getUID(): number {
+  return ++uidCounter;
+}
+
+export function utfDecodeString(array: Array<number>): string {
+  return String.fromCodePoint(...array);
+}
+
+export function utfEncodeString(string: string): Array<number> {
+  let cached = encodedStringCache.get(string);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const encoded = new Array(string.length);
+  for (let i = 0; i < string.length; i++) {
+    encoded[i] = string.codePointAt(i);
+  }
+  encodedStringCache.set(string, encoded);
+  return encoded;
+}
+
+export function printOperationsArray(operations: Array<number>) {
+  // The first two values are always rendererID and rootID
+  const rendererID = operations[0];
+  const rootID = operations[1];
+
+  const logs = [`operations for renderer:${rendererID} and root:${rootID}`];
+
+  let i = 2;
+
+  // Reassemble the string table.
+  const stringTable = [
+    null, // ID = 0 corresponds to the null string.
+  ];
+  const stringTableSize = operations[i++];
+  const stringTableEnd = i + stringTableSize;
+  while (i < stringTableEnd) {
+    const nextLength = operations[i++];
+    const nextString = utfDecodeString(
+      (operations.slice(i, i + nextLength): any),
+    );
+    stringTable.push(nextString);
+    i += nextLength;
+  }
+
+  while (i < operations.length) {
+    const operation = operations[i];
+
+    switch (operation) {
+      case TREE_OPERATION_ADD: {
+        const id = ((operations[i + 1]: any): number);
+        const type = ((operations[i + 2]: any): ElementType);
+
+        i += 3;
+
+        if (type === ElementTypeRoot) {
+          logs.push(`Add new root node ${id}`);
+
+          i++; // supportsProfiling
+          i++; // hasOwnerMetadata
+        } else {
+          const parentID = ((operations[i]: any): number);
+          i++;
+
+          i++; // ownerID
+
+          const displayNameStringID = operations[i];
+          const displayName = stringTable[displayNameStringID];
+          i++;
+
+          i++; // key
+
+          logs.push(
+            `Add node ${id} (${displayName || 'null'}) as child of ${parentID}`,
+          );
+        }
+        break;
+      }
+      case TREE_OPERATION_REMOVE: {
+        const removeLength = ((operations[i + 1]: any): number);
+        i += 2;
+
+        for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+          const id = ((operations[i]: any): number);
+          i += 1;
+
+          logs.push(`Remove node ${id}`);
+        }
+        break;
+      }
+      case TREE_OPERATION_REORDER_CHILDREN: {
+        const id = ((operations[i + 1]: any): number);
+        const numChildren = ((operations[i + 2]: any): number);
+        i += 3;
+        const children = operations.slice(i, i + numChildren);
+        i += numChildren;
+
+        logs.push(`Re-order node ${id} children ${children.join(',')}`);
+        break;
+      }
+      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
+        // Base duration updates are only sent while profiling is in progress.
+        // We can ignore them at this point.
+        // The profiler UI uses them lazily in order to generate the tree.
+        i += 3;
+        break;
+      default:
+        throw Error(`Unsupported Bridge operation ${operation}`);
+    }
+  }
+
+  console.log(logs.join('\n  '));
+}
+
+export function getDefaultComponentFilters(): Array<ComponentFilter> {
+  return [
+    {
+      type: ComponentFilterElementType,
+      value: ElementTypeHostComponent,
+      isEnabled: true,
+    },
+  ];
+}
+
+export function getSavedComponentFilters(): Array<ComponentFilter> {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return getDefaultComponentFilters();
+}
+
+export function saveComponentFilters(
+  componentFilters: Array<ComponentFilter>,
+): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+    JSON.stringify(componentFilters),
+  );
+}
+
+export function getAppendComponentStack(): boolean {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return true;
+}
+
+export function setAppendComponentStack(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    JSON.stringify(value),
+  );
+}
+
+export function separateDisplayNameAndHOCs(
+  displayName: string | null,
+  type: ElementType,
+): [string | null, Array<string> | null] {
+  if (displayName === null) {
+    return [null, null];
+  }
+
+  let hocDisplayNames = null;
+
+  switch (type) {
+    case ElementTypeClass:
+    case ElementTypeForwardRef:
+    case ElementTypeFunction:
+    case ElementTypeMemo:
+      if (displayName.indexOf('(') >= 0) {
+        const matches = displayName.match(/[^()]+/g);
+        if (matches != null) {
+          displayName = matches.pop();
+          hocDisplayNames = matches;
+        }
+      }
+      break;
+    default:
+      break;
+  }
+
+  return [displayName, hocDisplayNames];
+}
+
+// Pulled from react-compat
+// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
+export function shallowDiffers(prev: Object, next: Object): boolean {
+  for (let attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+  for (let attribute in next) {
+    if (prev[attribute] !== next[attribute]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function getInObject(object: Object, path: Array<string | number>): any {
+  return path.reduce((reduced: Object, attr: any): any => {
+    if (reduced) {
+      if (hasOwnProperty.call(reduced, attr)) {
+        return reduced[attr];
+      }
+      if (typeof reduced[Symbol.iterator] === 'function') {
+        // Convert iterable to array and return array[index]
+        //
+        // TRICKY
+        // Don't use [...spread] syntax for this purpose.
+        // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
+        // Other types (e.g. typed arrays, Sets) will not spread correctly.
+        return Array.from(reduced)[attr];
+      }
+    }
+
+    return null;
+  }, object);
+}
+
+export function setInObject(
+  object: Object,
+  path: Array<string | number>,
+  value: any,
+) {
+  const length = path.length;
+  const last = path[length - 1];
+  if (object != null) {
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (parent) {
+      parent[last] = value;
+    }
+  }
+}
+
+export type DataType =
+  | 'array'
+  | 'array_buffer'
+  | 'bigint'
+  | 'boolean'
+  | 'data_view'
+  | 'date'
+  | 'function'
+  | 'html_element'
+  | 'infinity'
+  | 'iterator'
+  | 'nan'
+  | 'null'
+  | 'number'
+  | 'object'
+  | 'react_element'
+  | 'regexp'
+  | 'string'
+  | 'symbol'
+  | 'typed_array'
+  | 'undefined'
+  | 'unknown';
+
+/**
+ * Get a enhanced/artificial type string based on the object instance
+ */
+export function getDataType(data: Object): DataType {
+  if (data === null) {
+    return 'null';
+  } else if (data === undefined) {
+    return 'undefined';
+  }
+
+  if (isElement(data)) {
+    return 'react_element';
+  }
+
+  if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {
+    return 'html_element';
+  }
+
+  const type = typeof data;
+  switch (type) {
+    case 'bigint':
+      return 'bigint';
+    case 'boolean':
+      return 'boolean';
+    case 'function':
+      return 'function';
+    case 'number':
+      if (Number.isNaN(data)) {
+        return 'nan';
+      } else if (!Number.isFinite(data)) {
+        return 'infinity';
+      } else {
+        return 'number';
+      }
+    case 'object':
+      if (Array.isArray(data)) {
+        return 'array';
+      } else if (ArrayBuffer.isView(data)) {
+        return hasOwnProperty.call(data.constructor, 'BYTES_PER_ELEMENT')
+          ? 'typed_array'
+          : 'data_view';
+      } else if (data.constructor && data.constructor.name === 'ArrayBuffer') {
+        // HACK This ArrayBuffer check is gross; is there a better way?
+        // We could try to create a new DataView with the value.
+        // If it doesn't error, we know it's an ArrayBuffer,
+        // but this seems kind of awkward and expensive.
+        return 'array_buffer';
+      } else if (typeof data[Symbol.iterator] === 'function') {
+        return 'iterator';
+      } else if (data.constructor && data.constructor.name === 'RegExp') {
+        return 'regexp';
+      } else if (Object.prototype.toString.call(data) === '[object Date]') {
+        return 'date';
+      }
+      return 'object';
+    case 'string':
+      return 'string';
+    case 'symbol':
+      return 'symbol';
+    default:
+      return 'unknown';
+  }
+}
+
+export function getDisplayNameForReactElement(
+  element: React$Element<any>,
+): string | null {
+  const elementType = typeOf(element);
+  switch (elementType) {
+    case AsyncMode:
+    case ConcurrentMode:
+      return 'ConcurrentMode';
+    case ContextConsumer:
+      return 'ContextConsumer';
+    case ContextProvider:
+      return 'ContextProvider';
+    case ForwardRef:
+      return 'ForwardRef';
+    case Fragment:
+      return 'Fragment';
+    case Lazy:
+      return 'Lazy';
+    case Memo:
+      return 'Memo';
+    case Portal:
+      return 'Portal';
+    case Profiler:
+      return 'Profiler';
+    case StrictMode:
+      return 'StrictMode';
+    case Suspense:
+      return 'Suspense';
+    default:
+      const {type} = element;
+      if (typeof type === 'string') {
+        return type;
+      } else if (type != null) {
+        return getDisplayName(type, 'Anonymous');
+      } else {
+        return 'Element';
+      }
+  }
+}
+
+const MAX_PREVIEW_STRING_LENGTH = 50;
+
+function truncateForDisplay(
+  string: string,
+  length: number = MAX_PREVIEW_STRING_LENGTH,
+) {
+  if (string.length > length) {
+    return string.substr(0, length) + '…';
+  } else {
+    return string;
+  }
+}
+
+// Attempts to mimic Chrome's inline preview for values.
+// For example, the following value...
+//   {
+//      foo: 123,
+//      bar: "abc",
+//      baz: [true, false],
+//      qux: { ab: 1, cd: 2 }
+//   };
+//
+// Would show a preview of...
+//   {foo: 123, bar: "abc", baz: Array(2), qux: {…}}
+//
+// And the following value...
+//   [
+//     123,
+//     "abc",
+//     [true, false],
+//     { foo: 123, bar: "abc" }
+//   ];
+//
+// Would show a preview of...
+//   [123, "abc", Array(2), {…}]
+export function formatDataForPreview(
+  data: any,
+  showFormattedValue: boolean,
+): string {
+  if (data != null && hasOwnProperty.call(data, meta.type)) {
+    return showFormattedValue
+      ? data[meta.preview_long]
+      : data[meta.preview_short];
+  }
+
+  const type = getDataType(data);
+
+  switch (type) {
+    case 'html_element':
+      return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
+    case 'function':
+      return truncateForDisplay(`ƒ ${data.name}() {}`);
+    case 'string':
+      return `"${data}"`;
+    case 'bigint':
+      return truncateForDisplay(data.toString() + 'n');
+    case 'regexp':
+      return truncateForDisplay(data.toString());
+    case 'symbol':
+      return truncateForDisplay(data.toString());
+    case 'react_element':
+      return `<${truncateForDisplay(
+        getDisplayNameForReactElement(data) || 'Unknown',
+      )} />`;
+    case 'array_buffer':
+      return `ArrayBuffer(${data.byteLength})`;
+    case 'data_view':
+      return `DataView(${data.buffer.byteLength})`;
+    case 'array':
+      if (showFormattedValue) {
+        let formatted = '';
+        for (let i = 0; i < data.length; i++) {
+          if (i > 0) {
+            formatted += ', ';
+          }
+          formatted += formatDataForPreview(data[i], false);
+          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {
+            // Prevent doing a lot of unnecessary iteration...
+            break;
+          }
+        }
+        return `[${truncateForDisplay(formatted)}]`;
+      } else {
+        const length = hasOwnProperty.call(data, meta.size)
+          ? data[meta.size]
+          : data.length;
+        return `Array(${length})`;
+      }
+    case 'typed_array':
+      const shortName = `${data.constructor.name}(${data.length})`;
+      if (showFormattedValue) {
+        let formatted = '';
+        for (let i = 0; i < data.length; i++) {
+          if (i > 0) {
+            formatted += ', ';
+          }
+          formatted += data[i];
+          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {
+            // Prevent doing a lot of unnecessary iteration...
+            break;
+          }
+        }
+        return `${shortName} [${truncateForDisplay(formatted)}]`;
+      } else {
+        return shortName;
+      }
+    case 'iterator':
+      const name = data.constructor.name;
+      if (showFormattedValue) {
+        // TRICKY
+        // Don't use [...spread] syntax for this purpose.
+        // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
+        // Other types (e.g. typed arrays, Sets) will not spread correctly.
+        const array = Array.from(data);
+
+        let formatted = '';
+        for (let i = 0; i < array.length; i++) {
+          const entryOrEntries = array[i];
+
+          if (i > 0) {
+            formatted += ', ';
+          }
+
+          // TRICKY
+          // Browsers display Maps and Sets differently.
+          // To mimic their behavior, detect if we've been given an entries tuple.
+          //   Map(2) {"abc" => 123, "def" => 123}
+          //   Set(2) {"abc", 123}
+          if (Array.isArray(entryOrEntries)) {
+            const key = formatDataForPreview(entryOrEntries[0], true);
+            const value = formatDataForPreview(entryOrEntries[1], false);
+            formatted += `${key} => ${value}`;
+          } else {
+            formatted += formatDataForPreview(entryOrEntries, false);
+          }
+
+          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {
+            // Prevent doing a lot of unnecessary iteration...
+            break;
+          }
+        }
+
+        return `${name}(${data.size}) {${truncateForDisplay(formatted)}}`;
+      } else {
+        return `${name}(${data.size})`;
+      }
+    case 'date':
+      return data.toString();
+    case 'object':
+      if (showFormattedValue) {
+        const keys = Object.keys(data).sort(alphaSortKeys);
+
+        let formatted = '';
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          if (i > 0) {
+            formatted += ', ';
+          }
+          formatted += `${key}: ${formatDataForPreview(data[key], false)}`;
+          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {
+            // Prevent doing a lot of unnecessary iteration...
+            break;
+          }
+        }
+        return `{${truncateForDisplay(formatted)}}`;
+      } else {
+        return '{…}';
+      }
+    case 'boolean':
+    case 'number':
+    case 'infinity':
+    case 'nan':
+    case 'null':
+    case 'undefined':
+      return data;
+    default:
+      try {
+        return truncateForDisplay('' + data);
+      } catch (error) {
+        return 'unserializable';
+      }
+  }
+}
diff --git a/packages/react-devtools-shell/README.md b/packages/react-devtools-shell/README.md
new file mode 100644
index 0000000000000..0ad5de70b94e5
--- /dev/null
+++ b/packages/react-devtools-shell/README.md
@@ -0,0 +1,12 @@
+Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
+
+## Development
+
+This target should be run in parallel with the `react-devtools-inline` package. The first step then is to run that target following the instructions in the [`react-devtools-inline` README](https://github.com/facebook/react/blob/master/packages/react-devtools-inline/README.md).
+
+The test harness can then be run as follows:
+```sh
+cd packages/react-devtools-shell
+
+yarn start
+```
diff --git a/packages/react-devtools-shell/index.html b/packages/react-devtools-shell/index.html
new file mode 100644
index 0000000000000..410dc5bdc2abd
--- /dev/null
+++ b/packages/react-devtools-shell/index.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      #target {
+        flex: 1;
+        border: none;
+      }
+      #devtools {
+        height: 400px;
+        max-height: 50%;
+        overflow: hidden;
+        z-index: 10000001;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+          sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .optionsRow {
+        width: 100%;
+        display: flex;
+        padding: 0.25rem;
+        background: aliceblue;
+        border-bottom: 1px solid lightblue;
+        box-sizing: border-box;
+      }
+      .optionsRowSpacer {
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="optionsRow">
+      <button id="mountButton">Unmount test app</button>
+      <div class="optionsRowSpacer">&nbsp;</div>
+      <span>
+        <a href="https://react-devtools-experimental-chrome.now.sh/">Chrome extension</a>
+        <a href="https://react-devtools-experimental-firefox.now.sh/">Firefox extension</a>
+      </span>
+    </div>
+
+    <!-- React test app (shells/dev/app) is injected here -->
+    <!-- DevTools backend (shells/dev/src) is injected here -->
+    <!-- global "hook" is defined on the iframe's contentWindow -->
+    <iframe id="target"></iframe>
+
+    <!-- DevTools frontend UI (shells/dev/src) renders here -->
+    <div id="devtools"></div>
+
+    <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
+    <!-- In DEV mode, this file is served by the Webpack dev server -->
+    <!-- For production builds, it's built by Webpack and uploaded from the local file system -->
+    <script src="dist/devtools.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/react-devtools-shell/now.json b/packages/react-devtools-shell/now.json
new file mode 100644
index 0000000000000..7c0805c3b1656
--- /dev/null
+++ b/packages/react-devtools-shell/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental",
+  "alias": ["react-devtools-experimental"],
+  "files": ["index.html", "dist"]
+}
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
new file mode 100644
index 0000000000000..db518f27cb714
--- /dev/null
+++ b/packages/react-devtools-shell/package.json
@@ -0,0 +1,33 @@
+{
+  "private": true,
+  "name": "react-devtools-shell",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
+    "deploy": "yarn run build && now deploy && now alias react-devtools-experimental",
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open"
+  },
+  "dependencies": {
+    "immutable": "^4.0.0-rc.12",
+    "react-native-web": "^0.11.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.3.1"
+  }
+}
diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
new file mode 100644
index 0000000000000..bc6b05fa9d774
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment} from 'react';
+
+function wrapWithHoc(Component, index) {
+  function HOC() {
+    return <Component />;
+  }
+
+  // $FlowFixMe
+  const displayName = Component.displayName || Component.name;
+
+  HOC.displayName = `withHoc${index}(${displayName})`;
+  return HOC;
+}
+
+function wrapWithNested(Component, times) {
+  for (let i = 0; i < times; i++) {
+    Component = wrapWithHoc(Component, i);
+  }
+
+  return Component;
+}
+
+function Nested() {
+  return <div>Deeply nested div</div>;
+}
+
+const DeeplyNested = wrapWithNested(Nested, 100);
+
+export default function DeeplyNestedComponents() {
+  return (
+    <Fragment>
+      <h1>Deeply nested component</h1>
+      <DeeplyNested />
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js
new file mode 100644
index 0000000000000..220a58c17be32
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -0,0 +1,169 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  Component,
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react';
+
+const initialData = {foo: 'FOO', bar: 'BAR'};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'swap':
+      return {foo: state.bar, bar: state.foo};
+    default:
+      throw new Error();
+  }
+}
+
+type StatefulFunctionProps = {|name: string|};
+
+function StatefulFunction({name}: StatefulFunctionProps) {
+  const [count, updateCount] = useState(0);
+  const debouncedCount = useDebounce(count, 1000);
+  const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+    count,
+  ]);
+
+  const [data, dispatch] = useReducer(reducer, initialData);
+  const handleUpdateReducerClick = useCallback(
+    () => dispatch({type: 'swap'}),
+    [],
+  );
+
+  return (
+    <ul>
+      <li>Name: {name}</li>
+      <li>
+        <button onClick={handleUpdateCountClick}>
+          Debounced count: {debouncedCount}
+        </button>
+      </li>
+      <li>
+        Reducer state: foo "{data.foo}", bar "{data.bar}"
+      </li>
+      <li>
+        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
+      </li>
+    </ul>
+  );
+}
+
+const BoolContext = createContext(true);
+BoolContext.displayName = 'BoolContext';
+
+type Props = {|name: string, toggle: boolean|};
+type State = {|cities: Array<string>, state: string|};
+
+class StatefulClass extends Component<Props, State> {
+  static contextType = BoolContext;
+
+  state: State = {
+    cities: ['San Francisco', 'San Jose'],
+    state: 'California',
+  };
+
+  handleChange = ({target}) =>
+    this.setState({
+      state: target.value,
+    });
+
+  render() {
+    return (
+      <ul>
+        <li>Name: {this.props.name}</li>
+        <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
+        <li>
+          State: <input value={this.state.state} onChange={this.handleChange} />
+        </li>
+        <li>Cities: {this.state.cities.join(', ')}</li>
+        <li>Context: {this.context ? 'true' : 'false'}</li>
+      </ul>
+    );
+  }
+}
+
+const MemoizedStatefulClass = memo(StatefulClass);
+const MemoizedStatefulFunction = memo(StatefulFunction);
+
+const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
+  ({name}, ref) => {
+    const [count, updateCount] = useState(0);
+    const debouncedCount = useDebounce(count, 1000);
+    const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+      count,
+    ]);
+    return (
+      <ul ref={ref}>
+        <li>Name: {name}</li>
+        <li>
+          <button onClick={handleUpdateCountClick}>
+            Debounced count: {debouncedCount}
+          </button>
+        </li>
+      </ul>
+    );
+  },
+);
+
+export default function EditableProps() {
+  return (
+    <Fragment>
+      <h1>Editable props</h1>
+      <strong>Class</strong>
+      <StatefulClass name="Brian" toggle={true} />
+      <strong>Function</strong>
+      <StatefulFunction name="Brian" />
+      <strong>Memoized Class</strong>
+      <MemoizedStatefulClass name="Brian" toggle={true} />
+      <strong>Memoized Function</strong>
+      <MemoizedStatefulFunction name="Brian" />
+      <strong>Forward Ref</strong>
+      <ForwardRef name="Brian" />
+    </Fragment>
+  );
+}
+
+// Below copied from https://usehooks.com/
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValue(debouncedValue);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay], // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+// Above copied from https://usehooks.com/
diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js
new file mode 100644
index 0000000000000..1b7bb0d32fc60
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -0,0 +1,76 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  Component,
+  Fragment,
+  // $FlowFixMe Flow doesn't know about the Profiler import yet
+  Profiler,
+  StrictMode,
+  Suspense,
+} from 'react';
+
+const Context = createContext('abc');
+Context.displayName = 'ExampleContext';
+
+class ClassComponent extends Component<any> {
+  render() {
+    return null;
+  }
+}
+
+function FunctionComponent() {
+  return null;
+}
+
+const MemoFunctionComponent = memo(FunctionComponent);
+
+const FowardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
+  return <ClassComponent ref={ref} {...props} />;
+});
+const FowardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
+
+const LazyComponent = lazy(() =>
+  Promise.resolve({
+    default: FunctionComponent,
+  }),
+);
+
+export default function ElementTypes() {
+  return (
+    <Profiler id="test" onRender={() => {}}>
+      <Fragment>
+        <Context.Provider value={'def'}>
+          <Context.Consumer>{value => null}</Context.Consumer>
+        </Context.Provider>
+        <StrictMode>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ClassComponent />
+            <FunctionComponent />
+            <MemoFunctionComponent />
+            <ForwardRefComponent />
+            <FowardRefComponentWithAnonymousFunction />
+            <FowardRefComponentWithCustomDisplayName />
+            <LazyComponent />
+          </Suspense>
+        </StrictMode>
+      </Fragment>
+    </Profiler>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/Hydration/index.js b/packages/react-devtools-shell/src/app/Hydration/index.js
new file mode 100644
index 0000000000000..d2be0e6901737
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Hydration/index.js
@@ -0,0 +1,148 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useDebugValue, useState} from 'react';
+
+const div = document.createElement('div');
+const exmapleFunction = () => {};
+const typedArray = new Uint8Array(3);
+typedArray[0] = 1;
+typedArray[1] = 2;
+typedArray[2] = 3;
+
+const arrayOfArrays = [
+  [
+    ['a', 'b', 'c'],
+    ['d', 'e', 'f'],
+    ['h', 'i', 'j'],
+  ],
+  [
+    ['k', 'l', 'm'],
+    ['n', 'o', 'p'],
+    ['q', 'r', 's'],
+  ],
+  [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],
+  [],
+];
+
+const objectOfObjects = {
+  foo: {
+    a: 1,
+    b: 2,
+    c: 3,
+  },
+  bar: {
+    e: 4,
+    f: 5,
+    g: 6,
+  },
+  baz: {
+    h: 7,
+    i: 8,
+    j: 9,
+  },
+  qux: {},
+};
+
+function useOuterFoo() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  useState({
+    valueA: {
+      valueB: {
+        valueC: 'abc',
+      },
+    },
+  });
+  return useInnerFoo();
+}
+
+function useInnerFoo() {
+  const [value] = useState([[['a', 'b', 'c']]]);
+  return value;
+}
+
+function useOuterBar() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  return useInnerBar();
+}
+
+function useInnerBar() {
+  useDebugValue({
+    debugA: {
+      debugB: {
+        debugC: 'abc',
+      },
+    },
+  });
+  const [count] = useState(123);
+  return count;
+}
+
+function useOuterBaz() {
+  return useInnerBaz();
+}
+
+function useInnerBaz() {
+  const [count] = useState(123);
+  return count;
+}
+
+export default function Hydration() {
+  return (
+    <Fragment>
+      <h1>Hydration</h1>
+      <DehydratableProps
+        html_element={div}
+        fn={exmapleFunction}
+        symbol={Symbol('symbol')}
+        react_element={<span />}
+        array_buffer={typedArray.buffer}
+        typed_array={typedArray}
+        date={new Date()}
+        array={arrayOfArrays}
+        object={objectOfObjects}
+      />
+      <DeepHooks />
+    </Fragment>
+  );
+}
+
+function DehydratableProps({array, object}: any) {
+  return (
+    <ul>
+      <li>array: {JSON.stringify(array, null, 2)}</li>
+      <li>object: {JSON.stringify(object, null, 2)}</li>
+    </ul>
+  );
+}
+
+function DeepHooks(props: any) {
+  const foo = useOuterFoo();
+  const bar = useOuterBar();
+  const baz = useOuterBaz();
+  return (
+    <ul>
+      <li>foo: {foo}</li>
+      <li>bar: {bar}</li>
+      <li>baz: {baz}</li>
+    </ul>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js
new file mode 100644
index 0000000000000..394b0d680f9c4
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -0,0 +1,69 @@
+/** @flow */
+
+import React, {Fragment} from 'react';
+import ReactDOM from 'react-dom';
+
+export default function Iframe() {
+  return (
+    <Fragment>
+      <h2>Iframe</h2>
+      <div>
+        <Frame>
+          <Greeting />
+        </Frame>
+      </div>
+    </Fragment>
+  );
+}
+
+const iframeStyle = {border: '2px solid #eee', height: 80};
+
+function Frame(props) {
+  const [element, setElement] = React.useState(null);
+
+  const ref = React.useRef();
+
+  React.useLayoutEffect(function() {
+    const iframe = ref.current;
+
+    if (iframe) {
+      const html = `
+    <!DOCTYPE html>
+    <html>
+    <body>
+      <div id="root"></div>
+    </body>
+    </html>
+    `;
+
+      const document = iframe.contentDocument;
+
+      document.open();
+      document.write(html);
+      document.close();
+
+      setElement(document.getElementById('root'));
+    }
+  }, []);
+
+  return (
+    <Fragment>
+      <iframe title="Test Iframe" ref={ref} style={iframeStyle} />
+      <iframe
+        title="Secured Iframe"
+        src="https://example.com"
+        style={iframeStyle}
+      />
+
+      {element ? ReactDOM.createPortal(props.children, element) : null}
+    </Fragment>
+  );
+}
+
+function Greeting() {
+  return (
+    <p>
+      Hello from within an <code>&lt;iframe&gt;</code>!
+    </p>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
new file mode 100644
index 0000000000000..f2320c490a160
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+const arrayOne = [];
+const arrayTwo = [];
+arrayTwo.push(arrayOne);
+arrayOne.push(arrayTwo);
+
+const objectOne = {};
+const objectTwo = {objectOne};
+objectOne.objectTwo = objectTwo;
+
+export default function CircularReferences() {
+  return <ChildComponent arrayOne={arrayOne} objectOne={objectOne} />;
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
new file mode 100644
index 0000000000000..776e043feca2d
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -0,0 +1,120 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {createContext, Component, Fragment, useContext} from 'react';
+import PropTypes from 'prop-types';
+
+function someNamedFunction() {}
+
+const contextData = {
+  array: ['first', 'second', 'third'],
+  bool: true,
+  func: someNamedFunction,
+  number: 123,
+  object: {outer: {inner: {}}},
+  string: 'abc',
+  symbol: Symbol.for('symbol'),
+  null: null,
+  undefined: undefined,
+};
+
+class LegacyContextProvider extends Component<any> {
+  static childContextTypes = {
+    array: PropTypes.array,
+    bool: PropTypes.bool,
+    func: PropTypes.func,
+    number: PropTypes.number,
+    object: PropTypes.object,
+    string: PropTypes.string,
+    symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
+  };
+
+  getChildContext() {
+    return contextData;
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+class LegacyContextConsumer extends Component<any> {
+  static contextTypes = {
+    array: PropTypes.array,
+    bool: PropTypes.bool,
+    func: PropTypes.func,
+    number: PropTypes.number,
+    object: PropTypes.object,
+    string: PropTypes.string,
+    symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
+  };
+
+  render() {
+    return null;
+  }
+}
+
+const ModernContext = createContext();
+ModernContext.displayName = 'ModernContext';
+const ArrayContext = createContext(contextData.array);
+ArrayContext.displayName = 'ArrayContext';
+const BoolContext = createContext(contextData.bool);
+BoolContext.displayName = 'BoolContext';
+const FuncContext = createContext(contextData.func);
+FuncContext.displayName = 'FuncContext';
+const NumberContext = createContext(contextData.number);
+NumberContext.displayName = 'NumberContext';
+const StringContext = createContext(contextData.string);
+StringContext.displayName = 'StringContext';
+const SymbolContext = createContext(contextData.symbol);
+SymbolContext.displayName = 'SymbolContext';
+const NullContext = createContext(null);
+NullContext.displayName = 'NullContext';
+const UndefinedContext = createContext(undefined);
+UndefinedContext.displayName = 'UndefinedContext';
+
+class ModernContextType extends Component<any> {
+  static contextType = ModernContext;
+
+  render() {
+    return null;
+  }
+}
+
+function FunctionalContextConsumer() {
+  useContext(StringContext);
+  return null;
+}
+
+export default function Contexts() {
+  return (
+    <Fragment>
+      <LegacyContextProvider>
+        <LegacyContextConsumer />
+      </LegacyContextProvider>
+      <ModernContext.Provider value={contextData}>
+        <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
+        <ModernContextType />
+      </ModernContext.Provider>
+      <FunctionalContextConsumer />
+      <ArrayContext.Consumer>{value => null}</ArrayContext.Consumer>
+      <BoolContext.Consumer>{value => null}</BoolContext.Consumer>
+      <FuncContext.Consumer>{value => null}</FuncContext.Consumer>
+      <NumberContext.Consumer>{value => null}</NumberContext.Consumer>
+      <StringContext.Consumer>{value => null}</StringContext.Consumer>
+      <SymbolContext.Consumer>{value => null}</SymbolContext.Consumer>
+      <NullContext.Consumer>{value => null}</NullContext.Consumer>
+      <UndefinedContext.Consumer>{value => null}</UndefinedContext.Consumer>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
new file mode 100644
index 0000000000000..e363c35d58bcf
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -0,0 +1,132 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useState,
+} from 'react';
+
+const object = {
+  string: 'abc',
+  number: 123,
+  boolean: true,
+  null: null,
+  undefined: undefined,
+  array: ['a', 'b', 'c'],
+  object: {foo: 1, bar: 2, baz: 3},
+};
+
+function useNestedInnerHook() {
+  return useState(123);
+}
+function useNestedOuterHook() {
+  return useNestedInnerHook();
+}
+
+function useCustomObject() {
+  useDebugValue(object);
+  return useState(123);
+}
+
+function useDeepHookA() {
+  useDebugValue('useDeepHookA');
+  useDeepHookB();
+}
+function useDeepHookB() {
+  useDebugValue('useDeepHookB');
+  useDeepHookC();
+}
+function useDeepHookC() {
+  useDebugValue('useDeepHookC');
+  useDeepHookD();
+}
+function useDeepHookD() {
+  useDebugValue('useDeepHookD');
+  useDeepHookE();
+}
+function useDeepHookE() {
+  useDebugValue('useDeepHookE');
+  useDeepHookF();
+}
+function useDeepHookF() {
+  useDebugValue('useDeepHookF');
+}
+
+function FunctionWithHooks(props: any, ref: React$Ref<any>) {
+  const [count, updateCount] = useState(0);
+
+  // eslint-disable-next-line no-unused-vars
+  const [_, __] = useState(object);
+
+  // Custom hook with a custom debug label
+  const debouncedCount = useDebounce(count, 1000);
+
+  useCustomObject();
+
+  const onClick = useCallback(
+    function onClick() {
+      updateCount(count + 1);
+    },
+    [count],
+  );
+
+  // Tests nested custom hooks
+  useNestedOuterHook();
+
+  // Verify deep nesting doesn't break
+  useDeepHookA();
+
+  return <button onClick={onClick}>Count: {debouncedCount}</button>;
+}
+const MemoWithHooks = memo(FunctionWithHooks);
+const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
+
+export default function CustomHooks() {
+  return (
+    <Fragment>
+      <FunctionWithHooks />
+      <MemoWithHooks />
+      <ForwardRefWithHooks />
+    </Fragment>
+  );
+}
+
+// Below copied from https://usehooks.com/
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValue(debouncedValue);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay], // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+// Above copied from https://usehooks.com/
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
new file mode 100644
index 0000000000000..be8e53b5e78f9
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+class Custom {
+  _number = 42;
+  get number() {
+    return this._number;
+  }
+}
+
+export default function CustomObject() {
+  return <ChildComponent customObject={new Custom()} />;
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
new file mode 100644
index 0000000000000..5303b9a281d14
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+const objectWithModifiedHasOwnProperty = {
+  foo: 'abc',
+  bar: 123,
+  hasOwnProperty: true,
+};
+
+const objectWithNullProto = Object.create(null);
+objectWithNullProto.foo = 'abc';
+objectWithNullProto.bar = 123;
+
+export default function EdgeCaseObjects() {
+  return (
+    <ChildComponent
+      objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
+      objectWithNullProto={objectWithNullProto}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
new file mode 100644
index 0000000000000..62cf39fe9767a
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
@@ -0,0 +1,36 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment} from 'react';
+import UnserializableProps from './UnserializableProps';
+import CircularReferences from './CircularReferences';
+import Contexts from './Contexts';
+import CustomHooks from './CustomHooks';
+import CustomObject from './CustomObject';
+import EdgeCaseObjects from './EdgeCaseObjects.js';
+import NestedProps from './NestedProps';
+import SimpleValues from './SimpleValues';
+
+// TODO Add Immutable JS example
+
+export default function InspectableElements() {
+  return (
+    <Fragment>
+      <h1>Inspectable elements</h1>
+      <SimpleValues />
+      <UnserializableProps />
+      <NestedProps />
+      <Contexts />
+      <CustomHooks />
+      <CustomObject />
+      <EdgeCaseObjects />
+      <CircularReferences />
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
new file mode 100644
index 0000000000000..24076e85951d2
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
@@ -0,0 +1,64 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+const object = {
+  string: 'abc',
+  longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
+  emptyString: '',
+  number: 123,
+  boolean: true,
+  undefined: undefined,
+  null: null,
+};
+
+export default function ObjectProps() {
+  return (
+    <ChildComponent
+      object={{
+        outer: {
+          inner: object,
+        },
+      }}
+      array={['first', 'second', 'third']}
+      objectInArray={[object]}
+      arrayInObject={{array: ['first', 'second', 'third']}}
+      deepObject={{
+        // Known limitation: we won't go deeper than several levels.
+        // In the future, we might offer a way to request deeper access on demand.
+        a: {
+          b: {
+            c: {
+              d: {
+                e: {
+                  f: {
+                    g: {
+                      h: {
+                        i: {
+                          j: 10,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }}
+      emptyArray={[]}
+      emptyObject={{}}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
new file mode 100644
index 0000000000000..1a748d926d0fc
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Component} from 'react';
+
+function noop() {}
+
+export default class SimpleValues extends Component {
+  anonymousFunction = () => {};
+
+  render() {
+    return (
+      <ChildComponent
+        string="abc"
+        emptyString=""
+        number={123}
+        undefined={undefined}
+        null={null}
+        nan={NaN}
+        infinity={Infinity}
+        true={true}
+        false={false}
+        function={noop}
+        anonymousFunction={this.anonymousFunction}
+        boundFunction={noop.bind(this)}
+        regex={/abc[123]+/i}
+      />
+    );
+  }
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
new file mode 100644
index 0000000000000..561aad203449d
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import Immutable from 'immutable';
+
+const set = new Set(['abc', 123]);
+const map = new Map([
+  ['name', 'Brian'],
+  ['food', 'sushi'],
+]);
+const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
+const mapOfMaps = new Map([
+  ['first', map],
+  ['second', map],
+]);
+const typedArray = Int8Array.from([100, -100, 0]);
+const arrayBuffer = typedArray.buffer;
+const dataView = new DataView(arrayBuffer);
+const immutable = Immutable.fromJS({
+  a: [{hello: 'there'}, 'fixed', true],
+  b: 123,
+  c: {
+    '1': 'xyz',
+    xyz: 1,
+  },
+});
+
+export default function UnserializableProps() {
+  return (
+    <ChildComponent
+      arrayBuffer={arrayBuffer}
+      dataView={dataView}
+      map={map}
+      set={set}
+      mapOfMaps={mapOfMaps}
+      setOfSets={setOfSets}
+      typedArray={typedArray}
+      immutable={immutable}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-events/drag.js b/packages/react-devtools-shell/src/app/InspectableElements/index.js
similarity index 68%
rename from packages/react-events/drag.js
rename to packages/react-devtools-shell/src/app/InspectableElements/index.js
index f8148f1273cbf..be617ddcf71b1 100644
--- a/packages/react-events/drag.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/index.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-'use strict';
+import InspectableElements from './InspectableElements';
 
-const Drag = require('./src/Drag');
-
-module.exports = Drag.default || Drag;
+export default InspectableElements;
diff --git a/packages/react-devtools-shell/src/app/InteractionTracing/index.js b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
new file mode 100644
index 0000000000000..9d713d8fe5bcd
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
@@ -0,0 +1,80 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {
+  unstable_trace as trace,
+  unstable_wrap as wrap,
+} from 'scheduler/tracing';
+
+export default function InteractionTracing() {
+  const [count, setCount] = useState(0);
+  const [shouldCascade, setShouldCascade] = useState(false);
+
+  const handleUpdate = useCallback(() => {
+    trace('count', performance.now(), () => {
+      setTimeout(
+        wrap(() => {
+          setCount(count + 1);
+        }),
+        count * 100,
+      );
+    });
+  }, [count]);
+
+  const handleCascadingUpdate = useCallback(() => {
+    trace('cascade', performance.now(), () => {
+      setTimeout(
+        wrap(() => {
+          batchedUpdates(() => {
+            setCount(count + 1);
+            setShouldCascade(true);
+          });
+        }),
+        count * 100,
+      );
+    });
+  }, [count]);
+
+  const handleMultiple = useCallback(() => {
+    trace('first', performance.now(), () => {
+      trace('second', performance.now(), () => {
+        setTimeout(
+          wrap(() => {
+            setCount(count + 1);
+          }),
+          count * 100,
+        );
+      });
+    });
+  }, [count]);
+
+  useEffect(() => {
+    if (shouldCascade) {
+      setTimeout(
+        wrap(() => {
+          setShouldCascade(false);
+        }),
+        count * 100,
+      );
+    }
+  }, [count, shouldCascade]);
+
+  return (
+    <Fragment>
+      <h1>Interaction Tracing</h1>
+      <button onClick={handleUpdate}>Update ({count})</button>
+      <button onClick={handleCascadingUpdate}>
+        Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})
+      </button>
+      <button onClick={handleMultiple}>Multiple</button>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/PriorityLevels/index.js b/packages/react-devtools-shell/src/app/PriorityLevels/index.js
new file mode 100644
index 0000000000000..c19e02868f9b5
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/PriorityLevels/index.js
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback, useState} from 'react';
+import {
+  unstable_IdlePriority as IdlePriority,
+  unstable_LowPriority as LowPriority,
+  unstable_runWithPriority as runWithPriority,
+} from 'scheduler';
+
+export default function PriorityLevels() {
+  const [defaultPriority, setDefaultPriority] = useState<boolean>(false);
+  const [idlePriority, setIdlePriority] = useState<boolean>(false);
+  const [normalPriority, setLowPriority] = useState<boolean>(false);
+
+  const resetSequence = useCallback(() => {
+    setDefaultPriority(false);
+    setLowPriority(false);
+    setIdlePriority(false);
+  }, []);
+
+  const startSequence = useCallback(() => {
+    setDefaultPriority(true);
+    runWithPriority(LowPriority, () => setLowPriority(true));
+    runWithPriority(IdlePriority, () => setIdlePriority(true));
+  }, []);
+
+  const labels = [];
+  if (defaultPriority) {
+    labels.push('(default priority)');
+  }
+  if (normalPriority) {
+    labels.push('Low Priority');
+  }
+  if (idlePriority) {
+    labels.push('Idle Priority');
+  }
+
+  return (
+    <Fragment>
+      <h1>Priority Levels</h1>
+      <button onClick={resetSequence}>Reset</button>
+      <button onClick={startSequence}>Start sequence</button>
+      <span>{labels.join(', ')}</span>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
new file mode 100644
index 0000000000000..95961378f00d2
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
@@ -0,0 +1,41 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useState} from 'react';
+import {Button, Text, View} from 'react-native-web';
+
+export default function ReactNativeWeb() {
+  const [backgroundColor, setBackgroundColor] = useState('purple');
+  const toggleColor = () =>
+    setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
+  return (
+    <Fragment>
+      <h1>ReactNativeWeb</h1>
+      <View>
+        <Text>auto (default) - english LTR</Text>
+        <Text>
+          {
+            '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
+          }
+        </Text>
+        <Text style={{textAlign: 'left'}}>
+          left left left left left left left left left left left left left left
+          left
+        </Text>
+        <Button
+          color={backgroundColor}
+          onPress={toggleColor}
+          title={`Switch background color to "${
+            backgroundColor === 'purple' ? 'green' : 'purple'
+          }"`}
+        />
+      </View>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
new file mode 100644
index 0000000000000..4763b51a42960
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -0,0 +1,167 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, Suspense, SuspenseList, useState} from 'react';
+
+function SuspenseTree() {
+  return (
+    <Fragment>
+      <h1>Suspense</h1>
+      <h4>Primary to Fallback Cycle</h4>
+      <PrimaryFallbackTest initialSuspend={false} />
+      <h4>Fallback to Primary Cycle</h4>
+      <PrimaryFallbackTest initialSuspend={true} />
+      <NestedSuspenseTest />
+      <SuspenseListTest />
+    </Fragment>
+  );
+}
+
+function PrimaryFallbackTest({initialSuspend}) {
+  const [suspend, setSuspend] = useState(initialSuspend);
+  const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
+  const primaryStep = useTestSequence('primary', Primary1, Primary2);
+  return (
+    <Fragment>
+      <label>
+        <input
+          checked={suspend}
+          onChange={e => setSuspend(e.target.checked)}
+          type="checkbox"
+        />
+        Suspend
+      </label>
+      <br />
+      <Suspense fallback={fallbackStep}>
+        {suspend ? <Never /> : primaryStep}
+      </Suspense>
+    </Fragment>
+  );
+}
+
+function useTestSequence(label, T1, T2) {
+  let [step, setStep] = useState(0);
+  let next = (
+    <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>
+      next {label} content
+    </button>
+  );
+  let allSteps = [
+    <Fragment>{next}</Fragment>,
+    <Fragment>
+      {next} <T1 prop={step}>mount</T1>
+    </Fragment>,
+    <Fragment>
+      {next} <T1 prop={step}>update</T1>
+    </Fragment>,
+    <Fragment>
+      {next} <T2 prop={step}>several</T2> <T1 prop={step}>different</T1>{' '}
+      <T2 prop={step}>children</T2>
+    </Fragment>,
+    <Fragment>
+      {next} <T2 prop={step}>goodbye</T2>
+    </Fragment>,
+  ];
+  return allSteps[step];
+}
+
+function NestedSuspenseTest() {
+  return (
+    <Fragment>
+      <h3>Nested Suspense</h3>
+      <Suspense fallback={<Fallback1>Loading outer</Fallback1>}>
+        <Parent />
+      </Suspense>
+    </Fragment>
+  );
+}
+
+function Parent() {
+  return (
+    <div>
+      <Suspense fallback={<Fallback1>Loading inner 1</Fallback1>}>
+        <Primary1>Hello</Primary1>
+      </Suspense>{' '}
+      <Suspense fallback={<Fallback2>Loading inner 2</Fallback2>}>
+        <Primary2>World</Primary2>
+      </Suspense>
+      <br />
+      <Suspense fallback={<Fallback1>This will never load</Fallback1>}>
+        <Never />
+      </Suspense>
+      <br />
+      <b>
+        <LoadLater />
+      </b>
+    </div>
+  );
+}
+
+function SuspenseListTest() {
+  return (
+    <>
+      <h1>SuspenseList</h1>
+      <SuspenseList revealOrder="forwards" tail="collapsed">
+        <div>
+          <Suspense fallback={<Fallback1>Loading 1</Fallback1>}>
+            <Primary1>Hello</Primary1>
+          </Suspense>
+        </div>
+        <div>
+          <LoadLater />
+        </div>
+        <div>
+          <Suspense fallback={<Fallback2>Loading 2</Fallback2>}>
+            <Primary2>World</Primary2>
+          </Suspense>
+        </div>
+      </SuspenseList>
+    </>
+  );
+}
+
+function LoadLater() {
+  const [loadChild, setLoadChild] = useState(0);
+  return (
+    <Suspense
+      fallback={
+        <Fallback1 onClick={() => setLoadChild(true)}>Click to load</Fallback1>
+      }>
+      {loadChild ? (
+        <Primary1 onClick={() => setLoadChild(false)}>
+          Loaded! Click to suspend again.
+        </Primary1>
+      ) : (
+        <Never />
+      )}
+    </Suspense>
+  );
+}
+
+function Never() {
+  throw new Promise(resolve => {});
+}
+
+function Fallback1({prop, ...rest}: any) {
+  return <span {...rest} />;
+}
+
+function Fallback2({prop, ...rest}: any) {
+  return <span {...rest} />;
+}
+
+function Primary1({prop, ...rest}: any) {
+  return <span {...rest} />;
+}
+
+function Primary2({prop, ...rest}: any) {
+  return <span {...rest} />;
+}
+
+export default SuspenseTree;
diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.css b/packages/react-devtools-shell/src/app/ToDoList/List.css
new file mode 100644
index 0000000000000..05834028402df
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.css
@@ -0,0 +1,16 @@
+.Input {
+  font-size: 1rem;
+  padding: 0.25rem;
+}
+
+.IconButton {
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.List {
+  margin: 0.5rem 0 0;
+  padding: 0;
+}
diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js
new file mode 100644
index 0000000000000..e3fee20080797
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.js
@@ -0,0 +1,117 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useCallback, useState} from 'react';
+import ListItem from './ListItem';
+import styles from './List.css';
+
+export type Item = {|
+  id: number,
+  isComplete: boolean,
+  text: string,
+|};
+
+type Props = {||};
+
+export default function List(props: Props) {
+  const [newItemText, setNewItemText] = useState<string>('');
+  const [items, setItems] = useState<Array<Item>>([
+    {id: 1, isComplete: true, text: 'First'},
+    {id: 2, isComplete: true, text: 'Second'},
+    {id: 3, isComplete: false, text: 'Third'},
+  ]);
+  const [uid, setUID] = useState<number>(4);
+
+  const handleClick = useCallback(() => {
+    if (newItemText !== '') {
+      setItems([
+        ...items,
+        {
+          id: uid,
+          isComplete: false,
+          text: newItemText,
+        },
+      ]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+
+  const handleKeyPress = useCallback(
+    event => {
+      if (event.key === 'Enter') {
+        handleClick();
+      }
+    },
+    [handleClick],
+  );
+
+  const handleChange = useCallback(
+    event => {
+      setNewItemText(event.currentTarget.value);
+    },
+    [setNewItemText],
+  );
+
+  const removeItem = useCallback(
+    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
+    [items],
+  );
+
+  const toggleItem = useCallback(
+    itemToToggle => {
+      // Dont use indexOf()
+      // because editing props in DevTools creates a new Object.
+      const index = items.findIndex(item => item.id === itemToToggle.id);
+
+      setItems(
+        items
+          .slice(0, index)
+          .concat({
+            ...itemToToggle,
+            isComplete: !itemToToggle.isComplete,
+          })
+          .concat(items.slice(index + 1)),
+      );
+    },
+    [items],
+  );
+
+  return (
+    <Fragment>
+      <h1>List</h1>
+      <input
+        type="text"
+        placeholder="New list item..."
+        className={styles.Input}
+        value={newItemText}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <button
+        className={styles.IconButton}
+        disabled={newItemText === ''}
+        onClick={handleClick}>
+        <span role="img" aria-label="Add item">
+          ➕
+        </span>
+      </button>
+      <ul className={styles.List}>
+        {items.map(item => (
+          <ListItem
+            key={item.id}
+            item={item}
+            removeItem={removeItem}
+            toggleItem={toggleItem}
+          />
+        ))}
+      </ul>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.css b/packages/react-devtools-shell/src/app/ToDoList/ListItem.css
new file mode 100644
index 0000000000000..77c666251cc29
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.css
@@ -0,0 +1,23 @@
+.ListItem {
+  list-style-type: none;
+}
+
+.Input {
+  cursor: pointer;
+}
+
+.Label {
+  cursor: pointer;
+  padding: 0.25rem;
+  color: #555;
+}
+.Label:hover {
+  color: #000;
+}
+
+.IconButton {
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
new file mode 100644
index 0000000000000..9ef1afffdf44c
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {memo, useCallback} from 'react';
+import styles from './ListItem.css';
+
+import type {Item} from './List';
+
+type Props = {|
+  item: Item,
+  removeItem: (item: Item) => void,
+  toggleItem: (item: Item) => void,
+|};
+
+function ListItem({item, removeItem, toggleItem}: Props) {
+  const handleDelete = useCallback(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+
+  const handleToggle = useCallback(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+
+  return (
+    <li className={styles.ListItem}>
+      <button className={styles.IconButton} onClick={handleDelete}>
+        🗑
+      </button>
+      <label className={styles.Label}>
+        <input
+          className={styles.Input}
+          checked={item.isComplete}
+          onChange={handleToggle}
+          type="checkbox"
+        />{' '}
+        {item.text}
+      </label>
+    </li>
+  );
+}
+
+export default memo<Props>(ListItem);
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.fire.js b/packages/react-devtools-shell/src/app/ToDoList/index.js
similarity index 78%
rename from packages/react-reconciler/src/forks/ReactFiberHostConfig.fire.js
rename to packages/react-devtools-shell/src/app/ToDoList/index.js
index 738d1219bf102..bde76f4f1426c 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.fire.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/index.js
@@ -7,4 +7,6 @@
  * @flow
  */
 
-export * from 'react-dom/src/fire/ReactFireHostConfig';
+import List from './List';
+
+export default List;
diff --git a/packages/react-devtools-shell/src/app/Toggle/index.js b/packages/react-devtools-shell/src/app/Toggle/index.js
new file mode 100644
index 0000000000000..9740c797de88b
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Toggle/index.js
@@ -0,0 +1,21 @@
+import React, {useState} from 'react';
+
+export default function Toggle() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <h2>Toggle</h2>
+      <div>
+        <>
+          <button onClick={() => setShow(s => !s)}>Show child</button>
+          {show && ' '}
+          {show && <Greeting>Hello</Greeting>}
+        </>
+      </div>
+    </>
+  );
+}
+
+function Greeting({children}) {
+  return <p>{children}</p>;
+}
diff --git a/packages/react-devtools-shell/src/app/console.js b/packages/react-devtools-shell/src/app/console.js
new file mode 100644
index 0000000000000..9ae0e1ce84d6a
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/console.js
@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+function ignoreStrings(
+  methodName: string,
+  stringsToIgnore: Array<string>,
+): void {
+  // HACKY In the test harness, DevTools overrides the parent window's console.
+  // Our test app code uses the iframe's console though.
+  // To simulate a more accurate end-ot-end ienvironment,
+  // the shell's console patching should pass through to the parent override methods.
+  const originalMethod = window.parent.console[methodName];
+
+  console[methodName] = (...args) => {
+    const maybeString = args[0];
+    if (typeof maybeString === 'string') {
+      for (let i = 0; i < stringsToIgnore.length; i++) {
+        if (maybeString.startsWith(stringsToIgnore[i])) {
+          return;
+        }
+      }
+    }
+    originalMethod(...args);
+  };
+}
+
+export function ignoreErrors(errorsToIgnore: Array<string>): void {
+  ignoreStrings('error', errorsToIgnore);
+}
+
+export function ignoreWarnings(warningsToIgnore: Array<string>): void {
+  ignoreStrings('warn', warningsToIgnore);
+}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
new file mode 100644
index 0000000000000..a66dc85f6754b
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -0,0 +1,71 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import {createElement} from 'react';
+import {
+  // $FlowFixMe Flow does not yet know about createRoot()
+  createRoot,
+} from 'react-dom';
+import DeeplyNestedComponents from './DeeplyNestedComponents';
+import Iframe from './Iframe';
+import EditableProps from './EditableProps';
+import ElementTypes from './ElementTypes';
+import Hydration from './Hydration';
+import InspectableElements from './InspectableElements';
+import InteractionTracing from './InteractionTracing';
+import PriorityLevels from './PriorityLevels';
+import ReactNativeWeb from './ReactNativeWeb';
+import ToDoList from './ToDoList';
+import Toggle from './Toggle';
+import SuspenseTree from './SuspenseTree';
+import {ignoreErrors, ignoreWarnings} from './console';
+
+import './styles.css';
+
+// DevTools intentionally tests compatibility with certain legacy APIs.
+// Suppress their error messages in the local dev shell,
+// because they might mask other more serious error messages.
+ignoreErrors([
+  'Warning: Legacy context API',
+  'Warning: Unsafe lifecycle methods',
+  'Warning: %s is deprecated in StrictMode.', // findDOMNode
+]);
+ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
+
+const roots = [];
+
+function mountHelper(App) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  const root = createRoot(container);
+  root.render(createElement(App));
+
+  roots.push(root);
+}
+
+function mountTestApp() {
+  mountHelper(ToDoList);
+  mountHelper(InteractionTracing);
+  mountHelper(InspectableElements);
+  mountHelper(Hydration);
+  mountHelper(ElementTypes);
+  mountHelper(EditableProps);
+  mountHelper(PriorityLevels);
+  mountHelper(ReactNativeWeb);
+  mountHelper(Toggle);
+  mountHelper(SuspenseTree);
+  mountHelper(DeeplyNestedComponents);
+  mountHelper(Iframe);
+}
+
+function unmountTestApp() {
+  roots.forEach(root => root.unmount());
+}
+
+mountTestApp();
+
+window.parent.mountTestApp = mountTestApp;
+window.parent.unmountTestApp = unmountTestApp;
diff --git a/packages/react-devtools-shell/src/app/styles.css b/packages/react-devtools-shell/src/app/styles.css
new file mode 100644
index 0000000000000..2a995314c154f
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/styles.css
@@ -0,0 +1,13 @@
+body {
+  /* GitHub.com frontend fonts */
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
new file mode 100644
index 0000000000000..4879e719c880a
--- /dev/null
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -0,0 +1,78 @@
+/** @flow */
+
+import {createElement} from 'react';
+// $FlowFixMe Flow does not yet know about createRoot()
+import {createRoot} from 'react-dom';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
+import {initDevTools} from 'react-devtools-shared/src/devtools';
+
+const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
+
+const {contentDocument, contentWindow} = iframe;
+
+// Helps with positioning Overlay UI.
+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
+
+initializeBackend(contentWindow);
+
+const container = ((document.getElementById('devtools'): any): HTMLElement);
+
+let isTestAppMounted = true;
+
+const mountButton = ((document.getElementById(
+  'mountButton',
+): any): HTMLButtonElement);
+mountButton.addEventListener('click', function() {
+  if (isTestAppMounted) {
+    if (typeof window.unmountTestApp === 'function') {
+      window.unmountTestApp();
+      mountButton.innerText = 'Mount test app';
+      isTestAppMounted = false;
+    }
+  } else {
+    if (typeof window.mountTestApp === 'function') {
+      window.mountTestApp();
+      mountButton.innerText = 'Unmount test app';
+      isTestAppMounted = true;
+    }
+  }
+});
+
+inject('dist/app.js', () => {
+  initDevTools({
+    connect(cb) {
+      const DevTools = initializeFrontend(contentWindow);
+
+      // Activate the backend only once the DevTools frontend Store has been initialized.
+      // Otherwise the Store may miss important initial tree op codes.
+      activateBackend(contentWindow);
+
+      const root = createRoot(container);
+      root.render(
+        createElement(DevTools, {
+          browserTheme: 'light',
+          enabledInspectedElementContextMenu: true,
+          showTabBar: true,
+          warnIfLegacyBackendDetected: true,
+          warnIfUnsupportedVersionDetected: true,
+        }),
+      );
+    },
+
+    onReload(reloadFn) {
+      iframe.onload = reloadFn;
+    },
+  });
+});
+
+function inject(sourcePath, callback) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
new file mode 100644
index 0000000000000..824cd55b522cb
--- /dev/null
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -0,0 +1,98 @@
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const TARGET = process.env.TARGET;
+if (!TARGET) {
+  console.error('TARGET not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+const config = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: false,
+  entry: {
+    app: './src/app/index.js',
+    devtools: './src/devtools.js',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  plugins: [
+    new DefinePlugin({
+      __DEV__,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+
+if (TARGET === 'local') {
+  config.devServer = {
+    hot: true,
+    port: 8080,
+    clientLogLevel: 'warning',
+    publicPath: '/dist/',
+    stats: 'errors-only',
+  };
+} else {
+  config.output = {
+    path: resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  };
+}
+
+module.exports = config;
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
new file mode 100644
index 0000000000000..044fb1620532b
--- /dev/null
+++ b/packages/react-devtools/CHANGELOG.md
@@ -0,0 +1,242 @@
+# React DevTools changelog
+
+<details>
+  <summary>
+    Changes that have landed in master but are not yet released.
+    Click to see more.
+  </summary>
+  
+  <!-- Upcoming changes go here -->
+
+#### Features
+* Improve function props display for inspected elements ([bvaughn](https://github.com/bvaughn) in [#17789](https://github.com/facebook/react/pull/17789))
+#### Bugfix
+* Improve how empty commits are filtered ([bvaughn](https://github.com/bvaughn) in [#17771](https://github.com/facebook/react/pull/17771))
+* Renamed "backend.js" to "react_devtools_backend.js" to reduce potential confusion from profiling ([bvaughn](https://github.com/bvaughn) in [#17790](https://github.com/facebook/react/pull/17790))
+* Update root styles to prevent `box-sizing` style from leaking outside of inline target ([GasimGasimzada](https://github.com/GasimGasimzada) in [#17775](https://github.com/facebook/react/pull/17775))
+https://github.com/facebook/react/pull/17775
+</details>
+
+## 4.4.0 (January 3, 2020)
+#### Features
+* Re-enabled "copy" prop/state/hooks context menu option for Firefox ([bvaughn](https://github.com/bvaughn),[rpl](https://github.com/rpl) in [#17740](https://github.com/facebook/react/pull/17740))
+* Shift+Enter focuses previous search result in Components tree ([Bo-Duke](https://github.com/Bo-Duke) in [#17005](https://github.com/facebook/react/pull/17005))
+* Properly display formatted `RegExp` values in props/state panel([bvaughn](https://github.com/bvaughn) in [#17690](https://github.com/facebook/react/pull/17690))
+* Profiler commit selector wraps around for easier navigation of large profiles ([bvaughn](https://github.com/bvaughn) in [#17760](https://github.com/facebook/react/pull/17760))
+#### Bugfix
+* Check `document.contentType` before injecting hook to avoid breaking XML file syntax highlighting in Firefox ([bvaughn](https://github.com/bvaughn) in [#17739](https://github.com/facebook/react/pull/17739))
+* Fix standalone UI not responding to mouse interactions due to `webkit-app-region` style ([cwatson88](https://github.com/cwatson88) in [#17584](https://github.com/facebook/react/pull/17584))
+* Support inspecting object values with null protos ([bvaughn](https://github.com/bvaughn) in [#17757](https://github.com/facebook/react/pull/17757))
+* Support inspecting values that have overridden `hasOwnProperty` attribute ([bvaughn](https://github.com/bvaughn) in [#17768](https://github.com/facebook/react/pull/17768))
+* Fixed regression that made Profiler "Could not find node…" error happen more frequently ([bvaughn](https://github.com/bvaughn) in [#17759](https://github.com/facebook/react/pull/17759))
+
+## 4.3.0 (December 20, 2019)
+#### Features
+* Show component location for selected element in bottom/right panel ([bvaughn](https://github.com/bvaughn) in [#17567](https://github.com/facebook/react/pull/17567))
+* Improved inspected element values with inline previews ([bvaughn](https://github.com/bvaughn) in [#17579](https://github.com/facebook/react/pull/17579))
+* Improved selection and toggling for inspected element panel ([bvaughn](https://github.com/bvaughn) in [#17588](https://github.com/facebook/react/pull/17588))
+* Copy context menu for inspecting and copying props/state/hooks/context values ([bvaughn](https://github.com/bvaughn) in [#17608](https://github.com/facebook/react/pull/17608))
+#### Bug fixes
+* Fix serialization for `BigInt` type so that it does not break inspection panel. ([nutboltu](https://github.com/nutboltu) in [#17233](https://github.com/facebook/react/pull/17233))
+* Fix display name logic for `forwardRef`s that use `displayName` property ([zthxxx](https://github.com/zthxxx) in [#17613](https://github.com/facebook/react/pull/17613))
+
+## 4.2.1 (November 27, 2019)
+#### Bug fixes
+* Profiler automatically filters certain types of empty (no work) commits. ([bvaughn](https://github.com/bvaughn) in [#17253](https://github.com/facebook/react/pull/17253))
+* Fix memoized components showing as "Anonymous" in Components tab. ([wsmd](https://github.com/wsmd) in [#17274](https://github.com/facebook/react/pull/17274))
+* Edge-case bugfix for non-string element keys. ([bvaughn](https://github.com/bvaughn) in [#17164](https://github.com/facebook/react/pull/17164))
+
+## 4.2.0 (October 3, 2019)
+#### Features
+* "Highlight updates" feature added for browser extensions and `react-devtools-inline` NPM package. ([bvaughn](https://github.com/bvaughn) in [#16989](https://github.com/facebook/react/pull/16989))
+
+## 4.1.3 (September 30, 2019)
+#### Bug fixes
+* Fixed regression where DevTools wouldn't properly connect with apps when using the `file://` protocol. ([linshunghuang](https://github.com/linshunghuang) in [#16953](https://github.com/facebook/react/pull/16953))
+
+## 4.1.2 (September 27, 2019)
+#### Bug fixes
+* Fixed an infinite loop that occurred in some cases with prop values of `NaN`. ([bvaughn](https://github.com/bvaughn) in [#16934](https://github.com/facebook/react/pull/16934))
+
+## 4.1.1 (September 26, 2019)
+#### Bug fixes
+* Fixed bug where Components panel was always empty for certain users. ([linshunghuang](https://github.com/linshunghuang) in [#16900](https://github.com/facebook/react/pull/16900))
+* Fixed regression in DevTools editable hooks interface that caused primitive values to be shown as `undefined`. ([bvaughn](https://github.com/bvaughn) in [#16867](https://github.com/facebook/react/pull/16867))
+* Fixed bug where DevTools showed stale values in props/state/hooks editing interface. ([bvaughn](https://github.com/bvaughn) in [#16878](https://github.com/facebook/react/pull/16878))
+* Show unsupported version dialog with downgrade instructions. ([bvaughn](https://github.com/bvaughn) in [#16897](https://github.com/facebook/react/pull/16897))
+
+## 4.1.0 (September 19, 2019)
+#### Features
+* Props/state editor supports adding new values and changing value types. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16700](https://github.com/facebook/react/pull/16700))
+#### Bug fixes
+* Profiler correctly saves/exports profiling data in Firefox now. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16612](https://github.com/facebook/react/pull/16612))
+* Class components now show "legacy context" header (rather than "context") for legacy API. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16617](https://github.com/facebook/react/pull/16617))
+* Show component source button ("<>") now highlights the `render` method for class components. ([theKashey](https://github.com/theKashey) in [#16759](https://github.com/facebook/react/pull/16759))
+* Bugfix for components with non-standard object values for `function.name`. ([LetItRock](https://github.com/LetItRock) in [#16798](https://github.com/facebook/react/pull/16798))
+
+## 4.0.6 (August 26, 2019)
+#### Bug fixes
+* Remove ⚛️ emoji prefix from Firefox extension tab labels
+* Standalone polyfills `Symbol` usage
+
+## 4.0.5 (August 19, 2019)
+#### Bug fixes
+* Props, state, and context values are alpha sorted.
+* Standalone DevTools properly serves backend script over localhost:8097
+
+## 4.0.4 (August 18, 2019)
+#### Bug fixes
+* Bugfix for potential error if a min-duration commit filter is applied after selecting a fiber in the Profiler UI.
+
+## 4.0.3 (August 17, 2019)
+#### Bug fixes
+* ES6 `Map` and `Set`, typed arrays, and other unserializable types (e.g. Immutable JS) can now be inspected.
+* Empty objects and arrays now display an "(empty)" label to the right to reduce confusion.
+* Components that use only the `useContext` hook now properly display hooks values in side panel.
+* Style editor now supports single quotes around string values (e.g. both `"red"` and `'red'`).
+* Fixed edge case bug that prevented profiling when both React v16 and v15 were present on a page.
+
+## 4.0.2 (August 15, 2019)
+#### Permissions cleanup
+* Removed unnecessary `webNavigation ` permission from Chrome and Firefox extensions.
+
+## 4.0.1 (August 15, 2019)
+#### Permissions cleanup
+* Removed unnecessary `<all_urls>`, `background`, and `tabs` permissions from Chrome and Firefox extensions.
+
+## 4.0.0 (August 15, 2019)
+
+### General changes
+
+#### Improved performance
+The legacy DevTools extension used to add significant performance overhead, making it unusable for some larger React applications. That overhead has been effectively eliminated in version 4.
+
+[Learn more](https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md) about the performance optimizations that made this possible.
+
+#### Component stacks
+
+React component authors have often requested a way to log warnings that include the React ["component stack"](https://reactjs.org/docs/error-boundaries.html#component-stack-traces). DevTools now provides an option to automatically append this information to warnings (`console.warn`) and errors (`console.error`).
+
+![Example console warning with component stack added](https://user-images.githubusercontent.com/29597/62228120-eec3da80-b371-11e9-81bb-018c1e577389.png)
+
+It can be disabled in the general settings panel:
+
+![Settings panel showing "component stacks" option](https://user-images.githubusercontent.com/29597/62227882-8f65ca80-b371-11e9-8a4e-5d27011ad1aa.png)
+
+### Components tree changes
+
+#### Component filters
+
+Large component trees can sometimes be hard to navigate. DevTools now provides a way to filter components so that you can hide ones you're not interested in seeing.
+
+![Component filter demo video](https://user-images.githubusercontent.com/29597/62229209-0bf9a880-b374-11e9-8f84-cebd6c1a016b.gif)
+
+Host nodes (e.g. HTML `<div>`, React Native `View`) are now hidden by default, but you can see them by disabling that filter.
+
+Filter preferences are remembered between sessions.
+
+#### No more inline props
+
+Components in the tree no longer show inline props. This was done to [make DevTools faster](https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md) and to make it easier to browse larger component trees.
+
+You can view a component's props, state, and hooks by selecting it:
+
+![Inspecting props](https://user-images.githubusercontent.com/29597/62303001-37da6400-b430-11e9-87fd-10a94df88efa.png)
+
+#### "Rendered by" list
+
+In React, an element's "owner" refers to the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.
+
+![Example code](https://user-images.githubusercontent.com/29597/62229551-bbcf1600-b374-11e9-8411-8ff411f4f847.png)
+
+When you are debugging an unexpected prop value, you can save time if you skip over the parents.
+
+DevTools v4 adds a new "rendered by" list in the right hand pane that allows you to quickly step through the list of owners to speed up your debugging.
+
+![Example video showing the "rendered by" list](https://user-images.githubusercontent.com/29597/62229747-4152c600-b375-11e9-9930-3f6b3b92be7a.gif)
+
+#### Owners tree
+
+The inverse of the "rendered by" list is called the "owners tree". It is the list of things rendered by a particular component- (the things it "owns"). This view is kind of like looking at the source of the component's render method, and can be a helpful way to explore large, unfamiliar React applications.
+
+Double click a component to view the owners tree and click the "x" button to return to the full component tree:
+
+![Demo showing "owners tree" feature](https://user-images.githubusercontent.com/29597/62229452-84f90000-b374-11e9-818a-61eec6be0bb4.gif)
+
+#### No more horizontal scrolling
+
+Deeply nested components used to require both vertical and horizontal scrolling to see, making it easy to "get lost" within large component trees. DevTools now dynamically adjusts nesting indentation to eliminate horizontal scrolling.
+
+![Video demonstration dynamic indentation to eliminate horizontal scrolling](https://user-images.githubusercontent.com/29597/62246661-f8ad0400-b398-11e9-885f-284f150a6d76.gif)
+
+#### Improved hooks support
+
+Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.
+
+![Video demonstrating hooks support](https://user-images.githubusercontent.com/29597/62230532-d86c4d80-b376-11e9-8629-1b2129b210d6.gif)
+
+#### Improved search UX
+
+Legacy DevTools search filtered the components tree to show matching nodes as roots. This made the overall structure of the application harder to reason about, because it displayed ancestors as siblings.
+
+Search results are now shown inline similar to the browser's find-in-page search.
+
+![Video demonstrating the search UX](https://user-images.githubusercontent.com/29597/62230923-c63edf00-b377-11e9-9f95-aa62ddc8f62c.gif)
+
+#### Higher order components
+
+[Higher order components](https://reactjs.org/docs/higher-order-components.html) (or HOCs) often provide a [custom `displayName`](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) following a convention of `withHOC(InnerComponentName)` in order to make it easier to identify components in React warnings and in DevTools.
+
+The new Components tree formats these HOC names (along with several built-in utilities like `React.memo` and `React.forwardRef`) as a special badge to the right of the decorated component name.
+
+![Screenshot showing HOC badges](https://user-images.githubusercontent.com/29597/62302774-c4385700-b42f-11e9-9ef4-49c5f18d6276.png)
+
+Components decorated with multiple HOCs show the topmost badge and a count. Selecting the component shows all of the HOCs badges in the properties panel.
+
+![Screenshot showing a component with multiple HOC badges](https://user-images.githubusercontent.com/29597/62303729-7fadbb00-b431-11e9-8685-45f5ab52b30b.png)
+
+#### Restoring selection between reloads
+
+DevTools now attempts to restore the previously selected element when you reload the page.
+
+![Video demonstrating selection persistence](https://user-images.githubusercontent.com/810438/63130054-2c02ac00-bfb1-11e9-92fa-382e9e433638.gif)
+
+#### Suspense toggle
+
+React's experimental [Suspense API](https://reactjs.org/docs/react-api.html#suspense) lets components "wait" for something before rendering. `<Suspense>` components can be used to specify loading states when components deeper in the tree are waiting to render.
+
+DevTools lets you test these loading states with a new toggle:
+
+![Video demonstrating suspense toggle UI](https://user-images.githubusercontent.com/29597/62231446-e15e1e80-b378-11e9-92d4-086751dc65fc.gif)
+
+### Profiler changes
+
+#### Reload and profile
+
+The profiler is a powerful tool for performance tuning React components. Legacy DevTools supported profiling, but only after it detected a profiling-capable version of React. Because of this there was no way to profile the initial _mount_ (one of the most performance sensitive parts) of an application.
+
+This feature is now supported with a "reload and profile" action:
+
+![Video demonstrating the reload-and-profile feature](https://user-images.githubusercontent.com/29597/62233455-7a8f3400-b37d-11e9-9563-ec334bfb2572.gif)
+
+#### Import/export
+
+Profiler data can now be exported and shared with other developers to enable easier collaboration.
+
+![Video demonstrating exporting and importing profiler data](https://user-images.githubusercontent.com/29597/62233911-6566d500-b37e-11e9-9052-692378c92538.gif)
+
+Exports include all commits, timings, interactions, etc.
+
+#### "Why did this render?"
+
+"Why did this render?" is a common question when profiling. The profiler now helps answer this question by recording which props and state change between renders.
+
+![Video demonstrating profiler "why did this render?" feature](https://user-images.githubusercontent.com/29597/62234698-0f932c80-b380-11e9-8cf3-a5183af0c388.gif)
+
+Because this feature adds a small amount of overhead, it can be disabled in the profiler settings panel.
+
+#### Component renders list
+
+The profiler now displays a list of each time the selected component rendered during a profiling session, along with the duration of each render. This list can be used to quickly jump between commits when analyzing the performance of a specific component.
+
+![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
new file mode 100644
index 0000000000000..7c8228791393a
--- /dev/null
+++ b/packages/react-devtools/OVERVIEW.md
@@ -0,0 +1,270 @@
+# Overview
+
+The React DevTools extension consists of multiple pieces:
+* The **frontend** portion is the extension you see (the Components tree, the Profiler, etc.).
+* The **backend** portion is invisible. It runs in the same context as React itself. When React commits changes to e.g. the DOM, the backend is responsible for notifying the frontend by sending a message through the **bridge** (an abstraction around e.g. `postMessage`).
+
+One of the largest performance bottlenecks of the old React DevTools was the amount of bridge traffic. Each time React commits an update, the backend sends every fiber that changed across the bridge, resulting in a lot of (JSON) serialization. The primary goal for the DevTools rewrite was to reduce this traffic. Instead of sending everything across the bridge, **the backend should only send the minimum amount required to render the Components tree**. The frontend can request more information (e.g. an element's props) on demand, only as needed.
+
+The old DevTools also rendered the entire application tree in the form of a large DOM structure of nested nodes. A secondary goal of the rewrite was to avoid rendering unnecessary nodes by using a windowing library (specifically [react-window](https://github.com/bvaughn/react-window)).
+
+## Components panel
+
+### Serializing the tree
+
+Every React commit that changes the tree in a way DevTools cares about results in an "_operations_" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)
+
+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a [string table](#string-table). The rest of the array depends on the operations being made to the tree.
+
+No updates are required for most commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate ["_inspectElement_" message](#inspecting-an-element).
+
+#### String table
+
+The string table is encoded right after the first two numbers.
+
+It consists of:
+
+1. the total length of next items that belong to string table
+2. for each string in a table:
+  1. encoded size
+  2. a list of its UTF encoded codepoints
+
+For example, for `Foo` and `Bar` we would see:
+
+```
+[
+  8,   // string table length
+  3,   // encoded display name size
+  70,  // "F"
+  111, // "o"
+  111, // "o"
+  3,   // encoded display name size
+  66,  // "B"
+  97,  // "a"
+  114, // "r"
+]
+```
+
+Later operations will reference strings by a one-based index. For example, `1` would mean `"Foo"`, and `2` would mean `"Bar"`. The `0` string id always represents `null` and isn't explicitly encoded in the table.
+
+#### Adding a root node
+
+Adding a root to the tree requires sending 4 numbers:
+
+1. add operation constant (`1`)
+1. fiber id
+1. element type constant (`8 === ElementTypeRoot`)
+1. profiling supported flag
+
+For example, adding a root fiber with an id of 1:
+```js
+[
+  1, // add operation
+  1, // fiber id
+  8, // ElementTypeRoot
+  1, // this root's renderer supports profiling
+]
+```
+
+#### Adding a leaf node
+
+Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):
+
+1. add operation constant (`1`)
+1. fiber id
+1. element type constant (e.g. `1 === ElementTypeClass`)
+1. parent fiber id
+1. owner fiber id
+1. string table id for `displayName`
+1. string table id for `key`
+
+For example, adding a function component `<Foo>` with an id 2:
+```js
+[
+  1,   // add operation
+  2,   // fiber id
+  1,   // ElementTypeClass
+  1,   // parent id
+  0,   // owner id
+  3,   // encoded display name size
+  1,   // id of "Foo" displayName in the string table
+  0,   // id of null key in the string table (always zero for null)
+]
+```
+
+#### Removing a node
+
+Removing a fiber from the tree (a root or a leaf) requires sending:
+
+1. remove operation constant (`2`)
+1. how many items were removed
+1. number of children
+   * (followed by a children-first list of removed fiber ids)
+
+For example, removing fibers with ids of 35 and 21:
+```js
+[
+  2, // remove operation
+  2, // number of removed fibers
+  35, // first removed id
+  21, // second removed id
+]
+```
+
+#### Re-ordering children
+
+1. re-order children constant (`3`)
+1. fiber id
+1. number of children
+   * (followed by an ordered list of child fiber ids)
+
+For example:
+```js
+[
+  3,  // re-order operation
+  15, // fiber id
+  2,  // number of children
+  35, // first child id
+  21, // second child id
+]
+```
+
+#### Updating tree base duration
+
+While profiling is in progress, we send an extra operation any time a fiber is added or a updated in a way that affects its tree base duration. This information is needed by the Profiler UI in order to render the "snapshot" and "ranked" chart views.
+
+1. tree base duration constant (`4`)
+1. fiber id
+1. tree base duration
+
+For example, updating the base duration for a fiber with an id of 1:
+```js
+[
+  4,  // tree base duration operation
+  1,  // fiber id
+  32, // new tree base duration value
+]
+```
+
+## Reconstructing the tree
+
+The frontend stores its information about the tree in a map of id to objects with the following keys:
+
+* id: `number`
+* parentID: `number`
+* children: `Array<number>`
+* type: `number` (constant)
+* displayName: `string | null`
+* key: `number | string | null`
+* ownerID: `number`
+* depth: `number` <sup>1</sup>
+* weight: `number` <sup>2</sup>
+
+<sup>1</sup> The `depth` value determines how much padding/indentation to use for the element when rendering it in the Components panel. (This preserves the appearance of a nested tree, even though the view is a flat list.)
+
+<sup>2</sup> The `weight` of an element is the number of elements (including itself) below it in the tree. We cache this property so that we can quickly determine the total number of Components as well as to find the Nth element within that set. (This enables us to use windowing.) This value needs to be adjusted each time elements are added or removed from the tree, but we amortize this over time to avoid any big performance hits when rendering the tree.
+
+#### Finding the element at index N
+
+The tree data structure lets us impose an order on elements and "quickly" find the Nth one using the `weight` attribute.
+
+First we find which root contains the index:
+```js
+let rootID;
+let root;
+let rootWeight = 0;
+for (let i = 0; i < this._roots.length; i++) {
+  rootID = this._roots[i];
+  root = this._idToElement.get(rootID);
+  if (root.children.length === 0) {
+    continue;
+  } else if (rootWeight + root.weight > index) {
+    break;
+  } else {
+    rootWeight += root.weight;
+  }
+}
+```
+
+We skip the root itself because don't display them in the tree:
+```js
+const firstChildID = root.children[0];
+```
+
+Then we traverse the tree to find the element:
+```js
+let currentElement = this._idToElement.get(firstChildID);
+let currentWeight = rootWeight;
+while (index !== currentWeight) {
+  for (let i = 0; i < currentElement.children.length; i++) {
+    const childID = currentElement.children[i];
+    const child = this._idToElement.get(childID);
+    const { weight } = child;
+    if (index <= currentWeight + weight) {
+      currentWeight++;
+      currentElement = child;
+      break;
+    } else {
+      currentWeight += weight;
+    }
+  }
+}
+```
+
+## Inspecting an element
+
+When an element is mounted in the tree, DevTools sends a minimal amount of information about it across the bridge. This information includes its display name, type, and key- but does _not_ include things like props or state. (These values are often expensive to serialize and change frequently, which would add a significant amount of load to the bridge.)
+
+Instead DevTools lazily requests additional information about an element only when it is selected in the "Components" tab. At that point, the frontend requests this information by sending a special "_inspectElement_" message containing the id of the element being inspected. The backend then responds with an "_inspectedElement_" message containing the additional details.
+
+### Polling strategy
+
+Elements can update frequently, especially in response to things like scrolling events. Since props and state can be large, we avoid sending this information across the bridge every time the selected element is updated. Instead, the frontend polls the backend for updates about once a second. The backend tracks when the element was last "inspected" and sends a special no-op response if it has not re-rendered since then.
+
+### Deeply nested properties
+
+Even when dealing with a single component, serializing deeply nested properties can be expensive. Because of this, DevTools uses a technique referred to as "dehyration" to only send a shallow copy of the data on initial inspection. DevTools then fills in the missing data on demand as a user expands nested objects or arrays. Filled in paths are remembered (for the currently inspected element) so they are not "dehyrated" again as part of a polling update.
+
+### Inspecting hooks
+
+Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with "use".)
+
+So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https://github.com/facebook/react/blob/master/packages/react-debug-tools/src/ReactDebugHooks.js).)
+
+> **Note**: DevTools obtains hooks info by re-rendering a component.
+> Breakpoints will be invoked during this additional (shallow) render,
+> but DevTools temporarily overrides `console` methods to suppress logging.
+
+### Performance implications
+
+To mitigate the performance impact of re-rendering a component, DevTools does the following:
+* Only function components that use _at least one hook_ are rendered. (Props and state can be analyzed without rendering.)
+* Rendering is always shallow.
+* Rendering is throttled to occur, at most, once per second.
+* Rendering is skipped if the component has not updated since the last time its properties were inspected.
+
+## Profiler
+
+The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:
+* Minimizing bridge traffic.
+* Making expensive computations lazy.
+
+The majority of profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message. (This is done to support the reload-and-profile functionality.)
+
+When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
+
+When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information about each commit, including:
+* Commit time and duration
+* Which elements were rendered during that commit
+* Which interactions (if any) were part of the commit
+* Which props and state changed (if enabled in profiler settings)
+
+This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).
+
+### Combining profiling data
+
+Once profiling is finished, the frontend requests profiling data from the backend one renderer at a time by sending a "_getProfilingData_" message. The backend responds with a "_profilingData_" message that contains per-root commit timing and duration information. The frontend then combines this information with its own snapshots to form a complete picture of the profiling session. Using this data, charts and graphs are lazily computed (and incrementally cached) on demand, based on which commits and views are selected in the Profiler UI.
+
+### Importing/exporting data
+
+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as a single JSON object), enabling profiling sessions to be shared between users.
\ No newline at end of file
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
new file mode 100644
index 0000000000000..cfca533587fd3
--- /dev/null
+++ b/packages/react-devtools/README.md
@@ -0,0 +1,136 @@
+# `react-devtools`
+
+React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).
+
+It works both with React DOM and React Native.
+
+![React DevTools screenshot](https://user-images.githubusercontent.com/29597/63811956-bdd9b580-c8dd-11e9-8962-c568e475c425.png)
+
+## Installation
+Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
+```sh
+# Yarn
+yarn global add react-devtools
+
+# NPM
+npm install -g react-devtools
+```
+
+If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:
+```sh
+yarn add --dev react-devtools
+```
+
+With NPM you can just use [NPX](https://www.npmjs.com/package/npx):
+```sh
+npx react-devtools
+```
+
+## Usage with React Native
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+If you're not in a simulator then you also need to run the following in a command prompt:
+```sh
+adb reverse tcp:8097 tcp:8097
+```
+
+If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.
+
+### Integration with React Native Inspector
+
+You can open the [in-app developer menu](https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+
+![React Native Inspector](http://i.imgur.com/ReFhREb.gif)
+
+However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
+
+![React DevTools Inspector Integration](https://user-images.githubusercontent.com/29597/63811958-be724c00-c8dd-11e9-8587-37357334a0e1.gif)
+
+
+You can choose "Hide Inspector" in the same menu to exit this mode.
+
+### Inspecting Component Instances
+
+When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
+
+First, follow the [instructions for debugging in Chrome](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) to open the Chrome console.
+
+Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**
+
+Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
+
+![React DevTools Chrome Console Integration](https://user-images.githubusercontent.com/29597/63811957-be724c00-c8dd-11e9-9d1d-8eba440ef948.gif)
+
+
+## Usage with React DOM
+
+The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).
+
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+Add `<script src="http://localhost:8097"></script>` as the very first `<script>` tag in the `<head>` of your page when developing:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <script src="http://localhost:8097"></script>
+```
+
+This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**
+
+>If you install `react-devtools` as a project dependency, you may also replace the `<script>` suggested above with a JavaScript import (`import 'react-devtools'`). It is important that this import comes before any other imports in your app (especially before `react-dom`). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add `'react-devtools'` as the first item in the `entry` array of the development-only configuration, and then you wouldn’t need to deal either with `<script>` tags or `import` statements.
+
+## Advanced
+
+By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
+
+## FAQ
+
+### The React Tab Doesn't Show Up
+
+**If you are running your app from a local `file://` URL**, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:
+
+![Allow access to file URLs](https://user-images.githubusercontent.com/29597/64646784-95b58080-d3cc-11e9-943d-02474683398a.png)
+
+Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.com/package/serve).
+
+**The React tab won't show up if the site doesn't use React**, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named `__REACT_DEVTOOLS_GLOBAL_HOOK__`, then React communicates with that hook during initialization. You can test this on the [React website](http://facebook.github.io/react/) or by inspecting [Facebook](https://www.facebook.com/).
+
+**If your app is inside of CodePen**, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.
+
+**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react/tree/master/packages/react-devtools). Chrome apps are currently not inspectable.
+
+**If you still have issues** please [report them](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools). Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.
+
+## Local development
+The standalone DevTools app can be built and tested from source following the instructions below.
+
+### Prerequisite steps
+DevTools depends on local versions of several NPM packages<sup>1</sup> also in this workspace. You'll need to either build or download those packages first.
+
+<sup>1</sup> Note that at this time, an _experimental_ build is required because DevTools depends on the `createRoot` API.
+
+#### Build from source
+To build dependencies from source, run the following command from the root of the repository:
+```sh
+yarn build-for-devtools
+```
+#### Download from CI
+To use the latest build from CI, run the following command from the root of the repository:
+```sh
+./scripts/release/download-experimental-build.js
+```
+### Build steps
+Once the above packages have been built or downloaded, you can test the standalone DevTools by running the following:
+
+* Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core`
+* Run `yarn start` in this folder
+* Refresh the app after it has recompiled a change
+* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
new file mode 100644
index 0000000000000..0749b8df570a0
--- /dev/null
+++ b/packages/react-devtools/app.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Developer Tools</title>
+    <meta charset="utf8" />
+    <style>
+      html {
+        height: 100%;
+        font-family: sans-serif;
+      }
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        background-color: #fff;
+        color: #777d88;
+      }
+
+      .container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        overflow: auto;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+      }
+
+      .input {
+        display: block;
+        font-weight: 100;
+        padding: 0 0.25rem;
+        border: 1px solid #aaa;
+        background-color: #fff;
+        color: #666;
+      }
+
+      .link {
+        color: #1478fa;
+        text-decoration: none;
+      }
+      .link:hover {
+        text-decoration: underline;
+      }
+
+      .waiting-header {
+        padding: 0.5rem;
+        display: inline-block;
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+        border-radius: 0.25rem;
+        background-color: rgba(0,1,2,.6);
+        color: white;
+        border: none;
+        font-weight: 100;
+        font-style: italic;
+      }
+
+      .boxes {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: center;
+        padding: 1rem;
+      }
+      .box {
+        text-align: center;
+        border-radius: 0.5rem;
+        background-color: #f7f7f7;
+        border: 1px solid #eee;
+        color: #777d88;
+        padding: 1rem;
+        margin-top: 1rem;
+      }
+      .box:first-of-type {
+        margin-top: 0;
+      }
+
+      .box-header {
+        text-align: center;
+        color: #5f6673;
+        font-size: 1.25rem;
+        margin-bottom: 0.5rem;
+      }
+      .box-content {
+        line-height: 1.5rem;
+      }
+
+      #loading-status {
+        text-align: center;
+        margin-top: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container" class="container" style="-webkit-user-select: none; -webkit-app-region: drag;">
+      <div class="waiting-header">Waiting for React to connect…</div>
+      <div class="boxes">
+        <div class="box">
+          <div class="box-header">React Native</div>
+          <div class="box-content">
+            Open the <a
+              id="rn-help-link"
+              class="link"
+              target="_blank"
+              href="https://facebook.github.io/react-native/docs/debugging#accessing-the-in-app-developer-menu"
+            >in-app developer menu</a> to connect.
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-header">React DOM</div>
+          <div class="box-content">
+            Add one of the following:
+            <span class="input" contenteditable="true" id="localhost"></span>
+            <span class="input" contenteditable="true" id="byip"></span>
+            to the top of the page you want to debug,
+            <br />
+            <strong>before</strong> importing React DOM.
+          </div>
+        </div>
+        <div id="loading-status">Starting the server…</div>
+      </div>
+    </div>
+    <script>
+      const port = process.env.PORT || 8097;
+      const localIp = require("ip").address();
+      const $ = document.querySelector.bind(document);
+
+      function selectAll(event) {
+        const element = event.target;
+        if (window.getSelection) {
+          const selection = window.getSelection();        
+          const range = document.createRange();
+          range.selectNodeContents(element);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+
+      const link = $('#rn-help-link');
+      link.addEventListener('click', event => {
+        event.preventDefault();
+        require('electron').shell.openExternal(link.href);
+      });
+
+      const $localhost = $("#localhost");
+      $localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
+      $localhost.addEventListener('click', selectAll);
+      $localhost.addEventListener('focus', selectAll);
+
+      const $byIp = $("#byip");
+      $byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
+      $byIp.addEventListener('click', selectAll);
+      $byIp.addEventListener('focus', selectAll);
+
+      let devtools;
+      try {
+        devtools = require("react-devtools-core/standalone").default;
+      } catch (err) {
+        alert(
+          err.toString() +
+            "\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?"
+        );
+      }
+      window.devtools = devtools;
+      window.server = devtools
+        .setContentDOMNode(document.getElementById("container"))
+        .setStatusListener(function(status) {
+          const element = document.getElementById("loading-status");
+          if (element) {
+            element.innerText = status;
+          }
+        })
+        .startServer(port);
+    </script>
+  </body>
+</html>
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
new file mode 100644
index 0000000000000..38304b4ffadda
--- /dev/null
+++ b/packages/react-devtools/app.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const {app, BrowserWindow} = require('electron'); // Module to create native browser window.
+const {join} = require('path');
+
+const argv = require('minimist')(process.argv.slice(2));
+const projectRoots = argv._;
+
+let mainWindow = null;
+
+app.on('window-all-closed', function() {
+  app.quit();
+});
+
+app.on('ready', function() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    icon: join(__dirname, 'icons/icon128.png'),
+    frame: false,
+    //titleBarStyle: 'customButtonsOnHover',
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL('file://' + __dirname + '/app.html'); // eslint-disable-line no-path-concat
+  mainWindow.webContents.executeJavaScript(
+    // We use this so that RN can keep relative JSX __source filenames
+    // but "click to open in editor" still works. js1 passes project roots
+    // as the argument to DevTools.
+    'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')',
+  );
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function() {
+    mainWindow = null;
+  });
+});
diff --git a/packages/react-devtools/bin.js b/packages/react-devtools/bin.js
new file mode 100755
index 0000000000000..99780a2d9a4c9
--- /dev/null
+++ b/packages/react-devtools/bin.js
@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const electron = require('electron');
+const spawn = require('cross-spawn');
+const argv = process.argv.slice(2);
+const pkg = require('./package.json');
+const updateNotifier = require('update-notifier');
+
+// notify if there's an update
+updateNotifier({pkg}).notify({defer: false});
+
+const result = spawn.sync(electron, [require.resolve('./app')].concat(argv), {
+  stdio: 'ignore',
+});
+
+process.exit(result.status);
diff --git a/packages/react-devtools/icons/icon128.png b/packages/react-devtools/icons/icon128.png
new file mode 100644
index 0000000000000..b9327946441f5
Binary files /dev/null and b/packages/react-devtools/icons/icon128.png differ
diff --git a/packages/react-devtools/index.js b/packages/react-devtools/index.js
new file mode 100644
index 0000000000000..a8730f5ae0697
--- /dev/null
+++ b/packages/react-devtools/index.js
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+const {connectToDevTools} = require('react-devtools-core/backend');
+
+// Connect immediately with default options.
+// If you need more control, use `react-devtools-core` directly instead of `react-devtools`.
+connectToDevTools();
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
new file mode 100644
index 0000000000000..d306c7995888a
--- /dev/null
+++ b/packages/react-devtools/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-devtools",
+  "version": "4.4.0",
+  "description": "Use react-devtools outside of the browser",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-devtools"
+  },
+  "bin": {
+    "react-devtools": "./bin.js"
+  },
+  "files": [
+    "bin.js",
+    "build-info.json",
+    "app.html",
+    "app.js",
+    "index.js",
+    "icons"
+  ],
+  "scripts": {
+    "start": "node bin.js"
+  },
+  "dependencies": {
+    "cross-spawn": "^5.0.1",
+    "electron": "^5.0.0",
+    "ip": "^1.1.4",
+    "minimist": "^1.2.0",
+    "react-devtools-core": "4.4.0",
+    "update-notifier": "^2.1.0"
+  }
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 15e11584a45c9..7e6cf5e5c0ee8 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "16.8.6",
+  "version": "16.12.0",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -20,7 +20,7 @@
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.2",
-    "scheduler": "^0.14.0"
+    "scheduler": "^0.18.0"
   },
   "peerDependencies": {
     "react": "^16.0.0"
diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
index 0b7f4c6147751..6e86a1a6ca0cd 100644
--- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
@@ -57,6 +57,15 @@ describe('CSSPropertyOperations', () => {
     expect(html).toContain('"-ms-transition:none;-moz-transition:none"');
   });
 
+  it('should not hyphenate custom CSS property', () => {
+    const styles = {
+      '--someColor': '#000000',
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(html).toContain('"--someColor:#000000"');
+  });
+
   it('should set style attribute when styles exist', () => {
     const styles = {
       backgroundColor: '#000',
@@ -89,7 +98,7 @@ describe('CSSPropertyOperations', () => {
 
     const root = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+    expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
       'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
         '\n    in div (at **)' +
         '\n    in Comp (at **)',
@@ -112,7 +121,7 @@ describe('CSSPropertyOperations', () => {
     const root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
 
-    expect(() => ReactDOM.render(<Comp style={styles} />, root)).toWarnDev([
+    expect(() => ReactDOM.render(<Comp style={styles} />, root)).toErrorDev([
       'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
         '\n    in div (at **)' +
         '\n    in Comp (at **)',
@@ -141,7 +150,7 @@ describe('CSSPropertyOperations', () => {
 
     const root = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
+    expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
       // msTransform is correct already and shouldn't warn
       'Warning: Unsupported vendor-prefixed style property oTransform. ' +
         'Did you mean OTransform?' +
@@ -174,7 +183,7 @@ describe('CSSPropertyOperations', () => {
 
     const root = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
+    expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
       "Warning: Style property values shouldn't contain a semicolon. " +
         'Try "backgroundColor: blue" instead.' +
         '\n    in div (at **)' +
@@ -197,7 +206,7 @@ describe('CSSPropertyOperations', () => {
 
     const root = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+    expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
       'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
         '\n    in div (at **)' +
         '\n    in Comp (at **)',
@@ -226,7 +235,7 @@ describe('CSSPropertyOperations', () => {
 
     const root = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+    expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
       'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
         '\n    in div (at **)' +
         '\n    in Comp (at **)',
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 16821b1b3f314..c5536129b543b 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -183,7 +183,7 @@ describe('DOMPropertyOperations', () => {
           <input type="text" onChange={function() {}} />,
           container,
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'A component is changing a controlled input of type text to be uncontrolled',
       );
       if (disableInputAttributeSyncing) {
diff --git a/packages/react-dom/src/__tests__/EventPluginHub-test.js b/packages/react-dom/src/__tests__/EventPluginHub-test.js
index aaf06ebdb69a0..df7859fa6b175 100644
--- a/packages/react-dom/src/__tests__/EventPluginHub-test.js
+++ b/packages/react-dom/src/__tests__/EventPluginHub-test.js
@@ -27,7 +27,7 @@ describe('EventPluginHub', () => {
       node = ReactTestUtils.renderIntoDocument(
         <div onClick="not a function" />,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Expected `onClick` listener to be a function, instead got a value of `string` type.',
     );
     expect(() => ReactTestUtils.SimulateNative.click(node)).toThrowError(
diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
index 2a6b526218c48..b5984487936f7 100644
--- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -57,8 +57,8 @@ describe('ReactBrowserEventEmitter', () => {
     LISTENER.mockClear();
 
     // TODO: can we express this test with only public API?
-    EventPluginHub = require('events/EventPluginHub');
-    EventPluginRegistry = require('events/EventPluginRegistry');
+    EventPluginHub = require('legacy-events/EventPluginHub');
+    EventPluginRegistry = require('legacy-events/EventPluginRegistry');
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMComponentTree = require('../client/ReactDOMComponentTree');
diff --git a/packages/react-dom/src/__tests__/ReactChildReconciler-test.js b/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
index 4d0e3d904437c..3faa1d460ed38 100644
--- a/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
+++ b/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
@@ -65,7 +65,7 @@ describe('ReactChildReconciler', () => {
           <h1>{iterableFunction}</h1>
         </div>,
       );
-    }).toWarnDev('Functions are not valid as a React child');
+    }).toErrorDev('Functions are not valid as a React child');
 
     expect(node.innerHTML).toContain(''); // h1
   });
@@ -77,7 +77,7 @@ describe('ReactChildReconciler', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Keys should be unique so that components maintain their identity ' +
         'across updates. Non-unique keys may cause children to be ' +
         'duplicated and/or omitted — the behavior is unsupported and ' +
@@ -104,7 +104,7 @@ describe('ReactChildReconciler', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toErrorDev(
       'Encountered two children with the same key, `1`. ' +
         'Keys should be unique so that components maintain their identity ' +
         'across updates. Non-unique keys may cause children to be ' +
@@ -124,7 +124,7 @@ describe('ReactChildReconciler', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Keys should be unique so that components maintain their identity ' +
         'across updates. Non-unique keys may cause children to be ' +
         'duplicated and/or omitted — the behavior is unsupported and ' +
@@ -151,7 +151,7 @@ describe('ReactChildReconciler', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toErrorDev(
       'Encountered two children with the same key, `1`. ' +
         'Keys should be unique so that components maintain their identity ' +
         'across updates. Non-unique keys may cause children to be ' +
diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js
index d3c5cbc1f2f12..ca3c0d5203c73 100644
--- a/packages/react-dom/src/__tests__/ReactComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactComponent-test.js
@@ -397,7 +397,7 @@ describe('ReactComponent', () => {
   it('throws usefully when rendering badly-typed elements', () => {
     const X = undefined;
     expect(() => {
-      expect(() => ReactTestUtils.renderIntoDocument(<X />)).toWarnDev(
+      expect(() => ReactTestUtils.renderIntoDocument(<X />)).toErrorDev(
         'React.createElement: type is invalid -- expected a string (for built-in components) ' +
           'or a class/function (for composite components) but got: undefined.',
       );
@@ -412,7 +412,7 @@ describe('ReactComponent', () => {
 
     const Y = null;
     expect(() => {
-      expect(() => ReactTestUtils.renderIntoDocument(<Y />)).toWarnDev(
+      expect(() => ReactTestUtils.renderIntoDocument(<Y />)).toErrorDev(
         'React.createElement: type is invalid -- expected a string (for built-in components) ' +
           'or a class/function (for composite components) but got: null.',
       );
@@ -442,7 +442,7 @@ describe('ReactComponent', () => {
     }
 
     expect(() => {
-      expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toWarnDev(
+      expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
         'React.createElement: type is invalid -- expected a string (for built-in components) ' +
           'or a class/function (for composite components) but got: undefined.',
       );
@@ -572,7 +572,7 @@ describe('ReactComponent', () => {
         return Foo;
       }
       const container = document.createElement('div');
-      expect(() => ReactDOM.render(<Foo />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Foo />, container)).toErrorDev(
         'Warning: Functions are not valid as a React child. This may happen if ' +
           'you return a Component instead of <Component /> from render. ' +
           'Or maybe you meant to call this function rather than return it.\n' +
@@ -587,7 +587,7 @@ describe('ReactComponent', () => {
         }
       }
       const container = document.createElement('div');
-      expect(() => ReactDOM.render(<Foo />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Foo />, container)).toErrorDev(
         'Warning: Functions are not valid as a React child. This may happen if ' +
           'you return a Component instead of <Component /> from render. ' +
           'Or maybe you meant to call this function rather than return it.\n' +
@@ -604,7 +604,7 @@ describe('ReactComponent', () => {
         );
       }
       const container = document.createElement('div');
-      expect(() => ReactDOM.render(<Foo />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Foo />, container)).toErrorDev(
         'Warning: Functions are not valid as a React child. This may happen if ' +
           'you return a Component instead of <Component /> from render. ' +
           'Or maybe you meant to call this function rather than return it.\n' +
@@ -649,7 +649,7 @@ describe('ReactComponent', () => {
       let component;
       expect(() => {
         component = ReactDOM.render(<Foo />, container);
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Functions are not valid as a React child. This may happen if ' +
           'you return a Component instead of <Component /> from render. ' +
           'Or maybe you meant to call this function rather than return it.\n' +
diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
index fd286f1e68c8e..6b51eb6a12560 100644
--- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
+++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
@@ -211,11 +211,10 @@ describe('ReactComponentLifeCycle', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<StatefulComponent />);
-    }).toWarnDev(
+    }).toErrorDev(
       'StatefulComponent: It is not recommended to assign props directly to state ' +
         "because updates to props won't be reflected in state. " +
         'In most cases, it is better to use props directly.',
-      {withoutStack: true},
     );
   });
 
@@ -235,12 +234,11 @@ describe('ReactComponentLifeCycle', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<StatefulComponent />);
-    }).toWarnDev(
+    }).toErrorDev(
       "Warning: Can't call setState on a component that is not yet mounted. " +
         'This is a no-op, but it might indicate a bug in your application. ' +
         'Instead, assign to `this.state` directly or define a `state = {};` ' +
         'class property with the desired state in the StatefulComponent component.',
-      {withoutStack: true},
     );
 
     // Check deduplication; (no extra warnings should be logged).
@@ -271,9 +269,7 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       const instance = ReactTestUtils.renderIntoDocument(element);
       expect(instance._isMounted()).toBeTruthy();
-    }).toWarnDev('Component is accessing isMounted inside its render()', {
-      withoutStack: true,
-    });
+    }).toErrorDev('Component is accessing isMounted inside its render()');
   });
 
   it('should correctly determine if a null component is mounted', () => {
@@ -300,9 +296,7 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       const instance = ReactTestUtils.renderIntoDocument(element);
       expect(instance._isMounted()).toBeTruthy();
-    }).toWarnDev('Component is accessing isMounted inside its render()', {
-      withoutStack: true,
-    });
+    }).toErrorDev('Component is accessing isMounted inside its render()');
   });
 
   it('isMounted should return false when unmounted', () => {
@@ -340,9 +334,7 @@ describe('ReactComponentLifeCycle', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<Component />);
-    }).toWarnDev('Component is accessing findDOMNode inside its render()', {
-      withoutStack: true,
-    });
+    }).toErrorDev('Component is accessing findDOMNode inside its render()');
   });
 
   it('should carry through each of the phases of setup', () => {
@@ -406,9 +398,8 @@ describe('ReactComponentLifeCycle', () => {
     let instance;
     expect(() => {
       instance = ReactDOM.render(<LifeCycleComponent />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'LifeCycleComponent is accessing isMounted inside its render() function',
-      {withoutStack: true},
     );
 
     // getInitialState
@@ -703,15 +694,14 @@ describe('ReactComponentLifeCycle', () => {
 
     const container = document.createElement('div');
     expect(() => {
-      expect(() => ReactDOM.render(<Component />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Component />, container)).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.',
-        {withoutStack: true},
       );
-    }).toLowPriorityWarnDev(
+    }).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -742,15 +732,14 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<Component value={1} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.',
-        {withoutStack: true},
       );
-    }).toLowPriorityWarnDev(
+    }).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -778,9 +767,10 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Component value={1} />, container)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(<Component value={1} />, container),
+    ).toErrorDev(
       'Unsafe legacy lifecycles will not be called for components using new component APIs.',
-      {withoutStack: true},
     );
     ReactDOM.render(<Component value={2} />, container);
   });
@@ -804,18 +794,20 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<AllLegacyLifecycles />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'AllLegacyLifecycles uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  UNSAFE_componentWillReceiveProps\n' +
           '  componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(
-      ['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
+    }).toWarnDev(
+      [
+        'componentWillMount has been renamed',
+        'componentWillUpdate has been renamed',
+      ],
       {withoutStack: true},
     );
 
@@ -830,13 +822,12 @@ describe('ReactComponentLifeCycle', () => {
       }
     }
 
-    expect(() => ReactDOM.render(<WillMount />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<WillMount />, container)).toErrorDev(
       'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
         'WillMount uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
         '  UNSAFE_componentWillMount\n\n' +
         'The above lifecycles should be removed. Learn more about this warning here:\n' +
-        'https://fb.me/react-async-component-lifecycle-hooks',
-      {withoutStack: true},
+        'https://fb.me/react-unsafe-component-lifecycles',
     );
 
     class WillMountAndUpdate extends React.Component {
@@ -854,16 +845,15 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<WillMountAndUpdate />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'WillMountAndUpdate uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  UNSAFE_componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
+    }).toWarnDev(['componentWillMount has been renamed'], {
       withoutStack: true,
     });
 
@@ -879,15 +869,14 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     expect(() => {
-      expect(() => ReactDOM.render(<WillReceiveProps />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<WillReceiveProps />, container)).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'WillReceiveProps uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
           '  componentWillReceiveProps\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
+    }).toWarnDev(['componentWillReceiveProps has been renamed'], {
       withoutStack: true,
     });
   });
@@ -910,18 +899,20 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<AllLegacyLifecycles />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'AllLegacyLifecycles uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  UNSAFE_componentWillReceiveProps\n' +
           '  componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(
-      ['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
+    }).toWarnDev(
+      [
+        'componentWillMount has been renamed',
+        'componentWillUpdate has been renamed',
+      ],
       {withoutStack: true},
     );
 
@@ -935,13 +926,12 @@ describe('ReactComponentLifeCycle', () => {
       }
     }
 
-    expect(() => ReactDOM.render(<WillMount />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<WillMount />, container)).toErrorDev(
       'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
         'WillMount uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
         '  UNSAFE_componentWillMount\n\n' +
         'The above lifecycles should be removed. Learn more about this warning here:\n' +
-        'https://fb.me/react-async-component-lifecycle-hooks',
-      {withoutStack: true},
+        'https://fb.me/react-unsafe-component-lifecycles',
     );
 
     class WillMountAndUpdate extends React.Component {
@@ -958,16 +948,15 @@ describe('ReactComponentLifeCycle', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<WillMountAndUpdate />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'WillMountAndUpdate uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  UNSAFE_componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
+    }).toWarnDev(['componentWillMount has been renamed'], {
       withoutStack: true,
     });
 
@@ -982,15 +971,14 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     expect(() => {
-      expect(() => ReactDOM.render(<WillReceiveProps />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<WillReceiveProps />, container)).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'WillReceiveProps uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
           '  componentWillReceiveProps\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
+    }).toWarnDev(['componentWillReceiveProps has been renamed'], {
       withoutStack: true,
     });
   });
@@ -1033,13 +1021,12 @@ describe('ReactComponentLifeCycle', () => {
     const div = document.createElement('div');
     expect(() =>
       ReactDOM.render(<Parent ref={c => c && log.push('ref')} />, div),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: The <Parent /> component appears to be a function component that returns a class instance. ' +
         'Change Parent to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Parent.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
     ReactDOM.render(<Parent ref={c => c && log.push('ref')} />, div);
 
@@ -1065,10 +1052,9 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const div = document.createElement('div');
-    expect(() => ReactDOM.render(<MyComponent />, div)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent />, div)).toErrorDev(
       'MyComponent.getDerivedStateFromProps(): A valid state object (or null) must ' +
         'be returned. You have returned undefined.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -1086,12 +1072,11 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const div = document.createElement('div');
-    expect(() => ReactDOM.render(<MyComponent />, div)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent />, div)).toErrorDev(
       '`MyComponent` uses `getDerivedStateFromProps` but its initial state is ' +
         'undefined. This is not recommended. Instead, define the initial state by ' +
         'assigning an object to `this.state` in the constructor of `MyComponent`. ' +
         'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -1126,13 +1111,11 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const div = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(<MyComponent foo="bar" />, div),
-    ).toLowPriorityWarnDev(
+    expect(() => ReactDOM.render(<MyComponent foo="bar" />, div)).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -1165,9 +1148,11 @@ describe('ReactComponentLifeCycle', () => {
       render() {
         childInstance = this;
         return (
-          <div onClick={this.updateState} ref={divRef}>{`remote:${
-            this.state.remote
-          }, local:${this.state.local}`}</div>
+          <div
+            onClick={this.updateState}
+            ref={
+              divRef
+            }>{`remote:${this.state.remote}, local:${this.state.local}`}</div>
         );
       }
     }
@@ -1214,17 +1199,13 @@ describe('ReactComponentLifeCycle', () => {
       }
       getSnapshotBeforeUpdate(prevProps, prevState) {
         log.push(
-          `getSnapshotBeforeUpdate() prevProps:${prevProps.value} prevState:${
-            prevState.value
-          }`,
+          `getSnapshotBeforeUpdate() prevProps:${prevProps.value} prevState:${prevState.value}`,
         );
         return 'abc';
       }
       componentDidUpdate(prevProps, prevState, snapshot) {
         log.push(
-          `componentDidUpdate() prevProps:${prevProps.value} prevState:${
-            prevState.value
-          } snapshot:${snapshot}`,
+          `componentDidUpdate() prevProps:${prevProps.value} prevState:${prevState.value} snapshot:${snapshot}`,
         );
       }
       render() {
@@ -1357,10 +1338,9 @@ describe('ReactComponentLifeCycle', () => {
 
     const div = document.createElement('div');
     ReactDOM.render(<MyComponent value="foo" />, div);
-    expect(() => ReactDOM.render(<MyComponent value="bar" />, div)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent value="bar" />, div)).toErrorDev(
       'MyComponent.getSnapshotBeforeUpdate(): A snapshot value (or null) must ' +
         'be returned. You have returned undefined.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -1378,10 +1358,9 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const div = document.createElement('div');
-    expect(() => ReactDOM.render(<MyComponent />, div)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent />, div)).toErrorDev(
       'MyComponent: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
         'This component defines getSnapshotBeforeUpdate() only.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -1399,26 +1378,34 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     const container = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(<MyComponent x={1} />, container),
-    ).toLowPriorityWarnDev(
+    expect(() => ReactDOM.render(<MyComponent x={1} />, container)).toWarnDev(
       [
-        'componentWillMount is deprecated and will be removed in the next major version. ' +
-          'Use componentDidMount instead. As a temporary workaround, ' +
-          'you can rename to UNSAFE_componentWillMount.' +
-          '\n\nPlease update the following components: MyComponent',
-        'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
-          'Use static getDerivedStateFromProps instead.' +
-          '\n\nPlease update the following components: MyComponent',
-        'componentWillUpdate is deprecated and will be removed in the next major version. ' +
-          'Use componentDidUpdate instead. As a temporary workaround, ' +
-          'you can rename to UNSAFE_componentWillUpdate.' +
-          '\n\nPlease update the following components: MyComponent',
+        /* eslint-disable max-len */
+        `Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: MyComponent`,
+        `Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
+* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: MyComponent`,
+        `Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: MyComponent`,
+        /* eslint-enable max-len */
       ],
       {withoutStack: true},
     );
 
-    // Dedupe check (update and instantiate new
+    // Dedupe check (update and instantiate new)
     ReactDOM.render(<MyComponent x={2} />, container);
     ReactDOM.render(<MyComponent key="new" x={1} />, container);
   });
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
index 7766944ec6e7c..908d418cac7ef 100644
--- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
@@ -118,13 +118,12 @@ describe('ReactCompositeComponent', () => {
     }
 
     const el = document.createElement('div');
-    expect(() => ReactDOM.render(<Child test="test" />, el)).toWarnDev(
+    expect(() => ReactDOM.render(<Child test="test" />, el)).toErrorDev(
       'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
         'Change Child to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Child.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
 
     expect(el.textContent).toBe('test');
@@ -166,7 +165,9 @@ describe('ReactCompositeComponent', () => {
     // Old API based on heuristic
     let container = document.createElement('div');
     container.innerHTML = markup;
-    expect(() => ReactDOM.render(<Parent />, container)).toLowPriorityWarnDev(
+    expect(() =>
+      ReactDOM.render(<Parent />, container),
+    ).toWarnDev(
       'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
         'will stop working in React v17. Replace the ReactDOM.render() call ' +
         'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
@@ -282,12 +283,11 @@ describe('ReactCompositeComponent', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<MyComponent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent />, container)).toErrorDev(
       "Warning: Can't call forceUpdate on a component that is not yet mounted. " +
         'This is a no-op, but it might indicate a bug in your application. ' +
         'Instead, assign to `this.state` directly or define a `state = {};` ' +
         'class property with the desired state in the MyComponent component.',
-      {withoutStack: true},
     );
 
     // No additional warning should be recorded
@@ -307,12 +307,11 @@ describe('ReactCompositeComponent', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<MyComponent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<MyComponent />, container)).toErrorDev(
       "Warning: Can't call setState on a component that is not yet mounted. " +
         'This is a no-op, but it might indicate a bug in your application. ' +
         'Instead, assign to `this.state` directly or define a `state = {};` ' +
         'class property with the desired state in the MyComponent component.',
-      {withoutStack: true},
     );
 
     // No additional warning should be recorded
@@ -338,7 +337,7 @@ describe('ReactCompositeComponent', () => {
 
     ReactDOM.unmountComponentAtNode(container);
 
-    expect(() => instance.forceUpdate()).toWarnDev(
+    expect(() => instance.forceUpdate()).toErrorDev(
       "Warning: Can't perform a React state update on an unmounted " +
         'component. This is a no-op, but it indicates a memory leak in your ' +
         'application. To fix, cancel all subscriptions and asynchronous ' +
@@ -385,7 +384,7 @@ describe('ReactCompositeComponent', () => {
 
     expect(() => {
       instance.setState({value: 2});
-    }).toWarnDev(
+    }).toErrorDev(
       "Warning: Can't perform a React state update on an unmounted " +
         'component. This is a no-op, but it indicates a memory leak in your ' +
         'application. To fix, cancel all subscriptions and asynchronous ' +
@@ -436,11 +435,10 @@ describe('ReactCompositeComponent', () => {
       expect(() => {
         ReactDOM.render(<ClassWithRenderNotExtended />, container);
       }).toThrow(TypeError);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
         "but doesn't extend React.Component. This is likely to cause errors. " +
         'Change ClassWithRenderNotExtended to extend React.Component instead.',
-      {withoutStack: true},
     );
 
     // Test deduplication
@@ -472,10 +470,9 @@ describe('ReactCompositeComponent', () => {
 
     expect(() => {
       instance = ReactDOM.render(<Component />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Cannot update during an existing state transition (such as within ' +
         '`render`). Render methods should be a pure function of props and state.',
-      {withoutStack: true},
     );
 
     // The setState call is queued and then executed as a second pass. This
@@ -521,9 +518,8 @@ describe('ReactCompositeComponent', () => {
 
     expect(() => {
       instance = ReactDOM.render(<Component />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: setState(...): Cannot call setState() inside getChildContext()',
-      {withoutStack: true},
     );
 
     expect(renderPasses).toBe(2);
@@ -597,10 +593,9 @@ describe('ReactCompositeComponent', () => {
 
     const instance = ReactTestUtils.renderIntoDocument(<Component />);
 
-    expect(() => instance.setState({bogus: true})).toWarnDev(
+    expect(() => instance.setState({bogus: true})).toErrorDev(
       'Warning: Component.shouldComponentUpdate(): Returned undefined instead of a ' +
         'boolean value. Make sure to return true or false.',
-      {withoutStack: true},
     );
   });
 
@@ -613,11 +608,10 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Warning: Component has a method called ' +
         'componentDidUnmount(). But there is no such lifecycle method. ' +
         'Did you mean componentWillUnmount()?',
-      {withoutStack: true},
     );
   });
 
@@ -630,13 +624,12 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Warning: Component has a method called ' +
         'componentDidReceiveProps(). But there is no such lifecycle method. ' +
         'If you meant to update the state in response to changing props, ' +
         'use componentWillReceiveProps(). If you meant to fetch data or ' +
         'run side-effects or mutations after React has updated the UI, use componentDidUpdate().',
-      {withoutStack: true},
     );
   });
 
@@ -652,10 +645,9 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Warning: Setting defaultProps as an instance property on Component is not supported ' +
         'and will be ignored. Instead, define defaultProps as a static property on Component.',
-      {withoutStack: true},
     );
   });
 
@@ -1141,12 +1133,11 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Outer />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Outer />)).toErrorDev(
       'Render methods should be a pure function of props and state; ' +
         'triggering nested component updates from render is not allowed. If ' +
         'necessary, trigger nested updates in componentDidUpdate.\n\nCheck the ' +
         'render method of Outer.',
-      {withoutStack: true},
     );
   });
 
@@ -1435,10 +1426,9 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    expect(() => ReactDOM.render(<Foo idx="qwe" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo idx="qwe" />, container)).toErrorDev(
       'Foo(...): When calling super() in `Foo`, make sure to pass ' +
         "up the same props that your component's constructor was passed.",
-      {withoutStack: true},
     );
   });
 
@@ -1737,17 +1727,14 @@ describe('ReactCompositeComponent', () => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<RenderTextInvalidConstructor />);
       }).toThrow();
-    }).toWarnDev(
-      [
-        // Expect two errors because invokeGuardedCallback will dispatch an error event,
-        // Causing the warning to be logged again.
-        'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
-          'did you accidentally return an object from the constructor?',
-        'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
-          'did you accidentally return an object from the constructor?',
-      ],
-      {withoutStack: true},
-    );
+    }).toErrorDev([
+      // Expect two errors because invokeGuardedCallback will dispatch an error event,
+      // Causing the warning to be logged again.
+      'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
+        'did you accidentally return an object from the constructor?',
+      'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
+        'did you accidentally return an object from the constructor?',
+    ]);
   });
 
   it('should warn about reassigning this.props while rendering', () => {
@@ -1763,7 +1750,7 @@ describe('ReactCompositeComponent', () => {
     const container = document.createElement('div');
     expect(() => {
       ReactDOM.render(<Bad />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'It looks like Bad is reassigning its own `this.props` while rendering. ' +
         'This is not supported and can lead to confusing bugs.',
     );
@@ -1776,17 +1763,14 @@ describe('ReactCompositeComponent', () => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<RenderTestUndefinedRender />);
       }).toThrow();
-    }).toWarnDev(
-      [
-        // Expect two errors because invokeGuardedCallback will dispatch an error event,
-        // Causing the warning to be logged again.
-        'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
-          'component instance: you may have forgotten to define `render`.',
-        'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
-          'component instance: you may have forgotten to define `render`.',
-      ],
-      {withoutStack: true},
-    );
+    }).toErrorDev([
+      // Expect two errors because invokeGuardedCallback will dispatch an error event,
+      // Causing the warning to be logged again.
+      'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
+        'component instance: you may have forgotten to define `render`.',
+      'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
+        'component instance: you may have forgotten to define `render`.',
+    ]);
   });
 
   // Regression test for accidental breaking change
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
index 3c28f48337683..70e15b769e6dd 100644
--- a/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
@@ -406,11 +406,10 @@ describe('ReactCompositeComponent-state', () => {
     const container = document.createElement('div');
     ReactDOM.render(<Test />, container);
     // Update
-    expect(() => ReactDOM.render(<Test />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Test />, container)).toErrorDev(
       'Warning: Test.componentWillReceiveProps(): Assigning directly to ' +
         "this.state is deprecated (except inside a component's constructor). " +
         'Use setState instead.',
-      {withoutStack: true},
     );
 
     expect(ops).toEqual([
@@ -448,11 +447,10 @@ describe('ReactCompositeComponent-state', () => {
 
     // Mount
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Test />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Test />, container)).toErrorDev(
       'Warning: Test.componentWillMount(): Assigning directly to ' +
         "this.state is deprecated (except inside a component's constructor). " +
         'Use setState instead.',
-      {withoutStack: true},
     );
 
     expect(ops).toEqual([
@@ -474,13 +472,12 @@ describe('ReactCompositeComponent-state', () => {
     }
 
     const el = document.createElement('div');
-    expect(() => ReactDOM.render(<Child />, el)).toWarnDev(
+    expect(() => ReactDOM.render(<Child />, el)).toErrorDev(
       'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
         'Change Child to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Child.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
 
     expect(el.textContent).toBe('count:123');
diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js
index e618d3e6ffc63..c43ae76dc4e6a 100644
--- a/packages/react-dom/src/__tests__/ReactDOM-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOM-test.js
@@ -139,7 +139,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, 'no');
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: no.',
       );
@@ -151,7 +151,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, {foo: 'bar'});
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -163,7 +163,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, new Foo());
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -192,7 +192,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, 'no');
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: no.',
       );
@@ -205,7 +205,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, {foo: 'bar'});
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -218,7 +218,7 @@ describe('ReactDOM', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<A />, myDiv, new Foo());
-      }).toWarnDev(
+      }).toErrorDev(
         'render(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -484,7 +484,7 @@ describe('ReactDOM', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<App />, container)).toWarnDev([
+    expect(() => ReactDOM.render(<App />, container)).toErrorDev([
       // ReactDOM(App > div > span)
       'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
         '    in span (at **)\n' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
index 4fd68a32021ea..efd01b41af73a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -42,7 +42,7 @@ describe('ReactDOM unknown attribute', () => {
     });
 
     it('changes values true, false to null, and also warns once', () => {
-      expect(() => testUnknownAttributeAssignment(true, null)).toWarnDev(
+      expect(() => testUnknownAttributeAssignment(true, null)).toErrorDev(
         'Received `true` for a non-boolean attribute `unknown`.\n\n' +
           'If you want to write it to the DOM, pass a string instead: ' +
           'unknown="true" or unknown={value.toString()}.\n' +
@@ -71,7 +71,7 @@ describe('ReactDOM unknown attribute', () => {
     });
 
     it('coerces NaN to strings and warns', () => {
-      expect(() => testUnknownAttributeAssignment(NaN, 'NaN')).toWarnDev(
+      expect(() => testUnknownAttributeAssignment(NaN, 'NaN')).toErrorDev(
         'Warning: Received NaN for the `unknown` attribute. ' +
           'If this is expected, cast the value to a string.\n' +
           '    in div (at **)',
@@ -90,7 +90,7 @@ describe('ReactDOM unknown attribute', () => {
     });
 
     it('removes symbols and warns', () => {
-      expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toWarnDev(
+      expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev(
         'Warning: Invalid value for prop `unknown` on <div> tag. Either remove it ' +
           'from the element, or pass a string or number value to keep it ' +
           'in the DOM. For details, see https://fb.me/react-attribute-behavior\n' +
@@ -101,7 +101,7 @@ describe('ReactDOM unknown attribute', () => {
     it('removes functions and warns', () => {
       expect(() =>
         testUnknownAttributeRemoval(function someFunction() {}),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid value for prop `unknown` on <div> tag. Either remove ' +
           'it from the element, or pass a string or number value to ' +
           'keep it in the DOM. For details, see ' +
@@ -115,7 +115,7 @@ describe('ReactDOM unknown attribute', () => {
 
       expect(() =>
         ReactDOM.render(<div helloWorld="something" />, el),
-      ).toWarnDev(
+      ).toErrorDev(
         'React does not recognize the `helloWorld` prop on a DOM element. ' +
           'If you intentionally want it to appear in the DOM as a custom ' +
           'attribute, spell it as lowercase `helloworld` instead. ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index e695a845ff505..219b2346d2f5e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -150,7 +150,7 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       expect(() =>
         ReactDOM.render(<div foo={() => {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid value for prop `foo` on <div> tag. Either remove it ' +
           'from the element, or pass a string or number value to keep ' +
           'it in the DOM. For details, see https://fb.me/react-attribute-behavior' +
@@ -162,7 +162,7 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       expect(() =>
         ReactDOM.render(<div foo={() => {}} baz={() => {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid values for props `foo`, `baz` on <div> tag. Either remove ' +
           'them from the element, or pass a string or number value to keep ' +
           'them in the DOM. For details, see https://fb.me/react-attribute-behavior' +
@@ -174,7 +174,7 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       expect(() =>
         ReactDOM.render(<div onDblClick={() => {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\n    in div (at **)',
       );
     });
@@ -182,25 +182,22 @@ describe('ReactDOMComponent', () => {
     it('should warn for unknown string event handlers', () => {
       const container = document.createElement('div');
       expect(() =>
-        ReactDOM.render(<div onUnknown="alert(&quot;hack&quot;)" />, container),
-      ).toWarnDev(
+        ReactDOM.render(<div onUnknown='alert("hack")' />, container),
+      ).toErrorDev(
         'Warning: Unknown event handler property `onUnknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('onUnknown')).toBe(false);
       expect(container.firstChild.onUnknown).toBe(undefined);
       expect(() =>
-        ReactDOM.render(<div onunknown="alert(&quot;hack&quot;)" />, container),
-      ).toWarnDev(
+        ReactDOM.render(<div onunknown='alert("hack")' />, container),
+      ).toErrorDev(
         'Warning: Unknown event handler property `onunknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('onunknown')).toBe(false);
       expect(container.firstChild.onunknown).toBe(undefined);
       expect(() =>
-        ReactDOM.render(
-          <div on-unknown="alert(&quot;hack&quot;)" />,
-          container,
-        ),
-      ).toWarnDev(
+        ReactDOM.render(<div on-unknown='alert("hack")' />, container),
+      ).toErrorDev(
         'Warning: Unknown event handler property `on-unknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);
@@ -211,21 +208,21 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       expect(() =>
         ReactDOM.render(<div onUnknown={function() {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Unknown event handler property `onUnknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('onUnknown')).toBe(false);
       expect(container.firstChild.onUnknown).toBe(undefined);
       expect(() =>
         ReactDOM.render(<div onunknown={function() {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Unknown event handler property `onunknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('onunknown')).toBe(false);
       expect(container.firstChild.onunknown).toBe(undefined);
       expect(() =>
         ReactDOM.render(<div on-unknown={function() {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Unknown event handler property `on-unknown`. It will be ignored.\n    in div (at **)',
       );
       expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);
@@ -234,7 +231,7 @@ describe('ReactDOMComponent', () => {
 
     it('should warn for badly cased React attributes', () => {
       const container = document.createElement('div');
-      expect(() => ReactDOM.render(<div CHILDREN="5" />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<div CHILDREN="5" />, container)).toErrorDev(
         'Warning: Invalid DOM property `CHILDREN`. Did you mean `children`?\n    in div (at **)',
       );
       expect(container.firstChild.getAttribute('CHILDREN')).toBe('5');
@@ -253,7 +250,7 @@ describe('ReactDOMComponent', () => {
     it('should warn nicely about NaN in style', () => {
       const style = {fontSize: NaN};
       const div = document.createElement('div');
-      expect(() => ReactDOM.render(<span style={style} />, div)).toWarnDev(
+      expect(() => ReactDOM.render(<span style={style} />, div)).toErrorDev(
         'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
           '\n    in span (at **)',
       );
@@ -572,7 +569,7 @@ describe('ReactDOMComponent', () => {
           expect(result1.toLowerCase()).not.toContain('onclick');
           expect(result2.toLowerCase()).not.toContain('script');
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></div><script>alert("hi")</script>`',
       ]);
@@ -596,7 +593,7 @@ describe('ReactDOMComponent', () => {
           expect(result1.toLowerCase()).not.toContain('onclick');
           expect(result2.toLowerCase()).not.toContain('script');
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`',
       ]);
@@ -626,7 +623,7 @@ describe('ReactDOMComponent', () => {
           );
           expect(container.firstChild.attributes.length).toBe(0);
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></div><script>alert("hi")</script>`',
       ]);
@@ -656,7 +653,7 @@ describe('ReactDOMComponent', () => {
           );
           expect(container.firstChild.attributes.length).toBe(0);
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`',
       ]);
@@ -687,7 +684,7 @@ describe('ReactDOMComponent', () => {
           );
           expect(container.firstChild.attributes.length).toBe(0);
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></div><script>alert("hi")</script>`',
       ]);
@@ -718,7 +715,7 @@ describe('ReactDOMComponent', () => {
           );
           expect(container.firstChild.attributes.length).toBe(0);
         }
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
         'Warning: Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`',
       ]);
@@ -969,7 +966,7 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       expect(() =>
         ReactDOM.render(<button is={function() {}} />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Received a `function` for a string attribute `is`. If this is expected, cast ' +
           'the value to a string.',
       );
@@ -1034,13 +1031,13 @@ describe('ReactDOMComponent', () => {
       return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
-    function toHaveAttribute(actual, expected) {
+    function expectToHaveAttribute(actual, expected) {
       const [attr, value] = expected;
       let re = '(?:^|\\s)' + attr + '=[\\\'"]';
       if (typeof value !== 'undefined') {
         re += quoteRegexp(value) + '[\\\'"]';
       }
-      return new RegExp(re).test(actual);
+      expect(actual).toMatch(new RegExp(re));
     }
 
     function genMarkup(props) {
@@ -1048,19 +1045,17 @@ describe('ReactDOMComponent', () => {
     }
 
     it('should generate the correct markup with className', () => {
-      expect(toHaveAttribute(genMarkup({className: 'a'}), ['class', 'a']));
-      expect(toHaveAttribute(genMarkup({className: 'a b'}), ['class', 'a b']));
-      expect(toHaveAttribute(genMarkup({className: ''}), ['class', '']));
+      expectToHaveAttribute(genMarkup({className: 'a'}), ['class', 'a']);
+      expectToHaveAttribute(genMarkup({className: 'a b'}), ['class', 'a b']);
+      expectToHaveAttribute(genMarkup({className: ''}), ['class', '']);
     });
 
     it('should escape style names and values', () => {
-      expect(
-        toHaveAttribute(
-          genMarkup({
-            style: {'b&ckground': '<3'},
-          }),
-          ['style', 'b&amp;ckground:&lt;3;'],
-        ),
+      expectToHaveAttribute(
+        genMarkup({
+          style: {'b&ckground': '<3'},
+        }),
+        ['style', 'b&amp;ckground:&lt;3'],
       );
     });
   });
@@ -1075,7 +1070,7 @@ describe('ReactDOMComponent', () => {
     }
 
     function toHaveInnerhtml(actual, expected) {
-      const re = '^' + quoteRegexp(expected) + '$';
+      const re = quoteRegexp(expected);
       return new RegExp(re).test(actual);
     }
 
@@ -1086,7 +1081,7 @@ describe('ReactDOMComponent', () => {
           genMarkup({dangerouslySetInnerHTML: innerHTML}),
           'testContent',
         ),
-      );
+      ).toBe(true);
     });
   });
 
@@ -1135,7 +1130,7 @@ describe('ReactDOMComponent', () => {
 
       expect(() => {
         returnedValue = ReactDOMServer.renderToString(<Container />);
-      }).toWarnDev(
+      }).toErrorDev(
         '<BR /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
           'or lowercase for HTML elements.',
@@ -1151,7 +1146,7 @@ describe('ReactDOMComponent', () => {
 
       expect(() =>
         ReactTestUtils.renderIntoDocument(React.createElement('IMG')),
-      ).toWarnDev(
+      ).toErrorDev(
         '<IMG /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
           'or lowercase for HTML elements.',
@@ -1161,7 +1156,7 @@ describe('ReactDOMComponent', () => {
     it('should warn on props reserved for future use', () => {
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div aria="hello" />),
-      ).toWarnDev(
+      ).toErrorDev(
         'The `aria` attribute is reserved for future use in React. ' +
           'Pass individual `aria-` attributes instead.',
       );
@@ -1184,11 +1179,11 @@ describe('ReactDOMComponent', () => {
         };
         Object.prototype.toString = wrappedToString; // eslint-disable-line no-extend-native
 
-        expect(() => ReactTestUtils.renderIntoDocument(<bar />)).toWarnDev(
+        expect(() => ReactTestUtils.renderIntoDocument(<bar />)).toErrorDev(
           'The tag <bar> is unrecognized in this browser',
         );
         // Test deduplication
-        expect(() => ReactTestUtils.renderIntoDocument(<foo />)).toWarnDev(
+        expect(() => ReactTestUtils.renderIntoDocument(<foo />)).toErrorDev(
           'The tag <foo> is unrecognized in this browser',
         );
         ReactTestUtils.renderIntoDocument(<foo />);
@@ -1201,7 +1196,7 @@ describe('ReactDOMComponent', () => {
         // Corner case. Make sure out deduplication logic doesn't break with weird tag.
         expect(() =>
           ReactTestUtils.renderIntoDocument(<hasOwnProperty />),
-        ).toWarnDev([
+        ).toErrorDev([
           '<hasOwnProperty /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
             'or lowercase for HTML elements.',
@@ -1262,7 +1257,7 @@ describe('ReactDOMComponent', () => {
           }
         }
         const node = document.createElement('div');
-        expect(() => ReactDOM.render(<ShadyComponent />, node)).toWarnDev(
+        expect(() => ReactDOM.render(<ShadyComponent />, node)).toErrorDev(
           'ShadyComponent is using shady DOM. Using shady DOM with React can ' +
             'cause things to break subtly.',
         );
@@ -1282,7 +1277,7 @@ describe('ReactDOMComponent', () => {
           return container;
         };
 
-        expect(() => mountComponent({is: 'custom-shady-div'})).toWarnDev(
+        expect(() => mountComponent({is: 'custom-shady-div'})).toErrorDev(
           'A component is using shady DOM. Using shady DOM with React can ' +
             'cause things to break subtly.',
         );
@@ -1314,7 +1309,7 @@ describe('ReactDOMComponent', () => {
             </menu>,
             container,
           );
-        }).toWarnDev('The tag <menuitem> is unrecognized in this browser.');
+        }).toErrorDev('The tag <menuitem> is unrecognized in this browser.');
       }).toThrowError(
         'menuitem is a void element tag and must neither have `children` nor use ' +
           '`dangerouslySetInnerHTML`.',
@@ -1332,13 +1327,13 @@ describe('ReactDOMComponent', () => {
     it('should validate against use of innerHTML', () => {
       expect(() =>
         mountComponent({innerHTML: '<span>Hi Jim!</span>'}),
-      ).toWarnDev('Directly setting property `innerHTML` is not permitted. ');
+      ).toErrorDev('Directly setting property `innerHTML` is not permitted. ');
     });
 
     it('should validate against use of innerHTML without case sensitivity', () => {
       expect(() =>
         mountComponent({innerhtml: '<span>Hi Jim!</span>'}),
-      ).toWarnDev('Directly setting property `innerHTML` is not permitted. ');
+      ).toErrorDev('Directly setting property `innerHTML` is not permitted. ');
     });
 
     it('should validate use of dangerouslySetInnerHTML', () => {
@@ -1368,7 +1363,7 @@ describe('ReactDOMComponent', () => {
     it('should warn about contentEditable and children', () => {
       expect(() =>
         mountComponent({contentEditable: true, children: ''}),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: A component is `contentEditable` and contains `children` ' +
           'managed by React. It is now your responsibility to guarantee that ' +
           'none of those nodes are unexpectedly modified or duplicated. This ' +
@@ -1546,7 +1541,7 @@ describe('ReactDOMComponent', () => {
           </div>,
           container,
         );
-      }).toWarnDev('contentEditable');
+      }).toErrorDev('contentEditable');
     });
 
     it('should validate against invalid styles', () => {
@@ -1665,7 +1660,7 @@ describe('ReactDOMComponent', () => {
             <tr />
           </div>,
         );
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +
           '<div>.' +
           '\n    in tr (at **)' +
@@ -1687,7 +1682,7 @@ describe('ReactDOMComponent', () => {
           </span>,
           p,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: validateDOMNesting(...): <p> cannot appear as a descendant ' +
           'of <p>.' +
           // There is no outer `p` here because root container is not part of the stack.
@@ -1713,9 +1708,9 @@ describe('ReactDOMComponent', () => {
         }
       }
 
-      expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toWarnDev([
+      expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev([
         'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +
-          '<table>. Add a <tbody> to your code to match the DOM tree generated ' +
+          '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
           'by the browser.' +
           '\n    in tr (at **)' +
           '\n    in Row (at **)' +
@@ -1765,7 +1760,7 @@ describe('ReactDOMComponent', () => {
       function App1() {
         return <Viz1 />;
       }
-      expect(() => ReactTestUtils.renderIntoDocument(<App1 />)).toWarnDev(
+      expect(() => ReactTestUtils.renderIntoDocument(<App1 />)).toErrorDev(
         '\n    in tr (at **)' +
           '\n    in Row (at **)' +
           '\n    in FancyRow (at **)' +
@@ -1783,7 +1778,7 @@ describe('ReactDOMComponent', () => {
       function App2() {
         return <Viz2 />;
       }
-      expect(() => ReactTestUtils.renderIntoDocument(<App2 />)).toWarnDev(
+      expect(() => ReactTestUtils.renderIntoDocument(<App2 />)).toErrorDev(
         '\n    in tr (at **)' +
           '\n    in Row (at **)' +
           '\n    in FancyRow (at **)' +
@@ -1799,7 +1794,7 @@ describe('ReactDOMComponent', () => {
             <FancyRow />
           </FancyTable>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         '\n    in tr (at **)' +
           '\n    in Row (at **)' +
           '\n    in FancyRow (at **)' +
@@ -1814,7 +1809,7 @@ describe('ReactDOMComponent', () => {
             <FancyRow />
           </table>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         '\n    in tr (at **)' +
           '\n    in Row (at **)' +
           '\n    in FancyRow (at **)' +
@@ -1827,7 +1822,7 @@ describe('ReactDOMComponent', () => {
             <tr />
           </FancyTable>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         '\n    in tr (at **)' +
           '\n    in table (at **)' +
           '\n    in Table (at **)' +
@@ -1848,7 +1843,7 @@ describe('ReactDOMComponent', () => {
             </div>
           </Link>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         '\n    in a (at **)' +
           '\n    in Link (at **)' +
           '\n    in div (at **)' +
@@ -1862,7 +1857,7 @@ describe('ReactDOMComponent', () => {
         ReactDOMServer.renderToString(
           React.createElement('input', {type: 'text', tabindex: '1'}),
         );
-      }).toWarnDev('tabIndex');
+      }).toErrorDev('tabIndex');
     });
 
     it('should warn about incorrect casing on event handlers (ssr)', () => {
@@ -1870,7 +1865,7 @@ describe('ReactDOMComponent', () => {
         ReactDOMServer.renderToString(
           React.createElement('input', {type: 'text', oninput: '1'}),
         );
-      }).toWarnDev(
+      }).toErrorDev(
         'Invalid event handler property `oninput`. ' +
           'React events use the camelCase naming convention, ' +
           // Note: we don't know the right event name so we
@@ -1892,7 +1887,7 @@ describe('ReactDOMComponent', () => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('input', {type: 'text', tabindex: '1'}),
         );
-      }).toWarnDev('tabIndex');
+      }).toErrorDev('tabIndex');
     });
 
     it('should warn about incorrect casing on event handlers', () => {
@@ -1900,12 +1895,12 @@ describe('ReactDOMComponent', () => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('input', {type: 'text', oninput: '1'}),
         );
-      }).toWarnDev('onInput');
+      }).toErrorDev('onInput');
       expect(() => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('input', {type: 'text', onKeydown: '1'}),
         );
-      }).toWarnDev('onKeyDown');
+      }).toErrorDev('onKeyDown');
     });
 
     it('should warn about class', () => {
@@ -1913,7 +1908,7 @@ describe('ReactDOMComponent', () => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('div', {class: 'muffins'}),
         );
-      }).toWarnDev('className');
+      }).toErrorDev('className');
     });
 
     it('should warn about class (ssr)', () => {
@@ -1921,7 +1916,7 @@ describe('ReactDOMComponent', () => {
         ReactDOMServer.renderToString(
           React.createElement('div', {class: 'muffins'}),
         );
-      }).toWarnDev('className');
+      }).toErrorDev('className');
     });
 
     it('should warn about props that are no longer supported', () => {
@@ -1929,12 +1924,12 @@ describe('ReactDOMComponent', () => {
 
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div onFocusIn={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div onFocusOut={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
     });
@@ -1943,12 +1938,12 @@ describe('ReactDOMComponent', () => {
       ReactTestUtils.renderIntoDocument(<div />);
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div onfocusin={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div onfocusout={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
     });
@@ -1957,12 +1952,12 @@ describe('ReactDOMComponent', () => {
       ReactDOMServer.renderToString(<div />);
       expect(() =>
         ReactDOMServer.renderToString(<div onFocusIn={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
       expect(() =>
         ReactDOMServer.renderToString(<div onFocusOut={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
     });
@@ -1971,12 +1966,12 @@ describe('ReactDOMComponent', () => {
       ReactDOMServer.renderToString(<div />);
       expect(() =>
         ReactDOMServer.renderToString(<div onfocusin={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
       expect(() =>
         ReactDOMServer.renderToString(<div onfocusout={() => {}} />),
-      ).toWarnDev(
+      ).toErrorDev(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut.',
       );
     });
@@ -1984,12 +1979,12 @@ describe('ReactDOMComponent', () => {
     it('gives source code refs for unknown prop warning', () => {
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div class="paladin" />),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `class`. Did you mean `className`?\n    in div (at **)',
       );
       expect(() =>
         ReactTestUtils.renderIntoDocument(<input type="text" onclick="1" />),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid event handler property `onclick`. Did you mean ' +
           '`onClick`?\n    in input (at **)',
       );
@@ -1998,12 +1993,12 @@ describe('ReactDOMComponent', () => {
     it('gives source code refs for unknown prop warning (ssr)', () => {
       expect(() =>
         ReactDOMServer.renderToString(<div class="paladin" />),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `class`. Did you mean `className`?\n    in div (at **)',
       );
       expect(() =>
         ReactDOMServer.renderToString(<input type="text" oninput="1" />),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid event handler property `oninput`. ' +
           // Note: we don't know the right event name so we
           // use a generic one (onClick) as a suggestion.
@@ -2020,7 +2015,7 @@ describe('ReactDOMComponent', () => {
       ReactTestUtils.renderIntoDocument(<div className="paladin" />, container);
       expect(() =>
         ReactTestUtils.renderIntoDocument(<div class="paladin" />, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `class`. Did you mean `className`?\n    in div (at **)',
       );
     });
@@ -2036,7 +2031,7 @@ describe('ReactDOMComponent', () => {
             <div className="foo6" />
           </div>,
         ),
-      ).toWarnDev([
+      ).toErrorDev([
         'Invalid DOM property `class`. Did you mean `className`?\n    in span (at **)',
         'Invalid event handler property `onclick`. Did you mean `onClick`?\n    in strong (at **)',
       ]);
@@ -2053,7 +2048,7 @@ describe('ReactDOMComponent', () => {
             <div className="foo6" />
           </div>,
         ),
-      ).toWarnDev([
+      ).toErrorDev([
         'Invalid DOM property `class`. Did you mean `className`?\n    in span (at **)',
         'Invalid event handler property `onclick`. ' +
           'React events use the camelCase naming convention, for example `onClick`.' +
@@ -2103,7 +2098,7 @@ describe('ReactDOMComponent', () => {
 
       expect(() =>
         ReactTestUtils.renderIntoDocument(<Parent />, container),
-      ).toWarnDev([
+      ).toErrorDev([
         'Invalid DOM property `class`. Did you mean `className`?\n    in span (at **)',
         'Invalid event handler property `onclick`. Did you mean `onClick`?\n    in strong (at **)',
       ]);
@@ -2151,7 +2146,7 @@ describe('ReactDOMComponent', () => {
 
       expect(() =>
         ReactDOMServer.renderToString(<Parent />, container),
-      ).toWarnDev([
+      ).toErrorDev([
         'Invalid DOM property `class`. Did you mean `className`?\n    in span (at **)',
         'Invalid event handler property `onclick`. ' +
           'React events use the camelCase naming convention, for example `onClick`.' +
@@ -2164,7 +2159,7 @@ describe('ReactDOMComponent', () => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('label', {for: 'test'}),
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n    in label',
       );
 
@@ -2172,7 +2167,7 @@ describe('ReactDOMComponent', () => {
         ReactTestUtils.renderIntoDocument(
           React.createElement('input', {type: 'text', autofocus: true}),
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n    in input',
       );
     });
@@ -2182,14 +2177,14 @@ describe('ReactDOMComponent', () => {
         ReactDOMServer.renderToString(
           React.createElement('label', {for: 'test'}),
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n    in label',
       );
       expect(() =>
         ReactDOMServer.renderToString(
           React.createElement('input', {type: 'text', autofocus: true}),
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n    in input',
       );
     });
@@ -2224,7 +2219,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div class="test" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Invalid DOM property `class`. Did you mean `className`?',
       );
 
@@ -2235,7 +2230,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div cLASS="test" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Invalid DOM property `cLASS`. Did you mean `className`?',
       );
 
@@ -2250,7 +2245,7 @@ describe('ReactDOMComponent', () => {
             <text arabic-form="initial" />
           </svg>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Invalid DOM property `arabic-form`. Did you mean `arabicForm`?',
       );
       const text = el.querySelector('text');
@@ -2305,7 +2300,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div whatever={true} />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Received `true` for a non-boolean attribute `whatever`.\n\n' +
           'If you want to write it to the DOM, pass a string instead: ' +
           'whatever="true" or whatever={value.toString()}.',
@@ -2319,7 +2314,7 @@ describe('ReactDOMComponent', () => {
       expect(() => {
         // eslint-disable-next-line react/jsx-boolean-value
         el = ReactTestUtils.renderIntoDocument(<div whatever />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Received `true` for a non-boolean attribute `whatever`.\n\n' +
           'If you want to write it to the DOM, pass a string instead: ' +
           'whatever="true" or whatever={value.toString()}.',
@@ -2338,7 +2333,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div whatever={() => {}} />);
-      }).toWarnDev('Warning: Invalid value for prop `whatever` on <div> tag');
+      }).toErrorDev('Warning: Invalid value for prop `whatever` on <div> tag');
 
       expect(el.hasAttribute('whatever')).toBe(false);
     });
@@ -2352,7 +2347,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div data-fooBar="true" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'React does not recognize the `data-fooBar` prop on a DOM element. ' +
           'If you intentionally want it to appear in the DOM as a custom ' +
           'attribute, spell it as lowercase `data-foobar` instead. ' +
@@ -2367,7 +2362,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div fooBar="true" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'React does not recognize the `fooBar` prop on a DOM element. ' +
           'If you intentionally want it to appear in the DOM as a custom ' +
           'attribute, spell it as lowercase `foobar` instead. ' +
@@ -2382,7 +2377,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div whatever={NaN} />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Received NaN for the `whatever` attribute. If this is ' +
           'expected, cast the value to a string.\n    in div',
       );
@@ -2395,7 +2390,7 @@ describe('ReactDOMComponent', () => {
       ReactDOM.render(<div whatever={0} />, container);
       expect(() =>
         ReactDOM.render(<div whatever={() => {}} />, container),
-      ).toWarnDev('Warning: Invalid value for prop `whatever` on <div> tag.');
+      ).toErrorDev('Warning: Invalid value for prop `whatever` on <div> tag.');
       const el = container.firstChild;
       expect(el.hasAttribute('whatever')).toBe(false);
     });
@@ -2404,7 +2399,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div SiZe="30" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Invalid DOM property `SiZe`. Did you mean `size`?',
       );
 
@@ -2477,7 +2472,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div whatever={true} />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Received `true` for a non-boolean attribute `whatever`.\n\n' +
           'If you want to write it to the DOM, pass a string instead: ' +
           'whatever="true" or whatever={value.toString()}.',
@@ -2511,7 +2506,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div hidden="false" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Received the string `false` for the boolean attribute `hidden`. ' +
           'The browser will interpret it as a truthy value. ' +
           'Did you mean hidden={false}?',
@@ -2524,7 +2519,7 @@ describe('ReactDOMComponent', () => {
       let el;
       expect(() => {
         el = ReactTestUtils.renderIntoDocument(<div hidden="true" />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Received the string `true` for the boolean attribute `hidden`. ' +
           'Although this works, it will not work as expected if you pass the string "false". ' +
           'Did you mean hidden={true}?',
@@ -2543,7 +2538,7 @@ describe('ReactDOMComponent', () => {
             <font-face x-height={false} />
           </svg>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: Invalid DOM property `x-height`. Did you mean `xHeight`',
       );
 
@@ -2560,7 +2555,7 @@ describe('ReactDOMComponent', () => {
             <font-face whatever={false} />
           </svg>,
         );
-      }).toWarnDev(
+      }).toErrorDev(
         'Received `false` for a non-boolean attribute `whatever`.\n\n' +
           'If you want to write it to the DOM, pass a string instead: ' +
           'whatever="false" or whatever={value.toString()}.\n\n' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
index cf96a5f41f362..e27c3b5b660b9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
@@ -177,7 +177,7 @@ describe('ReactDOMComponentTree', () => {
 
     const component = <Controlled />;
     const instance = ReactDOM.render(component, container);
-    expect(() => simulateInput(instance.a, finishValue)).toWarnDev(
+    expect(() => simulateInput(instance.a, finishValue)).toErrorDev(
       'Warning: A component is changing an uncontrolled input of ' +
         'type text to be controlled. Input elements should not ' +
         'switch from uncontrolled to controlled (or vice versa). ' +
@@ -190,7 +190,9 @@ describe('ReactDOMComponentTree', () => {
   it('finds instance of node that is attempted to be unmounted', () => {
     const component = <div />;
     const node = ReactDOM.render(<div>{component}</div>, container);
-    expect(() => ReactDOM.unmountComponentAtNode(node)).toWarnDev(
+    expect(() =>
+      ReactDOM.unmountComponentAtNode(node),
+    ).toErrorDev(
       "unmountComponentAtNode(): The node you're attempting to unmount " +
         'was rendered by React and is not a top-level container. You may ' +
         'have accidentally passed in a React root node instead of its ' +
@@ -207,7 +209,9 @@ describe('ReactDOMComponentTree', () => {
     );
     const anotherComponent = <div />;
     const instance = ReactDOM.render(component, container);
-    expect(() => ReactDOM.render(anotherComponent, instance)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(anotherComponent, instance),
+    ).toErrorDev(
       'render(...): Replacing React-rendered children with a new root ' +
         'component. If you intended to update the children of this node, ' +
         'you should instead have the existing children update their state ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 963b8a09ff90b..efc605a9edb3a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -13,6 +13,8 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 describe('ReactDOMFiber', () => {
   let container;
 
@@ -178,11 +180,11 @@ describe('ReactDOMFiber', () => {
 
   it('renders an empty fragment', () => {
     const Div = () => <div />;
-    const EmptyFragment = () => <React.Fragment />;
+    const EmptyFragment = () => <></>;
     const NonEmptyFragment = () => (
-      <React.Fragment>
+      <>
         <Div />
-      </React.Fragment>
+      </>
     );
 
     ReactDOM.render(<EmptyFragment />, container);
@@ -247,30 +249,32 @@ describe('ReactDOMFiber', () => {
   });
 
   // TODO: remove in React 17
-  it('should support unstable_createPortal alias', () => {
-    const portalContainer = document.createElement('div');
+  if (!ReactFeatureFlags.disableUnstableCreatePortal) {
+    it('should support unstable_createPortal alias', () => {
+      const portalContainer = document.createElement('div');
 
-    expect(() =>
-      ReactDOM.render(
-        <div>
-          {ReactDOM.unstable_createPortal(<div>portal</div>, portalContainer)}
-        </div>,
-        container,
-      ),
-    ).toLowPriorityWarnDev(
-      'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-        'and will be removed in React 17+. Update your code to use ' +
-        'ReactDOM.createPortal() instead. It has the exact same API, ' +
-        'but without the "unstable_" prefix.',
-      {withoutStack: true},
-    );
-    expect(portalContainer.innerHTML).toBe('<div>portal</div>');
-    expect(container.innerHTML).toBe('<div></div>');
+      expect(() =>
+        ReactDOM.render(
+          <div>
+            {ReactDOM.unstable_createPortal(<div>portal</div>, portalContainer)}
+          </div>,
+          container,
+        ),
+      ).toWarnDev(
+        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
+          'and will be removed in React 17+. Update your code to use ' +
+          'ReactDOM.createPortal() instead. It has the exact same API, ' +
+          'but without the "unstable_" prefix.',
+        {withoutStack: true},
+      );
+      expect(portalContainer.innerHTML).toBe('<div>portal</div>');
+      expect(container.innerHTML).toBe('<div></div>');
 
-    ReactDOM.unmountComponentAtNode(container);
-    expect(portalContainer.innerHTML).toBe('');
-    expect(container.innerHTML).toBe('');
-  });
+      ReactDOM.unmountComponentAtNode(container);
+      expect(portalContainer.innerHTML).toBe('');
+      expect(container.innerHTML).toBe('');
+    });
+  }
 
   it('should render many portals', () => {
     const portalContainer1 = document.createElement('div');
@@ -475,10 +479,10 @@ describe('ReactDOMFiber', () => {
         return (
           <div>
             {this.state.show && (
-              <React.Fragment>
+              <>
                 {ReactDOM.createPortal(null, portalContainer)}
                 <div>child</div>
-              </React.Fragment>
+              </>
             )}
             <div>parent</div>
           </div>
@@ -1002,7 +1006,7 @@ describe('ReactDOMFiber', () => {
         return <div onClick="woops" />;
       }
     }
-    expect(() => ReactDOM.render(<Example />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
       'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
         '    in div (at **)\n' +
         '    in Example (at **)',
@@ -1015,7 +1019,7 @@ describe('ReactDOMFiber', () => {
         return <div onClick={false} />;
       }
     }
-    expect(() => ReactDOM.render(<Example />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
       'Expected `onClick` listener to be a function, instead got `false`.\n\n' +
         'If you used to conditionally omit it with onClick={condition && value}, ' +
         'pass onClick={condition ? value : undefined} instead.\n' +
@@ -1048,7 +1052,7 @@ describe('ReactDOMFiber', () => {
         super();
         expect(() => {
           node.click();
-        }).toWarnDev(
+        }).toErrorDev(
           'Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
         );
       }
@@ -1133,7 +1137,7 @@ describe('ReactDOMFiber', () => {
     expect(() => {
       expect(() =>
         ReactDOM.render(<div key="2">baz</div>, container),
-      ).toWarnDev(
+      ).toErrorDev(
         'render(...): ' +
           'It looks like the React-rendered content of this container was ' +
           'removed without using React. This is not supported and will ' +
@@ -1151,7 +1155,9 @@ describe('ReactDOMFiber', () => {
     expect(container.innerHTML).toBe('<div>bar</div>');
     // then we mess with the DOM before an update
     container.innerHTML = '<div>MEOW.</div>';
-    expect(() => ReactDOM.render(<div>baz</div>, container)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(<div>baz</div>, container),
+    ).toErrorDev(
       'render(...): ' +
         'It looks like the React-rendered content of this container was ' +
         'removed without using React. This is not supported and will ' +
@@ -1168,7 +1174,9 @@ describe('ReactDOMFiber', () => {
     expect(container.innerHTML).toBe('<div>bar</div>');
     // then we mess with the DOM before an update
     container.innerHTML = '';
-    expect(() => ReactDOM.render(<div>baz</div>, container)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(<div>baz</div>, container),
+    ).toErrorDev(
       'render(...): ' +
         'It looks like the React-rendered content of this container was ' +
         'removed without using React. This is not supported and will ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
index 5d85217921328..8cf28cc6adf41 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
@@ -9,8 +9,7 @@
 
 'use strict';
 
-const React = require('react');
-const Fragment = React.Fragment;
+let React;
 let ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 let ReactDOM;
@@ -27,6 +26,7 @@ describe('ReactDOMFiberAsync', () => {
   beforeEach(() => {
     jest.resetModules();
     container = document.createElement('div');
+    React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
 
@@ -48,59 +48,102 @@ describe('ReactDOMFiberAsync', () => {
     expect(ops).toEqual(['Hi', 'Bye']);
   });
 
-  it('does not perform deferred updates synchronously', () => {
-    let inputRef = React.createRef();
-    let asyncValueRef = React.createRef();
-    let syncValueRef = React.createRef();
+  it('flushSync batches sync updates and flushes them at the end of the batch', () => {
+    let ops = [];
+    let instance;
 
-    class Counter extends React.Component {
-      state = {asyncValue: '', syncValue: ''};
+    class Component extends React.Component {
+      state = {text: ''};
+      push(val) {
+        this.setState(state => ({text: state.text + val}));
+      }
+      componentDidUpdate() {
+        ops.push(this.state.text);
+      }
+      render() {
+        instance = this;
+        return <span>{this.state.text}</span>;
+      }
+    }
 
-      handleChange = e => {
-        const nextValue = e.target.value;
-        requestIdleCallback(() => {
-          this.setState({
-            asyncValue: nextValue,
-          });
-          // It should not be flushed yet.
-          expect(asyncValueRef.current.textContent).toBe('');
-        });
-        this.setState({
-          syncValue: nextValue,
-        });
-      };
+    ReactDOM.render(<Component />, container);
 
+    instance.push('A');
+    expect(ops).toEqual(['A']);
+    expect(container.textContent).toEqual('A');
+
+    ReactDOM.flushSync(() => {
+      instance.push('B');
+      instance.push('C');
+      // Not flushed yet
+      expect(container.textContent).toEqual('A');
+      expect(ops).toEqual(['A']);
+    });
+    expect(container.textContent).toEqual('ABC');
+    expect(ops).toEqual(['A', 'ABC']);
+    instance.push('D');
+    expect(container.textContent).toEqual('ABCD');
+    expect(ops).toEqual(['A', 'ABC', 'ABCD']);
+  });
+
+  it('flushSync flushes updates even if nested inside another flushSync', () => {
+    let ops = [];
+    let instance;
+
+    class Component extends React.Component {
+      state = {text: ''};
+      push(val) {
+        this.setState(state => ({text: state.text + val}));
+      }
+      componentDidUpdate() {
+        ops.push(this.state.text);
+      }
       render() {
-        return (
-          <div>
-            <input
-              ref={inputRef}
-              onChange={this.handleChange}
-              defaultValue=""
-            />
-            <p ref={asyncValueRef}>{this.state.asyncValue}</p>
-            <p ref={syncValueRef}>{this.state.syncValue}</p>
-          </div>
-        );
+        instance = this;
+        return <span>{this.state.text}</span>;
       }
     }
-    const root = ReactDOM.unstable_createRoot(container);
-    root.render(<Counter />);
-    Scheduler.flushAll();
-    expect(asyncValueRef.current.textContent).toBe('');
-    expect(syncValueRef.current.textContent).toBe('');
-
-    setUntrackedInputValue.call(inputRef.current, 'hello');
-    inputRef.current.dispatchEvent(new MouseEvent('input', {bubbles: true}));
-    // Should only flush non-deferred update.
-    expect(asyncValueRef.current.textContent).toBe('');
-    expect(syncValueRef.current.textContent).toBe('hello');
-
-    // Should flush both updates now.
-    jest.runAllTimers();
-    Scheduler.flushAll();
-    expect(asyncValueRef.current.textContent).toBe('hello');
-    expect(syncValueRef.current.textContent).toBe('hello');
+
+    ReactDOM.render(<Component />, container);
+
+    instance.push('A');
+    expect(ops).toEqual(['A']);
+    expect(container.textContent).toEqual('A');
+
+    ReactDOM.flushSync(() => {
+      instance.push('B');
+      instance.push('C');
+      // Not flushed yet
+      expect(container.textContent).toEqual('A');
+      expect(ops).toEqual(['A']);
+
+      ReactDOM.flushSync(() => {
+        instance.push('D');
+      });
+      // The nested flushSync caused everything to flush.
+      expect(container.textContent).toEqual('ABCD');
+      expect(ops).toEqual(['A', 'ABCD']);
+    });
+    expect(container.textContent).toEqual('ABCD');
+    expect(ops).toEqual(['A', 'ABCD']);
+  });
+
+  it('flushSync throws if already performing work', () => {
+    class Component extends React.Component {
+      componentDidUpdate() {
+        ReactDOM.flushSync(() => {});
+      }
+      render() {
+        return null;
+      }
+    }
+
+    // Initial mount
+    ReactDOM.render(<Component />, container);
+    // Update
+    expect(() => ReactDOM.render(<Component />, container)).toThrow(
+      'flushSync was called from inside a lifecycle method',
+    );
   });
 
   describe('concurrent mode', () => {
@@ -112,20 +155,75 @@ describe('ReactDOMFiberAsync', () => {
       Scheduler = require('scheduler');
     });
 
-    it('top-level updates are concurrent', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+    it.experimental('does not perform deferred updates synchronously', () => {
+      let inputRef = React.createRef();
+      let asyncValueRef = React.createRef();
+      let syncValueRef = React.createRef();
+
+      class Counter extends React.Component {
+        state = {asyncValue: '', syncValue: ''};
+
+        handleChange = e => {
+          const nextValue = e.target.value;
+          requestIdleCallback(() => {
+            this.setState({
+              asyncValue: nextValue,
+            });
+            // It should not be flushed yet.
+            expect(asyncValueRef.current.textContent).toBe('');
+          });
+          this.setState({
+            syncValue: nextValue,
+          });
+        };
+
+        render() {
+          return (
+            <div>
+              <input
+                ref={inputRef}
+                onChange={this.handleChange}
+                defaultValue=""
+              />
+              <p ref={asyncValueRef}>{this.state.asyncValue}</p>
+              <p ref={syncValueRef}>{this.state.syncValue}</p>
+            </div>
+          );
+        }
+      }
+      const root = ReactDOM.createRoot(container);
+      root.render(<Counter />);
+      Scheduler.unstable_flushAll();
+      expect(asyncValueRef.current.textContent).toBe('');
+      expect(syncValueRef.current.textContent).toBe('');
+
+      setUntrackedInputValue.call(inputRef.current, 'hello');
+      inputRef.current.dispatchEvent(new MouseEvent('input', {bubbles: true}));
+      // Should only flush non-deferred update.
+      expect(asyncValueRef.current.textContent).toBe('');
+      expect(syncValueRef.current.textContent).toBe('hello');
+
+      // Should flush both updates now.
+      jest.runAllTimers();
+      Scheduler.unstable_flushAll();
+      expect(asyncValueRef.current.textContent).toBe('hello');
+      expect(syncValueRef.current.textContent).toBe('hello');
+    });
+
+    it.experimental('top-level updates are concurrent', () => {
+      const root = ReactDOM.createRoot(container);
       root.render(<div>Hi</div>);
       expect(container.textContent).toEqual('');
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('Hi');
 
       root.render(<div>Bye</div>);
       expect(container.textContent).toEqual('Hi');
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('Bye');
     });
 
-    it('deep updates (setState) are oncurrent', () => {
+    it.experimental('deep updates (setState) are concurrent', () => {
       let instance;
       class Component extends React.Component {
         state = {step: 0};
@@ -135,19 +233,19 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Component />);
       expect(container.textContent).toEqual('');
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('0');
 
       instance.setState({step: 1});
       expect(container.textContent).toEqual('0');
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('1');
     });
 
-    it('flushSync batches sync updates and flushes them at the end of the batch', () => {
+    it.experimental('flushSync flushes updates before end of the tick', () => {
       let ops = [];
       let instance;
 
@@ -165,107 +263,9 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      ReactDOM.render(<Component />, container);
-
-      instance.push('A');
-      expect(ops).toEqual(['A']);
-      expect(container.textContent).toEqual('A');
-
-      ReactDOM.flushSync(() => {
-        instance.push('B');
-        instance.push('C');
-        // Not flushed yet
-        expect(container.textContent).toEqual('A');
-        expect(ops).toEqual(['A']);
-      });
-      expect(container.textContent).toEqual('ABC');
-      expect(ops).toEqual(['A', 'ABC']);
-      instance.push('D');
-      expect(container.textContent).toEqual('ABCD');
-      expect(ops).toEqual(['A', 'ABC', 'ABCD']);
-    });
-
-    it('flushSync flushes updates even if nested inside another flushSync', () => {
-      let ops = [];
-      let instance;
-
-      class Component extends React.Component {
-        state = {text: ''};
-        push(val) {
-          this.setState(state => ({text: state.text + val}));
-        }
-        componentDidUpdate() {
-          ops.push(this.state.text);
-        }
-        render() {
-          instance = this;
-          return <span>{this.state.text}</span>;
-        }
-      }
-
-      ReactDOM.render(<Component />, container);
-
-      instance.push('A');
-      expect(ops).toEqual(['A']);
-      expect(container.textContent).toEqual('A');
-
-      ReactDOM.flushSync(() => {
-        instance.push('B');
-        instance.push('C');
-        // Not flushed yet
-        expect(container.textContent).toEqual('A');
-        expect(ops).toEqual(['A']);
-
-        ReactDOM.flushSync(() => {
-          instance.push('D');
-        });
-        // The nested flushSync caused everything to flush.
-        expect(container.textContent).toEqual('ABCD');
-        expect(ops).toEqual(['A', 'ABCD']);
-      });
-      expect(container.textContent).toEqual('ABCD');
-      expect(ops).toEqual(['A', 'ABCD']);
-    });
-
-    it('flushSync throws if already performing work', () => {
-      class Component extends React.Component {
-        componentDidUpdate() {
-          ReactDOM.flushSync(() => {});
-        }
-        render() {
-          return null;
-        }
-      }
-
-      // Initial mount
-      ReactDOM.render(<Component />, container);
-      // Update
-      expect(() => ReactDOM.render(<Component />, container)).toThrow(
-        'flushSync was called from inside a lifecycle method',
-      );
-    });
-
-    it('flushSync flushes updates before end of the tick', () => {
-      let ops = [];
-      let instance;
-
-      class Component extends React.Component {
-        state = {text: ''};
-        push(val) {
-          this.setState(state => ({text: state.text + val}));
-        }
-        componentDidUpdate() {
-          ops.push(this.state.text);
-        }
-        render() {
-          instance = this;
-          return <span>{this.state.text}</span>;
-        }
-      }
-
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Component />);
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
 
       // Updates are async by default
       instance.push('A');
@@ -288,81 +288,87 @@ describe('ReactDOMFiberAsync', () => {
       expect(ops).toEqual(['BC']);
 
       // Flush the async updates
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('ABCD');
       expect(ops).toEqual(['BC', 'ABCD']);
     });
 
-    it('flushControlled flushes updates before yielding to browser', () => {
-      let inst;
-      class Counter extends React.Component {
-        state = {counter: 0};
-        increment = () =>
-          this.setState(state => ({counter: state.counter + 1}));
-        render() {
-          inst = this;
-          return this.state.counter;
+    it.experimental(
+      'flushControlled flushes updates before yielding to browser',
+      () => {
+        let inst;
+        class Counter extends React.Component {
+          state = {counter: 0};
+          increment = () =>
+            this.setState(state => ({counter: state.counter + 1}));
+          render() {
+            inst = this;
+            return this.state.counter;
+          }
         }
-      }
-      const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Counter />);
-      Scheduler.flushAll();
-      expect(container.textContent).toEqual('0');
-
-      // Test that a normal update is async
-      inst.increment();
-      expect(container.textContent).toEqual('0');
-      Scheduler.flushAll();
-      expect(container.textContent).toEqual('1');
+        const root = ReactDOM.createRoot(container);
+        root.render(<Counter />);
+        Scheduler.unstable_flushAll();
+        expect(container.textContent).toEqual('0');
 
-      let ops = [];
-      ReactDOM.unstable_flushControlled(() => {
+        // Test that a normal update is async
         inst.increment();
+        expect(container.textContent).toEqual('0');
+        Scheduler.unstable_flushAll();
+        expect(container.textContent).toEqual('1');
+
+        let ops = [];
         ReactDOM.unstable_flushControlled(() => {
           inst.increment();
-          ops.push('end of inner flush: ' + container.textContent);
+          ReactDOM.unstable_flushControlled(() => {
+            inst.increment();
+            ops.push('end of inner flush: ' + container.textContent);
+          });
+          ops.push('end of outer flush: ' + container.textContent);
         });
-        ops.push('end of outer flush: ' + container.textContent);
-      });
-      ops.push('after outer flush: ' + container.textContent);
-      expect(ops).toEqual([
-        'end of inner flush: 1',
-        'end of outer flush: 1',
-        'after outer flush: 3',
-      ]);
-    });
-
-    it('flushControlled does not flush until end of outermost batchedUpdates', () => {
-      let inst;
-      class Counter extends React.Component {
-        state = {counter: 0};
-        increment = () =>
-          this.setState(state => ({counter: state.counter + 1}));
-        render() {
-          inst = this;
-          return this.state.counter;
+        ops.push('after outer flush: ' + container.textContent);
+        expect(ops).toEqual([
+          'end of inner flush: 1',
+          'end of outer flush: 1',
+          'after outer flush: 3',
+        ]);
+      },
+    );
+
+    it.experimental(
+      'flushControlled does not flush until end of outermost batchedUpdates',
+      () => {
+        let inst;
+        class Counter extends React.Component {
+          state = {counter: 0};
+          increment = () =>
+            this.setState(state => ({counter: state.counter + 1}));
+          render() {
+            inst = this;
+            return this.state.counter;
+          }
         }
-      }
-      ReactDOM.render(<Counter />, container);
+        ReactDOM.render(<Counter />, container);
 
-      let ops = [];
-      ReactDOM.unstable_batchedUpdates(() => {
-        inst.increment();
-        ReactDOM.unstable_flushControlled(() => {
+        let ops = [];
+        ReactDOM.unstable_batchedUpdates(() => {
           inst.increment();
-          ops.push('end of flushControlled fn: ' + container.textContent);
+          ReactDOM.unstable_flushControlled(() => {
+            inst.increment();
+            ops.push('end of flushControlled fn: ' + container.textContent);
+          });
+          ops.push('end of batchedUpdates fn: ' + container.textContent);
         });
-        ops.push('end of batchedUpdates fn: ' + container.textContent);
-      });
-      ops.push('after batchedUpdates: ' + container.textContent);
-      expect(ops).toEqual([
-        'end of flushControlled fn: 0',
-        'end of batchedUpdates fn: 0',
-        'after batchedUpdates: 2',
-      ]);
-    });
-
-    it('flushControlled returns nothing', () => {
+        ops.push('after batchedUpdates: ' + container.textContent);
+        expect(ops).toEqual([
+          'end of flushControlled fn: 0',
+          'end of batchedUpdates fn: 0',
+          'after batchedUpdates: 2',
+        ]);
+      },
+    );
+
+    it.experimental('flushControlled returns nothing', () => {
       // In the future, we may want to return a thenable "work" object.
       let inst;
       class Counter extends React.Component {
@@ -385,208 +391,248 @@ describe('ReactDOMFiberAsync', () => {
       expect(returnValue).toBe(undefined);
     });
 
-    it('ignores discrete events on a pending removed element', () => {
-      const disableButtonRef = React.createRef();
-      const submitButtonRef = React.createRef();
-
-      let formSubmitted = false;
+    it.experimental(
+      'ignores discrete events on a pending removed element',
+      () => {
+        const disableButtonRef = React.createRef();
+        const submitButtonRef = React.createRef();
+
+        let formSubmitted = false;
+
+        class Form extends React.Component {
+          state = {active: true};
+          disableForm = () => {
+            this.setState({active: false});
+          };
+          submitForm = () => {
+            formSubmitted = true; // This should not get invoked
+          };
+          render() {
+            return (
+              <div>
+                <button onClick={this.disableForm} ref={disableButtonRef}>
+                  Disable
+                </button>
+                {this.state.active ? (
+                  <button onClick={this.submitForm} ref={submitButtonRef}>
+                    Submit
+                  </button>
+                ) : null}
+              </div>
+            );
+          }
+        }
 
-      class Form extends React.Component {
-        state = {active: true};
-        disableForm = () => {
-          this.setState({active: false});
-        };
-        submitForm = () => {
-          formSubmitted = true; // This should not get invoked
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.disableForm} ref={disableButtonRef}>
-                Disable
-              </button>
-              {this.state.active ? (
-                <button onClick={this.submitForm} ref={submitButtonRef}>
+        const root = ReactDOM.createRoot(container);
+        root.render(<Form />);
+        // Flush
+        Scheduler.unstable_flushAll();
+
+        let disableButton = disableButtonRef.current;
+        expect(disableButton.tagName).toBe('BUTTON');
+
+        // Dispatch a click event on the Disable-button.
+        let firstEvent = document.createEvent('Event');
+        firstEvent.initEvent('click', true, true);
+        disableButton.dispatchEvent(firstEvent);
+
+        // There should now be a pending update to disable the form.
+
+        // This should not have flushed yet since it's in concurrent mode.
+        let submitButton = submitButtonRef.current;
+        expect(submitButton.tagName).toBe('BUTTON');
+
+        // In the meantime, we can dispatch a new client event on the submit button.
+        let secondEvent = document.createEvent('Event');
+        secondEvent.initEvent('click', true, true);
+        // This should force the pending update to flush which disables the submit button before the event is invoked.
+        submitButton.dispatchEvent(secondEvent);
+
+        // Therefore the form should never have been submitted.
+        expect(formSubmitted).toBe(false);
+
+        expect(submitButtonRef.current).toBe(null);
+      },
+    );
+
+    it.experimental(
+      'ignores discrete events on a pending removed event listener',
+      () => {
+        const disableButtonRef = React.createRef();
+        const submitButtonRef = React.createRef();
+
+        let formSubmitted = false;
+
+        class Form extends React.Component {
+          state = {active: true};
+          disableForm = () => {
+            this.setState({active: false});
+          };
+          submitForm = () => {
+            formSubmitted = true; // This should not get invoked
+          };
+          disabledSubmitForm = () => {
+            // The form is disabled.
+          };
+          render() {
+            return (
+              <div>
+                <button onClick={this.disableForm} ref={disableButtonRef}>
+                  Disable
+                </button>
+                <button
+                  onClick={
+                    this.state.active
+                      ? this.submitForm
+                      : this.disabledSubmitForm
+                  }
+                  ref={submitButtonRef}>
                   Submit
                 </button>
-              ) : null}
-            </div>
-          );
+              </div>
+            );
+          }
         }
-      }
-
-      const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.flushAll();
 
-      let disableButton = disableButtonRef.current;
-      expect(disableButton.tagName).toBe('BUTTON');
-
-      // Dispatch a click event on the Disable-button.
-      let firstEvent = document.createEvent('Event');
-      firstEvent.initEvent('click', true, true);
-      disableButton.dispatchEvent(firstEvent);
-
-      // There should now be a pending update to disable the form.
-
-      // This should not have flushed yet since it's in concurrent mode.
-      let submitButton = submitButtonRef.current;
-      expect(submitButton.tagName).toBe('BUTTON');
-
-      // In the meantime, we can dispatch a new client event on the submit button.
-      let secondEvent = document.createEvent('Event');
-      secondEvent.initEvent('click', true, true);
-      // This should force the pending update to flush which disables the submit button before the event is invoked.
-      submitButton.dispatchEvent(secondEvent);
-
-      // Therefore the form should never have been submitted.
-      expect(formSubmitted).toBe(false);
-
-      expect(submitButtonRef.current).toBe(null);
-    });
-
-    it('ignores discrete events on a pending removed event listener', () => {
-      const disableButtonRef = React.createRef();
-      const submitButtonRef = React.createRef();
-
-      let formSubmitted = false;
-
-      class Form extends React.Component {
-        state = {active: true};
-        disableForm = () => {
-          this.setState({active: false});
-        };
-        submitForm = () => {
-          formSubmitted = true; // This should not get invoked
-        };
-        disabledSubmitForm = () => {
-          // The form is disabled.
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.disableForm} ref={disableButtonRef}>
-                Disable
-              </button>
-              <button
-                onClick={
-                  this.state.active ? this.submitForm : this.disabledSubmitForm
-                }
-                ref={submitButtonRef}>
-                Submit
-              </button>{' '}
-              : null}
-            </div>
-          );
+        const root = ReactDOM.createRoot(container);
+        root.render(<Form />);
+        // Flush
+        Scheduler.unstable_flushAll();
+
+        let disableButton = disableButtonRef.current;
+        expect(disableButton.tagName).toBe('BUTTON');
+
+        // Dispatch a click event on the Disable-button.
+        let firstEvent = document.createEvent('Event');
+        firstEvent.initEvent('click', true, true);
+        disableButton.dispatchEvent(firstEvent);
+
+        // There should now be a pending update to disable the form.
+
+        // This should not have flushed yet since it's in concurrent mode.
+        let submitButton = submitButtonRef.current;
+        expect(submitButton.tagName).toBe('BUTTON');
+
+        // In the meantime, we can dispatch a new client event on the submit button.
+        let secondEvent = document.createEvent('Event');
+        secondEvent.initEvent('click', true, true);
+        // This should force the pending update to flush which disables the submit button before the event is invoked.
+        submitButton.dispatchEvent(secondEvent);
+
+        // Therefore the form should never have been submitted.
+        expect(formSubmitted).toBe(false);
+      },
+    );
+
+    it.experimental(
+      'uses the newest discrete events on a pending changed event listener',
+      () => {
+        const enableButtonRef = React.createRef();
+        const submitButtonRef = React.createRef();
+
+        let formSubmitted = false;
+
+        class Form extends React.Component {
+          state = {active: false};
+          enableForm = () => {
+            this.setState({active: true});
+          };
+          submitForm = () => {
+            formSubmitted = true; // This should happen
+          };
+          render() {
+            return (
+              <div>
+                <button onClick={this.enableForm} ref={enableButtonRef}>
+                  Enable
+                </button>
+                <button
+                  onClick={this.state.active ? this.submitForm : null}
+                  ref={submitButtonRef}>
+                  Submit
+                </button>{' '}
+                : null}
+              </div>
+            );
+          }
         }
-      }
-
-      const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.flushAll();
 
-      let disableButton = disableButtonRef.current;
-      expect(disableButton.tagName).toBe('BUTTON');
+        const root = ReactDOM.createRoot(container);
+        root.render(<Form />);
+        // Flush
+        Scheduler.unstable_flushAll();
 
-      // Dispatch a click event on the Disable-button.
-      let firstEvent = document.createEvent('Event');
-      firstEvent.initEvent('click', true, true);
-      disableButton.dispatchEvent(firstEvent);
+        let enableButton = enableButtonRef.current;
+        expect(enableButton.tagName).toBe('BUTTON');
 
-      // There should now be a pending update to disable the form.
+        // Dispatch a click event on the Enable-button.
+        let firstEvent = document.createEvent('Event');
+        firstEvent.initEvent('click', true, true);
+        enableButton.dispatchEvent(firstEvent);
 
-      // This should not have flushed yet since it's in concurrent mode.
-      let submitButton = submitButtonRef.current;
-      expect(submitButton.tagName).toBe('BUTTON');
+        // There should now be a pending update to enable the form.
 
-      // In the meantime, we can dispatch a new client event on the submit button.
-      let secondEvent = document.createEvent('Event');
-      secondEvent.initEvent('click', true, true);
-      // This should force the pending update to flush which disables the submit button before the event is invoked.
-      submitButton.dispatchEvent(secondEvent);
+        // This should not have flushed yet since it's in concurrent mode.
+        let submitButton = submitButtonRef.current;
+        expect(submitButton.tagName).toBe('BUTTON');
 
-      // Therefore the form should never have been submitted.
-      expect(formSubmitted).toBe(false);
-    });
+        // In the meantime, we can dispatch a new client event on the submit button.
+        let secondEvent = document.createEvent('Event');
+        secondEvent.initEvent('click', true, true);
+        // This should force the pending update to flush which enables the submit button before the event is invoked.
+        submitButton.dispatchEvent(secondEvent);
 
-    it('uses the newest discrete events on a pending changed event listener', () => {
-      const enableButtonRef = React.createRef();
-      const submitButtonRef = React.createRef();
+        // Therefore the form should have been submitted.
+        expect(formSubmitted).toBe(true);
+      },
+    );
+  });
 
-      let formSubmitted = false;
+  it('regression test: does not drop passive effects across roots (#17066)', () => {
+    const {useState, useEffect} = React;
 
-      class Form extends React.Component {
-        state = {active: false};
-        enableForm = () => {
-          this.setState({active: true});
-        };
-        submitForm = () => {
-          formSubmitted = true; // This should happen
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.enableForm} ref={enableButtonRef}>
-                Enable
-              </button>
-              <button
-                onClick={this.state.active ? this.submitForm : null}
-                ref={submitButtonRef}>
-                Submit
-              </button>{' '}
-              : null}
-            </div>
-          );
+    function App({label}) {
+      const [step, setStep] = useState(0);
+      useEffect(() => {
+        if (step < 3) {
+          setStep(step + 1);
         }
-      }
+      }, [step]);
 
-      const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.flushAll();
-
-      let enableButton = enableButtonRef.current;
-      expect(enableButton.tagName).toBe('BUTTON');
-
-      // Dispatch a click event on the Enable-button.
-      let firstEvent = document.createEvent('Event');
-      firstEvent.initEvent('click', true, true);
-      enableButton.dispatchEvent(firstEvent);
+      // The component should keep re-rendering itself until `step` is 3.
+      return step === 3 ? 'Finished' : 'Unresolved';
+    }
 
-      // There should now be a pending update to enable the form.
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
 
-      // This should not have flushed yet since it's in concurrent mode.
-      let submitButton = submitButtonRef.current;
-      expect(submitButton.tagName).toBe('BUTTON');
+    ReactDOM.render(<App label="A" />, containerA);
+    ReactDOM.render(<App label="B" />, containerB);
+    ReactDOM.render(<App label="C" />, containerC);
 
-      // In the meantime, we can dispatch a new client event on the submit button.
-      let secondEvent = document.createEvent('Event');
-      secondEvent.initEvent('click', true, true);
-      // This should force the pending update to flush which enables the submit button before the event is invoked.
-      submitButton.dispatchEvent(secondEvent);
+    Scheduler.unstable_flushAll();
 
-      // Therefore the form should have been submitted.
-      expect(formSubmitted).toBe(true);
-    });
+    expect(containerA.textContent).toEqual('Finished');
+    expect(containerB.textContent).toEqual('Finished');
+    expect(containerC.textContent).toEqual('Finished');
   });
 
-  describe('createSyncRoot', () => {
-    it('updates flush without yielding in the next event', () => {
-      const root = ReactDOM.unstable_createSyncRoot(container);
+  describe('createBlockingRoot', () => {
+    it.experimental('updates flush without yielding in the next event', () => {
+      const root = ReactDOM.createBlockingRoot(container);
 
       function Text(props) {
-        Scheduler.yieldValue(props.text);
+        Scheduler.unstable_yieldValue(props.text);
         return props.text;
       }
 
       root.render(
-        <React.Fragment>
+        <>
           <Text text="A" />
           <Text text="B" />
           <Text text="C" />
-        </React.Fragment>,
+        </>,
       );
 
       // Nothing should have rendered yet
@@ -596,90 +642,5 @@ describe('ReactDOMFiberAsync', () => {
       expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
       expect(container.textContent).toEqual('ABC');
     });
-
-    it('does not support createBatch', () => {
-      const root = ReactDOM.unstable_createSyncRoot(container);
-      expect(root.createBatch).toBe(undefined);
-    });
-  });
-
-  describe('Disable yielding', () => {
-    beforeEach(() => {
-      jest.resetModules();
-      ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.disableYielding = true;
-      ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-      ReactDOM = require('react-dom');
-      Scheduler = require('scheduler');
-    });
-
-    it('wont yield during a render if yielding is disabled', () => {
-      class A extends React.Component {
-        render() {
-          Scheduler.yieldValue('A');
-          return <div>{this.props.children}</div>;
-        }
-      }
-
-      class B extends React.Component {
-        render() {
-          Scheduler.yieldValue('B');
-          return <div>{this.props.children}</div>;
-        }
-      }
-
-      class C extends React.Component {
-        render() {
-          Scheduler.yieldValue('C');
-          return <div>{this.props.children}</div>;
-        }
-      }
-
-      let root = ReactDOM.unstable_createRoot(container);
-
-      root.render(
-        <Fragment>
-          <A />
-          <B />
-          <C />
-        </Fragment>,
-      );
-
-      expect(Scheduler).toHaveYielded([]);
-
-      Scheduler.unstable_flushNumberOfYields(2);
-      // Even though we just flushed two yields, we should have rendered
-      // everything without yielding when the flag is on.
-      expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
-    });
-
-    it('wont suspend during a render if yielding is disabled', () => {
-      let p = new Promise(resolve => {});
-
-      function Suspend() {
-        throw p;
-      }
-
-      let root = ReactDOM.unstable_createRoot(container);
-      root.render(
-        <React.Suspense fallback={'Loading'}>Initial</React.Suspense>,
-      );
-
-      Scheduler.flushAll();
-      expect(container.textContent).toBe('Initial');
-
-      root.render(
-        <React.Suspense fallback={'Loading'}>
-          <Suspend />
-        </React.Suspense>,
-      );
-
-      expect(Scheduler).toHaveYielded([]);
-
-      Scheduler.flushAll();
-
-      // This should have flushed to the DOM even though we haven't ran the timers.
-      expect(container.textContent).toBe('Loading');
-    });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index 4f24770546176..5e7e003ebe927 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -57,7 +57,7 @@ describe('ReactDOMHooks', () => {
     expect(container.textContent).toBe('1');
     expect(container2.textContent).toBe('');
     expect(container3.textContent).toBe('');
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toBe('1');
     expect(container2.textContent).toBe('2');
     expect(container3.textContent).toBe('3');
@@ -66,7 +66,7 @@ describe('ReactDOMHooks', () => {
     expect(container.textContent).toBe('2');
     expect(container2.textContent).toBe('2'); // Not flushed yet
     expect(container3.textContent).toBe('3'); // Not flushed yet
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toBe('2');
     expect(container2.textContent).toBe('4');
     expect(container3.textContent).toBe('6');
@@ -82,10 +82,10 @@ describe('ReactDOMHooks', () => {
       });
 
       return (
-        <React.Fragment>
+        <>
           <input ref={inputRef} onInput={handleInput} />
           <label ref={labelRef}>{text}</label>
-        </React.Fragment>
+        </>
       );
     };
 
@@ -105,38 +105,41 @@ describe('ReactDOMHooks', () => {
     expect(labelRef.current.innerHTML).toBe('abc');
   });
 
-  it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', () => {
-    const {createRef, useCallback, useState} = React;
+  it.experimental(
+    'should not bail out when an update is scheduled from within an event handler in Concurrent Mode',
+    () => {
+      const {createRef, useCallback, useState} = React;
 
-    const Example = ({inputRef, labelRef}) => {
-      const [text, setText] = useState('');
-      const handleInput = useCallback(event => {
-        setText(event.target.value);
-      });
+      const Example = ({inputRef, labelRef}) => {
+        const [text, setText] = useState('');
+        const handleInput = useCallback(event => {
+          setText(event.target.value);
+        });
 
-      return (
-        <React.Fragment>
-          <input ref={inputRef} onInput={handleInput} />
-          <label ref={labelRef}>{text}</label>
-        </React.Fragment>
-      );
-    };
+        return (
+          <>
+            <input ref={inputRef} onInput={handleInput} />
+            <label ref={labelRef}>{text}</label>
+          </>
+        );
+      };
 
-    const inputRef = createRef();
-    const labelRef = createRef();
+      const inputRef = createRef();
+      const labelRef = createRef();
 
-    const root = ReactDOM.unstable_createRoot(container);
-    root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
+      const root = ReactDOM.createRoot(container);
+      root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
 
-    Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
 
-    inputRef.current.value = 'abc';
-    inputRef.current.dispatchEvent(
-      new Event('input', {bubbles: true, cancelable: true}),
-    );
+      inputRef.current.value = 'abc';
+      inputRef.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
 
-    Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
 
-    expect(labelRef.current.innerHTML).toBe('abc');
-  });
+      expect(labelRef.current.innerHTML).toBe('abc');
+    },
+  );
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index e9f917bd067c7..4674f9e40e393 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -53,7 +53,7 @@ describe('ReactDOMInput', () => {
   it('should warn for controlled value of 0 with missing onChange', () => {
     expect(() => {
       ReactDOM.render(<input type="text" value={0} />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
     );
   });
@@ -61,7 +61,7 @@ describe('ReactDOMInput', () => {
   it('should warn for controlled value of "" with missing onChange', () => {
     expect(() => {
       ReactDOM.render(<input type="text" value="" />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
     );
   });
@@ -69,7 +69,7 @@ describe('ReactDOMInput', () => {
   it('should warn for controlled value of "0" with missing onChange', () => {
     expect(() => {
       ReactDOM.render(<input type="text" value="0" />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
     );
   });
@@ -77,7 +77,7 @@ describe('ReactDOMInput', () => {
   it('should warn for controlled value of false with missing onChange', () => {
     expect(() =>
       ReactDOM.render(<input type="checkbox" checked={false} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler.',
     );
   });
@@ -94,7 +94,7 @@ describe('ReactDOMInput', () => {
         <input type="checkbox" checked={false} readOnly={false} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. ' +
         'This will render a read-only field. If the field should be mutable use `defaultChecked`. ' +
         'Otherwise, set either `onChange` or `readOnly`.',
@@ -120,7 +120,7 @@ describe('ReactDOMInput', () => {
 
     expect(() => {
       node = ReactDOM.render(<input type="text" value="lion" />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
     );
 
@@ -301,7 +301,7 @@ describe('ReactDOMInput', () => {
     let stub;
     expect(() => {
       stub = ReactDOM.render(<Stub />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'You provided a `value` prop to a form field ' +
         'without an `onChange` handler.',
     );
@@ -368,7 +368,7 @@ describe('ReactDOMInput', () => {
 
     expect(() => {
       stub = ReactDOM.render(<Stub />, container);
-    }).toWarnDev(
+    }).toErrorDev(
       'You provided a `value` prop to a form field ' +
         'without an `onChange` handler.',
     );
@@ -474,7 +474,7 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('0');
     expect(() =>
       ReactDOM.render(<input type="text" defaultValue="1" />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'A component is changing a controlled input of type ' +
         'text to be uncontrolled.',
     );
@@ -853,7 +853,7 @@ describe('ReactDOMInput', () => {
         <input type="submit" value={undefined} onChange={emptyFunction} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'A component is changing a controlled input of type ' +
         'submit to be uncontrolled.',
     );
@@ -873,7 +873,7 @@ describe('ReactDOMInput', () => {
         <input type="reset" value={undefined} onChange={emptyFunction} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'A component is changing a controlled input of type ' +
         'reset to be uncontrolled.',
     );
@@ -920,7 +920,7 @@ describe('ReactDOMInput', () => {
     let stub = <input type="submit" value={null} />;
     expect(() => {
       ReactDOM.render(stub, container);
-    }).toWarnDev('`value` prop on `input` should not be null');
+    }).toErrorDev('`value` prop on `input` should not be null');
     const node = container.firstChild;
 
     // Note: it shouldn't be an empty string
@@ -935,7 +935,7 @@ describe('ReactDOMInput', () => {
     let stub = <input type="reset" value={null} />;
     expect(() => {
       ReactDOM.render(stub, container);
-    }).toWarnDev('`value` prop on `input` should not be null');
+    }).toErrorDev('`value` prop on `input` should not be null');
     const node = container.firstChild;
 
     // Note: it shouldn't be an empty string
@@ -1167,7 +1167,7 @@ describe('ReactDOMInput', () => {
         <input type="text" value="zoink" readOnly={false} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: You provided a `value` prop to a form ' +
         'field without an `onChange` handler. This will render a read-only ' +
         'field. If the field should be mutable use `defaultValue`. ' +
@@ -1198,7 +1198,7 @@ describe('ReactDOMInput', () => {
   it('should warn if value is null', () => {
     expect(() =>
       ReactDOM.render(<input type="text" value={null} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       '`value` prop on `input` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` ' +
         'for uncontrolled components.',
@@ -1219,7 +1219,7 @@ describe('ReactDOMInput', () => {
         />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'A component contains an input of type radio with both checked and defaultChecked props. ' +
         'Input elements must be either controlled or uncontrolled ' +
         '(specify either the checked prop, or the defaultChecked prop, but not ' +
@@ -1246,7 +1246,7 @@ describe('ReactDOMInput', () => {
         <input type="text" value="foo" defaultValue="bar" readOnly={true} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'A component contains an input of type text with both value and defaultValue props. ' +
         'Input elements must be either controlled or uncontrolled ' +
         '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -1267,7 +1267,7 @@ describe('ReactDOMInput', () => {
       <input type="text" value="controlled" onChange={emptyFunction} />
     );
     ReactDOM.render(stub, container);
-    expect(() => ReactDOM.render(<input type="text" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<input type="text" />, container)).toErrorDev(
       'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1283,7 +1283,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="text" value={null} />, container),
-    ).toWarnDev([
+    ).toErrorDev([
       '`value` prop on `input` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` for uncontrolled components',
       'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
@@ -1304,7 +1304,7 @@ describe('ReactDOMInput', () => {
         <input type="text" defaultValue="uncontrolled" />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1318,7 +1318,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="text" value="controlled" />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type text to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1329,13 +1329,13 @@ describe('ReactDOMInput', () => {
 
   it('should warn if uncontrolled input (value is null) switches to controlled', () => {
     const stub = <input type="text" value={null} />;
-    expect(() => ReactDOM.render(stub, container)).toWarnDev(
+    expect(() => ReactDOM.render(stub, container)).toErrorDev(
       '`value` prop on `input` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` for uncontrolled components.',
     );
     expect(() =>
       ReactDOM.render(<input type="text" value="controlled" />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type text to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1351,7 +1351,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="checkbox" />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1367,7 +1367,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="checkbox" checked={null} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1386,7 +1386,7 @@ describe('ReactDOMInput', () => {
         <input type="checkbox" defaultChecked={true} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1400,7 +1400,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="checkbox" checked={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1414,7 +1414,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="checkbox" checked={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1426,7 +1426,7 @@ describe('ReactDOMInput', () => {
   it('should warn if controlled radio switches to uncontrolled (checked is undefined)', () => {
     const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
     ReactDOM.render(stub, container);
-    expect(() => ReactDOM.render(<input type="radio" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<input type="radio" />, container)).toErrorDev(
       'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1440,7 +1440,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="radio" checked={null} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1454,7 +1454,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="radio" defaultChecked={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1468,7 +1468,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="radio" checked={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type radio to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1482,7 +1482,7 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(stub, container);
     expect(() =>
       ReactDOM.render(<input type="radio" checked={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing an uncontrolled input of type radio to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1534,7 +1534,7 @@ describe('ReactDOMInput', () => {
     );
     expect(() =>
       ReactDOM.render(<input type="radio" value="value" />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
         'Decide between using a controlled or uncontrolled input ' +
@@ -1816,7 +1816,7 @@ describe('ReactDOMInput', () => {
     }
 
     it('reverts the value attribute to the initial value', () => {
-      expect(renderInputWithStringThenWithUndefined).toWarnDev(
+      expect(renderInputWithStringThenWithUndefined).toErrorDev(
         'Input elements should not switch from controlled to ' +
           'uncontrolled (or vice versa).',
       );
@@ -1828,7 +1828,7 @@ describe('ReactDOMInput', () => {
     });
 
     it('preserves the value property', () => {
-      expect(renderInputWithStringThenWithUndefined).toWarnDev(
+      expect(renderInputWithStringThenWithUndefined).toErrorDev(
         'Input elements should not switch from controlled to ' +
           'uncontrolled (or vice versa).',
       );
@@ -1865,7 +1865,7 @@ describe('ReactDOMInput', () => {
     }
 
     it('reverts the value attribute to the initial value', () => {
-      expect(renderInputWithStringThenWithNull).toWarnDev([
+      expect(renderInputWithStringThenWithNull).toErrorDev([
         '`value` prop on `input` should not be null. ' +
           'Consider using an empty string to clear the component ' +
           'or `undefined` for uncontrolled components.',
@@ -1880,7 +1880,7 @@ describe('ReactDOMInput', () => {
     });
 
     it('preserves the value property', () => {
-      expect(renderInputWithStringThenWithNull).toWarnDev([
+      expect(renderInputWithStringThenWithNull).toErrorDev([
         '`value` prop on `input` should not be null. ' +
           'Consider using an empty string to clear the component ' +
           'or `undefined` for uncontrolled components.',
@@ -1898,7 +1898,7 @@ describe('ReactDOMInput', () => {
           <input value={Symbol('foobar')} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -1916,7 +1916,7 @@ describe('ReactDOMInput', () => {
           <input value={Symbol('foobar')} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -1958,7 +1958,7 @@ describe('ReactDOMInput', () => {
           <input value={() => {}} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -1976,7 +1976,7 @@ describe('ReactDOMInput', () => {
           <input value={() => {}} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
diff --git a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
index 0d6969f4811b8..7263aac40529e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
@@ -29,7 +29,7 @@ describe('ReactDOMInvalidARIAHook', () => {
       mountComponent({'aria-label': 'Bumble bees'});
     });
     it('should warn for one invalid aria-* prop', () => {
-      expect(() => mountComponent({'aria-badprop': 'maybe'})).toWarnDev(
+      expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev(
         'Warning: Invalid aria prop `aria-badprop` on <div> tag. ' +
           'For details, see https://fb.me/invalid-aria-prop',
       );
@@ -40,14 +40,14 @@ describe('ReactDOMInvalidARIAHook', () => {
           'aria-badprop': 'Very tall trees',
           'aria-malprop': 'Turbulent seas',
         }),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: Invalid aria props `aria-badprop`, `aria-malprop` on <div> ' +
           'tag. For details, see https://fb.me/invalid-aria-prop',
       );
     });
     it('should warn for an improperly cased aria-* prop', () => {
       // The valid attribute name is aria-haspopup.
-      expect(() => mountComponent({'aria-hasPopup': 'true'})).toWarnDev(
+      expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev(
         'Warning: Unknown ARIA attribute `aria-hasPopup`. ' +
           'Did you mean `aria-haspopup`?',
       );
@@ -55,7 +55,7 @@ describe('ReactDOMInvalidARIAHook', () => {
 
     it('should warn for use of recognized camel case aria attributes', () => {
       // The valid attribute name is aria-haspopup.
-      expect(() => mountComponent({ariaHasPopup: 'true'})).toWarnDev(
+      expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev(
         'Warning: Invalid ARIA attribute `ariaHasPopup`. ' +
           'Did you mean `aria-haspopup`?',
       );
@@ -63,7 +63,7 @@ describe('ReactDOMInvalidARIAHook', () => {
 
     it('should warn for use of unrecognized camel case aria attributes', () => {
       // The valid attribute name is aria-haspopup.
-      expect(() => mountComponent({ariaSomethingInvalid: 'true'})).toWarnDev(
+      expect(() => mountComponent({ariaSomethingInvalid: 'true'})).toErrorDev(
         'Warning: Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
           'attributes follow the pattern aria-* and must be lowercase.',
       );
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 4f514cadefc83..6d66655bf675b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -41,7 +41,7 @@ describe('ReactDOMOption', () => {
     let node;
     expect(() => {
       node = ReactTestUtils.renderIntoDocument(el);
-    }).toWarnDev(
+    }).toErrorDev(
       'Only strings and numbers are supported as <option> children.\n' +
         '    in option (at **)',
     );
@@ -118,7 +118,7 @@ describe('ReactDOMOption', () => {
           <span />
         </option>,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Only strings and numbers are supported as <option> children.',
     );
     expect(node.innerHTML).toBe('hello[object Object]');
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 095f44f554c4b..99743902a75e0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -26,52 +26,30 @@ describe('ReactDOMRoot', () => {
     Scheduler = require('scheduler');
   });
 
+  if (!__EXPERIMENTAL__) {
+    it('createRoot is not exposed in stable build', () => {
+      expect(ReactDOM.createRoot).toBe(undefined);
+    });
+    return;
+  }
+
   it('renders children', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
   });
 
   it('unmounts children', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     root.unmount();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('');
   });
 
-  it('`root.render` returns a thenable work object', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const work = root.render('Hi');
-    let ops = [];
-    work.then(() => {
-      ops.push('inside callback: ' + container.textContent);
-    });
-    ops.push('before committing: ' + container.textContent);
-    Scheduler.flushAll();
-    ops.push('after committing: ' + container.textContent);
-    expect(ops).toEqual([
-      'before committing: ',
-      // `then` callback should fire during commit phase
-      'inside callback: Hi',
-      'after committing: Hi',
-    ]);
-  });
-
-  it('resolves `work.then` callback synchronously if the work already committed', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const work = root.render('Hi');
-    Scheduler.flushAll();
-    let ops = [];
-    work.then(() => {
-      ops.push('inside callback');
-    });
-    expect(ops).toEqual(['inside callback']);
-  });
-
   it('supports hydration', async () => {
     const markup = await new Promise(resolve =>
       resolve(
@@ -86,38 +64,36 @@ describe('ReactDOMRoot', () => {
     // Does not hydrate by default
     const container1 = document.createElement('div');
     container1.innerHTML = markup;
-    const root1 = ReactDOM.unstable_createRoot(container1);
+    const root1 = ReactDOM.createRoot(container1);
     root1.render(
       <div>
         <span />
       </div>,
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
 
     // Accepts `hydrate` option
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});
+    const root2 = ReactDOM.createRoot(container2, {hydrate: true});
     root2.render(
       <div>
         <span />
       </div>,
     );
-    expect(() => Scheduler.flushAll()).toWarnDev('Extra attributes', {
-      withoutStack: true,
-    });
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev('Extra attributes');
   });
 
   it('does not clear existing children', async () => {
     container.innerHTML = '<div>a</div><div>b</div>';
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(
       <div>
         <span>c</span>
         <span>d</span>
       </div>,
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('abcd');
     root.render(
       <div>
@@ -125,247 +101,51 @@ describe('ReactDOMRoot', () => {
         <span>c</span>
       </div>,
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('abdc');
   });
 
-  it('can defer a commit by batching it', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    batch.render(<div>Hi</div>);
-    // Hasn't committed yet
-    expect(container.textContent).toEqual('');
-    // Commit
-    batch.commit();
-    expect(container.textContent).toEqual('Hi');
-  });
-
-  it('applies setState in componentDidMount synchronously in a batch', done => {
-    class App extends React.Component {
-      state = {mounted: false};
-      componentDidMount() {
-        this.setState({
-          mounted: true,
-        });
-      }
-      render() {
-        return this.state.mounted ? 'Hi' : 'Bye';
-      }
-    }
-
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    batch.render(<App />);
-
-    Scheduler.flushAll();
-
-    // Hasn't updated yet
-    expect(container.textContent).toEqual('');
-
-    let ops = [];
-    batch.then(() => {
-      // Still hasn't updated
-      ops.push(container.textContent);
-
-      // Should synchronously commit
-      batch.commit();
-      ops.push(container.textContent);
-
-      expect(ops).toEqual(['', 'Hi']);
-      done();
-    });
-  });
-
-  it('does not restart a completed batch when committing if there were no intervening updates', () => {
-    let ops = [];
-    function Foo(props) {
-      ops.push('Foo');
-      return props.children;
-    }
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    batch.render(<Foo>Hi</Foo>);
-    // Flush all async work.
-    Scheduler.flushAll();
-    // Root should complete without committing.
-    expect(ops).toEqual(['Foo']);
-    expect(container.textContent).toEqual('');
-
-    ops = [];
-
-    // Commit. Shouldn't re-render Foo.
-    batch.commit();
-    expect(ops).toEqual([]);
-    expect(container.textContent).toEqual('Hi');
-  });
-
-  it('can wait for a batch to finish', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    batch.render('Foo');
-
-    Scheduler.flushAll();
-
-    // Hasn't updated yet
-    expect(container.textContent).toEqual('');
-
-    let ops = [];
-    batch.then(() => {
-      // Still hasn't updated
-      ops.push(container.textContent);
-      // Should synchronously commit
-      batch.commit();
-      ops.push(container.textContent);
-    });
-
-    expect(ops).toEqual(['', 'Foo']);
-  });
-
-  it('`batch.render` returns a thenable work object', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    const work = batch.render('Hi');
-    let ops = [];
-    work.then(() => {
-      ops.push('inside callback: ' + container.textContent);
-    });
-    ops.push('before committing: ' + container.textContent);
-    batch.commit();
-    ops.push('after committing: ' + container.textContent);
-    expect(ops).toEqual([
-      'before committing: ',
-      // `then` callback should fire during commit phase
-      'inside callback: Hi',
-      'after committing: Hi',
-    ]);
-  });
-
-  it('can commit an empty batch', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    root.render(1);
-
-    Scheduler.advanceTime(2000);
-    // This batch has a later expiration time than the earlier update.
-    const batch = root.createBatch();
-
-    // This should not flush the earlier update.
-    batch.commit();
-    expect(container.textContent).toEqual('');
-
-    Scheduler.flushAll();
-    expect(container.textContent).toEqual('1');
-  });
-
-  it('two batches created simultaneously are committed separately', () => {
-    // (In other words, they have distinct expiration times)
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch1 = root.createBatch();
-    batch1.render(1);
-    const batch2 = root.createBatch();
-    batch2.render(2);
-
-    expect(container.textContent).toEqual('');
-
-    batch1.commit();
-    expect(container.textContent).toEqual('1');
-
-    batch2.commit();
-    expect(container.textContent).toEqual('2');
-  });
-
-  it('commits an earlier batch without committing a later batch', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch1 = root.createBatch();
-    batch1.render(1);
-
-    // This batch has a later expiration time
-    Scheduler.advanceTime(2000);
-    const batch2 = root.createBatch();
-    batch2.render(2);
-
-    expect(container.textContent).toEqual('');
-
-    batch1.commit();
-    expect(container.textContent).toEqual('1');
-
-    batch2.commit();
-    expect(container.textContent).toEqual('2');
-  });
-
-  it('commits a later batch without committing an earlier batch', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch1 = root.createBatch();
-    batch1.render(1);
-
-    // This batch has a later expiration time
-    Scheduler.advanceTime(2000);
-    const batch2 = root.createBatch();
-    batch2.render(2);
-
-    expect(container.textContent).toEqual('');
-
-    batch2.commit();
-    expect(container.textContent).toEqual('2');
-
-    batch1.commit();
-    Scheduler.flushAll();
-    expect(container.textContent).toEqual('1');
-  });
-
-  it('handles fatal errors triggered by batch.commit()', () => {
-    const root = ReactDOM.unstable_createRoot(container);
-    const batch = root.createBatch();
-    const InvalidType = undefined;
-    expect(() => batch.render(<InvalidType />)).toWarnDev(
-      ['React.createElement: type is invalid'],
-      {withoutStack: true},
-    );
-    expect(() => batch.commit()).toThrow('Element type is invalid');
-  });
-
   it('throws a good message on invalid containers', () => {
     expect(() => {
-      ReactDOM.unstable_createRoot(<div>Hi</div>);
-    }).toThrow(
-      'unstable_createRoot(...): Target container is not a DOM element.',
-    );
+      ReactDOM.createRoot(<div>Hi</div>);
+    }).toThrow('createRoot(...): Target container is not a DOM element.');
   });
 
   it('warns when rendering with legacy API into createRoot() container', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     expect(() => {
       ReactDOM.render(<div>Bye</div>, container);
-    }).toWarnDev(
+    }).toErrorDev(
       [
         // We care about this warning:
         'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.unstable_createRoot(). This is not supported. ' +
+          'passed to ReactDOM.createRoot(). This is not supported. ' +
           'Did you mean to call root.render(element)?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         'Replacing React-rendered children with a new root component.',
       ],
       {withoutStack: true},
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     // This works now but we could disallow it:
     expect(container.textContent).toEqual('Bye');
   });
 
   it('warns when hydrating with legacy API into createRoot() container', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     expect(() => {
       ReactDOM.hydrate(<div>Hi</div>, container);
-    }).toWarnDev(
+    }).toErrorDev(
       [
         // We care about this warning:
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.unstable_createRoot(). This is not supported. ' +
+          'passed to ReactDOM.createRoot(). This is not supported. ' +
           'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         'Replacing React-rendered children with a new root component.',
@@ -375,28 +155,28 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when unmounting with legacy API (no previous content)', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     let unmounted = false;
     expect(() => {
       unmounted = ReactDOM.unmountComponentAtNode(container);
-    }).toWarnDev(
+    }).toErrorDev(
       [
         // We care about this warning:
         'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.unstable_createRoot(). This is not supported. Did you mean to call root.unmount()?',
+          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         "The node you're attempting to unmount was rendered by React and is not a top-level container.",
       ],
       {withoutStack: true},
     );
     expect(unmounted).toBe(false);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     root.unmount();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('');
   });
 
@@ -404,30 +184,49 @@ describe('ReactDOMRoot', () => {
     // Currently createRoot().render() doesn't clear this.
     container.appendChild(document.createElement('div'));
     // The rest is the same as test above.
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     let unmounted = false;
     expect(() => {
       unmounted = ReactDOM.unmountComponentAtNode(container);
-    }).toWarnDev('Did you mean to call root.unmount()?', {withoutStack: true});
+    }).toErrorDev('Did you mean to call root.unmount()?', {withoutStack: true});
     expect(unmounted).toBe(false);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
     root.unmount();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('');
   });
 
   it('warns when passing legacy container to createRoot()', () => {
     ReactDOM.render(<div>Hi</div>, container);
     expect(() => {
-      ReactDOM.unstable_createRoot(container);
-    }).toWarnDev(
-      'You are calling ReactDOM.unstable_createRoot() on a container that was previously ' +
+      ReactDOM.createRoot(container);
+    }).toErrorDev(
+      'You are calling ReactDOM.createRoot() on a container that was previously ' +
         'passed to ReactDOM.render(). This is not supported.',
       {withoutStack: true},
     );
   });
+
+  it('warns when creating two roots managing the same container', () => {
+    ReactDOM.createRoot(container);
+    expect(() => {
+      ReactDOM.createRoot(container);
+    }).toErrorDev(
+      'You are calling ReactDOM.createRoot() on a container that ' +
+        'has already been passed to createRoot() before. Instead, call ' +
+        'root.render() on the existing root instead if you want to update it.',
+      {withoutStack: true},
+    );
+  });
+
+  it('does not warn when creating second root after first one is unmounted', () => {
+    const root = ReactDOM.createRoot(container);
+    root.unmount();
+    Scheduler.unstable_flushAll();
+    ReactDOM.createRoot(container); // No warning
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index cc7285d155ac3..0ff3a2972d695 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -610,7 +610,7 @@ describe('ReactDOMSelect', () => {
           <option value="test" />
         </select>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       '`value` prop on `select` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` ' +
         'for uncontrolled components.',
@@ -633,7 +633,7 @@ describe('ReactDOMSelect', () => {
       );
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<App />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<App />)).toErrorDev(
       'Use the `defaultValue` or `value` props on <select> instead of ' +
         'setting `selected` on <option>.',
     );
@@ -648,7 +648,7 @@ describe('ReactDOMSelect', () => {
           <option value="test" />
         </select>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       '`value` prop on `select` should not be null. ' +
         'Consider using an empty array when `multiple` is ' +
         'set to `true` to clear the component or `undefined` ' +
@@ -695,7 +695,7 @@ describe('ReactDOMSelect', () => {
           <option value="gorilla">A gorilla!</option>
         </select>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Select elements must be either controlled or uncontrolled ' +
         '(specify either the value prop, or the defaultValue prop, but not ' +
         'both). Decide between using a controlled or uncontrolled select ' +
@@ -847,7 +847,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('');
     });
@@ -863,7 +863,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('monkey');
 
@@ -889,7 +889,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('');
     });
@@ -905,7 +905,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('monkey');
 
@@ -933,7 +933,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('');
     });
@@ -949,7 +949,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('');
     });
@@ -965,7 +965,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('monkey');
 
@@ -991,7 +991,7 @@ describe('ReactDOMSelect', () => {
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toErrorDev('Invalid value for prop `value`');
 
       expect(node.value).toBe('monkey');
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index 50fd7ae16bc8e..87673b0e2cf4e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -13,6 +13,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 
 let React;
 let ReactDOM;
+let ReactTestUtils;
 let ReactDOMServer;
 
 function initModules() {
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -398,6 +401,11 @@ describe('ReactDOMServerIntegration', () => {
         expect(e.style.Foo).toBe('5');
       });
 
+      itRenders('camel cased custom properties', async render => {
+        const e = await render(<div style={{'--someColor': '#000000'}} />);
+        expect(e.style.SomeColor).toBe('#000000');
+      });
+
       itRenders('no undefined styles', async render => {
         const e = await render(
           <div style={{color: undefined, width: '30px'}} />,
@@ -598,7 +606,7 @@ describe('ReactDOMServerIntegration', () => {
         // so that it gets deduplicated later, and doesn't fail the test.
         expect(() => {
           ReactDOM.render(<nonstandard />, document.createElement('div'));
-        }).toWarnDev('The tag <nonstandard> is unrecognized in this browser.');
+        }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
 
         const e = await render(<nonstandard foo="bar" />);
         expect(e.getAttribute('foo')).toBe('bar');
@@ -628,10 +636,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('no unknown events', async render => {
-      const e = await render(
-        <div onunknownevent="alert(&quot;hack&quot;)" />,
-        1,
-      );
+      const e = await render(<div onunknownevent='alert("hack")' />, 1);
       expect(e.getAttribute('onunknownevent')).toBe(null);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
index 114907ef7d177..72ac5ff06b49f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
@@ -16,6 +16,7 @@ const TEXT_NODE_TYPE = 3;
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -23,11 +24,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
index 03e7c4b984480..3280ed5e0626c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
@@ -16,6 +16,7 @@ const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -23,11 +24,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
index 19839aa7cd6c2..147071c3242d3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -237,12 +240,12 @@ describe('ReactDOMServerIntegration', () => {
                   </Theme.Provider>
                   <LanguageConsumer>
                     {language => (
-                      <React.Fragment>
+                      <>
                         <ThemeConsumer>
                           {theme => <div id="theme3">{theme}</div>}
                         </ThemeConsumer>
                         <div id="language2">{language}</div>
-                      </React.Fragment>
+                      </>
                     )}
                   </LanguageConsumer>
                 </Theme.Provider>
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index 535191d66e8a7..5d56419a1a114 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -16,17 +16,20 @@ const TEXT_NODE_TYPE = 3;
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   jest.resetModuleRegistry();
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -143,7 +146,7 @@ describe('ReactDOMServerIntegration', () => {
         // so that it gets deduplicated later, and doesn't fail the test.
         expect(() => {
           ReactDOM.render(<nonstandard />, document.createElement('div'));
-        }).toWarnDev('The tag <nonstandard> is unrecognized in this browser.');
+        }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
 
         const e = await render(<nonstandard>Text</nonstandard>);
         expect(e.tagName).toBe('NONSTANDARD');
@@ -255,8 +258,7 @@ describe('ReactDOMServerIntegration', () => {
           <div>
             {[['a'], 'b']}
             <div>
-              <X key="1" />
-              d
+              <X key="1" />d
             </div>
             e
           </div>,
@@ -490,11 +492,13 @@ describe('ReactDOMServerIntegration', () => {
       // Put dangerouslySetInnerHTML one level deeper because otherwise
       // hydrating from a bad markup would cause a mismatch (since we don't
       // patch dangerouslySetInnerHTML as text content).
-      const e = (await render(
-        <div>
-          <span dangerouslySetInnerHTML={{__html: 0}} />
-        </div>,
-      )).firstChild;
+      const e = (
+        await render(
+          <div>
+            <span dangerouslySetInnerHTML={{__html: 0}} />
+          </div>,
+        )
+      ).firstChild;
       expect(e.childNodes.length).toBe(1);
       expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
       expect(e.textContent).toBe('0');
@@ -504,11 +508,13 @@ describe('ReactDOMServerIntegration', () => {
       // Put dangerouslySetInnerHTML one level deeper because otherwise
       // hydrating from a bad markup would cause a mismatch (since we don't
       // patch dangerouslySetInnerHTML as text content).
-      const e = (await render(
-        <div>
-          <span dangerouslySetInnerHTML={{__html: false}} />
-        </div>,
-      )).firstChild;
+      const e = (
+        await render(
+          <div>
+            <span dangerouslySetInnerHTML={{__html: false}} />
+          </div>,
+        )
+      ).firstChild;
       expect(e.childNodes.length).toBe(1);
       expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
       expect(e.firstChild.data).toBe('false');
@@ -520,11 +526,13 @@ describe('ReactDOMServerIntegration', () => {
         // Put dangerouslySetInnerHTML one level deeper because otherwise
         // hydrating from a bad markup would cause a mismatch (since we don't
         // patch dangerouslySetInnerHTML as text content).
-        const e = (await render(
-          <div>
-            <span dangerouslySetInnerHTML={{__html: 'hello'}} />
-          </div>,
-        )).firstChild;
+        const e = (
+          await render(
+            <div>
+              <span dangerouslySetInnerHTML={{__html: 'hello'}} />
+            </div>,
+          )
+        ).firstChild;
         expect(e.childNodes.length).toBe(1);
         expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
         expect(e.textContent).toBe('hello');
@@ -648,7 +656,7 @@ describe('ReactDOMServerIntegration', () => {
       });
     });
 
-    describe('component hierarchies', async function() {
+    describe('component hierarchies', function() {
       itRenders('single child hierarchies of components', async render => {
         const Component = props => <div>{props.children}</div>;
         let e = await render(
@@ -979,7 +987,7 @@ describe('ReactDOMServerIntegration', () => {
           let EmptyComponent = {};
           expect(() => {
             EmptyComponent = <EmptyComponent />;
-          }).toWarnDev(
+          }).toErrorDev(
             'Warning: React.createElement: type is invalid -- expected a string ' +
               '(for built-in components) or a class/function (for composite ' +
               'components) but got: object. You likely forgot to export your ' +
@@ -1003,7 +1011,7 @@ describe('ReactDOMServerIntegration', () => {
           let NullComponent = null;
           expect(() => {
             NullComponent = <NullComponent />;
-          }).toWarnDev(
+          }).toErrorDev(
             'Warning: React.createElement: type is invalid -- expected a string ' +
               '(for built-in components) or a class/function (for composite ' +
               'components) but got: null.',
@@ -1021,7 +1029,7 @@ describe('ReactDOMServerIntegration', () => {
           let UndefinedComponent = undefined;
           expect(() => {
             UndefinedComponent = <UndefinedComponent />;
-          }).toWarnDev(
+          }).toErrorDev(
             'Warning: React.createElement: type is invalid -- expected a string ' +
               '(for built-in components) or a class/function (for composite ' +
               'components) but got: undefined. You likely forgot to export your ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
index 8c93ee9eea556..e523e3376ef20 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -39,9 +42,9 @@ describe('ReactDOMServerIntegration', () => {
   describe('React.Fragment', () => {
     itRenders('a fragment with one child', async render => {
       let e = await render(
-        <React.Fragment>
+        <>
           <div>text1</div>
-        </React.Fragment>,
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -53,19 +56,19 @@ describe('ReactDOMServerIntegration', () => {
       };
       let Footer = props => {
         return (
-          <React.Fragment>
+          <>
             <h2>footer</h2>
             <h3>about</h3>
-          </React.Fragment>
+          </>
         );
       };
       let e = await render(
-        <React.Fragment>
+        <>
           <div>text1</div>
           <span>text2</span>
           <Header />
           <Footer />
-        </React.Fragment>,
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -77,21 +80,21 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('a nested fragment', async render => {
       let e = await render(
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <div>text1</div>
-          </React.Fragment>
+          </>
           <span>text2</span>
-          <React.Fragment>
-            <React.Fragment>
-              <React.Fragment>
+          <>
+            <>
+              <>
                 {null}
                 <p />
-              </React.Fragment>
+              </>
               {false}
-            </React.Fragment>
-          </React.Fragment>
-        </React.Fragment>,
+            </>
+          </>
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
index a0a91763a82cf..a4e638cc006ee 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
@@ -17,6 +17,7 @@ let React;
 let ReactFeatureFlags;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 let useState;
 let useReducer;
 let useEffect;
@@ -41,6 +42,7 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
   useState = React.useState;
   useReducer = React.useReducer;
   useEffect = React.useEffect;
@@ -67,6 +69,7 @@ function initModules() {
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -319,13 +322,10 @@ describe('ReactDOMServerHooks', () => {
     itRenders('basic render', async render => {
       function CapitalizedText(props) {
         const text = props.text;
-        const capitalizedText = useMemo(
-          () => {
-            yieldValue(`Capitalize '${text}'`);
-            return text.toUpperCase();
-          },
-          [text],
-        );
+        const capitalizedText = useMemo(() => {
+          yieldValue(`Capitalize '${text}'`);
+          return text.toUpperCase();
+        }, [text]);
         return <Text text={capitalizedText} />;
       }
 
@@ -357,13 +357,10 @@ describe('ReactDOMServerHooks', () => {
       async render => {
         function CapitalizedText(props) {
           const [text, setText] = useState(props.text);
-          const capitalizedText = useMemo(
-            () => {
-              yieldValue(`Capitalize '${text}'`);
-              return text.toUpperCase();
-            },
-            [text],
-          );
+          const capitalizedText = useMemo(() => {
+            yieldValue(`Capitalize '${text}'`);
+            return text.toUpperCase();
+          }, [text]);
 
           if (text === 'hello') {
             setText('hello, world.');
@@ -388,13 +385,10 @@ describe('ReactDOMServerHooks', () => {
         function CapitalizedText(props) {
           const [text, setText] = useState(props.text);
           const [count, setCount] = useState(0);
-          const capitalizedText = useMemo(
-            () => {
-              yieldValue(`Capitalize '${text}'`);
-              return text.toUpperCase();
-            },
-            [text],
-          );
+          const capitalizedText = useMemo(() => {
+            yieldValue(`Capitalize '${text}'`);
+            return text.toUpperCase();
+          }, [text]);
 
           yieldValue(count);
 
@@ -539,18 +533,30 @@ describe('ReactDOMServerHooks', () => {
   });
 
   describe('useEffect', () => {
+    const yields = [];
     itRenders('should ignore effects on the server', async render => {
       function Counter(props) {
         useEffect(() => {
-          yieldValue('should not be invoked');
+          yieldValue('invoked on client');
         });
         return <Text text={'Count: ' + props.count} />;
       }
+
       const domNode = await render(<Counter count={0} />);
-      expect(clearYields()).toEqual(['Count: 0']);
+      yields.push(clearYields());
       expect(domNode.tagName).toEqual('SPAN');
       expect(domNode.textContent).toEqual('Count: 0');
     });
+
+    it('verifies yields in order', () => {
+      expect(yields).toEqual([
+        ['Count: 0'], // server render
+        ['Count: 0'], // server stream
+        ['Count: 0', 'invoked on client'], // clean render
+        ['Count: 0', 'invoked on client'], // hydrated render
+        // nothing yielded for bad markup
+      ]);
+    });
   });
 
   describe('useCallback', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
index d637755d02c0b..9ca1c92d8d427 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
@@ -16,6 +16,7 @@ const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -23,11 +24,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
index e801902011b61..4c78919bd8480 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
@@ -15,6 +15,7 @@ let PropTypes;
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -23,11 +24,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js
new file mode 100644
index 0000000000000..e8aec9ddbacbc
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js
@@ -0,0 +1,168 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOM;
+let ReactFeatureFlags;
+let ReactDOMServer;
+let ReactTestUtils;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModuleRegistry();
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
+
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.disableLegacyContext = true;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOM,
+    ReactDOMServer,
+    ReactTestUtils,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+function formatValue(val) {
+  if (val === null) {
+    return 'null';
+  }
+  if (val === undefined) {
+    return 'undefined';
+  }
+  if (typeof val === 'string') {
+    return val;
+  }
+  return JSON.stringify(val);
+}
+
+describe('ReactDOMServerIntegrationLegacyContextDisabled', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('undefined legacy context with warning', async render => {
+    class LegacyProvider extends React.Component {
+      static childContextTypes = {
+        foo() {},
+      };
+      getChildContext() {
+        return {foo: 10};
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    let lifecycleContextLog = [];
+    class LegacyClsConsumer extends React.Component {
+      static contextTypes = {
+        foo() {},
+      };
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+        return true;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      render() {
+        return formatValue(this.context);
+      }
+    }
+
+    function LegacyFnConsumer(props, context) {
+      return formatValue(context);
+    }
+    LegacyFnConsumer.contextTypes = {foo() {}};
+
+    function RegularFn(props, context) {
+      return formatValue(context);
+    }
+
+    const e = await render(
+      <LegacyProvider>
+        <span>
+          <LegacyClsConsumer />
+          <LegacyFnConsumer />
+          <RegularFn />
+        </span>
+      </LegacyProvider>,
+      3,
+    );
+    expect(e.textContent).toBe('{}undefinedundefined');
+    expect(lifecycleContextLog).toEqual([]);
+  });
+
+  itRenders('modern context', async render => {
+    let Ctx = React.createContext();
+
+    class Provider extends React.Component {
+      render() {
+        return (
+          <Ctx.Provider value={this.props.value}>
+            {this.props.children}
+          </Ctx.Provider>
+        );
+      }
+    }
+
+    class RenderPropConsumer extends React.Component {
+      render() {
+        return <Ctx.Consumer>{value => formatValue(value)}</Ctx.Consumer>;
+      }
+    }
+
+    let lifecycleContextLog = [];
+    class ContextTypeConsumer extends React.Component {
+      static contextType = Ctx;
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+        return true;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      render() {
+        return formatValue(this.context);
+      }
+    }
+
+    function FnConsumer() {
+      return formatValue(React.useContext(Ctx));
+    }
+
+    const e = await render(
+      <Provider value="a">
+        <span>
+          <RenderPropConsumer />
+          <ContextTypeConsumer />
+          <FnConsumer />
+        </span>
+      </Provider>,
+    );
+    expect(e.textContent).toBe('aaa');
+    expect(lifecycleContextLog).toEqual([]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
index b9f8a5c48c8a1..188ab02991868 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index 071dd8715751c..b9fbb2be7b4e2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -267,12 +270,12 @@ describe('ReactDOMServerIntegration', () => {
                   </Theme.Provider>
                   <Language.Consumer>
                     {language => (
-                      <React.Fragment>
+                      <>
                         <Theme.Consumer>
                           {theme => <div id="theme3">{theme}</div>}
                         </Theme.Consumer>
                         <div id="language2">{language}</div>
-                      </React.Fragment>
+                      </>
                     )}
                   </Language.Consumer>
                 </Theme.Provider>
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
index b6428b1fa3824..aba74c2f34fcf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -22,11 +23,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
index ccb9a60607833..4d39fce80c885 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 486b2a81a6925..3871ad975e743 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
index b56d36b626a76..d5d632c987f4f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
@@ -14,10 +14,11 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 let forwardRef;
 let memo;
 let yieldedValues;
-let yieldValue;
+let unstable_yieldValue;
 let clearYields;
 
 function initModules() {
@@ -26,11 +27,12 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
   forwardRef = React.forwardRef;
   memo = React.memo;
 
   yieldedValues = [];
-  yieldValue = value => {
+  unstable_yieldValue = value => {
     yieldedValues.push(value);
   };
   clearYields = () => {
@@ -43,6 +45,7 @@ function initModules() {
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
@@ -89,7 +92,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     function Text({text}) {
-      yieldValue(text);
+      unstable_yieldValue(text);
       return <span>{text}</span>;
     }
 
@@ -124,7 +127,7 @@ describe('ReactDOMServerIntegration', () => {
       'comparator functions are not invoked on the server',
       async render => {
         const MemoCounter = React.memo(Counter, (oldProps, newProps) => {
-          yieldValue(
+          unstable_yieldValue(
             `Old count: ${oldProps.count}, New count: ${newProps.count}`,
           );
           return oldProps.count === newProps.count;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index 2b0faddcd2c44..261b6c041495a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
index 21a4cc1b6dc87..4853627b22f10 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
@@ -16,6 +16,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function runTests(itRenders, itRejectsRendering, expectToReject) {
   itRenders('a http link with the word javascript in it', async render => {
@@ -152,11 +153,13 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
+    ReactTestUtils = require('react-dom/test-utils');
 
     // Make them available to the helpers.
     return {
       ReactDOM,
       ReactDOMServer,
+      ReactTestUtils,
     };
   }
 
@@ -167,7 +170,7 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
   });
 
   runTests(itRenders, itRenders, fn =>
-    expect(fn).toWarnDev(
+    expect(fn).toErrorDev(
       'Warning: A future version of React will block javascript: URLs as a security precaution. ' +
         'Use event handlers instead if you can. If you need to generate unsafe HTML try using ' +
         'dangerouslySetInnerHTML instead. React was passed "javascript:notfine".\n' +
@@ -185,11 +188,13 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
+    ReactTestUtils = require('react-dom/test-utils');
 
     // Make them available to the helpers.
     return {
       ReactDOM,
       ReactDOMServer,
+      ReactTestUtils,
     };
   }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
index 558aad7648b40..c0e2733c54169 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
index 76230a3230350..497bf0e3b726a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
@@ -180,10 +180,9 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
+    expect(() => ReactDOMServer.renderToString(<Component />)).toErrorDev(
       'Component.getDerivedStateFromProps(): A valid state object (or null) must ' +
         'be returned. You have returned undefined.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -200,12 +199,11 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
+    expect(() => ReactDOMServer.renderToString(<Component />)).toErrorDev(
       '`Component` uses `getDerivedStateFromProps` but its initial state is ' +
         'undefined. This is not recommended. Instead, define the initial state by ' +
         'assigning an object to `this.state` in the constructor of `Component`. ' +
         'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
-      {withoutStack: true},
     );
 
     // De-duped
@@ -227,11 +225,9 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() =>
-      ReactDOMServer.renderToString(<Component />),
-    ).toLowPriorityWarnDev('componentWillMount() is deprecated', {
-      withoutStack: true,
-    });
+    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
+      'componentWillMount has been renamed',
+    );
     expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
   });
 
@@ -261,12 +257,11 @@ describe('ReactDOMServerLifecycles', () => {
       expect(ReactDOMServer.renderToStaticMarkup(<Outer />)).toBe(
         '<div>1-2</div>',
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: setState(...): Can only update a mounting component. This ' +
         'usually means you called setState() outside componentWillMount() on ' +
         'the server. This is a no-op.\n\n' +
         'Please check the code for the Outer component.',
-      {withoutStack: true},
     );
   });
 
@@ -284,11 +279,8 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() =>
-      ReactDOMServer.renderToString(<Component />),
-    ).toLowPriorityWarnDev(
-      'Component: componentWillMount() is deprecated and will be removed in the next major version.',
-      {withoutStack: true},
+    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
+      'componentWillMount has been renamed',
     );
   });
 
@@ -300,12 +292,8 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() =>
-      ReactDOMServer.renderToString(<Component />),
-    ).toLowPriorityWarnDev(
-      'Warning: Component: componentWillMount() is deprecated and will be removed ' +
-        'in the next major version.',
-      {withoutStack: true},
+    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
+      'componentWillMount has been renamed',
     );
 
     // De-duped
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 36f444139750a..7a25979987b4f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -15,14 +15,69 @@ let ReactDOMServer;
 let Scheduler;
 let ReactFeatureFlags;
 let Suspense;
+let SuspenseList;
 let act;
+let useHover;
+
+function dispatchMouseEvent(to, from) {
+  if (!to) {
+    to = null;
+  }
+  if (!from) {
+    from = null;
+  }
+  if (from) {
+    const mouseOutEvent = document.createEvent('MouseEvents');
+    mouseOutEvent.initMouseEvent(
+      'mouseout',
+      true,
+      true,
+      window,
+      0,
+      50,
+      50,
+      50,
+      50,
+      false,
+      false,
+      false,
+      false,
+      0,
+      to,
+    );
+    from.dispatchEvent(mouseOutEvent);
+  }
+  if (to) {
+    const mouseOverEvent = document.createEvent('MouseEvents');
+    mouseOverEvent.initMouseEvent(
+      'mouseover',
+      true,
+      true,
+      window,
+      0,
+      50,
+      50,
+      50,
+      50,
+      false,
+      false,
+      false,
+      false,
+      0,
+      from,
+    );
+    to.dispatchEvent(mouseOverEvent);
+  }
+}
 
 describe('ReactDOMServerPartialHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSuspenseServerRenderer = true;
+    ReactFeatureFlags.enableSuspenseCallback = true;
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
 
     React = require('react');
     ReactDOM = require('react-dom');
@@ -30,8 +85,16 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
+    SuspenseList = React.SuspenseList;
+
+    useHover = require('react-interactions/events/hover').useHover;
   });
 
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
   it('hydrates a parent even if a child Suspense boundary is blocked', async () => {
     let suspend = false;
     let resolve;
@@ -72,9 +135,9 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -83,13 +146,231 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     resolve();
     await promise;
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // We should now have hydrated with a ref on the existing span.
     expect(ref.current).toBe(span);
   });
 
+  it('calls the hydration callbacks after hydration or deletion', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let suspend2 = false;
+    let promise2 = new Promise(() => {});
+    function Child2() {
+      if (suspend2) {
+        throw promise2;
+      } else {
+        return 'World';
+      }
+    }
+
+    function App({value}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child2 value={value} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    // First we render the final HTML. With the streaming renderer
+    // this may have suspense points on the server but here we want
+    // to test the completed HTML. Don't suspend on the server.
+    suspend = false;
+    suspend2 = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let hydrated = [];
+    let deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    suspend2 = true;
+    let root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        onHydrated(node) {
+          hydrated.push(node);
+        },
+        onDeleted(node) {
+          deleted.push(node);
+        },
+      },
+    });
+    act(() => {
+      root.render(<App />);
+    });
+
+    expect(hydrated.length).toBe(0);
+    expect(deleted.length).toBe(0);
+
+    await act(async () => {
+      // Resolving the promise should continue hydration
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(hydrated.length).toBe(1);
+    expect(deleted.length).toBe(0);
+
+    // Performing an update should force it to delete the boundary
+    root.render(<App value={true} />);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(hydrated.length).toBe(1);
+    expect(deleted.length).toBe(1);
+  });
+
+  it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
+    let suspend = false;
+    let promise = new Promise(() => {});
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App({deleted}) {
+      if (deleted) {
+        return null;
+      }
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        onDeleted(node) {
+          deleted.push(node);
+        },
+      },
+    });
+    act(() => {
+      root.render(<App />);
+    });
+
+    expect(deleted.length).toBe(0);
+
+    act(() => {
+      root.render(<App deleted={true} />);
+    });
+
+    // The callback should have been invoked.
+    expect(deleted.length).toBe(1);
+  });
+
+  it('warns and replaces the boundary content in legacy mode', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref}>
+              <Child />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    // Don't suspend on the server.
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let span = container.getElementsByTagName('span')[0];
+
+    // On the client we try to hydrate.
+    suspend = true;
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrate(<App />, container);
+      });
+    }).toErrorDev(
+      'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
+        'ReactDOM.hydrate(element, container) to ' +
+        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+        '.render(element) or remove the Suspense components from the server ' +
+        'rendered components.' +
+        '\n    in Suspense (at **)' +
+        '\n    in div (at **)' +
+        '\n    in App (at **)',
+    );
+
+    // We're now in loading state.
+    expect(container.textContent).toBe('Loading...');
+
+    let span2 = container.getElementsByTagName('span')[0];
+    // This is a new node.
+    expect(span).not.toBe(span2);
+    expect(ref.current).toBe(span2);
+
+    // Resolving the promise should render the final content.
+    suspend = false;
+    resolve();
+    await promise;
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We should now have hydrated with a ref on the existing span.
+    expect(container.textContent).toBe('Hello');
+  });
+
   it('can insert siblings before the dehydrated boundary', () => {
     let suspend = false;
     let promise = new Promise(() => {});
@@ -135,7 +416,8 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     act(() => {
-      ReactDOM.hydrate(<App />, container);
+      let root = ReactDOM.createRoot(container, {hydrate: true});
+      root.render(<App />);
     });
 
     expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -157,10 +439,10 @@ describe('ReactDOMServerPartialHydration', () => {
         throw promise;
       } else {
         return (
-          <React.Fragment>
+          <>
             <div>Middle</div>
             Some text
-          </React.Fragment>
+          </>
         );
       }
     }
@@ -191,7 +473,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     act(() => {
-      ReactDOM.hydrate(<App />, container);
+      let root = ReactDOM.createRoot(container, {hydrate: true});
+      root.render(<App />);
     });
 
     expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -202,7 +485,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.firstChild.children[1].textContent).toBe('After');
   });
 
-  it('regenerates the content if props have changed before hydration completes', async () => {
+  it('blocks updates to hydrate the content first if props have changed', async () => {
     let suspend = false;
     let resolve;
     let promise = new Promise(resolvePromise => (resolve = resolvePromise));
@@ -240,9 +523,9 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App text="Hello" className="hello" />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -256,14 +539,14 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    // Flushing both of these in the same batch won't be able to hydrate so we'll
-    // probably throw away the existing subtree.
-    Scheduler.flushAll();
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
-    // Pick up the new span. In an ideal implementation this might be the same span
-    // but patched up. At the time of writing, this will be a new span though.
-    span = container.getElementsByTagName('span')[0];
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    let newSpan = container.getElementsByTagName('span')[0];
+    expect(span).toBe(newSpan);
 
     // We should now have fully rendered with a ref on the new span.
     expect(ref.current).toBe(span);
@@ -309,16 +592,16 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App text="Hello" className="hello" />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
 
     // Render an update, but leave it still suspended.
     root.render(<App text="Hi" className="hi" />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Flushing now should delete the existing content and show the fallback.
@@ -332,7 +615,7 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     let span = container.getElementsByTagName('span')[0];
@@ -382,9 +665,9 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App text="Hello" className="hello" />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -393,7 +676,7 @@ describe('ReactDOMServerPartialHydration', () => {
     root.render(<App text="Hi" className="hi" />);
 
     // Flushing now should delete the existing content and show the fallback.
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(container.getElementsByTagName('span').length).toBe(0);
@@ -405,7 +688,7 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     let span = container.getElementsByTagName('span')[0];
@@ -454,9 +737,9 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App text="Hello" className="hello" />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -465,7 +748,7 @@ describe('ReactDOMServerPartialHydration', () => {
     root.render(<App text="Hi" className="hi" />);
 
     // Flushing now should delete the existing content and show the fallback.
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(container.getElementsByTagName('span').length).toBe(0);
@@ -477,7 +760,7 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     let span = container.getElementsByTagName('span')[0];
@@ -487,7 +770,87 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi Hi');
   });
 
-  it('regenerates the content if context has changed before hydration completes', async () => {
+  it('hydrates first if props changed but we are able to resolve within a timeout', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App text="Hello" className="hello" />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Render an update with a long timeout.
+    React.unstable_withSuspenseConfig(
+      () => root.render(<App text="Hi" className="hi" />),
+      {timeoutMs: 5000},
+    );
+
+    // This shouldn't force the fallback yet.
+    Scheduler.unstable_flushAll();
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    let newSpan = container.getElementsByTagName('span')[0];
+    expect(span).toBe(newSpan);
+
+    // We should now have fully rendered with a ref on the new span.
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+    // If we ended up hydrating the existing content, we won't have properly
+    // patched up the tree, which might mean we haven't patched the className.
+    expect(span.className).toBe('hi');
+  });
+
+  it('blocks the update to hydrate first if context has changed', async () => {
     let suspend = false;
     let resolve;
     let promise = new Promise(resolvePromise => (resolve = resolvePromise));
@@ -531,13 +894,13 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -555,14 +918,13 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    // Flushing both of these in the same batch won't be able to hydrate so we'll
-    // probably throw away the existing subtree.
-    Scheduler.flushAll();
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
-    // Pick up the new span. In an ideal implementation this might be the same span
-    // but patched up. At the time of writing, this will be a new span though.
-    span = container.getElementsByTagName('span')[0];
+    // Since this should have been hydrated, this should still be the same span.
+    let newSpan = container.getElementsByTagName('span')[0];
+    expect(newSpan).toBe(span);
 
     // We should now have fully rendered with a ref on the new span.
     expect(ref.current).toBe(span);
@@ -614,13 +976,13 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
     );
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(ref.current).toBe(null);
@@ -633,7 +995,7 @@ describe('ReactDOMServerPartialHydration', () => {
     );
 
     // Flushing now should delete the existing content and show the fallback.
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(container.getElementsByTagName('span').length).toBe(0);
@@ -645,7 +1007,7 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     let span = container.getElementsByTagName('span')[0];
@@ -692,9 +1054,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     expect(container.textContent).toBe('Hello');
@@ -748,9 +1110,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
     // The boundary should longer be suspended for the middle content
@@ -809,9 +1171,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
     // The boundary should longer be suspended for the middle content
@@ -885,9 +1247,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // Attempt to hydrate the content.
     suspend = false;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -903,7 +1265,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // But it is not yet hydrated.
     expect(ref.current).toBe(null);
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Now it's hydrated.
@@ -978,9 +1340,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // Attempt to hydrate the content.
     suspend = false;
-    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    let root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -994,7 +1356,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Loading...');
     expect(ref.current).toBe(null);
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Hydrating should've generated an error and replaced the suspense boundary.
@@ -1003,4 +1365,1202 @@ describe('ReactDOMServerPartialHydration', () => {
     let div = container.getElementsByTagName('div')[0];
     expect(ref.current).toBe(div);
   });
+
+  it('shows inserted items in a SuspenseList before content is hydrated', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    // These are hoisted to avoid them from rerendering.
+    const a = (
+      <Suspense fallback="Loading A">
+        <Child>
+          <span>A</span>
+        </Child>
+      </Suspense>
+    );
+    const b = (
+      <Suspense fallback="Loading B">
+        <Child>
+          <span ref={ref}>B</span>
+        </Child>
+      </Suspense>
+    );
+
+    function App({showMore}) {
+      return (
+        <SuspenseList revealOrder="forwards">
+          {a}
+          {b}
+          {showMore ? (
+            <Suspense fallback="Loading C">
+              <span>C</span>
+            </Suspense>
+          ) : null}
+        </SuspenseList>
+      );
+    }
+
+    suspend = false;
+    let html = ReactDOMServer.renderToString(<App showMore={false} />);
+
+    let container = document.createElement('div');
+    container.innerHTML = html;
+
+    let spanB = container.getElementsByTagName('span')[1];
+
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+
+    suspend = true;
+    act(() => {
+      root.render(<App showMore={false} />);
+    });
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('AB');
+
+    // Add more rows before we've hydrated the first two.
+    act(() => {
+      root.render(<App showMore={true} />);
+    });
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+
+    // Since the first two are already showing their final content
+    // we should be able to show the real content.
+    expect(container.textContent).toBe('ABC');
+
+    suspend = false;
+    await act(async () => {
+      await resolve();
+    });
+
+    expect(container.textContent).toBe('ABC');
+    // We've hydrated the same span.
+    expect(ref.current).toBe(spanB);
+  });
+
+  it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    let promise2 = new Promise(() => {});
+    function AlwaysSuspend() {
+      throw promise2;
+    }
+
+    // This is hoisted to avoid them from rerendering.
+    const a = (
+      <Suspense fallback="Loading A">
+        <Child>
+          <span ref={ref}>A</span>
+        </Child>
+      </Suspense>
+    );
+
+    function App({showMore}) {
+      return (
+        <SuspenseList revealOrder="together">
+          {a}
+          {showMore ? (
+            <Suspense fallback="Loading B">
+              <AlwaysSuspend />
+            </Suspense>
+          ) : null}
+        </SuspenseList>
+      );
+    }
+
+    suspend = false;
+    let html = ReactDOMServer.renderToString(<App showMore={false} />);
+
+    let container = document.createElement('div');
+    container.innerHTML = html;
+
+    let spanA = container.getElementsByTagName('span')[0];
+
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+
+    suspend = true;
+    act(() => {
+      root.render(<App showMore={false} />);
+    });
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('A');
+
+    await act(async () => {
+      // Add another row before we've hydrated the first one.
+      root.render(<App showMore={true} />);
+      // At the same time, we resolve the blocking promise.
+      suspend = false;
+      await resolve();
+    });
+
+    // We should have been able to hydrate the first row.
+    expect(ref.current).toBe(spanA);
+    // Even though we're still slowing B.
+    expect(container.textContent).toBe('ALoading B');
+  });
+
+  it('shows inserted items before pending in a SuspenseList as fallbacks', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    // These are hoisted to avoid them from rerendering.
+    const a = (
+      <Suspense fallback="Loading A">
+        <Child>
+          <span>A</span>
+        </Child>
+      </Suspense>
+    );
+    const b = (
+      <Suspense fallback="Loading B">
+        <Child>
+          <span ref={ref}>B</span>
+        </Child>
+      </Suspense>
+    );
+
+    function App({showMore}) {
+      return (
+        <SuspenseList revealOrder="forwards">
+          {a}
+          {b}
+          {showMore ? (
+            <Suspense fallback="Loading C">
+              <span>C</span>
+            </Suspense>
+          ) : null}
+        </SuspenseList>
+      );
+    }
+
+    suspend = false;
+    let html = ReactDOMServer.renderToString(<App showMore={false} />);
+
+    let container = document.createElement('div');
+    container.innerHTML = html;
+
+    let suspenseNode = container.firstChild;
+    expect(suspenseNode.nodeType).toBe(8);
+    // Put the suspense node in pending state.
+    suspenseNode.data = '$?';
+
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+
+    suspend = true;
+    act(() => {
+      root.render(<App showMore={false} />);
+    });
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('AB');
+
+    // Add more rows before we've hydrated the first two.
+    act(() => {
+      root.render(<App showMore={true} />);
+    });
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+
+    // Since the first two are already showing their final content
+    // we should be able to show the real content.
+    expect(container.textContent).toBe('ABLoading C');
+
+    suspend = false;
+    await act(async () => {
+      // Resolve the boundary to be in its resolved final state.
+      suspenseNode.data = '$';
+      if (suspenseNode._reactRetry) {
+        suspenseNode._reactRetry();
+      }
+      await resolve();
+    });
+
+    expect(container.textContent).toBe('ABC');
+  });
+
+  it('can client render nested boundaries', async () => {
+    let suspend = false;
+    let promise = new Promise(() => {});
+    let ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <>
+                <Suspense fallback="Loading...">
+                  <Child />
+                </Suspense>
+                <span>Inner Sibling</span>
+              </>
+            }>
+            <Child />
+          </Suspense>
+          <span ref={ref}>Sibling</span>
+        </div>
+      );
+    }
+
+    suspend = true;
+    let html = ReactDOMServer.renderToString(<App />);
+
+    let container = document.createElement('div');
+    container.innerHTML = html + '<!--unrelated comment-->';
+
+    let span = container.getElementsByTagName('span')[1];
+
+    suspend = false;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ref.current).toBe(span);
+    expect(span.parentNode).not.toBe(null);
+
+    // It leaves non-React comments alone.
+    expect(container.lastChild.nodeType).toBe(8);
+    expect(container.lastChild.data).toBe('unrelated comment');
+  });
+
+  it('can hydrate TWO suspense boundaries', async () => {
+    let ref1 = React.createRef();
+    let ref2 = React.createRef();
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading 1...">
+            <span ref={ref1}>1</span>
+          </Suspense>
+          <Suspense fallback="Loading 2...">
+            <span ref={ref2}>2</span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    // First we render the final HTML. With the streaming renderer
+    // this may have suspense points on the server but here we want
+    // to test the completed HTML. Don't suspend on the server.
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let span1 = container.getElementsByTagName('span')[0];
+    let span2 = container.getElementsByTagName('span')[1];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ref1.current).toBe(span1);
+    expect(ref2.current).toBe(span2);
+  });
+
+  it('regenerates if it cannot hydrate before changes to props/context expire', async () => {
+    let suspend = false;
+    let promise = new Promise(resolvePromise => {});
+    let ref = React.createRef();
+    let ClassName = React.createContext(null);
+
+    function Child({text}) {
+      let className = React.useContext(ClassName);
+      if (suspend && className !== 'hi' && text !== 'Hi') {
+        // Never suspends on the newer data.
+        throw promise;
+      } else {
+        return (
+          <span ref={ref} className={className}>
+            {text}
+          </span>
+        );
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text={text} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+    );
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+    );
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ref.current).toBe(null);
+    expect(span.textContent).toBe('Hello');
+
+    // Render an update, which will be higher or the same priority as pinging the hydration.
+    // The new update doesn't suspend.
+    root.render(
+      <ClassName.Provider value={'hi'}>
+        <App text="Hi" />
+      </ClassName.Provider>,
+    );
+
+    // Since we're still suspended on the original data, we can't hydrate.
+    // This will force all expiration times to flush.
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // This will now be a new span because we weren't able to hydrate before
+    let newSpan = container.getElementsByTagName('span')[0];
+    expect(newSpan).not.toBe(span);
+
+    // We should now have fully rendered with a ref on the new span.
+    expect(ref.current).toBe(newSpan);
+    expect(newSpan.textContent).toBe('Hi');
+    // If we ended up hydrating the existing content, we won't have properly
+    // patched up the tree, which might mean we haven't patched the className.
+    expect(newSpan.className).toBe('hi');
+  });
+
+  it('does not invoke an event on a hydrated node until it commits', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let clicks = 0;
+
+    function Button() {
+      let [clicked, setClicked] = React.useState(false);
+      if (clicked) {
+        return null;
+      }
+      return (
+        <a
+          onClick={() => {
+            setClicked(true);
+            clicks++;
+          }}>
+          Click me
+        </a>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Button />
+            <Sibling />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(container.textContent).toBe('Click meHello');
+
+    // We're now partially hydrated.
+    a.click();
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(clicks).toBe(1);
+
+    expect(container.textContent).toBe('Hello');
+
+    document.body.removeChild(container);
+  });
+
+  it('does not invoke an event on a hydrated EventResponder until it commits', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    const onEvent = jest.fn();
+    const TestResponder = React.DEPRECATED_createResponder(
+      'TestEventResponder',
+      {
+        targetEventTypes: ['click'],
+        onEvent,
+      },
+    );
+
+    function Button() {
+      let listener = React.DEPRECATED_useResponder(TestResponder, {});
+      return <a DEPRECATED_flareListeners={listener}>Click me</a>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Button />
+            <Sibling />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We're now partially hydrated.
+    a.click();
+    // We should not have invoked the event yet because we're not
+    // yet hydrated.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(onEvent).toHaveBeenCalledTimes(2);
+
+    document.body.removeChild(container);
+  });
+
+  it('invokes discrete events on nested suspense boundaries in a root (legacy system)', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let clicks = 0;
+
+    function Button() {
+      return (
+        <a
+          onClick={() => {
+            clicks++;
+          }}>
+          Click me
+        </a>
+      );
+    }
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <Suspense fallback="Loading...">
+            <Button />
+          </Suspense>
+        );
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+        </Suspense>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(clicks).toBe(0);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We're now partially hydrated.
+    a.click();
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(clicks).toBe(2);
+
+    document.body.removeChild(container);
+  });
+
+  it('invokes discrete events on nested suspense boundaries in a root (responder system)', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    const onEvent = jest.fn();
+    const TestResponder = React.DEPRECATED_createResponder(
+      'TestEventResponder',
+      {
+        targetEventTypes: ['click'],
+        onEvent,
+      },
+    );
+
+    function Button() {
+      let listener = React.DEPRECATED_useResponder(TestResponder, {});
+      return <a DEPRECATED_flareListeners={listener}>Click me</a>;
+    }
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <Suspense fallback="Loading...">
+            <Button />
+          </Suspense>
+        );
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+        </Suspense>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We're now partially hydrated.
+    a.click();
+    // We should not have invoked the event yet because we're not
+    // yet hydrated.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(onEvent).toHaveBeenCalledTimes(2);
+
+    document.body.removeChild(container);
+  });
+
+  it('does not invoke the parent of dehydrated boundary event', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let clicksOnParent = 0;
+    let clicksOnChild = 0;
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <span
+            onClick={e => {
+              // The stopPropagation is showing an example why invoking
+              // the event on only a parent might not be correct.
+              e.stopPropagation();
+              clicksOnChild++;
+            }}>
+            Hello
+          </span>
+        );
+      }
+    }
+
+    function App() {
+      return (
+        <div onClick={() => clicksOnParent++}>
+          <Suspense fallback="Loading...">
+            <Child />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We're now partially hydrated.
+    span.click();
+    expect(clicksOnChild).toBe(0);
+    expect(clicksOnParent).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(clicksOnChild).toBe(1);
+    // This will be zero due to the stopPropagation.
+    expect(clicksOnParent).toBe(0);
+
+    document.body.removeChild(container);
+  });
+
+  it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let clicks = 0;
+    let childSlotRef = React.createRef();
+
+    function Parent() {
+      return <div onClick={() => clicks++} ref={childSlotRef} />;
+    }
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return <a>Click me</a>;
+      }
+    }
+
+    function App() {
+      // The root is a Suspense boundary.
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+        </Suspense>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    let parentContainer = document.createElement('div');
+    let childContainer = document.createElement('div');
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(parentContainer);
+
+    // We're going to use a different root as a parent.
+    // This lets us detect whether an event goes through React's event system.
+    let parentRoot = ReactDOM.createRoot(parentContainer);
+    parentRoot.render(<Parent />);
+    Scheduler.unstable_flushAll();
+
+    childSlotRef.current.appendChild(childContainer);
+
+    childContainer.innerHTML = finalHTML;
+
+    let a = childContainer.getElementsByTagName('a')[0];
+
+    suspend = true;
+
+    // Hydrate asynchronously.
+    let root = ReactDOM.createRoot(childContainer, {hydrate: true});
+    root.render(<App />);
+    jest.runAllTimers();
+    Scheduler.unstable_flushAll();
+
+    // The Suspense boundary is not yet hydrated.
+    a.click();
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We're now full hydrated.
+
+    expect(clicks).toBe(1);
+
+    document.body.removeChild(parentContainer);
+  });
+
+  it('blocks only on the last continuous event (legacy system)', async () => {
+    let suspend1 = false;
+    let resolve1;
+    let promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
+    let suspend2 = false;
+    let resolve2;
+    let promise2 = new Promise(resolvePromise => (resolve2 = resolvePromise));
+
+    function First({text}) {
+      if (suspend1) {
+        throw promise1;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function Second({text}) {
+      if (suspend2) {
+        throw promise2;
+      } else {
+        return 'World';
+      }
+    }
+
+    let ops = [];
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading First...">
+            <span
+              onMouseEnter={() => ops.push('Mouse Enter First')}
+              onMouseLeave={() => ops.push('Mouse Leave First')}
+            />
+            {/* We suspend after to test what happens when we eager
+                attach the listener. */}
+            <First />
+          </Suspense>
+          <Suspense fallback="Loading Second...">
+            <span
+              onMouseEnter={() => ops.push('Mouse Enter Second')}
+              onMouseLeave={() => ops.push('Mouse Leave Second')}>
+              <Second />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let appDiv = container.getElementsByTagName('div')[0];
+    let firstSpan = appDiv.getElementsByTagName('span')[0];
+    let secondSpan = appDiv.getElementsByTagName('span')[1];
+    expect(firstSpan.textContent).toBe('');
+    expect(secondSpan.textContent).toBe('World');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend1 = true;
+    suspend2 = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    dispatchMouseEvent(appDiv, null);
+    dispatchMouseEvent(firstSpan, appDiv);
+    dispatchMouseEvent(secondSpan, firstSpan);
+
+    // Neither target is yet hydrated.
+    expect(ops).toEqual([]);
+
+    // Resolving the second promise so that rendering can complete.
+    suspend2 = false;
+    resolve2();
+    await promise2;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We've unblocked the current hover target so we should be
+    // able to replay it now.
+    expect(ops).toEqual(['Mouse Enter Second']);
+
+    // Resolving the first promise has no effect now.
+    suspend1 = false;
+    resolve1();
+    await promise1;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ops).toEqual(['Mouse Enter Second']);
+
+    document.body.removeChild(container);
+  });
+
+  it('blocks only on the last continuous event (Responder system)', async () => {
+    let suspend1 = false;
+    let resolve1;
+    let promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
+    let suspend2 = false;
+    let resolve2;
+    let promise2 = new Promise(resolvePromise => (resolve2 = resolvePromise));
+
+    function First({text}) {
+      if (suspend1) {
+        throw promise1;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function Second({text}) {
+      if (suspend2) {
+        throw promise2;
+      } else {
+        return 'World';
+      }
+    }
+
+    let ops = [];
+
+    function App() {
+      const listener1 = useHover({
+        onHoverStart() {
+          ops.push('Hover Start First');
+        },
+        onHoverEnd() {
+          ops.push('Hover End First');
+        },
+      });
+      const listener2 = useHover({
+        onHoverStart() {
+          ops.push('Hover Start Second');
+        },
+        onHoverEnd() {
+          ops.push('Hover End Second');
+        },
+      });
+      return (
+        <div>
+          <Suspense fallback="Loading First...">
+            <span DEPRECATED_flareListeners={listener1} />
+            {/* We suspend after to test what happens when we eager
+                attach the listener. */}
+            <First />
+          </Suspense>
+          <Suspense fallback="Loading Second...">
+            <span DEPRECATED_flareListeners={listener2}>
+              <Second />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    let appDiv = container.getElementsByTagName('div')[0];
+    let firstSpan = appDiv.getElementsByTagName('span')[0];
+    let secondSpan = appDiv.getElementsByTagName('span')[1];
+    expect(firstSpan.textContent).toBe('');
+    expect(secondSpan.textContent).toBe('World');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend1 = true;
+    suspend2 = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    dispatchMouseEvent(appDiv, null);
+    dispatchMouseEvent(firstSpan, appDiv);
+    dispatchMouseEvent(secondSpan, firstSpan);
+
+    // Neither target is yet hydrated.
+    expect(ops).toEqual([]);
+
+    // Resolving the second promise so that rendering can complete.
+    suspend2 = false;
+    resolve2();
+    await promise2;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // We've unblocked the current hover target so we should be
+    // able to replay it now.
+    expect(ops).toEqual(['Hover Start Second']);
+
+    // Resolving the first promise has no effect now.
+    suspend1 = false;
+    resolve1();
+    await promise1;
+
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(ops).toEqual(['Hover Start Second']);
+
+    document.body.removeChild(container);
+  });
+
+  it('finishes normal pri work before continuing to hydrate a retry', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        Scheduler.unstable_yieldValue('Child');
+        return 'Hello';
+      }
+    }
+
+    function Sibling() {
+      Scheduler.unstable_yieldValue('Sibling');
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Commit Sibling');
+      });
+      return 'World';
+    }
+
+    // Avoid rerendering the tree by hoisting it.
+    const tree = (
+      <Suspense fallback="Loading...">
+        <span ref={ref}>
+          <Child />
+        </span>
+      </Suspense>
+    );
+
+    function App({showSibling}) {
+      return (
+        <div>
+          {tree}
+          {showSibling ? <Sibling /> : null}
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App showSibling={false} />);
+    expect(Scheduler).toFlushAndYield([]);
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+
+    Scheduler.unstable_advanceTime(100);
+
+    // Before we have a chance to flush it, we'll also render an update.
+    root.render(<App showSibling={true} />);
+
+    // When we flush we expect the Normal pri render to take priority
+    // over hydration.
+    expect(Scheduler).toFlushAndYieldThrough(['Sibling', 'Commit Sibling']);
+
+    // We shouldn't have hydrated the child yet.
+    expect(ref.current).toBe(null);
+    // But we did have a chance to update the content.
+    expect(container.textContent).toBe('HelloWorld');
+
+    expect(Scheduler).toFlushAndYield(['Child']);
+
+    // Now we're hydrated.
+    expect(ref.current).not.toBe(null);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
new file mode 100644
index 0000000000000..5b78d016ad564
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -0,0 +1,491 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactDOMServer;
+let Scheduler;
+let Suspense;
+
+function dispatchMouseHoverEvent(to, from) {
+  if (!to) {
+    to = null;
+  }
+  if (!from) {
+    from = null;
+  }
+  if (from) {
+    const mouseOutEvent = document.createEvent('MouseEvents');
+    mouseOutEvent.initMouseEvent(
+      'mouseout',
+      true,
+      true,
+      window,
+      0,
+      50,
+      50,
+      50,
+      50,
+      false,
+      false,
+      false,
+      false,
+      0,
+      to,
+    );
+    from.dispatchEvent(mouseOutEvent);
+  }
+  if (to) {
+    const mouseOverEvent = document.createEvent('MouseEvents');
+    mouseOverEvent.initMouseEvent(
+      'mouseover',
+      true,
+      true,
+      window,
+      0,
+      50,
+      50,
+      50,
+      50,
+      false,
+      false,
+      false,
+      false,
+      0,
+      from,
+    );
+    to.dispatchEvent(mouseOverEvent);
+  }
+}
+
+function dispatchClickEvent(target) {
+  const mouseOutEvent = document.createEvent('MouseEvents');
+  mouseOutEvent.initMouseEvent(
+    'click',
+    true,
+    true,
+    window,
+    0,
+    50,
+    50,
+    50,
+    50,
+    false,
+    false,
+    false,
+    false,
+    0,
+    target,
+  );
+  return target.dispatchEvent(mouseOutEvent);
+}
+
+describe('ReactDOMServerSelectiveHydration', () => {
+  beforeEach(() => {
+    jest.resetModuleRegistry();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+  });
+
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  it('hydrates the target boundary synchronously during a click', async () => {
+    function Child({text}) {
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B']);
+
+    let container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    let span = container.getElementsByTagName('span')[1];
+
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    let result = dispatchClickEvent(span);
+
+    // The event should have been canceled because we called preventDefault.
+    expect(result).toBe(false);
+
+    // We rendered App, B and then invoked the event without rendering A.
+    expect(Scheduler).toHaveYielded(['App', 'B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates at higher pri if sync did not work first time', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
+
+    let container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    let spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // This click target cannot be hydrated yet because it's suspended.
+    let result = dispatchClickEvent(spanD);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    expect(result).toBe(true);
+
+    // Continuing rendering will render B next.
+    expect(Scheduler).toFlushAndYield(['B', 'C']);
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    // After the click, we should prioritize D and the Click first,
+    // and only after that render A and C.
+    expect(Scheduler).toFlushAndYield(['D', 'Clicked D', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates at higher pri for secondary discrete events', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
+
+    let container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    let spanA = container.getElementsByTagName('span')[0];
+    let spanC = container.getElementsByTagName('span')[2];
+    let spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    dispatchClickEvent(spanA);
+    dispatchClickEvent(spanC);
+    dispatchClickEvent(spanD);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    // We should prioritize hydrating A, C and D first since we clicked in
+    // them. Only after they're done will we hydrate B.
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Clicked A',
+      'C',
+      'Clicked C',
+      'D',
+      'Clicked D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates the last target as higher priority for continuous events', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Hover ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
+
+    let container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    let spanB = container.getElementsByTagName('span')[1];
+    let spanC = container.getElementsByTagName('span')[2];
+    let spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // Click D
+    dispatchMouseHoverEvent(spanD, null);
+    dispatchClickEvent(spanD);
+    // Hover over B and then C.
+    dispatchMouseHoverEvent(spanB, spanD);
+    dispatchMouseHoverEvent(spanC, spanB);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    // We should prioritize hydrating D first because we clicked it.
+    // Next we should hydrate C since that's the current hover target.
+    // Next it doesn't matter if we hydrate A or B first but as an
+    // implementation detail we're currently hydrating B first since
+    // we at one point hovered over it and we never deprioritized it.
+    expect(Scheduler).toFlushAndYield([
+      'D',
+      'Clicked D',
+      'C',
+      'Hover C',
+      'B',
+      'A',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates the last explicitly hydrated target at higher priority', async () => {
+    function Child({text}) {
+      Scheduler.unstable_yieldValue(text);
+      return <span>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C']);
+
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let spanB = container.getElementsByTagName('span')[1];
+    let spanC = container.getElementsByTagName('span')[2];
+
+    let root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // Increase priority of B and then C.
+    ReactDOM.unstable_scheduleHydration(spanB);
+    ReactDOM.unstable_scheduleHydration(spanC);
+
+    // We should prioritize hydrating C first because the last added
+    // gets highest priority followed by the next added.
+    expect(Scheduler).toFlushAndYield(['App', 'C', 'B', 'A']);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index a6a3cc37bd797..67fdc71bcc72a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -14,35 +14,41 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
-let ReactFeatureFlags;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
   jest.resetModuleRegistry();
 
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableSuspenseServerRenderer = true;
-
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
-const {resetModules, serverRender} = ReactDOMServerIntegrationUtils(
-  initModules,
-);
+const {
+  itThrowsWhenRendering,
+  resetModules,
+  serverRender,
+} = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerSuspense', () => {
   beforeEach(() => {
     resetModules();
   });
 
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
   function Text(props) {
     return <div>{props.text}</div>;
   }
@@ -98,4 +104,118 @@ describe('ReactDOMServerSuspense', () => {
       '<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
     );
   });
+
+  it('server renders a SuspenseList component and its children', async () => {
+    const example = (
+      <React.SuspenseList>
+        <React.Suspense fallback="Loading A">
+          <div>A</div>
+        </React.Suspense>
+        <React.Suspense fallback="Loading B">
+          <div>B</div>
+        </React.Suspense>
+      </React.SuspenseList>
+    );
+    const element = await serverRender(example);
+    const parent = element.parentNode;
+    const divA = parent.children[0];
+    expect(divA.tagName).toBe('DIV');
+    expect(divA.textContent).toBe('A');
+    const divB = parent.children[1];
+    expect(divB.tagName).toBe('DIV');
+    expect(divB.textContent).toBe('B');
+
+    ReactTestUtils.act(() => {
+      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
+      root.render(example);
+    });
+
+    const parent2 = element.parentNode;
+    const divA2 = parent2.children[0];
+    const divB2 = parent2.children[1];
+    expect(divA).toBe(divA2);
+    expect(divB).toBe(divB2);
+  });
+
+  itThrowsWhenRendering(
+    'a suspending component outside a Suspense node',
+    async render => {
+      await render(
+        <div>
+          <React.Suspense />
+          <AsyncText text="Children" />
+          <React.Suspense />
+        </div>,
+        1,
+      );
+    },
+    'Add a <Suspense fallback=...> component higher in the tree',
+  );
+
+  itThrowsWhenRendering(
+    'a suspending component without a Suspense above',
+    async render => {
+      await render(
+        <div>
+          <AsyncText text="Children" />
+        </div>,
+        1,
+      );
+    },
+    'Add a <Suspense fallback=...> component higher in the tree',
+  );
+
+  it('does not get confused by throwing null', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw null;
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe(null);
+  });
+
+  it('does not get confused by throwing undefined', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw undefined;
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe(undefined);
+  });
+
+  it('does not get confused by throwing a primitive', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw 'foo';
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe('foo');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.internal.js
index aa7742cf1e04d..fdf66002c008c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.internal.js
@@ -27,7 +27,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     ReactDOM.render(<div style={{font: 'foo', fontStyle: 'bar'}} />, container);
     expect(() =>
       ReactDOM.render(<div style={{font: 'foo'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender (fontStyle) ' +
         'when a conflicting property is set (font) can lead to styling ' +
         "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -45,7 +45,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
         <div style={{font: 'qux', fontStyle: 'baz'}} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Updating a style property during rerender (font) when ' +
         'a conflicting property is set (fontStyle) can lead to styling ' +
         "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -55,7 +55,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     );
     expect(() =>
       ReactDOM.render(<div style={{fontStyle: 'baz'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender (font) when ' +
         'a conflicting property is set (fontStyle) can lead to styling ' +
         "bugs. To avoid this, don't mix shorthand and non-shorthand " +
@@ -72,7 +72,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     );
     expect(() =>
       ReactDOM.render(<div style={{background: 'yellow'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender ' +
         '(backgroundPosition) when a conflicting property is set ' +
         "(background) can lead to styling bugs. To avoid this, don't mix " +
@@ -91,7 +91,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     );
     expect(() =>
       ReactDOM.render(<div style={{backgroundPosition: 'top'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender (background) ' +
         'when a conflicting property is set (backgroundPosition) can lead ' +
         "to styling bugs. To avoid this, don't mix shorthand and " +
@@ -107,7 +107,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     );
     expect(() =>
       ReactDOM.render(<div style={{borderLeft: '1px solid red'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender (borderStyle) ' +
         'when a conflicting property is set (borderLeft) can lead to ' +
         "styling bugs. To avoid this, don't mix shorthand and " +
@@ -120,7 +120,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
         <div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Updating a style property during rerender (borderStyle) ' +
         'when a conflicting property is set (borderLeft) can lead to ' +
         "styling bugs. To avoid this, don't mix shorthand and " +
@@ -135,7 +135,7 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     );
     expect(() =>
       ReactDOM.render(<div style={{borderStyle: 'dotted'}} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Removing a style property during rerender (borderLeft) ' +
         'when a conflicting property is set (borderStyle) can lead to ' +
         "styling bugs. To avoid this, don't mix shorthand and " +
diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
index 45fec880410c4..94bd63ff026cd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
@@ -33,13 +33,16 @@ describe('ReactDOMSuspensePlaceholder', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
 
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      return new Promise((resolve, reject) =>
-        setTimeout(() => {
-          resolve(text);
-        }, ms),
-      );
-    }, ([text, ms]) => text);
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            resolve(text);
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
   });
 
   afterEach(() => {
@@ -83,25 +86,25 @@ describe('ReactDOMSuspensePlaceholder', () => {
           <div ref={divs[1]}>
             <AsyncText ms={500} text="B" />
           </div>
-          <div style={{display: 'block'}} ref={divs[2]}>
+          <div style={{display: 'inline'}} ref={divs[2]}>
             <Text text="C" />
           </div>
         </Suspense>
       );
     }
     ReactDOM.render(<App />, container);
-    expect(divs[0].current.style.display).toEqual('none');
-    expect(divs[1].current.style.display).toEqual('none');
-    expect(divs[2].current.style.display).toEqual('none');
+    expect(window.getComputedStyle(divs[0].current).display).toEqual('none');
+    expect(window.getComputedStyle(divs[1].current).display).toEqual('none');
+    expect(window.getComputedStyle(divs[2].current).display).toEqual('none');
 
     await advanceTimers(500);
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
 
-    expect(divs[0].current.style.display).toEqual('');
-    expect(divs[1].current.style.display).toEqual('');
+    expect(window.getComputedStyle(divs[0].current).display).toEqual('block');
+    expect(window.getComputedStyle(divs[1].current).display).toEqual('block');
     // This div's display was set with a prop.
-    expect(divs[2].current.style.display).toEqual('block');
+    expect(window.getComputedStyle(divs[2].current).display).toEqual('inline');
   });
 
   it('hides and unhides timed out text nodes', async () => {
@@ -119,7 +122,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
 
     await advanceTimers(500);
 
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
 
     expect(container.textContent).toEqual('ABC');
   });
@@ -156,17 +159,19 @@ describe('ReactDOMSuspensePlaceholder', () => {
         ReactDOM.render(<App />, container);
       });
       expect(container.innerHTML).toEqual(
-        '<span style="display: none;">Sibling</span><span style="display: none;"></span>Loading...',
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
       );
 
       act(() => setIsVisible(true));
       expect(container.innerHTML).toEqual(
-        '<span style="display: none;">Sibling</span><span style="display: none;"></span>Loading...',
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
       );
 
       await advanceTimers(500);
 
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
 
       expect(container.innerHTML).toEqual(
         '<span style="display: inline;">Sibling</span><span style="">Async</span>',
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 2dc47a6df1a44..92d1142f5b186 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -19,6 +19,8 @@ describe('ReactDOMTextarea', () => {
 
   let renderTextarea;
 
+  const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
   beforeEach(() => {
     jest.resetModules();
 
@@ -126,6 +128,33 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toEqual('gorilla');
   });
 
+  it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', () => {
+    const container = document.createElement('div');
+
+    let counter = 0;
+    const originalCreateElement = document.createElement;
+    spyOnDevAndProd(document, 'createElement').and.callFake(function(type) {
+      const el = originalCreateElement.apply(this, arguments);
+      let value = '';
+      if (type === 'textarea') {
+        Object.defineProperty(el, 'value', {
+          get: function() {
+            return value;
+          },
+          set: function(val) {
+            value = '' + val;
+            counter++;
+          },
+        });
+      }
+      return el;
+    });
+
+    ReactDOM.render(<textarea value="" readOnly={true} />, container);
+
+    expect(counter).toEqual(0);
+  });
+
   it('should render defaultValue for SSR', () => {
     const markup = ReactDOMServer.renderToString(<textarea defaultValue="1" />);
     const div = document.createElement('div');
@@ -260,23 +289,58 @@ describe('ReactDOMTextarea', () => {
     }
   });
 
-  it('should treat children like `defaultValue`', () => {
-    const container = document.createElement('div');
-    let stub = <textarea>giraffe</textarea>;
-    let node;
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore children content', () => {
+      const container = document.createElement('div');
+      let stub = <textarea>giraffe</textarea>;
+      let node;
 
-    expect(() => {
-      node = renderTextarea(stub, container);
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
+      expect(() => {
+        node = renderTextarea(stub, container);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('');
+      // Changing children should do nothing, it functions like `defaultValue`.
+      stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
+      expect(node.value).toEqual('');
+    });
+  }
 
-    expect(node.value).toBe('giraffe');
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should receive defaultValue and still ignore children content', () => {
+      let node;
 
-    // Changing children should do nothing, it functions like `defaultValue`.
-    stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
-    expect(node.value).toEqual('giraffe');
-  });
+      expect(() => {
+        node = renderTextarea(
+          <textarea defaultValue="dragon">monkey</textarea>,
+        );
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('dragon');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should treat children like `defaultValue`', () => {
+      const container = document.createElement('div');
+      let stub = <textarea>giraffe</textarea>;
+      let node;
+
+      expect(() => {
+        node = renderTextarea(stub, container);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+
+      expect(node.value).toBe('giraffe');
+
+      // Changing children should do nothing, it functions like `defaultValue`.
+      stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
+      expect(node.value).toEqual('giraffe');
+    });
+  }
 
   it('should keep value when switching to uncontrolled element if not changed', () => {
     const container = document.createElement('div');
@@ -315,71 +379,120 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toEqual('puppies');
   });
 
-  it('should allow numbers as children', () => {
-    let node;
-    expect(() => {
-      node = renderTextarea(<textarea>{17}</textarea>);
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
-    expect(node.value).toBe('17');
-  });
-
-  it('should allow booleans as children', () => {
-    let node;
-    expect(() => {
-      node = renderTextarea(<textarea>{false}</textarea>);
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
-    expect(node.value).toBe('false');
-  });
-
-  it('should allow objects as children', () => {
-    const obj = {
-      toString: function() {
-        return 'sharkswithlasers';
-      },
-    };
-    let node;
-    expect(() => {
-      node = renderTextarea(<textarea>{obj}</textarea>);
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
-    expect(node.value).toBe('sharkswithlasers');
-  });
-
-  it('should throw with multiple or invalid children', () => {
-    expect(() => {
-      expect(() =>
-        ReactTestUtils.renderIntoDocument(
-          <textarea>
-            {'hello'}
-            {'there'}
-          </textarea>,
-        ),
-      ).toThrow('<textarea> can only have at most one child');
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore numbers as children', () => {
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{17}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow numbers as children', () => {
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{17}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('17');
+    });
+  }
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore booleans as children', () => {
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{false}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow booleans as children', () => {
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{false}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('false');
+    });
+  }
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore objects as children', () => {
+      const obj = {
+        toString: function() {
+          return 'sharkswithlasers';
+        },
+      };
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{obj}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow objects as children', () => {
+      const obj = {
+        toString: function() {
+          return 'sharkswithlasers';
+        },
+      };
+      let node;
+      expect(() => {
+        node = renderTextarea(<textarea>{obj}</textarea>);
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+      expect(node.value).toBe('sharkswithlasers');
+    });
+  }
 
-    let node;
-    expect(() => {
-      expect(
-        () =>
-          (node = renderTextarea(
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should throw with multiple or invalid children', () => {
+      expect(() => {
+        expect(() =>
+          ReactTestUtils.renderIntoDocument(
             <textarea>
-              <strong />
+              {'hello'}
+              {'there'}
             </textarea>,
-          )),
-      ).not.toThrow();
-    }).toWarnDev(
-      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-    );
+          ),
+        ).toThrow('<textarea> can only have at most one child');
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
 
-    expect(node.value).toBe('[object Object]');
-  });
+      let node;
+      expect(() => {
+        expect(
+          () =>
+            (node = renderTextarea(
+              <textarea>
+                <strong />
+              </textarea>,
+            )),
+        ).not.toThrow();
+      }).toErrorDev(
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      );
+
+      expect(node.value).toBe('[object Object]');
+    });
+  }
 
   it('should unmount', () => {
     const container = document.createElement('div');
@@ -390,7 +503,7 @@ describe('ReactDOMTextarea', () => {
   it('should warn if value is null', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(<textarea value={null} />),
-    ).toWarnDev(
+    ).toErrorDev(
       '`value` prop on `textarea` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` ' +
         'for uncontrolled components.',
@@ -406,7 +519,7 @@ describe('ReactDOMTextarea', () => {
     );
     expect(() =>
       ReactTestUtils.renderIntoDocument(<InvalidComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'InvalidComponent contains a textarea with both value and defaultValue props. ' +
         'Textarea elements must be either controlled or uncontrolled ' +
         '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -474,7 +587,7 @@ describe('ReactDOMTextarea', () => {
           <textarea value={Symbol('foobar')} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -487,7 +600,7 @@ describe('ReactDOMTextarea', () => {
           <textarea onChange={() => {}}>{Symbol('foo')}</textarea>,
           container,
         ),
-      ).toWarnDev('Use the `defaultValue` or `value` props');
+      ).toErrorDev('Use the `defaultValue` or `value` props');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -501,7 +614,7 @@ describe('ReactDOMTextarea', () => {
           <textarea value={Symbol('foo')} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -535,7 +648,7 @@ describe('ReactDOMTextarea', () => {
           <textarea value={() => {}} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -548,7 +661,7 @@ describe('ReactDOMTextarea', () => {
           <textarea onChange={() => {}}>{() => {}}</textarea>,
           container,
         ),
-      ).toWarnDev('Use the `defaultValue` or `value` props');
+      ).toErrorDev('Use the `defaultValue` or `value` props');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
@@ -562,7 +675,7 @@ describe('ReactDOMTextarea', () => {
           <textarea value={() => {}} onChange={() => {}} />,
           container,
         ),
-      ).toWarnDev('Invalid value for prop `value`');
+      ).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
diff --git a/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js b/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
index 4a8eb06faace6..5ff530b10a858 100644
--- a/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
@@ -14,6 +14,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactTestUtils;
 
 function initModules() {
   // Reset warning cache.
@@ -21,11 +22,13 @@ function initModules() {
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
+  ReactTestUtils = require('react-dom/test-utils');
 
   // Make them available to the helpers.
   return {
     ReactDOM,
     ReactDOMServer,
+    ReactTestUtils,
   };
 }
 
diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
new file mode 100644
index 0000000000000..3a8ce27ce7dd7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
@@ -0,0 +1,112 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+
+describe('ReactDeprecationWarnings', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
+    ReactFeatureFlags.warnAboutStringRefs = true;
+  });
+
+  afterEach(() => {
+    ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = false;
+    ReactFeatureFlags.warnAboutStringRefs = false;
+  });
+
+  it('should warn when given defaultProps', () => {
+    function FunctionalComponent(props) {
+      return null;
+    }
+
+    FunctionalComponent.defaultProps = {
+      testProp: true,
+    };
+
+    ReactNoop.render(<FunctionalComponent />);
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+      'Warning: FunctionalComponent: Support for defaultProps ' +
+        'will be removed from function components in a future major ' +
+        'release. Use JavaScript default parameters instead.',
+    );
+  });
+
+  it('should warn when given string refs', () => {
+    class RefComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    class Component extends React.Component {
+      render() {
+        return <RefComponent ref="refComponent" />;
+      }
+    }
+
+    ReactNoop.render(<Component />);
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+      'Warning: Component "Component" contains the string ref "refComponent". ' +
+        'Support for string refs will be removed in a future major release. ' +
+        'We recommend using useRef() or createRef() instead. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-string-ref' +
+        '\n    in Component (at **)',
+    );
+  });
+
+  it('should not warn when owner and self are the same for string refs', () => {
+    ReactFeatureFlags.warnAboutStringRefs = false;
+
+    class RefComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    class Component extends React.Component {
+      render() {
+        return <RefComponent ref="refComponent" __self={this} />;
+      }
+    }
+    ReactNoop.renderLegacySyncRoot(<Component />);
+    expect(Scheduler).toFlushWithoutYielding();
+  });
+
+  it('should warn when owner and self are different for string refs', () => {
+    class RefComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    class Component extends React.Component {
+      render() {
+        return <RefComponent ref="refComponent" __self={{}} />;
+      }
+    }
+
+    ReactNoop.render(<Component />);
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
+      'Warning: Component "Component" contains the string ref "refComponent". ' +
+        'Support for string refs will be removed in a future major release. ' +
+        'This case cannot be automatically converted to an arrow function. ' +
+        'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-string-ref',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 3b19a87ecbf87..057a0e4ae85f2 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -12,8 +12,8 @@
 let PropTypes;
 let React;
 let ReactDOM;
+let act;
 let ReactFeatureFlags;
-let Scheduler;
 
 describe('ReactErrorBoundaries', () => {
   let log;
@@ -45,7 +45,7 @@ describe('ReactErrorBoundaries', () => {
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
     ReactDOM = require('react-dom');
     React = require('react');
-    Scheduler = require('scheduler');
+    act = require('react-dom/test-utils').act;
 
     log = [];
 
@@ -644,6 +644,39 @@ describe('ReactErrorBoundaries', () => {
     expect(container3.firstChild).toBe(null);
   });
 
+  it('logs a single error when using error boundary', () => {
+    const container = document.createElement('div');
+    expect(() =>
+      ReactDOM.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+        container,
+      ),
+    ).toErrorDev('The above error occurred in the <BrokenRender> component:', {
+      logAllErrors: true,
+    });
+
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Catch and render an error message
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
   it('renders an error state if child throws in render', () => {
     const container = document.createElement('div');
     ReactDOM.render(
@@ -775,14 +808,13 @@ describe('ReactErrorBoundaries', () => {
         </ErrorBoundary>,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
         'returns a class instance. ' +
         'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
@@ -1835,25 +1867,26 @@ describe('ReactErrorBoundaries', () => {
 
   it('catches errors in useEffect', () => {
     const container = document.createElement('div');
-    ReactDOM.render(
-      <ErrorBoundary>
-        <BrokenUseEffect>Initial value</BrokenUseEffect>
-      </ErrorBoundary>,
-      container,
-    );
-    expect(log).toEqual([
-      'ErrorBoundary constructor',
-      'ErrorBoundary componentWillMount',
-      'ErrorBoundary render success',
-      'BrokenUseEffect render',
-      'ErrorBoundary componentDidMount',
-    ]);
-
-    expect(container.firstChild.textContent).toBe('Initial value');
-    log.length = 0;
-
-    // Flush passive effects and handle the error
-    Scheduler.flushAll();
+    act(() => {
+      ReactDOM.render(
+        <ErrorBoundary>
+          <BrokenUseEffect>Initial value</BrokenUseEffect>
+        </ErrorBoundary>,
+        container,
+      );
+      expect(log).toEqual([
+        'ErrorBoundary constructor',
+        'ErrorBoundary componentWillMount',
+        'ErrorBoundary render success',
+        'BrokenUseEffect render',
+        'ErrorBoundary componentDidMount',
+      ]);
+
+      expect(container.firstChild.textContent).toBe('Initial value');
+      log.length = 0;
+    });
+
+    // verify flushed passive effects and handle the error
     expect(log).toEqual([
       'BrokenUseEffect useEffect [!]',
       // Handle the error
@@ -2039,7 +2072,7 @@ describe('ReactErrorBoundaries', () => {
 
     try {
       let container = document.createElement('div');
-      expect(() => ReactDOM.render(<X />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<X />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
           '(for composite components) but got: null.',
@@ -2049,7 +2082,7 @@ describe('ReactErrorBoundaries', () => {
     }
     try {
       let container = document.createElement('div');
-      expect(() => ReactDOM.render(<Y />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Y />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
           '(for composite components) but got: undefined.',
@@ -2207,10 +2240,9 @@ describe('ReactErrorBoundaries', () => {
         </InvalidErrorBoundary>,
         container,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'InvalidErrorBoundary: Error boundaries should implement getDerivedStateFromError(). ' +
         'In that method, return a state update to display an error message or fallback UI.',
-      {withoutStack: true},
     );
     expect(container.textContent).toBe('');
   });
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
index f6359e20190b0..2b33321358ffd 100644
--- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -108,10 +108,9 @@ describe('ReactFunctionComponent', () => {
 
     expect(() =>
       ReactDOM.render(<FunctionComponentWithChildContext />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'FunctionComponentWithChildContext: Function ' +
         'components do not support getDerivedStateFromProps.',
-      {withoutStack: true},
     );
   });
 
@@ -131,10 +130,9 @@ describe('ReactFunctionComponent', () => {
         <FunctionComponentWithChildContext name="A" />,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'FunctionComponentWithChildContext(...): childContextTypes cannot ' +
         'be defined on a function component.',
-      {withoutStack: true},
     );
   });
 
@@ -165,11 +163,11 @@ describe('ReactFunctionComponent', () => {
         : // It happens because we don't save _owner in production for
           // function components.
           'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://fb.me/react-refs-must-have-owner for more information.',
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://fb.me/react-refs-must-have-owner for more information.',
     );
   });
 
@@ -190,7 +188,7 @@ describe('ReactFunctionComponent', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<ParentUsingStringRef />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Function components cannot be given refs. ' +
         'Attempts to access this ref will fail. ' +
         'Did you mean to use React.forwardRef()?\n\n' +
@@ -228,7 +226,7 @@ describe('ReactFunctionComponent', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<ParentUsingFunctionRef />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Function components cannot be given refs. ' +
         'Attempts to access this ref will fail. ' +
         'Did you mean to use React.forwardRef()?\n\n' +
@@ -259,7 +257,7 @@ describe('ReactFunctionComponent', () => {
       instance1 = ReactTestUtils.renderIntoDocument(
         <AnonymousParentUsingJSX />,
       );
-    }).toWarnDev('Warning: Function components cannot be given refs.');
+    }).toErrorDev('Warning: Function components cannot be given refs.');
     // Should be deduped (offending element is on the same line):
     instance1.forceUpdate();
     // Should also be deduped (offending element is on the same line):
@@ -283,13 +281,13 @@ describe('ReactFunctionComponent', () => {
       instance2 = ReactTestUtils.renderIntoDocument(
         <AnonymousParentNotUsingJSX />,
       );
-    }).toWarnDev('Warning: Function components cannot be given refs.');
+    }).toErrorDev('Warning: Function components cannot be given refs.');
     // Should be deduped (same internal instance, no additional warnings)
     instance2.forceUpdate();
     // Could not be deduped (different internal instance):
     expect(() =>
       ReactTestUtils.renderIntoDocument(<AnonymousParentNotUsingJSX />),
-    ).toWarnDev('Warning: Function components cannot be given refs.');
+    ).toErrorDev('Warning: Function components cannot be given refs.');
 
     // When owner doesn't use JSX, but is named, we warn once per owner name
     class NamedParentNotUsingJSX extends React.Component {
@@ -303,7 +301,7 @@ describe('ReactFunctionComponent', () => {
     let instance3;
     expect(() => {
       instance3 = ReactTestUtils.renderIntoDocument(<NamedParentNotUsingJSX />);
-    }).toWarnDev('Warning: Function components cannot be given refs.');
+    }).toErrorDev('Warning: Function components cannot be given refs.');
     // Should be deduped (same owner name, no additional warnings):
     instance3.forceUpdate();
     // Should also be deduped (same owner name, no additional warnings):
@@ -334,7 +332,7 @@ describe('ReactFunctionComponent', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Parent />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Parent />)).toErrorDev(
       'Warning: Function components cannot be given refs. ' +
         'Attempts to access this ref will fail. ' +
         'Did you mean to use React.forwardRef()?\n\n' +
@@ -359,12 +357,14 @@ describe('ReactFunctionComponent', () => {
       return <div>{[<span />]}</div>;
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toErrorDev(
       'Each child in a list should have a unique "key" prop.\n\n' +
         'Check the render method of `Child`.',
     );
   });
 
+  // TODO: change this test after we deprecate default props support
+  // for function components
   it('should support default props and prop types', () => {
     function Child(props) {
       return <div>{props.test}</div>;
@@ -372,7 +372,7 @@ describe('ReactFunctionComponent', () => {
     Child.defaultProps = {test: 2};
     Child.propTypes = {test: PropTypes.string};
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toErrorDev(
       'Warning: Failed prop type: Invalid prop `test` of type `number` ' +
         'supplied to `Child`, expected `string`.\n' +
         '    in Child (at **)',
diff --git a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
new file mode 100644
index 0000000000000..28e1b7d4f85e4
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
@@ -0,0 +1,204 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactFeatureFlags;
+
+describe('ReactLegacyContextDisabled', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.disableLegacyContext = true;
+  });
+
+  function formatValue(val) {
+    if (val === null) {
+      return 'null';
+    }
+    if (val === undefined) {
+      return 'undefined';
+    }
+    if (typeof val === 'string') {
+      return val;
+    }
+    return JSON.stringify(val);
+  }
+
+  it('warns for legacy context', () => {
+    class LegacyProvider extends React.Component {
+      static childContextTypes = {
+        foo() {},
+      };
+      getChildContext() {
+        return {foo: 10};
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    let lifecycleContextLog = [];
+    class LegacyClsConsumer extends React.Component {
+      static contextTypes = {
+        foo() {},
+      };
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+        return true;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      render() {
+        return formatValue(this.context);
+      }
+    }
+
+    function LegacyFnConsumer(props, context) {
+      return formatValue(context);
+    }
+    LegacyFnConsumer.contextTypes = {foo() {}};
+
+    function RegularFn(props, context) {
+      return formatValue(context);
+    }
+
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(
+        <LegacyProvider>
+          <span>
+            <LegacyClsConsumer />
+            <LegacyFnConsumer />
+            <RegularFn />
+          </span>
+        </LegacyProvider>,
+        container,
+      );
+    }).toErrorDev([
+      'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' +
+        'Use React.createContext() instead.',
+      'LegacyClsConsumer uses the legacy contextTypes API which is no longer supported. ' +
+        'Use React.createContext() with static contextType instead.',
+      'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' +
+        'Use React.createContext() with React.useContext() instead.',
+    ]);
+    expect(container.textContent).toBe('{}undefinedundefined');
+    expect(lifecycleContextLog).toEqual([]);
+
+    // Test update path.
+    ReactDOM.render(
+      <LegacyProvider>
+        <span>
+          <LegacyClsConsumer />
+          <LegacyFnConsumer />
+          <RegularFn />
+        </span>
+      </LegacyProvider>,
+      container,
+    );
+    expect(container.textContent).toBe('{}undefinedundefined');
+    expect(lifecycleContextLog).toEqual([{}, {}, {}]);
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  it('renders a tree with modern context', () => {
+    let Ctx = React.createContext();
+
+    class Provider extends React.Component {
+      render() {
+        return (
+          <Ctx.Provider value={this.props.value}>
+            {this.props.children}
+          </Ctx.Provider>
+        );
+      }
+    }
+
+    class RenderPropConsumer extends React.Component {
+      render() {
+        return <Ctx.Consumer>{value => formatValue(value)}</Ctx.Consumer>;
+      }
+    }
+
+    let lifecycleContextLog = [];
+    class ContextTypeConsumer extends React.Component {
+      static contextType = Ctx;
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+        return true;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        lifecycleContextLog.push(nextContext);
+      }
+      render() {
+        return formatValue(this.context);
+      }
+    }
+
+    function FnConsumer() {
+      return formatValue(React.useContext(Ctx));
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <Provider value="a">
+        <span>
+          <RenderPropConsumer />
+          <ContextTypeConsumer />
+          <FnConsumer />
+        </span>
+      </Provider>,
+      container,
+    );
+    expect(container.textContent).toBe('aaa');
+    expect(lifecycleContextLog).toEqual([]);
+
+    // Test update path
+    ReactDOM.render(
+      <Provider value="a">
+        <span>
+          <RenderPropConsumer />
+          <ContextTypeConsumer />
+          <FnConsumer />
+        </span>
+      </Provider>,
+      container,
+    );
+    expect(container.textContent).toBe('aaa');
+    expect(lifecycleContextLog).toEqual(['a', 'a', 'a']);
+    lifecycleContextLog.length = 0;
+
+    ReactDOM.render(
+      <Provider value="b">
+        <span>
+          <RenderPropConsumer />
+          <ContextTypeConsumer />
+          <FnConsumer />
+        </span>
+      </Provider>,
+      container,
+    );
+    expect(container.textContent).toBe('bbb');
+    expect(lifecycleContextLog).toEqual(['b', 'b']); // sCU skipped due to changed context value.
+    ReactDOM.unmountComponentAtNode(container);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
index 234558172fe7e..1dff2312b478a 100644
--- a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
@@ -30,6 +30,7 @@ describe('ReactLegacyErrorBoundaries', () => {
   let BrokenComponentDidMountErrorBoundary;
   let BrokenRender;
   let ErrorBoundary;
+  let BothErrorBoundaries;
   let ErrorMessage;
   let NoopErrorBoundary;
   let RetryErrorBoundary;
@@ -486,6 +487,57 @@ describe('ReactLegacyErrorBoundaries', () => {
       },
     };
 
+    BothErrorBoundaries = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        log.push('BothErrorBoundaries constructor');
+      }
+
+      static getDerivedStateFromError(error) {
+        log.push('BothErrorBoundaries static getDerivedStateFromError');
+        return {error};
+      }
+
+      render() {
+        if (this.state.error) {
+          log.push('BothErrorBoundaries render error');
+          return <div>Caught an error: {this.state.error.message}.</div>;
+        }
+        log.push('BothErrorBoundaries render success');
+        return <div>{this.props.children}</div>;
+      }
+
+      componentDidCatch(error) {
+        log.push('BothErrorBoundaries componentDidCatch');
+        this.setState({error});
+      }
+
+      UNSAFE_componentWillMount() {
+        log.push('BothErrorBoundaries componentWillMount');
+      }
+
+      componentDidMount() {
+        log.push('BothErrorBoundaries componentDidMount');
+      }
+
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BothErrorBoundaries componentWillReceiveProps');
+      }
+
+      UNSAFE_componentWillUpdate() {
+        log.push('BothErrorBoundaries componentWillUpdate');
+      }
+
+      componentDidUpdate() {
+        log.push('BothErrorBoundaries componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('BothErrorBoundaries componentWillUnmount');
+      }
+    };
+
     RetryErrorBoundary = class extends React.Component {
       constructor(props) {
         super(props);
@@ -614,6 +666,45 @@ describe('ReactLegacyErrorBoundaries', () => {
     expect(container3.firstChild).toBe(null);
   });
 
+  it('logs a single error using both error boundaries', () => {
+    const container = document.createElement('div');
+    expect(() =>
+      ReactDOM.render(
+        <BothErrorBoundaries>
+          <BrokenRender />
+        </BothErrorBoundaries>,
+        container,
+      ),
+    ).toErrorDev('The above error occurred in the <BrokenRender> component', {
+      logAllErrors: true,
+    });
+
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'BothErrorBoundaries constructor',
+      'BothErrorBoundaries componentWillMount',
+      'BothErrorBoundaries render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Both getDerivedStateFromError and componentDidCatch should be called
+      'BothErrorBoundaries static getDerivedStateFromError',
+      'BothErrorBoundaries componentWillMount',
+      'BothErrorBoundaries render error',
+      // Fiber mounts with null children before capturing error
+      'BothErrorBoundaries componentDidMount',
+      // Catch and render an error message
+      'BothErrorBoundaries componentDidCatch',
+      'BothErrorBoundaries componentWillUpdate',
+      'BothErrorBoundaries render error',
+      'BothErrorBoundaries componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['BothErrorBoundaries componentWillUnmount']);
+  });
+
   it('renders an error state if child throws in render', () => {
     const container = document.createElement('div');
     ReactDOM.render(
@@ -749,14 +840,13 @@ describe('ReactLegacyErrorBoundaries', () => {
         </ErrorBoundary>,
         container,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
         'returns a class instance. ' +
         'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
   });
@@ -1989,7 +2079,7 @@ describe('ReactLegacyErrorBoundaries', () => {
 
     try {
       let container = document.createElement('div');
-      expect(() => ReactDOM.render(<X />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<X />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
           '(for composite components) but got: null.',
@@ -1999,7 +2089,7 @@ describe('ReactLegacyErrorBoundaries', () => {
     }
     try {
       let container = document.createElement('div');
-      expect(() => ReactDOM.render(<Y />, container)).toWarnDev(
+      expect(() => ReactDOM.render(<Y />, container)).toErrorDev(
         'React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function ' +
           '(for composite components) but got: undefined.',
@@ -2024,9 +2114,8 @@ describe('ReactLegacyErrorBoundaries', () => {
         </div>,
         container,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'ErrorBoundary: Error boundaries should implement getDerivedStateFromError()',
-      {withoutStack: true},
     );
     expect(container.firstChild.textContent).toBe('Sibling');
     expect(log).toEqual([
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index e99db093d5ac6..8d1b03cb4b4fd 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -59,7 +59,9 @@ describe('ReactMount', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(Component)).toWarnDev(
+    expect(() =>
+      ReactTestUtils.renderIntoDocument(Component),
+    ).toErrorDev(
       'Functions are not valid as a React child. ' +
         'This may happen if you return a Component instead of <Component /> from render. ' +
         'Or maybe you meant to call this function rather than return it.',
@@ -125,7 +127,9 @@ describe('ReactMount', () => {
     const container = document.createElement('container');
     container.innerHTML = ReactDOMServer.renderToString(<div />) + ' ';
 
-    expect(() => ReactDOM.hydrate(<div />, container)).toWarnDev(
+    expect(() =>
+      ReactDOM.hydrate(<div />, container),
+    ).toErrorDev(
       'Did not expect server HTML to contain the text node " " in <container>.',
       {withoutStack: true},
     );
@@ -135,9 +139,8 @@ describe('ReactMount', () => {
     const container = document.createElement('container');
     container.innerHTML = ' ' + ReactDOMServer.renderToString(<div />);
 
-    expect(() => ReactDOM.hydrate(<div />, container)).toWarnDev(
+    expect(() => ReactDOM.hydrate(<div />, container)).toErrorDev(
       'Did not expect server HTML to contain the text node " " in <container>.',
-      {withoutStack: true},
     );
   });
 
@@ -154,7 +157,7 @@ describe('ReactMount', () => {
 
     expect(() =>
       ReactDOM.render(<div />, iFrame.contentDocument.body),
-    ).toWarnDev(
+    ).toErrorDev(
       'Rendering components directly into document.body is discouraged',
       {withoutStack: true},
     );
@@ -172,10 +175,9 @@ describe('ReactMount', () => {
         <div>This markup contains an nbsp entity: &nbsp; client text</div>,
         div,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Server: "This markup contains an nbsp entity:   server text" ' +
         'Client: "This markup contains an nbsp entity:   client text"',
-      {withoutStack: true},
     );
   });
 
@@ -197,7 +199,9 @@ describe('ReactMount', () => {
     // Test that blasting away children throws a warning
     const rootNode = container.firstChild;
 
-    expect(() => ReactDOM.render(<span />, rootNode)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(<span />, rootNode),
+    ).toErrorDev(
       'Warning: render(...): Replacing React-rendered children with a new ' +
         'root component. If you intended to update the children of this node, ' +
         'you should instead have the existing children update their state and ' +
@@ -225,7 +229,9 @@ describe('ReactMount', () => {
     // Make sure ReactDOM and ReactDOMOther are different copies
     expect(ReactDOM).not.toEqual(ReactDOMOther);
 
-    expect(() => ReactDOMOther.unmountComponentAtNode(container)).toWarnDev(
+    expect(() =>
+      ReactDOMOther.unmountComponentAtNode(container),
+    ).toErrorDev(
       "Warning: unmountComponentAtNode(): The node you're attempting to unmount " +
         'was rendered by another copy of React.',
       {withoutStack: true},
diff --git a/packages/react-dom/src/__tests__/ReactMountDestruction-test.js b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js
index b4db66668e420..ed65c4cbfa7eb 100644
--- a/packages/react-dom/src/__tests__/ReactMountDestruction-test.js
+++ b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js
@@ -50,7 +50,9 @@ describe('ReactMount', () => {
 
     // Test that unmounting at a root node gives a helpful warning
     const rootDiv = mainContainerDiv.firstChild;
-    expect(() => ReactDOM.unmountComponentAtNode(rootDiv)).toWarnDev(
+    expect(() =>
+      ReactDOM.unmountComponentAtNode(rootDiv),
+    ).toErrorDev(
       "Warning: unmountComponentAtNode(): The node you're attempting to " +
         'unmount was rendered by React and is not a top-level container. You ' +
         'may have accidentally passed in a React root node instead of its ' +
@@ -73,7 +75,9 @@ describe('ReactMount', () => {
 
     // Test that unmounting at a non-root node gives a different warning
     const nonRootDiv = mainContainerDiv.firstChild.firstChild;
-    expect(() => ReactDOM.unmountComponentAtNode(nonRootDiv)).toWarnDev(
+    expect(() =>
+      ReactDOM.unmountComponentAtNode(nonRootDiv),
+    ).toErrorDev(
       "Warning: unmountComponentAtNode(): The node you're attempting to " +
         'unmount was rendered by React and is not a top-level container. ' +
         'Instead, have the parent component update its state and rerender in ' +
diff --git a/packages/react-dom/src/__tests__/ReactMultiChild-test.js b/packages/react-dom/src/__tests__/ReactMultiChild-test.js
index ac6784ec8a6aa..6eb0199be9c8e 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChild-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChild-test.js
@@ -204,7 +204,7 @@ describe('ReactMultiChild', () => {
           <Parent>{[<div key="1" />, <div key="1" />]}</Parent>,
           container,
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Encountered two children with the same key, `1`. ' +
           'Keys should be unique so that components maintain their identity ' +
           'across updates. Non-unique keys may cause children to be ' +
@@ -264,7 +264,7 @@ describe('ReactMultiChild', () => {
           <Parent>{createIterable([<div key="1" />, <div key="1" />])}</Parent>,
           container,
         ),
-      ).toWarnDev(
+      ).toErrorDev(
         'Encountered two children with the same key, `1`. ' +
           'Keys should be unique so that components maintain their identity ' +
           'across updates. Non-unique keys may cause children to be ' +
@@ -281,11 +281,20 @@ describe('ReactMultiChild', () => {
   it('should warn for using maps as children with owner info', () => {
     class Parent extends React.Component {
       render() {
-        return <div>{new Map([['foo', 0], ['bar', 1]])}</div>;
+        return (
+          <div>
+            {
+              new Map([
+                ['foo', 0],
+                ['bar', 1],
+              ])
+            }
+          </div>
+        );
       }
     }
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Parent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
       'Warning: Using Maps as children is unsupported and will likely yield ' +
         'unexpected results. Convert it to a sequence/iterable of keyed ' +
         'ReactElements instead.\n' +
@@ -296,14 +305,14 @@ describe('ReactMultiChild', () => {
 
   it('should warn for using generators as children', () => {
     function* Foo() {
-      yield <h1 key="1">Hello</h1>;
-      yield <h1 key="2">World</h1>;
+      yield (<h1 key="1">Hello</h1>);
+      yield (<h1 key="2">World</h1>);
     }
 
     const div = document.createElement('div');
     expect(() => {
       ReactDOM.render(<Foo />, div);
-    }).toWarnDev(
+    }).toErrorDev(
       'Using Generators as children is unsupported and will likely yield ' +
         'unexpected results because enumerating a generator mutates it. You may ' +
         'convert it to an array with `Array.from()` or the `[...spread]` operator ' +
@@ -318,8 +327,8 @@ describe('ReactMultiChild', () => {
   it('should not warn for using generators in legacy iterables', () => {
     const fooIterable = {
       '@@iterator': function*() {
-        yield <h1 key="1">Hello</h1>;
-        yield <h1 key="2">World</h1>;
+        yield (<h1 key="1">Hello</h1>);
+        yield (<h1 key="2">World</h1>);
       },
     };
 
@@ -338,8 +347,8 @@ describe('ReactMultiChild', () => {
   it('should not warn for using generators in modern iterables', () => {
     const fooIterable = {
       [Symbol.iterator]: function*() {
-        yield <h1 key="1">Hello</h1>;
-        yield <h1 key="2">World</h1>;
+        yield (<h1 key="1">Hello</h1>);
+        yield (<h1 key="2">World</h1>);
       },
     };
 
@@ -374,7 +383,13 @@ describe('ReactMultiChild', () => {
     class Letters extends React.Component {
       render() {
         const letters = this.props.letters.split('');
-        return <div>{letters.map(c => <Letter key={c} char={c} />)}</div>;
+        return (
+          <div>
+            {letters.map(c => (
+              <Letter key={c} char={c} />
+            ))}
+          </div>
+        );
       }
     }
 
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 2785bd03045e4..467cbf59c2e06 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -161,7 +161,7 @@ describe('ReactMultiChildText', () => {
         [true, <div>{1.2}{''}{<div />}{'foo'}</div>, true, 1.2], [<div />, '1.2'],
         ['', 'foo', <div>{true}{<div />}{1.2}{''}</div>, 'foo'], ['', 'foo', <div />, 'foo'],
       ]);
-    }).toWarnDev([
+    }).toErrorDev([
       'Warning: Each child in a list should have a unique "key" prop.',
       'Warning: Each child in a list should have a unique "key" prop.',
     ]);
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index 32903540eba5e..97ff0393f8741 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -35,7 +35,9 @@ describe('rendering React components at document', () => {
 
   describe('with old implicit hydration API', () => {
     function expectDeprecationWarningWithFiber(callback) {
-      expect(callback).toLowPriorityWarnDev(
+      expect(
+        callback,
+      ).toWarnDev(
         'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
           'will stop working in React v17. Replace the ReactDOM.render() call ' +
           'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
@@ -197,15 +199,13 @@ describe('rendering React components at document', () => {
       expect(() => {
         expect(() =>
           ReactDOM.render(<Component text="Hello world" />, testDocument),
-        ).toLowPriorityWarnDev(
+        ).toWarnDev(
           'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
             'will stop working in React v17. Replace the ReactDOM.render() call ' +
             'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
           {withoutStack: true},
         );
-      }).toWarnDev('Warning: Text content did not match.', {
-        withoutStack: true,
-      });
+      }).toErrorDev('Warning: Text content did not match.');
     });
 
     it('should throw on full document render w/ no markup', () => {
@@ -371,9 +371,8 @@ describe('rendering React components at document', () => {
     it('renders over an existing text child without throwing', () => {
       const container = document.createElement('div');
       container.textContent = 'potato';
-      expect(() => ReactDOM.hydrate(<div>parsnip</div>, container)).toWarnDev(
+      expect(() => ReactDOM.hydrate(<div>parsnip</div>, container)).toErrorDev(
         'Expected server HTML to contain a matching <div> in <div>.',
-        {withoutStack: true},
       );
       expect(container.textContent).toBe('parsnip');
     });
@@ -399,9 +398,7 @@ describe('rendering React components at document', () => {
 
       expect(() =>
         ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
-      ).toWarnDev('Warning: Text content did not match.', {
-        withoutStack: true,
-      });
+      ).toErrorDev('Warning: Text content did not match.');
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
 
@@ -424,9 +421,7 @@ describe('rendering React components at document', () => {
       // getTestDocument() has an extra <meta> that we didn't render.
       expect(() =>
         ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
-      ).toWarnDev('Did not expect server HTML to contain a <meta> in <head>.', {
-        withoutStack: true,
-      });
+      ).toErrorDev('Did not expect server HTML to contain a <meta> in <head>.');
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index 8c68b07a5fe88..bcefcdb652468 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -188,7 +188,7 @@ describe('ReactDOMServer', () => {
               <span unknown="test" />
             </div>,
           )),
-      ).toWarnDev(['React does not recognize the `hasOwnProperty` prop']);
+      ).toErrorDev(['React does not recognize the `hasOwnProperty` prop']);
       expect(html).toContain('<span unknown="test">');
     });
   });
@@ -320,7 +320,7 @@ describe('ReactDOMServer', () => {
           return <div>{this.state.text}</div>;
         }
       }
-      const markup = ReactDOMServer.renderToString(<Component />);
+      const markup = ReactDOMServer.renderToStaticMarkup(<Component />);
       expect(markup).toContain('hello, world');
     });
 
@@ -339,7 +339,7 @@ describe('ReactDOMServer', () => {
           return <div>{this.state.text}</div>;
         }
       }
-      const markup = ReactDOMServer.renderToString(<Component />);
+      const markup = ReactDOMServer.renderToStaticMarkup(<Component />);
       expect(markup).toContain('hello, world');
     });
 
@@ -354,7 +354,7 @@ describe('ReactDOMServer', () => {
         }
       }
 
-      const markup = ReactDOMServer.renderToString(
+      const markup = ReactDOMServer.renderToStaticMarkup(
         <Component text="hello, world" />,
       );
       expect(markup).toContain('hello, world');
@@ -391,7 +391,7 @@ describe('ReactDOMServer', () => {
         text: PropTypes.string,
       };
 
-      const markup = ReactDOMServer.renderToString(
+      const markup = ReactDOMServer.renderToStaticMarkup(
         <ContextProvider>
           <Component />
         </ContextProvider>,
@@ -429,7 +429,7 @@ describe('ReactDOMServer', () => {
         );
       }
 
-      const markup = ReactDOMServer.renderToString(<App value={1} />);
+      const markup = ReactDOMServer.renderToStaticMarkup(<App value={1} />);
       // Extract the numbers rendered by the consumers
       const results = markup.match(/\d+/g).map(Number);
       expect(results).toEqual([2, 1, 3, 1]);
@@ -467,7 +467,7 @@ describe('ReactDOMServer', () => {
         );
       }
 
-      const markup = ReactDOMServer.renderToString(<App value={1} />);
+      const markup = ReactDOMServer.renderToStaticMarkup(<App value={1} />);
       // Extract the numbers rendered by the consumers
       const results = markup.match(/\d+/g).map(Number);
       expect(results).toEqual([2, 1, 3, 1]);
@@ -484,7 +484,7 @@ describe('ReactDOMServer', () => {
 
       let reentrantMarkup;
       function Reentrant() {
-        reentrantMarkup = ReactDOMServer.renderToString(
+        reentrantMarkup = ReactDOMServer.renderToStaticMarkup(
           <App value={1} reentrant={false} />,
         );
         return null;
@@ -512,7 +512,7 @@ describe('ReactDOMServer', () => {
         );
       }
 
-      const markup = ReactDOMServer.renderToString(
+      const markup = ReactDOMServer.renderToStaticMarkup(
         <App value={1} reentrant={true} />,
       );
       // Extract the numbers rendered by the consumers
@@ -554,6 +554,34 @@ describe('ReactDOMServer', () => {
         ),
       ).not.toThrow();
     });
+
+    it('renders synchronously resolved lazy component', () => {
+      const LazyFoo = React.lazy(() => ({
+        then(resolve) {
+          resolve({
+            default: function Foo({id}) {
+              return <div id={id}>lazy</div>;
+            },
+          });
+        },
+      }));
+
+      expect(ReactDOMServer.renderToStaticMarkup(<LazyFoo id="foo" />)).toEqual(
+        '<div id="foo">lazy</div>',
+      );
+    });
+
+    it('throws error from synchronously rejected lazy component', () => {
+      const LazyFoo = React.lazy(() => ({
+        then(resolve, reject) {
+          reject(new Error('Bad lazy'));
+        },
+      }));
+
+      expect(() => ReactDOMServer.renderToStaticMarkup(<LazyFoo />)).toThrow(
+        'Bad lazy',
+      );
+    });
   });
 
   describe('renderToNodeStream', () => {
@@ -616,7 +644,9 @@ describe('ReactDOMServer', () => {
     }
 
     ReactDOMServer.renderToString(<Foo />);
-    expect(() => jest.runOnlyPendingTimers()).toWarnDev(
+    expect(() =>
+      jest.runOnlyPendingTimers(),
+    ).toErrorDev(
       'Warning: setState(...): Can only update a mounting component.' +
         ' This usually means you called setState() outside componentWillMount() on the server.' +
         ' This is a no-op.\n\nPlease check the code for the Foo component.',
@@ -644,7 +674,9 @@ describe('ReactDOMServer', () => {
     }
 
     ReactDOMServer.renderToString(<Baz />);
-    expect(() => jest.runOnlyPendingTimers()).toWarnDev(
+    expect(() =>
+      jest.runOnlyPendingTimers(),
+    ).toErrorDev(
       'Warning: forceUpdate(...): Can only update a mounting component. ' +
         'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +
         'This is a no-op.\n\nPlease check the code for the Baz component.',
@@ -654,27 +686,93 @@ describe('ReactDOMServer', () => {
     expect(markup).toBe('<div></div>');
   });
 
-  it('throws for unsupported types on the server', () => {
-    expect(() => {
-      ReactDOMServer.renderToString(<React.Suspense />);
-    }).toThrow('ReactDOMServer does not yet support Suspense.');
+  if (!__EXPERIMENTAL__) {
+    it('throws for unsupported types on the server', () => {
+      expect(() => {
+        ReactDOMServer.renderToString(<React.Suspense />);
+      }).toThrow('ReactDOMServer does not yet support Suspense.');
 
-    async function fakeImport(result) {
-      return {default: result};
-    }
+      async function fakeImport(result) {
+        return {default: result};
+      }
 
-    expect(() => {
-      const LazyFoo = React.lazy(() =>
-        fakeImport(
-          new Promise(resolve =>
-            resolve(function Foo() {
-              return <div />;
-            }),
+      expect(() => {
+        const LazyFoo = React.lazy(() =>
+          fakeImport(
+            new Promise(resolve =>
+              resolve(function Foo() {
+                return <div />;
+              }),
+            ),
           ),
-        ),
-      );
-      ReactDOMServer.renderToString(<LazyFoo />);
-    }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
+        );
+        ReactDOMServer.renderToString(<LazyFoo />);
+      }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
+    });
+
+    it('throws when suspending on the server', () => {
+      function AsyncFoo() {
+        throw new Promise(() => {});
+      }
+
+      expect(() => {
+        ReactDOMServer.renderToString(<AsyncFoo />);
+      }).toThrow('ReactDOMServer does not yet support Suspense.');
+    });
+  }
+
+  it('does not get confused by throwing null', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw null;
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe(null);
+  });
+
+  it('does not get confused by throwing undefined', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw undefined;
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe(undefined);
+  });
+
+  it('does not get confused by throwing a primitive', () => {
+    function Bad() {
+      // eslint-disable-next-line no-throw-literal
+      throw 'foo';
+    }
+
+    let didError;
+    let error;
+    try {
+      ReactDOMServer.renderToString(<Bad />);
+    } catch (err) {
+      didError = true;
+      error = err;
+    }
+    expect(didError).toBe(true);
+    expect(error).toBe('foo');
   });
 
   it('should throw (in dev) when children are mutated during render', () => {
@@ -725,7 +823,7 @@ describe('ReactDOMServer', () => {
           </svg>
         </div>,
       ),
-    ).toWarnDev([
+    ).toErrorDev([
       'Warning: <inPUT /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
         'or lowercase for HTML elements.',
@@ -739,7 +837,7 @@ describe('ReactDOMServer', () => {
   it('should warn about contentEditable and children', () => {
     expect(() =>
       ReactDOMServer.renderToString(<div contentEditable={true} children="" />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component is `contentEditable` and contains `children` ' +
         'managed by React. It is now your responsibility to guarantee that ' +
         'none of those nodes are unexpectedly modified or duplicated. This ' +
@@ -758,11 +856,10 @@ describe('ReactDOMServer', () => {
       expect(() =>
         ReactDOMServer.renderToString(<ClassWithRenderNotExtended />),
       ).toThrow(TypeError);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
         "but doesn't extend React.Component. This is likely to cause errors. " +
         'Change ClassWithRenderNotExtended to extend React.Component instead.',
-      {withoutStack: true},
     );
 
     // Test deduplication
@@ -828,7 +925,7 @@ describe('ReactDOMServer', () => {
       );
     }
 
-    expect(() => ReactDOMServer.renderToString(<App />)).toWarnDev([
+    expect(() => ReactDOMServer.renderToString(<App />)).toErrorDev([
       'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
         '    in span (at **)\n' +
         '    in b (at **)\n' +
@@ -877,7 +974,7 @@ describe('ReactDOMServer', () => {
       );
     }
 
-    expect(() => ReactDOMServer.renderToString(<App />)).toWarnDev([
+    expect(() => ReactDOMServer.renderToString(<App />)).toErrorDev([
       // ReactDOMServer(App > div > span)
       'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
         '    in span (at **)\n' +
@@ -924,11 +1021,10 @@ describe('ReactDOMServer', () => {
 
     expect(() => {
       ReactDOMServer.renderToString(<ComponentA />);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: ComponentA defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'Did you accidentally pass the Context.Consumer instead?',
-      {withoutStack: true},
     );
 
     // Warnings should be deduped by component type
@@ -936,11 +1032,10 @@ describe('ReactDOMServer', () => {
 
     expect(() => {
       ReactDOMServer.renderToString(<ComponentB />);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: ComponentB defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'Did you accidentally pass the Context.Provider instead?',
-      {withoutStack: true},
     );
   });
 
@@ -971,14 +1066,13 @@ describe('ReactDOMServer', () => {
       expect(() => {
         ReactDOMServer.renderToString(<Foo />);
       }).toThrow("Cannot read property 'world' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to undefined. ' +
         'This can be caused by a typo or by mixing up named and default imports. ' +
         'This can also happen due to a circular dependency, ' +
         'so try moving the createContext() call to a separate file.',
-      {withoutStack: true},
     );
   });
 
@@ -998,11 +1092,10 @@ describe('ReactDOMServer', () => {
       expect(() => {
         ReactDOMServer.renderToString(<Foo />);
       }).toThrow("Cannot read property 'hello' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to an object with keys {x, y}.',
-      {withoutStack: true},
     );
   });
 
@@ -1018,11 +1111,10 @@ describe('ReactDOMServer', () => {
       expect(() => {
         ReactDOMServer.renderToString(<Foo />);
       }).toThrow("Cannot read property 'world' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to a string.',
-      {withoutStack: true},
     );
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 4d046af383cea..1dcc050de96c2 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -81,7 +81,7 @@ describe('ReactDOMServerHydration', () => {
 
       expect(() => {
         instance = ReactDOM.render(<TestComponent name="x" />, element);
-      }).toLowPriorityWarnDev(
+      }).toWarnDev(
         'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
           'will stop working in React v17. Replace the ReactDOM.render() call ' +
           'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
@@ -104,9 +104,7 @@ describe('ReactDOMServerHydration', () => {
       element.innerHTML = lastMarkup;
       expect(() => {
         instance = ReactDOM.render(<TestComponent name="y" />, element);
-      }).toWarnDev('Text content did not match. Server: "x" Client: "y"', {
-        withoutStack: true,
-      });
+      }).toErrorDev('Text content did not match. Server: "x" Client: "y"');
       expect(mountCount).toEqual(4);
       expect(element.innerHTML.length > 0).toBe(true);
       expect(element.innerHTML).not.toEqual(lastMarkup);
@@ -189,9 +187,7 @@ describe('ReactDOMServerHydration', () => {
       element.innerHTML = lastMarkup;
       expect(() => {
         instance = ReactDOM.hydrate(<TestComponent name="y" />, element);
-      }).toWarnDev('Text content did not match. Server: "x" Client: "y"', {
-        withoutStack: true,
-      });
+      }).toErrorDev('Text content did not match. Server: "x" Client: "y"');
       expect(mountCount).toEqual(4);
       expect(element.innerHTML.length > 0).toBe(true);
       expect(element.innerHTML).not.toEqual(lastMarkup);
@@ -252,9 +248,8 @@ describe('ReactDOMServerHydration', () => {
 
     expect(() =>
       ReactDOM.hydrate(<button autoFocus={false}>client</button>, element),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Text content did not match. Server: "server" Client: "client"',
-      {withoutStack: true},
     );
 
     expect(element.firstChild.focus).not.toHaveBeenCalled();
@@ -275,11 +270,10 @@ describe('ReactDOMServerHydration', () => {
         />,
         element,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Prop `style` did not match. Server: ' +
         '"text-decoration:none;color:black;height:10px" Client: ' +
         '"text-decoration:none;color:white;height:10px"',
-      {withoutStack: true},
     );
   });
 
@@ -323,11 +317,10 @@ describe('ReactDOMServerHydration', () => {
         />,
         element,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Prop `style` did not match. Server: ' +
         '"text-decoration: none; color: black; height: 10px;" Client: ' +
         '"text-decoration:none;color:black;height:10px"',
-      {withoutStack: true},
     );
   });
 
@@ -362,20 +355,14 @@ describe('ReactDOMServerHydration', () => {
     const element = document.createElement('div');
     expect(() => {
       element.innerHTML = ReactDOMServer.renderToString(markup);
-    }).toLowPriorityWarnDev(
-      ['componentWillMount() is deprecated and will be removed'],
-      {withoutStack: true},
-    );
+    }).toWarnDev('componentWillMount has been renamed');
     expect(element.textContent).toBe('Hi');
 
     expect(() => {
-      expect(() => ReactDOM.hydrate(markup, element)).toWarnDev(
-        'Please update the following components to use componentDidMount instead: ComponentWithWarning',
-      );
-    }).toLowPriorityWarnDev(
-      ['componentWillMount is deprecated and will be removed'],
-      {withoutStack: true},
-    );
+      ReactDOM.hydrate(markup, element);
+    }).toWarnDev('componentWillMount has been renamed', {
+      withoutStack: true,
+    });
     expect(element.textContent).toBe('Hi');
   });
 
@@ -500,7 +487,67 @@ describe('ReactDOMServerHydration', () => {
 
     jest.runAllTimers();
     await Promise.resolve();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(element.textContent).toBe('Hello world');
   });
+
+  it.experimental(
+    'does not re-enter hydration after committing the first one',
+    () => {
+      let finalHTML = ReactDOMServer.renderToString(<div />);
+      let container = document.createElement('div');
+      container.innerHTML = finalHTML;
+      let root = ReactDOM.createRoot(container, {hydrate: true});
+      root.render(<div />);
+      Scheduler.unstable_flushAll();
+      root.render(null);
+      Scheduler.unstable_flushAll();
+      // This should not reenter hydration state and therefore not trigger hydration
+      // warnings.
+      root.render(<div />);
+      Scheduler.unstable_flushAll();
+    },
+  );
+
+  it('Suspense + hydration in legacy mode', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<div>Hello World</div>';
+    let div = element.firstChild;
+    let ref = React.createRef();
+    expect(() =>
+      ReactDOM.hydrate(
+        <React.Suspense fallback={null}>
+          <div ref={ref}>Hello World</div>
+        </React.Suspense>,
+        element,
+      ),
+    ).toErrorDev(
+      'Warning: Did not expect server HTML to contain a <div> in <div>.',
+      {withoutStack: true},
+    );
+
+    // The content should've been client rendered and replaced the
+    // existing div.
+    expect(ref.current).not.toBe(div);
+    // The HTML should be the same though.
+    expect(element.innerHTML).toBe('<div>Hello World</div>');
+  });
+
+  it('Suspense + hydration in legacy mode with no fallback', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<div>Hello World</div>';
+    let div = element.firstChild;
+    let ref = React.createRef();
+    ReactDOM.hydrate(
+      <React.Suspense>
+        <div ref={ref}>Hello World</div>
+      </React.Suspense>,
+      element,
+    );
+
+    // Because this didn't have a fallback, it was hydrated as if it's
+    // not a Suspense boundary.
+    expect(ref.current).toBe(div);
+    expect(element.innerHTML).toBe('<div>Hello World</div>');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactTestUtils-test.js b/packages/react-dom/src/__tests__/ReactTestUtils-test.js
index 687dbd1aaec2c..540f23edd17c0 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtils-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtils-test.js
@@ -55,7 +55,7 @@ describe('ReactTestUtils', () => {
     // Patch it up so it returns its children.
     expect(() =>
       ReactTestUtils.mockComponent(MockedComponent),
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'ReactTestUtils.mockComponent() is deprecated. ' +
         'Use shallow rendering or jest.mock() instead.\n\n' +
         'See https://fb.me/test-utils-mock-component for more information.',
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.internal.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.internal.js
deleted file mode 100644
index d629795c0727e..0000000000000
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.internal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-let ReactFeatureFlags;
-let act;
-describe('mocked scheduler', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.warnAboutMissingMockScheduler = true;
-    jest.unmock('scheduler');
-    act = require('react-dom/test-utils').act;
-  });
-  it("should warn when the scheduler isn't mocked", () => {
-    expect(() => act(() => {})).toWarnDev(
-      [
-        'Starting from React v17, the "scheduler" module will need to be mocked',
-      ],
-      {withoutStack: true},
-    );
-  });
-});
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 838936a49949d..d68a4a1141709 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -27,30 +27,129 @@ function sleep(period) {
 
 describe('ReactTestUtils.act()', () => {
   // first we run all the tests with concurrent mode
-  let concurrentRoot;
-  function renderConcurrent(el, dom) {
-    concurrentRoot = ReactDOM.unstable_createRoot(dom);
-    concurrentRoot.render(el);
-  }
-  function unmountConcurrent(_dom) {
-    if (concurrentRoot !== null) {
-      concurrentRoot.unmount();
-      concurrentRoot = null;
-    }
+  if (__EXPERIMENTAL__) {
+    let concurrentRoot = null;
+    const renderConcurrent = (el, dom) => {
+      concurrentRoot = ReactDOM.createRoot(dom);
+      concurrentRoot.render(el);
+    };
+
+    const unmountConcurrent = _dom => {
+      if (concurrentRoot !== null) {
+        concurrentRoot.unmount();
+        concurrentRoot = null;
+      }
+    };
+
+    const rerenderConcurrent = el => {
+      concurrentRoot.render(el);
+    };
+
+    runActTests(
+      'concurrent mode',
+      renderConcurrent,
+      unmountConcurrent,
+      rerenderConcurrent,
+    );
   }
-  runActTests('concurrent mode', renderConcurrent, unmountConcurrent);
 
-  // and then in sync mode
-  function renderSync(el, dom) {
+  // and then in legacy mode
+
+  let legacyDom = null;
+  function renderLegacy(el, dom) {
+    legacyDom = dom;
     ReactDOM.render(el, dom);
   }
-  function unmountSync(dom) {
+
+  function unmountLegacy(dom) {
+    legacyDom = null;
     ReactDOM.unmountComponentAtNode(dom);
   }
-  runActTests('legacy sync mode', renderSync, unmountSync);
+
+  function rerenderLegacy(el) {
+    ReactDOM.render(el, legacyDom);
+  }
+
+  runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
+
+  // and then in blocking mode
+  if (__EXPERIMENTAL__) {
+    let blockingRoot = null;
+    const renderBatched = (el, dom) => {
+      blockingRoot = ReactDOM.createBlockingRoot(dom);
+      blockingRoot.render(el);
+    };
+
+    const unmountBatched = dom => {
+      if (blockingRoot !== null) {
+        blockingRoot.unmount();
+        blockingRoot = null;
+      }
+    };
+
+    const rerenderBatched = el => {
+      blockingRoot.render(el);
+    };
+
+    runActTests(
+      'blocking mode',
+      renderBatched,
+      unmountBatched,
+      rerenderBatched,
+    );
+  }
+
+  describe('unacted effects', () => {
+    function App() {
+      React.useEffect(() => {}, []);
+      return null;
+    }
+
+    it('does not warn in legacy mode', () => {
+      expect(() => {
+        ReactDOM.render(<App />, document.createElement('div'));
+      }).toErrorDev([]);
+    });
+
+    it('warns in strict mode', () => {
+      expect(() => {
+        ReactDOM.render(
+          <React.StrictMode>
+            <App />
+          </React.StrictMode>,
+          document.createElement('div'),
+        );
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
+
+    it.experimental('warns in blocking mode', () => {
+      expect(() => {
+        const root = ReactDOM.createBlockingRoot(document.createElement('div'));
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
+
+    it.experimental('warns in concurrent mode', () => {
+      expect(() => {
+        const root = ReactDOM.createRoot(document.createElement('div'));
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
+  });
 });
 
-function runActTests(label, render, unmount) {
+function runActTests(label, render, unmount, rerender) {
   describe(label, () => {
     beforeEach(() => {
       jest.resetModules();
@@ -63,15 +162,17 @@ function runActTests(label, render, unmount) {
       container = document.createElement('div');
       document.body.appendChild(container);
     });
+
     afterEach(() => {
       unmount(container);
       document.body.removeChild(container);
     });
+
     describe('sync', () => {
       it('can use act to flush effects', () => {
         function App() {
           React.useEffect(() => {
-            Scheduler.yieldValue(100);
+            Scheduler.unstable_yieldValue(100);
           });
           return null;
         }
@@ -87,7 +188,7 @@ function runActTests(label, render, unmount) {
         function App() {
           let [ctr, setCtr] = React.useState(0);
           React.useEffect(() => {
-            Scheduler.yieldValue(ctr);
+            Scheduler.unstable_yieldValue(ctr);
           });
           return (
             <button id="button" onClick={() => setCtr(x => x + 1)}>
@@ -140,7 +241,7 @@ function runActTests(label, render, unmount) {
       it('should flush effects only on exiting the outermost act', () => {
         function App() {
           React.useEffect(() => {
-            Scheduler.yieldValue(0);
+            Scheduler.unstable_yieldValue(0);
           });
           return null;
         }
@@ -169,17 +270,20 @@ function runActTests(label, render, unmount) {
           render(<App />, container);
         });
 
-        expect(() => setValue(1)).toWarnDev([
+        expect(() => setValue(1)).toErrorDev([
           'An update to App inside a test was not wrapped in act(...).',
         ]);
       });
+
       describe('fake timers', () => {
         beforeEach(() => {
           jest.useFakeTimers();
         });
+
         afterEach(() => {
           jest.useRealTimers();
         });
+
         it('lets a ticker update', () => {
           function App() {
             let [toggle, setToggle] = React.useState(0);
@@ -201,6 +305,7 @@ function runActTests(label, render, unmount) {
 
           expect(container.innerHTML).toBe('1');
         });
+
         it('can use the async version to catch microtasks', async () => {
           function App() {
             let [toggle, setToggle] = React.useState(0);
@@ -222,6 +327,7 @@ function runActTests(label, render, unmount) {
 
           expect(container.innerHTML).toBe('1');
         });
+
         it('can handle cascading promises with fake timers', async () => {
           // this component triggers an effect, that waits a tick,
           // then sets state. repeats this 5 times.
@@ -231,12 +337,9 @@ function runActTests(label, render, unmount) {
               await null;
               setState(x => x + 1);
             }
-            React.useEffect(
-              () => {
-                ticker();
-              },
-              [Math.min(state, 4)],
-            );
+            React.useEffect(() => {
+              ticker();
+            }, [Math.min(state, 4)]);
             return state;
           }
 
@@ -247,6 +350,7 @@ function runActTests(label, render, unmount) {
           // all 5 ticks present and accounted for
           expect(container.innerHTML).toBe('5');
         });
+
         it('flushes immediate re-renders with act', () => {
           function App() {
             let [ctr, setCtr] = React.useState(0);
@@ -277,13 +381,13 @@ function runActTests(label, render, unmount) {
       });
 
       it('warns if you return a value inside act', () => {
-        expect(() => act(() => null)).toWarnDev(
+        expect(() => act(() => null)).toErrorDev(
           [
             'The callback passed to act(...) function must return undefined, or a Promise.',
           ],
           {withoutStack: true},
         );
-        expect(() => act(() => 123)).toWarnDev(
+        expect(() => act(() => 123)).toErrorDev(
           [
             'The callback passed to act(...) function must return undefined, or a Promise.',
           ],
@@ -292,7 +396,7 @@ function runActTests(label, render, unmount) {
       });
 
       it('warns if you try to await a sync .act call', () => {
-        expect(() => act(() => {}).then(() => {})).toWarnDev(
+        expect(() => act(() => {}).then(() => {})).toErrorDev(
           [
             'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
           ],
@@ -300,6 +404,7 @@ function runActTests(label, render, unmount) {
         );
       });
     });
+
     describe('asynchronous tests', () => {
       it('works with timeouts', async () => {
         function App() {
@@ -390,7 +495,7 @@ function runActTests(label, render, unmount) {
             something();
           }, []);
           React.useEffect(() => {
-            Scheduler.yieldValue(state);
+            Scheduler.unstable_yieldValue(state);
           });
           return state;
         }
@@ -404,20 +509,6 @@ function runActTests(label, render, unmount) {
         expect(container.innerHTML).toBe('1');
       });
 
-      it('propagates errors', async () => {
-        let err;
-        try {
-          await act(async () => {
-            await sleep(100);
-            throw new Error('some error');
-          });
-        } catch (_err) {
-          err = _err;
-        } finally {
-          expect(err instanceof Error).toBe(true);
-          expect(err.message).toBe('some error');
-        }
-      });
       it('can handle cascading promises', async () => {
         // this component triggers an effect, that waits a tick,
         // then sets state. repeats this 5 times.
@@ -427,13 +518,10 @@ function runActTests(label, render, unmount) {
             await null;
             setState(x => x + 1);
           }
-          React.useEffect(
-            () => {
-              Scheduler.yieldValue(state);
-              ticker();
-            },
-            [Math.min(state, 4)],
-          );
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue(state);
+            ticker();
+          }, [Math.min(state, 4)]);
           return state;
         }
 
@@ -484,7 +572,7 @@ function runActTests(label, render, unmount) {
                 expect(interactions.size).toBe(1);
                 expectedInteraction = Array.from(interactions)[0];
 
-                render(<Component />, container);
+                rerender(<Component />);
               },
             );
           });
@@ -514,7 +602,7 @@ function runActTests(label, render, unmount) {
                 expect(interactions.size).toBe(1);
                 expectedInteraction = Array.from(interactions)[0];
 
-                render(<Component />, secondContainer);
+                rerender(<Component />);
               });
             },
           );
@@ -524,5 +612,204 @@ function runActTests(label, render, unmount) {
         });
       }
     });
+
+    describe('error propagation', () => {
+      it('propagates errors - sync', () => {
+        let err;
+        try {
+          act(() => {
+            throw new Error('some error');
+          });
+        } catch (_err) {
+          err = _err;
+        } finally {
+          expect(err instanceof Error).toBe(true);
+          expect(err.message).toBe('some error');
+        }
+      });
+
+      it('should propagate errors from effects - sync', () => {
+        function App() {
+          React.useEffect(() => {
+            throw new Error('oh no');
+          });
+          return null;
+        }
+        let error;
+
+        try {
+          act(() => {
+            render(<App />, container);
+          });
+        } catch (_error) {
+          error = _error;
+        } finally {
+          expect(error instanceof Error).toBe(true);
+          expect(error.message).toBe('oh no');
+        }
+      });
+
+      it('propagates errors - async', async () => {
+        let err;
+        try {
+          await act(async () => {
+            await sleep(100);
+            throw new Error('some error');
+          });
+        } catch (_err) {
+          err = _err;
+        } finally {
+          expect(err instanceof Error).toBe(true);
+          expect(err.message).toBe('some error');
+        }
+      });
+
+      it('should cleanup after errors - sync', () => {
+        function App() {
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('oh yes');
+          });
+          return null;
+        }
+        let error;
+        try {
+          act(() => {
+            throw new Error('oh no');
+          });
+        } catch (_error) {
+          error = _error;
+        } finally {
+          expect(error instanceof Error).toBe(true);
+          expect(error.message).toBe('oh no');
+          // should be able to render components after this tho
+          act(() => {
+            render(<App />, container);
+          });
+          expect(Scheduler).toHaveYielded(['oh yes']);
+        }
+      });
+
+      it('should cleanup after errors - async', async () => {
+        function App() {
+          async function somethingAsync() {
+            await null;
+            Scheduler.unstable_yieldValue('oh yes');
+          }
+          React.useEffect(() => {
+            somethingAsync();
+          });
+          return null;
+        }
+        let error;
+        try {
+          await act(async () => {
+            await sleep(100);
+            throw new Error('oh no');
+          });
+        } catch (_error) {
+          error = _error;
+        } finally {
+          expect(error instanceof Error).toBe(true);
+          expect(error.message).toBe('oh no');
+          // should be able to render components after this tho
+          await act(async () => {
+            render(<App />, container);
+          });
+          expect(Scheduler).toHaveYielded(['oh yes']);
+        }
+      });
+    });
+
+    describe('suspense', () => {
+      if (__DEV__ && __EXPERIMENTAL__) {
+        it('triggers fallbacks if available', async () => {
+          let resolved = false;
+          let resolve;
+          const promise = new Promise(_resolve => {
+            resolve = _resolve;
+          });
+
+          function Suspends() {
+            if (resolved) {
+              return 'was suspended';
+            }
+            throw promise;
+          }
+
+          function App(props) {
+            return (
+              <React.Suspense
+                fallback={<span data-test-id="spinner">loading...</span>}>
+                {props.suspend ? <Suspends /> : 'content'}
+              </React.Suspense>
+            );
+          }
+
+          // render something so there's content
+          act(() => {
+            render(<App suspend={false} />, container);
+          });
+
+          // trigger a suspendy update
+          act(() => {
+            rerender(<App suspend={true} />);
+          });
+          expect(
+            document.querySelector('[data-test-id=spinner]'),
+          ).not.toBeNull();
+
+          // now render regular content again
+          act(() => {
+            rerender(<App suspend={false} />);
+          });
+          expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
+
+          // trigger a suspendy update with a delay
+          React.unstable_withSuspenseConfig(
+            () => {
+              act(() => {
+                rerender(<App suspend={true} />);
+              });
+            },
+            {timeout: 5000},
+          );
+          // the spinner shows up regardless
+          expect(
+            document.querySelector('[data-test-id=spinner]'),
+          ).not.toBeNull();
+
+          // resolve the promise
+          await act(async () => {
+            resolved = true;
+            resolve();
+          });
+
+          // spinner gone, content showing
+          expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
+          expect(container.textContent).toBe('was suspended');
+        });
+      }
+    });
+    describe('warn in prod mode', () => {
+      it('warns if you try to use act() in prod mode', () => {
+        const spy = spyOnDevAndProd(console, 'error');
+
+        act(() => {});
+
+        if (!__DEV__) {
+          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(console.error.calls.argsFor(0)[0]).toContain(
+            'act(...) is not supported in production builds of React',
+          );
+        } else {
+          expect(console.error).toHaveBeenCalledTimes(0);
+        }
+
+        spy.calls.reset();
+        // does not warn twice
+        act(() => {});
+        expect(console.error).toHaveBeenCalledTimes(0);
+      });
+    });
   });
 }
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
new file mode 100644
index 0000000000000..3017096d30bfd
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -0,0 +1,163 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+// sanity tests to make sure act() works without a mocked scheduler
+
+let React;
+let ReactDOM;
+let act;
+let container;
+let yields;
+
+function clearYields() {
+  try {
+    return yields;
+  } finally {
+    yields = [];
+  }
+}
+
+function render(el, dom) {
+  ReactDOM.render(el, dom);
+}
+
+function unmount(dom) {
+  ReactDOM.unmountComponentAtNode(dom);
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.unmock('scheduler');
+  yields = [];
+  React = require('react');
+  ReactDOM = require('react-dom');
+  act = require('react-dom/test-utils').act;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  unmount(container);
+  document.body.removeChild(container);
+});
+
+it('can use act to flush effects', () => {
+  function App() {
+    React.useEffect(() => {
+      yields.push(100);
+    });
+    return null;
+  }
+
+  act(() => {
+    render(<App />, container);
+  });
+
+  expect(clearYields()).toEqual([100]);
+});
+
+it('flushes effects on every call', () => {
+  function App() {
+    let [ctr, setCtr] = React.useState(0);
+    React.useEffect(() => {
+      yields.push(ctr);
+    });
+    return (
+      <button id="button" onClick={() => setCtr(x => x + 1)}>
+        {ctr}
+      </button>
+    );
+  }
+
+  act(() => {
+    render(<App />, container);
+  });
+
+  expect(clearYields()).toEqual([0]);
+
+  const button = container.querySelector('#button');
+  function click() {
+    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+  }
+
+  act(() => {
+    click();
+    click();
+    click();
+  });
+  // it consolidates the 3 updates, then fires the effect
+  expect(clearYields()).toEqual([3]);
+  act(click);
+  expect(clearYields()).toEqual([4]);
+  act(click);
+  expect(clearYields()).toEqual([5]);
+  expect(button.innerHTML).toEqual('5');
+});
+
+it("should keep flushing effects until the're done", () => {
+  function App() {
+    let [ctr, setCtr] = React.useState(0);
+    React.useEffect(() => {
+      if (ctr < 5) {
+        setCtr(x => x + 1);
+      }
+    });
+    return ctr;
+  }
+
+  act(() => {
+    render(<App />, container);
+  });
+
+  expect(container.innerHTML).toEqual('5');
+});
+
+it('should flush effects only on exiting the outermost act', () => {
+  function App() {
+    React.useEffect(() => {
+      yields.push(0);
+    });
+    return null;
+  }
+  // let's nest a couple of act() calls
+  act(() => {
+    act(() => {
+      render(<App />, container);
+    });
+    // the effect wouldn't have yielded yet because
+    // we're still inside an act() scope
+    expect(clearYields()).toEqual([]);
+  });
+  // but after exiting the last one, effects get flushed
+  expect(clearYields()).toEqual([0]);
+});
+
+it('can handle cascading promises', async () => {
+  // this component triggers an effect, that waits a tick,
+  // then sets state. repeats this 5 times.
+  function App() {
+    let [state, setState] = React.useState(0);
+    async function ticker() {
+      await null;
+      setState(x => x + 1);
+    }
+    React.useEffect(() => {
+      yields.push(state);
+      ticker();
+    }, [Math.min(state, 4)]);
+    return state;
+  }
+
+  await act(async () => {
+    render(<App />, container);
+  });
+  // all 5 ticks present and accounted for
+  expect(clearYields()).toEqual([0, 1, 2, 3, 4]);
+  expect(container.innerHTML).toBe('5');
+});
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
new file mode 100644
index 0000000000000..e4c47453adeef
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
@@ -0,0 +1,56 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+let React;
+let ReactDOM;
+let ReactFeatureFlags;
+
+function App() {
+  return null;
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.unmock('scheduler');
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.warnAboutUnmockedScheduler = true;
+});
+
+afterEach(() => {
+  ReactFeatureFlags.warnAboutUnmockedScheduler = false;
+});
+
+it('should warn in legacy mode', () => {
+  expect(() => {
+    ReactDOM.render(<App />, document.createElement('div'));
+  }).toErrorDev(
+    ['Starting from React v17, the "scheduler" module will need to be mocked'],
+    {withoutStack: true},
+  );
+  // does not warn twice
+  expect(() => {
+    ReactDOM.render(<App />, document.createElement('div'));
+  }).toErrorDev([]);
+});
+
+it('does not warn if Scheduler is mocked', () => {
+  jest.resetModules();
+  jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.warnAboutUnmockedScheduler = true;
+
+  // This should not warn
+  expect(() => {
+    ReactDOM.render(<App />, document.createElement('div'));
+  }).toErrorDev([]);
+});
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
new file mode 100644
index 0000000000000..3f20013f40596
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -0,0 +1,56 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+let React;
+let ReactDOM;
+
+function App() {
+  return null;
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.unmock('scheduler');
+  React = require('react');
+  ReactDOM = require('react-dom');
+});
+
+it('does not warn when rendering in legacy mode', () => {
+  expect(() => {
+    ReactDOM.render(<App />, document.createElement('div'));
+  }).toErrorDev([]);
+});
+
+it.experimental('should warn when rendering in concurrent mode', () => {
+  expect(() => {
+    ReactDOM.createRoot(document.createElement('div')).render(<App />);
+  }).toErrorDev(
+    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
+      'to guarantee consistent behaviour across tests and browsers.',
+    {withoutStack: true},
+  );
+  // does not warn twice
+  expect(() => {
+    ReactDOM.createRoot(document.createElement('div')).render(<App />);
+  }).toErrorDev([]);
+});
+
+it.experimental('should warn when rendering in blocking mode', () => {
+  expect(() => {
+    ReactDOM.createBlockingRoot(document.createElement('div')).render(<App />);
+  }).toErrorDev(
+    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
+      'to guarantee consistent behaviour across tests and browsers.',
+    {withoutStack: true},
+  );
+  // does not warn twice
+  expect(() => {
+    ReactDOM.createBlockingRoot(document.createElement('div')).render(<App />);
+  }).toErrorDev([]);
+});
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index 0b6a4b2792f3f..5d28562126982 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactTestUtils;
+let act;
 let Scheduler;
 
 describe('ReactUpdates', () => {
@@ -20,6 +21,7 @@ describe('ReactUpdates', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
+    act = ReactTestUtils.act;
     Scheduler = require('scheduler');
   });
 
@@ -861,7 +863,7 @@ describe('ReactUpdates', () => {
     let component = ReactTestUtils.renderIntoDocument(<A />);
 
     expect(() => {
-      expect(() => component.setState({}, 'no')).toWarnDev(
+      expect(() => component.setState({}, 'no')).toErrorDev(
         'setState(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: no.',
       );
@@ -871,7 +873,7 @@ describe('ReactUpdates', () => {
     );
     component = ReactTestUtils.renderIntoDocument(<A />);
     expect(() => {
-      expect(() => component.setState({}, {foo: 'bar'})).toWarnDev(
+      expect(() => component.setState({}, {foo: 'bar'})).toErrorDev(
         'setState(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -904,7 +906,7 @@ describe('ReactUpdates', () => {
     let component = ReactTestUtils.renderIntoDocument(<A />);
 
     expect(() => {
-      expect(() => component.forceUpdate('no')).toWarnDev(
+      expect(() => component.forceUpdate('no')).toErrorDev(
         'forceUpdate(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: no.',
       );
@@ -914,7 +916,7 @@ describe('ReactUpdates', () => {
     );
     component = ReactTestUtils.renderIntoDocument(<A />);
     expect(() => {
-      expect(() => component.forceUpdate({foo: 'bar'})).toWarnDev(
+      expect(() => component.forceUpdate({foo: 'bar'})).toErrorDev(
         'forceUpdate(...): Expected the last optional `callback` argument to be ' +
           'a function. Instead received: [object Object].',
       );
@@ -1097,7 +1099,7 @@ describe('ReactUpdates', () => {
   });
 
   it(
-    'in sync mode, updates in componentWillUpdate and componentDidUpdate ' +
+    'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
       'should both flush in the immediately subsequent commit',
     () => {
       let ops = [];
@@ -1140,7 +1142,7 @@ describe('ReactUpdates', () => {
   );
 
   it(
-    'in sync mode, updates in componentWillUpdate and componentDidUpdate ' +
+    'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
       '(on a sibling) should both flush in the immediately subsequent commit',
     () => {
       let ops = [];
@@ -1227,9 +1229,8 @@ describe('ReactUpdates', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Foo />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo />, container)).toErrorDev(
       'Cannot update during an existing state transition',
-      {withoutStack: true},
     );
     expect(ops).toEqual(['base: 0, memoized: 0', 'base: 1, memoized: 1']);
   });
@@ -1290,77 +1291,85 @@ describe('ReactUpdates', () => {
     expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
   });
 
-  it('delays sync updates inside hidden subtrees in Concurrent Mode', () => {
-    const container = document.createElement('div');
+  it.experimental(
+    'delays sync updates inside hidden subtrees in Concurrent Mode',
+    () => {
+      const container = document.createElement('div');
 
-    function Baz() {
-      Scheduler.yieldValue('Baz');
-      return <p>baz</p>;
-    }
+      function Baz() {
+        Scheduler.unstable_yieldValue('Baz');
+        return <p>baz</p>;
+      }
 
-    let setCounter;
-    function Bar() {
-      const [counter, _setCounter] = React.useState(0);
-      setCounter = _setCounter;
-      Scheduler.yieldValue('Bar');
-      return <p>bar {counter}</p>;
-    }
+      let setCounter;
+      function Bar() {
+        const [counter, _setCounter] = React.useState(0);
+        setCounter = _setCounter;
+        Scheduler.unstable_yieldValue('Bar');
+        return <p>bar {counter}</p>;
+      }
 
-    function Foo() {
-      Scheduler.yieldValue('Foo');
-      React.useEffect(() => {
-        Scheduler.yieldValue('Foo#effect');
-      });
-      return (
-        <div>
-          <div hidden={true}>
-            <Bar />
+      function Foo() {
+        Scheduler.unstable_yieldValue('Foo');
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('Foo#effect');
+        });
+        return (
+          <div>
+            <div hidden={true}>
+              <Bar />
+            </div>
+            <Baz />
           </div>
-          <Baz />
-        </div>
-      );
-    }
-
-    const root = ReactDOM.unstable_createRoot(container);
-    root.render(<Foo />);
-    if (__DEV__) {
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Foo',
-        'Foo',
-        'Baz',
-        'Foo#effect',
-      ]);
-    } else {
-      expect(Scheduler).toFlushAndYieldThrough(['Foo', 'Baz', 'Foo#effect']);
-    }
-
-    const hiddenDiv = container.firstChild.firstChild;
-    expect(hiddenDiv.hidden).toBe(true);
-    expect(hiddenDiv.innerHTML).toBe('');
+        );
+      }
 
-    // Run offscreen update
-    if (__DEV__) {
-      expect(Scheduler).toFlushAndYield(['Bar', 'Bar']);
-    } else {
-      expect(Scheduler).toFlushAndYield(['Bar']);
-    }
-    expect(hiddenDiv.hidden).toBe(true);
-    expect(hiddenDiv.innerHTML).toBe('<p>bar 0</p>');
+      const root = ReactDOM.createRoot(container);
+      let hiddenDiv;
+      act(() => {
+        root.render(<Foo />);
+        if (__DEV__) {
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Foo',
+            'Foo',
+            'Baz',
+            'Foo#effect',
+          ]);
+        } else {
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Foo',
+            'Baz',
+            'Foo#effect',
+          ]);
+        }
+        hiddenDiv = container.firstChild.firstChild;
+        expect(hiddenDiv.hidden).toBe(true);
+        expect(hiddenDiv.innerHTML).toBe('');
+        // Run offscreen update
+        if (__DEV__) {
+          expect(Scheduler).toFlushAndYield(['Bar', 'Bar']);
+        } else {
+          expect(Scheduler).toFlushAndYield(['Bar']);
+        }
+        expect(hiddenDiv.hidden).toBe(true);
+        expect(hiddenDiv.innerHTML).toBe('<p>bar 0</p>');
+      });
 
-    ReactDOM.flushSync(() => {
-      setCounter(1);
-    });
-    // Should not flush yet
-    expect(hiddenDiv.innerHTML).toBe('<p>bar 0</p>');
+      ReactDOM.flushSync(() => {
+        setCounter(1);
+      });
+      // Should not flush yet
+      expect(hiddenDiv.innerHTML).toBe('<p>bar 0</p>');
 
-    // Run offscreen update
-    if (__DEV__) {
-      expect(Scheduler).toFlushAndYield(['Bar', 'Bar']);
-    } else {
-      expect(Scheduler).toFlushAndYield(['Bar']);
-    }
-    expect(hiddenDiv.innerHTML).toBe('<p>bar 1</p>');
-  });
+      // Run offscreen update
+      if (__DEV__) {
+        expect(Scheduler).toFlushAndYield(['Bar', 'Bar']);
+      } else {
+        expect(Scheduler).toFlushAndYield(['Bar']);
+      }
+      expect(hiddenDiv.innerHTML).toBe('<p>bar 1</p>');
+    },
+  );
 
   it('can render ridiculously large number of roots without triggering infinite update loop error', () => {
     class Foo extends React.Component {
@@ -1605,7 +1614,7 @@ describe('ReactUpdates', () => {
         const [step, setStep] = React.useState(0);
         React.useEffect(() => {
           setStep(x => x + 1);
-          Scheduler.yieldValue(step);
+          Scheduler.unstable_yieldValue(step);
         });
         return step;
       }
@@ -1623,12 +1632,19 @@ describe('ReactUpdates', () => {
       };
       try {
         const container = document.createElement('div');
-        ReactDOM.render(<App />, container);
-        while (error === null) {
-          Scheduler.unstable_flushNumberOfYields(1);
-        }
-        expect(error).toContain('Warning: Maximum update depth exceeded.');
-        expect(stack).toContain('in NonTerminating');
+        expect(() => {
+          act(() => {
+            ReactDOM.render(<App />, container);
+            while (error === null) {
+              Scheduler.unstable_flushNumberOfYields(1);
+              Scheduler.unstable_clearYields();
+            }
+            expect(error).toContain('Warning: Maximum update depth exceeded.');
+            expect(stack).toContain('in NonTerminating');
+            // rethrow error to prevent going into an infinite loop when act() exits
+            throw error;
+          });
+        }).toThrow('Maximum update depth exceeded.');
       } finally {
         console.error = originalConsoleError;
       }
@@ -1644,31 +1660,20 @@ describe('ReactUpdates', () => {
         React.useEffect(() => {
           if (step < LIMIT) {
             setStep(x => x + 1);
-            Scheduler.yieldValue(step);
           }
         });
+        Scheduler.unstable_yieldValue(step);
         return step;
       }
 
       const container = document.createElement('div');
-      ReactDOM.render(<Terminating />, container);
-
-      // Verify we can flush them asynchronously without warning
-      for (let i = 0; i < LIMIT * 2; i++) {
-        Scheduler.unstable_flushNumberOfYields(1);
-      }
+      act(() => {
+        ReactDOM.render(<Terminating />, container);
+      });
       expect(container.textContent).toBe('50');
-
-      // Verify restarting from 0 doesn't cross the limit
-      expect(() => {
+      act(() => {
         _setStep(0);
-      }).toWarnDev(
-        'An update to Terminating inside a test was not wrapped in act',
-      );
-      expect(container.textContent).toBe('0');
-      for (let i = 0; i < LIMIT * 2; i++) {
-        Scheduler.unstable_flushNumberOfYields(1);
-      }
+      });
       expect(container.textContent).toBe('50');
     });
 
@@ -1679,14 +1684,17 @@ describe('ReactUpdates', () => {
           for (let i = 0; i < 1000; i++) {
             setStep(x => x + 1);
           }
-          Scheduler.yieldValue('Done');
+          Scheduler.unstable_yieldValue('Done');
         }, []);
         return step;
       }
 
       const container = document.createElement('div');
-      ReactDOM.render(<Terminating />, container);
-      expect(Scheduler).toFlushAndYield(['Done']);
+      act(() => {
+        ReactDOM.render(<Terminating />, container);
+      });
+
+      expect(Scheduler).toHaveYielded(['Done']);
       expect(container.textContent).toBe('1000');
     });
   }
diff --git a/packages/react-dom/src/__tests__/findDOMNode-test.js b/packages/react-dom/src/__tests__/findDOMNode-test.js
index 2be58e0c67115..168af01556ffa 100644
--- a/packages/react-dom/src/__tests__/findDOMNode-test.js
+++ b/packages/react-dom/src/__tests__/findDOMNode-test.js
@@ -117,17 +117,15 @@ describe('findDOMNode', () => {
     );
 
     let match;
-    expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
+    expect(() => (match = ReactDOM.findDOMNode(parent))).toErrorDev([
       'Warning: findDOMNode is deprecated in StrictMode. ' +
         'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
         '\n    in StrictMode (at **)' +
-        '\n    in ContainsStrictModeChild (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
   });
@@ -149,17 +147,15 @@ describe('findDOMNode', () => {
     );
 
     let match;
-    expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
+    expect(() => (match = ReactDOM.findDOMNode(parent))).toErrorDev([
       'Warning: findDOMNode is deprecated in StrictMode. ' +
         'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
         '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in StrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });
diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js
index 7cc764bdefdac..6d4bd943d46ea 100644
--- a/packages/react-dom/src/__tests__/refs-test.js
+++ b/packages/react-dom/src/__tests__/refs-test.js
@@ -169,13 +169,12 @@ describe('factory components', () => {
     let inst;
     expect(
       () => (inst = ReactTestUtils.renderIntoDocument(<Comp />)),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: The <Comp /> component appears to be a function component that returns a class instance. ' +
         'Change Comp to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Comp.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
     expect(inst.refs.elemRef.tagName).toBe('DIV');
   });
diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
index 881c7b15d7945..a7ae3807da416 100644
--- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
@@ -16,308 +16,322 @@ const ReactTestUtils = require('react-dom/test-utils');
 const renderSubtreeIntoContainer = require('react-dom')
   .unstable_renderSubtreeIntoContainer;
 
-describe('renderSubtreeIntoContainer', () => {
-  it('should pass context when rendering subtree elsewhere', () => {
-    const portal = document.createElement('div');
-
-    class Component extends React.Component {
-      static contextTypes = {
-        foo: PropTypes.string.isRequired,
-      };
-
-      render() {
-        return <div>{this.context.foo}</div>;
-      }
-    }
-
-    class Parent extends React.Component {
-      static childContextTypes = {
-        foo: PropTypes.string.isRequired,
-      };
-
-      getChildContext() {
-        return {
-          foo: 'bar',
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+// Once this flag is always true, we should delete this test file
+if (ReactFeatureFlags.disableUnstableRenderSubtreeIntoContainer) {
+  describe('renderSubtreeIntoContainer', () => {
+    it('empty test', () => {
+      // Empty test to prevent "Your test suite must contain at least one test." error.
+    });
+  });
+} else {
+  describe('renderSubtreeIntoContainer', () => {
+    it('should pass context when rendering subtree elsewhere', () => {
+      const portal = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: PropTypes.string.isRequired,
         };
-      }
-
-      render() {
-        return null;
-      }
 
-      componentDidMount() {
-        expect(
-          function() {
-            renderSubtreeIntoContainer(this, <Component />, portal);
-          }.bind(this),
-        ).not.toThrow();
+        render() {
+          return <div>{this.context.foo}</div>;
+        }
       }
-    }
-
-    ReactTestUtils.renderIntoDocument(<Parent />);
-    expect(portal.firstChild.innerHTML).toBe('bar');
-  });
-
-  it('should throw if parentComponent is invalid', () => {
-    const portal = document.createElement('div');
 
-    class Component extends React.Component {
-      static contextTypes = {
-        foo: PropTypes.string.isRequired,
-      };
-
-      render() {
-        return <div>{this.context.foo}</div>;
-      }
-    }
-
-    // ESLint is confused here and thinks Parent is unused, presumably because
-    // it is only used inside of the class body?
-    // eslint-disable-next-line no-unused-vars
-    class Parent extends React.Component {
-      static childContextTypes = {
-        foo: PropTypes.string.isRequired,
-      };
-
-      getChildContext() {
-        return {
-          foo: 'bar',
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: PropTypes.string.isRequired,
         };
-      }
 
-      render() {
-        return null;
-      }
+        getChildContext() {
+          return {
+            foo: 'bar',
+          };
+        }
+
+        render() {
+          return null;
+        }
+
+        componentDidMount() {
+          expect(
+            function() {
+              renderSubtreeIntoContainer(this, <Component />, portal);
+            }.bind(this),
+          ).toWarnDev(
+            'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated and ' +
+              'will be removed in a future major release. Consider using React Portals instead.',
+          );
+        }
+      }
+
+      ReactTestUtils.renderIntoDocument(<Parent />);
+      expect(portal.firstChild.innerHTML).toBe('bar');
+    });
+
+    it('should throw if parentComponent is invalid', () => {
+      const portal = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: PropTypes.string.isRequired,
+        };
 
-      componentDidMount() {
-        expect(function() {
-          renderSubtreeIntoContainer(<Parent />, <Component />, portal);
-        }).toThrowError('parentComponentmust be a valid React Component');
+        render() {
+          return <div>{this.context.foo}</div>;
+        }
       }
-    }
-  });
-
-  it('should update context if it changes due to setState', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const portal = document.createElement('div');
-
-    class Component extends React.Component {
-      static contextTypes = {
-        foo: PropTypes.string.isRequired,
-        getFoo: PropTypes.func.isRequired,
-      };
 
-      render() {
-        return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
-      }
-    }
-
-    class Parent extends React.Component {
-      static childContextTypes = {
-        foo: PropTypes.string.isRequired,
-        getFoo: PropTypes.func.isRequired,
-      };
-
-      state = {
-        bar: 'initial',
-      };
-
-      getChildContext() {
-        return {
-          foo: this.state.bar,
-          getFoo: () => this.state.bar,
+      // ESLint is confused here and thinks Parent is unused, presumably because
+      // it is only used inside of the class body?
+      // eslint-disable-next-line no-unused-vars
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: PropTypes.string.isRequired,
         };
-      }
-
-      render() {
-        return null;
-      }
 
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
-      }
+        getChildContext() {
+          return {
+            foo: 'bar',
+          };
+        }
+
+        render() {
+          return null;
+        }
+
+        componentDidMount() {
+          expect(function() {
+            renderSubtreeIntoContainer(<Parent />, <Component />, portal);
+          }).toThrowError('parentComponentmust be a valid React Component');
+        }
+      }
+    });
+
+    it('should update context if it changes due to setState', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const portal = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: PropTypes.string.isRequired,
+          getFoo: PropTypes.func.isRequired,
+        };
 
-      componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        render() {
+          return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+        }
       }
-    }
-
-    const instance = ReactDOM.render(<Parent />, container);
-    expect(portal.firstChild.innerHTML).toBe('initial-initial');
-    instance.setState({bar: 'changed'});
-    expect(portal.firstChild.innerHTML).toBe('changed-changed');
-  });
 
-  it('should update context if it changes due to re-render', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const portal = document.createElement('div');
-
-    class Component extends React.Component {
-      static contextTypes = {
-        foo: PropTypes.string.isRequired,
-        getFoo: PropTypes.func.isRequired,
-      };
-
-      render() {
-        return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
-      }
-    }
-
-    class Parent extends React.Component {
-      static childContextTypes = {
-        foo: PropTypes.string.isRequired,
-        getFoo: PropTypes.func.isRequired,
-      };
-
-      getChildContext() {
-        return {
-          foo: this.props.bar,
-          getFoo: () => this.props.bar,
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: PropTypes.string.isRequired,
+          getFoo: PropTypes.func.isRequired,
         };
-      }
 
-      render() {
-        return null;
-      }
+        state = {
+          bar: 'initial',
+        };
 
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
-      }
+        getChildContext() {
+          return {
+            foo: this.state.bar,
+            getFoo: () => this.state.bar,
+          };
+        }
+
+        render() {
+          return null;
+        }
+
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }
+
+        componentDidUpdate() {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }
+      }
+
+      const instance = ReactDOM.render(<Parent />, container);
+      expect(portal.firstChild.innerHTML).toBe('initial-initial');
+      instance.setState({bar: 'changed'});
+      expect(portal.firstChild.innerHTML).toBe('changed-changed');
+    });
+
+    it('should update context if it changes due to re-render', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const portal = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: PropTypes.string.isRequired,
+          getFoo: PropTypes.func.isRequired,
+        };
 
-      componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        render() {
+          return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+        }
       }
-    }
-
-    ReactDOM.render(<Parent bar="initial" />, container);
-    expect(portal.firstChild.innerHTML).toBe('initial-initial');
-    ReactDOM.render(<Parent bar="changed" />, container);
-    expect(portal.firstChild.innerHTML).toBe('changed-changed');
-  });
 
-  it('should render portal with non-context-provider parent', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const portal = document.createElement('div');
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: PropTypes.string.isRequired,
+          getFoo: PropTypes.func.isRequired,
+        };
 
-    class Parent extends React.Component {
-      render() {
-        return null;
+        getChildContext() {
+          return {
+            foo: this.props.bar,
+            getFoo: () => this.props.bar,
+          };
+        }
+
+        render() {
+          return null;
+        }
+
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }
+
+        componentDidUpdate() {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }
+      }
+
+      ReactDOM.render(<Parent bar="initial" />, container);
+      expect(portal.firstChild.innerHTML).toBe('initial-initial');
+      ReactDOM.render(<Parent bar="changed" />, container);
+      expect(portal.firstChild.innerHTML).toBe('changed-changed');
+    });
+
+    it('should render portal with non-context-provider parent', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const portal = document.createElement('div');
+
+      class Parent extends React.Component {
+        render() {
+          return null;
+        }
+
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+        }
+      }
+
+      ReactDOM.render(<Parent bar="initial" />, container);
+      expect(portal.firstChild.innerHTML).toBe('hello');
+    });
+
+    it('should get context through non-context-provider parent', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const portal = document.createElement('div');
+
+      class Parent extends React.Component {
+        render() {
+          return <Middle />;
+        }
+        getChildContext() {
+          return {value: this.props.value};
+        }
+        static childContextTypes = {
+          value: PropTypes.string.isRequired,
+        };
       }
 
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+      class Middle extends React.Component {
+        render() {
+          return null;
+        }
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <Child />, portal);
+        }
       }
-    }
-
-    ReactDOM.render(<Parent bar="initial" />, container);
-    expect(portal.firstChild.innerHTML).toBe('hello');
-  });
-
-  it('should get context through non-context-provider parent', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const portal = document.createElement('div');
 
-    class Parent extends React.Component {
-      render() {
-        return <Middle />;
-      }
-      getChildContext() {
-        return {value: this.props.value};
-      }
-      static childContextTypes = {
-        value: PropTypes.string.isRequired,
-      };
-    }
-
-    class Middle extends React.Component {
-      render() {
-        return null;
-      }
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <Child />, portal);
-      }
-    }
-
-    class Child extends React.Component {
-      static contextTypes = {
-        value: PropTypes.string.isRequired,
-      };
-      render() {
-        return <div>{this.context.value}</div>;
+      class Child extends React.Component {
+        static contextTypes = {
+          value: PropTypes.string.isRequired,
+        };
+        render() {
+          return <div>{this.context.value}</div>;
+        }
+      }
+
+      ReactDOM.render(<Parent value="foo" />, container);
+      expect(portal.textContent).toBe('foo');
+    });
+
+    it('should get context through middle non-context-provider layer', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const portal1 = document.createElement('div');
+      const portal2 = document.createElement('div');
+
+      class Parent extends React.Component {
+        render() {
+          return null;
+        }
+        getChildContext() {
+          return {value: this.props.value};
+        }
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <Middle />, portal1);
+        }
+        static childContextTypes = {
+          value: PropTypes.string.isRequired,
+        };
       }
-    }
-
-    ReactDOM.render(<Parent value="foo" />, container);
-    expect(portal.textContent).toBe('foo');
-  });
-
-  it('should get context through middle non-context-provider layer', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const portal1 = document.createElement('div');
-    const portal2 = document.createElement('div');
 
-    class Parent extends React.Component {
-      render() {
-        return null;
-      }
-      getChildContext() {
-        return {value: this.props.value};
-      }
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <Middle />, portal1);
+      class Middle extends React.Component {
+        render() {
+          return null;
+        }
+        componentDidMount() {
+          renderSubtreeIntoContainer(this, <Child />, portal2);
+        }
       }
-      static childContextTypes = {
-        value: PropTypes.string.isRequired,
-      };
-    }
-
-    class Middle extends React.Component {
-      render() {
-        return null;
-      }
-      componentDidMount() {
-        renderSubtreeIntoContainer(this, <Child />, portal2);
-      }
-    }
-
-    class Child extends React.Component {
-      static contextTypes = {
-        value: PropTypes.string.isRequired,
-      };
-      render() {
-        return <div>{this.context.value}</div>;
-      }
-    }
 
-    ReactDOM.render(<Parent value="foo" />, container);
-    expect(portal2.textContent).toBe('foo');
-  });
-
-  it('fails gracefully when mixing React 15 and 16', () => {
-    class C extends React.Component {
-      render() {
-        return <div />;
-      }
-    }
-    const c = ReactDOM.render(<C />, document.createElement('div'));
-    // React 15 calls this:
-    // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
-    expect(() => {
-      c._reactInternalInstance._processChildContext({});
-    }).toThrow(
-      __DEV__
-        ? '_processChildContext is not available in React 16+. This likely ' +
-          'means you have multiple copies of React and are attempting to nest ' +
-          'a React 15 tree inside a React 16 tree using ' +
-          "unstable_renderSubtreeIntoContainer, which isn't supported. Try to " +
-          'make sure you have only one copy of React (and ideally, switch to ' +
-          'ReactDOM.createPortal).'
-        : "Cannot read property '_processChildContext' of undefined",
-    );
+      class Child extends React.Component {
+        static contextTypes = {
+          value: PropTypes.string.isRequired,
+        };
+        render() {
+          return <div>{this.context.value}</div>;
+        }
+      }
+
+      ReactDOM.render(<Parent value="foo" />, container);
+      expect(portal2.textContent).toBe('foo');
+    });
+
+    it('fails gracefully when mixing React 15 and 16', () => {
+      class C extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      const c = ReactDOM.render(<C />, document.createElement('div'));
+      // React 15 calls this:
+      // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
+      expect(() => {
+        c._reactInternalInstance._processChildContext({});
+      }).toThrow(
+        __DEV__
+          ? '_processChildContext is not available in React 16+. This likely ' +
+              'means you have multiple copies of React and are attempting to nest ' +
+              'a React 15 tree inside a React 16 tree using ' +
+              "unstable_renderSubtreeIntoContainer, which isn't supported. Try to " +
+              'make sure you have only one copy of React (and ideally, switch to ' +
+              'ReactDOM.createPortal).'
+          : "Cannot read property '_processChildContext' of undefined",
+      );
+    });
   });
-});
+}
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index 55350b42a378e..69375fd52878b 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -14,9 +14,10 @@ const stream = require('stream');
 module.exports = function(initModules) {
   let ReactDOM;
   let ReactDOMServer;
+  let ReactTestUtils;
 
   function resetModules() {
-    ({ReactDOM, ReactDOMServer} = initModules());
+    ({ReactDOM, ReactDOMServer, ReactTestUtils} = initModules());
   }
 
   function shouldUseDocument(reactElement) {
@@ -48,9 +49,13 @@ module.exports = function(initModules) {
   function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
     return new Promise(resolve => {
       if (forceHydrate) {
-        ReactDOM.hydrate(reactElement, domElement);
+        ReactTestUtils.act(() => {
+          ReactDOM.hydrate(reactElement, domElement);
+        });
       } else {
-        ReactDOM.render(reactElement, domElement);
+        ReactTestUtils.act(() => {
+          ReactDOM.render(reactElement, domElement);
+        });
       }
       // We can't use the callback for resolution because that will not catch
       // errors. They're thrown.
@@ -64,7 +69,7 @@ module.exports = function(initModules) {
       console.error.calls.reset();
     } else {
       // TODO: Rewrite tests that use this helper to enumerate expected errors.
-      // This will enable the helper to use the .toWarnDev() matcher instead of spying.
+      // This will enable the helper to use the .toErrorDev() matcher instead of spying.
       spyOnDev(console, 'error');
     }
 
diff --git a/packages/react-dom/src/__tests__/validateDOMNesting-test.js b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
index 8ed5e85135a3e..1f67cc1f571dc 100644
--- a/packages/react-dom/src/__tests__/validateDOMNesting-test.js
+++ b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
@@ -28,7 +28,7 @@ function expectWarnings(tags, warnings = [], withoutStack = 0) {
     element = <Tag>{element}</Tag>;
   }
 
-  expect(() => ReactDOM.render(element, container)).toWarnDev(warnings, {
+  expect(() => ReactDOM.render(element, container)).toErrorDev(warnings, {
     withoutStack,
   });
 }
@@ -81,7 +81,7 @@ describe('validateDOMNesting', () => {
       ['table', 'tr'],
       [
         'validateDOMNesting(...): <tr> cannot appear as a child of <table>. ' +
-          'Add a <tbody> to your code to match the DOM tree generated by the browser.\n' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
           '    in tr (at **)',
       ],
     );
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 6a2d0f7d244a6..2fcf3d2efc37f 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -16,7 +16,10 @@ import {
   OVERLOADED_BOOLEAN,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
+import {
+  disableJavaScriptURLs,
+  enableTrustedTypesIntegration,
+} from 'shared/ReactFeatureFlags';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -142,7 +145,10 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
-        node.setAttribute(attributeName, '' + (value: any));
+        node.setAttribute(
+          attributeName,
+          enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+        );
       }
     }
     return;
@@ -168,13 +174,19 @@ export function setValueForProperty(
     const {type} = propertyInfo;
     let attributeValue;
     if (type === BOOLEAN || (type === OVERLOADED_BOOLEAN && value === true)) {
+      // If attribute type is boolean, we know for sure it won't be an execution sink
+      // and we won't require Trusted Type here.
       attributeValue = '';
     } else {
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
-      attributeValue = '' + (value: any);
+      if (enableTrustedTypesIntegration) {
+        attributeValue = (value: any);
+      } else {
+        attributeValue = '' + (value: any);
+      }
       if (propertyInfo.sanitizeURL) {
-        sanitizeURL(attributeValue);
+        sanitizeURL(attributeValue.toString());
       }
     }
     if (attributeNamespace) {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 1db9e527efe19..855052f9b5ef4 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -7,63 +7,57 @@
  * @flow
  */
 
+import type {RootType} from './ReactDOMRoot';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {RootTag} from 'shared/ReactRootTags';
-// TODO: This type is shared between the reconciler and ReactDOM, but will
-// eventually be lifted out to the renderer.
-import type {
-  FiberRoot,
-  Batch as FiberRootBatch,
-} from 'react-reconciler/src/ReactFiberRoot';
 
 import '../shared/checkReact';
 import './ReactDOMClientInjection';
+import {
+  findDOMNode,
+  render,
+  hydrate,
+  unstable_renderSubtreeIntoContainer,
+  unmountComponentAtNode,
+} from './ReactDOMLegacy';
+import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
 
 import {
-  computeUniqueAsyncExpiration,
-  findHostInstanceWithNoPortals,
-  updateContainerAtExpirationTime,
-  flushRoot,
-  createContainer,
-  updateContainer,
   batchedEventUpdates,
   batchedUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   flushDiscreteUpdates,
   flushSync,
   flushControlled,
   injectIntoDevTools,
-  getPublicRootInstance,
-  findHostInstance,
-  findHostInstanceWithWarning,
   flushPassiveEffects,
-  ReactActingRendererSigil,
+  IsThisRendererActing,
+  attemptSynchronousHydration,
+  attemptUserBlockingHydration,
+  attemptContinuousHydration,
+  attemptHydrationAtCurrentPriority,
 } from 'react-reconciler/inline.dom';
 import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {setBatchingImplementation} from 'events/ReactGenericBatching';
+import {setBatchingImplementation} from 'legacy-events/ReactGenericBatching';
 import {
   setRestoreImplementation,
   enqueueStateRestore,
   restoreStateIfNeeded,
-} from 'events/ReactControlledComponent';
-import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
-import {runEventsInBatch} from 'events/EventBatching';
-import {eventNameDispatchConfigs} from 'events/EventPluginRegistry';
+} from 'legacy-events/ReactControlledComponent';
+import {injection as EventPluginHubInjection} from 'legacy-events/EventPluginHub';
+import {runEventsInBatch} from 'legacy-events/EventBatching';
+import {eventNameDispatchConfigs} from 'legacy-events/EventPluginRegistry';
 import {
   accumulateTwoPhaseDispatches,
   accumulateDirectDispatches,
-} from 'events/EventPropagators';
-import {LegacyRoot, ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags';
-import {has as hasInstance} from 'shared/ReactInstanceMap';
+} from 'legacy-events/EventPropagators';
 import ReactVersion from 'shared/ReactVersion';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
+import {
+  exposeConcurrentModeAPIs,
+  disableUnstableCreatePortal,
+  disableUnstableRenderSubtreeIntoContainer,
+} from 'shared/ReactFeatureFlags';
 
 import {
   getInstanceFromNode,
@@ -74,18 +68,20 @@ import {
 import {restoreControlledState} from './ReactDOMComponent';
 import {dispatchEvent} from '../events/ReactDOMEventListener';
 import {
-  ELEMENT_NODE,
-  COMMENT_NODE,
-  DOCUMENT_NODE,
-  DOCUMENT_FRAGMENT_NODE,
-} from '../shared/HTMLNodeType';
-import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty';
+  setAttemptSynchronousHydration,
+  setAttemptUserBlockingHydration,
+  setAttemptContinuousHydration,
+  setAttemptHydrationAtCurrentPriority,
+  queueExplicitHydrationTarget,
+} from '../events/ReactDOMEventReplaying';
+
+setAttemptSynchronousHydration(attemptSynchronousHydration);
+setAttemptUserBlockingHydration(attemptUserBlockingHydration);
+setAttemptContinuousHydration(attemptContinuousHydration);
+setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 
-const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-
-let topLevelUpdateWarnings;
-let warnOnInvalidCallback;
 let didWarnAboutUnstableCreatePortal = false;
+let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
 
 if (__DEV__) {
   if (
@@ -99,388 +95,14 @@ if (__DEV__) {
     typeof Set.prototype.clear !== 'function' ||
     typeof Set.prototype.forEach !== 'function'
   ) {
-    warningWithoutStack(
-      false,
+    console.error(
       'React depends on Map and Set built-in types. Make sure that you load a ' +
         'polyfill in older browsers. https://fb.me/react-polyfills',
     );
   }
-
-  topLevelUpdateWarnings = (container: DOMContainer) => {
-    if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
-      const hostInstance = findHostInstanceWithNoPortals(
-        container._reactRootContainer._internalRoot.current,
-      );
-      if (hostInstance) {
-        warningWithoutStack(
-          hostInstance.parentNode === container,
-          'render(...): It looks like the React-rendered content of this ' +
-            'container was removed without using React. This is not ' +
-            'supported and will cause errors. Instead, call ' +
-            'ReactDOM.unmountComponentAtNode to empty a container.',
-        );
-      }
-    }
-
-    const isRootRenderedBySomeReact = !!container._reactRootContainer;
-    const rootEl = getReactRootElementInContainer(container);
-    const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
-
-    warningWithoutStack(
-      !hasNonRootReactChild || isRootRenderedBySomeReact,
-      'render(...): Replacing React-rendered children with a new root ' +
-        'component. If you intended to update the children of this node, ' +
-        'you should instead have the existing children update their state ' +
-        'and render the new components instead of calling ReactDOM.render.',
-    );
-
-    warningWithoutStack(
-      container.nodeType !== ELEMENT_NODE ||
-        !((container: any): Element).tagName ||
-        ((container: any): Element).tagName.toUpperCase() !== 'BODY',
-      'render(): Rendering components directly into document.body is ' +
-        'discouraged, since its children are often manipulated by third-party ' +
-        'scripts and browser extensions. This may lead to subtle ' +
-        'reconciliation issues. Try rendering into a container element created ' +
-        'for your app.',
-    );
-  };
-
-  warnOnInvalidCallback = function(callback: mixed, callerName: string) {
-    warningWithoutStack(
-      callback === null || typeof callback === 'function',
-      '%s(...): Expected the last optional `callback` argument to be a ' +
-        'function. Instead received: %s.',
-      callerName,
-      callback,
-    );
-  };
 }
 
 setRestoreImplementation(restoreControlledState);
-
-export type DOMContainer =
-  | (Element & {
-      _reactRootContainer: ?(_ReactRoot | _ReactSyncRoot),
-      _reactHasBeenPassedToCreateRootDEV: ?boolean,
-    })
-  | (Document & {
-      _reactRootContainer: ?(_ReactRoot | _ReactSyncRoot),
-      _reactHasBeenPassedToCreateRootDEV: ?boolean,
-    });
-
-type Batch = FiberRootBatch & {
-  render(children: ReactNodeList): Work,
-  then(onComplete: () => mixed): void,
-  commit(): void,
-
-  // The ReactRoot constructor is hoisted but the prototype methods are not. If
-  // we move ReactRoot to be above ReactBatch, the inverse error occurs.
-  // $FlowFixMe Hoisting issue.
-  _root: _ReactRoot | _ReactSyncRoot,
-  _hasChildren: boolean,
-  _children: ReactNodeList,
-
-  _callbacks: Array<() => mixed> | null,
-  _didComplete: boolean,
-};
-
-type _ReactSyncRoot = {
-  render(children: ReactNodeList, callback: ?() => mixed): Work,
-  unmount(callback: ?() => mixed): Work,
-
-  _internalRoot: FiberRoot,
-};
-
-type _ReactRoot = _ReactSyncRoot & {
-  createBatch(): Batch,
-};
-
-function ReactBatch(root: _ReactRoot | _ReactSyncRoot) {
-  const expirationTime = computeUniqueAsyncExpiration();
-  this._expirationTime = expirationTime;
-  this._root = root;
-  this._next = null;
-  this._callbacks = null;
-  this._didComplete = false;
-  this._hasChildren = false;
-  this._children = null;
-  this._defer = true;
-}
-ReactBatch.prototype.render = function(children: ReactNodeList) {
-  invariant(
-    this._defer,
-    'batch.render: Cannot render a batch that already committed.',
-  );
-  this._hasChildren = true;
-  this._children = children;
-  const internalRoot = this._root._internalRoot;
-  const expirationTime = this._expirationTime;
-  const work = new ReactWork();
-  updateContainerAtExpirationTime(
-    children,
-    internalRoot,
-    null,
-    expirationTime,
-    null,
-    work._onCommit,
-  );
-  return work;
-};
-ReactBatch.prototype.then = function(onComplete: () => mixed) {
-  if (this._didComplete) {
-    onComplete();
-    return;
-  }
-  let callbacks = this._callbacks;
-  if (callbacks === null) {
-    callbacks = this._callbacks = [];
-  }
-  callbacks.push(onComplete);
-};
-ReactBatch.prototype.commit = function() {
-  const internalRoot = this._root._internalRoot;
-  let firstBatch = internalRoot.firstBatch;
-  invariant(
-    this._defer && firstBatch !== null,
-    'batch.commit: Cannot commit a batch multiple times.',
-  );
-
-  if (!this._hasChildren) {
-    // This batch is empty. Return.
-    this._next = null;
-    this._defer = false;
-    return;
-  }
-
-  let expirationTime = this._expirationTime;
-
-  // Ensure this is the first batch in the list.
-  if (firstBatch !== this) {
-    // This batch is not the earliest batch. We need to move it to the front.
-    // Update its expiration time to be the expiration time of the earliest
-    // batch, so that we can flush it without flushing the other batches.
-    if (this._hasChildren) {
-      expirationTime = this._expirationTime = firstBatch._expirationTime;
-      // Rendering this batch again ensures its children will be the final state
-      // when we flush (updates are processed in insertion order: last
-      // update wins).
-      // TODO: This forces a restart. Should we print a warning?
-      this.render(this._children);
-    }
-
-    // Remove the batch from the list.
-    let previous = null;
-    let batch = firstBatch;
-    while (batch !== this) {
-      previous = batch;
-      batch = batch._next;
-    }
-    invariant(
-      previous !== null,
-      'batch.commit: Cannot commit a batch multiple times.',
-    );
-    previous._next = batch._next;
-
-    // Add it to the front.
-    this._next = firstBatch;
-    firstBatch = internalRoot.firstBatch = this;
-  }
-
-  // Synchronously flush all the work up to this batch's expiration time.
-  this._defer = false;
-  flushRoot(internalRoot, expirationTime);
-
-  // Pop the batch from the list.
-  const next = this._next;
-  this._next = null;
-  firstBatch = internalRoot.firstBatch = next;
-
-  // Append the next earliest batch's children to the update queue.
-  if (firstBatch !== null && firstBatch._hasChildren) {
-    firstBatch.render(firstBatch._children);
-  }
-};
-ReactBatch.prototype._onComplete = function() {
-  if (this._didComplete) {
-    return;
-  }
-  this._didComplete = true;
-  const callbacks = this._callbacks;
-  if (callbacks === null) {
-    return;
-  }
-  // TODO: Error handling.
-  for (let i = 0; i < callbacks.length; i++) {
-    const callback = callbacks[i];
-    callback();
-  }
-};
-
-type Work = {
-  then(onCommit: () => mixed): void,
-  _onCommit: () => void,
-  _callbacks: Array<() => mixed> | null,
-  _didCommit: boolean,
-};
-
-function ReactWork() {
-  this._callbacks = null;
-  this._didCommit = false;
-  // TODO: Avoid need to bind by replacing callbacks in the update queue with
-  // list of Work objects.
-  this._onCommit = this._onCommit.bind(this);
-}
-ReactWork.prototype.then = function(onCommit: () => mixed): void {
-  if (this._didCommit) {
-    onCommit();
-    return;
-  }
-  let callbacks = this._callbacks;
-  if (callbacks === null) {
-    callbacks = this._callbacks = [];
-  }
-  callbacks.push(onCommit);
-};
-ReactWork.prototype._onCommit = function(): void {
-  if (this._didCommit) {
-    return;
-  }
-  this._didCommit = true;
-  const callbacks = this._callbacks;
-  if (callbacks === null) {
-    return;
-  }
-  // TODO: Error handling.
-  for (let i = 0; i < callbacks.length; i++) {
-    const callback = callbacks[i];
-    invariant(
-      typeof callback === 'function',
-      'Invalid argument passed as callback. Expected a function. Instead ' +
-        'received: %s',
-      callback,
-    );
-    callback();
-  }
-};
-
-function ReactSyncRoot(
-  container: DOMContainer,
-  tag: RootTag,
-  hydrate: boolean,
-) {
-  // Tag is either LegacyRoot or Concurrent Root
-  const root = createContainer(container, tag, hydrate);
-  this._internalRoot = root;
-}
-
-function ReactRoot(container: DOMContainer, hydrate: boolean) {
-  const root = createContainer(container, ConcurrentRoot, hydrate);
-  this._internalRoot = root;
-}
-
-ReactRoot.prototype.render = ReactSyncRoot.prototype.render = function(
-  children: ReactNodeList,
-  callback: ?() => mixed,
-): Work {
-  const root = this._internalRoot;
-  const work = new ReactWork();
-  callback = callback === undefined ? null : callback;
-  if (__DEV__) {
-    warnOnInvalidCallback(callback, 'render');
-  }
-  if (callback !== null) {
-    work.then(callback);
-  }
-  updateContainer(children, root, null, work._onCommit);
-  return work;
-};
-
-ReactRoot.prototype.unmount = ReactSyncRoot.prototype.unmount = function(
-  callback: ?() => mixed,
-): Work {
-  const root = this._internalRoot;
-  const work = new ReactWork();
-  callback = callback === undefined ? null : callback;
-  if (__DEV__) {
-    warnOnInvalidCallback(callback, 'render');
-  }
-  if (callback !== null) {
-    work.then(callback);
-  }
-  updateContainer(null, root, null, work._onCommit);
-  return work;
-};
-
-// Sync roots cannot create batches. Only concurrent ones.
-ReactRoot.prototype.createBatch = function(): Batch {
-  const batch = new ReactBatch(this);
-  const expirationTime = batch._expirationTime;
-
-  const internalRoot = this._internalRoot;
-  const firstBatch = internalRoot.firstBatch;
-  if (firstBatch === null) {
-    internalRoot.firstBatch = batch;
-    batch._next = null;
-  } else {
-    // Insert sorted by expiration time then insertion order
-    let insertAfter = null;
-    let insertBefore = firstBatch;
-    while (
-      insertBefore !== null &&
-      insertBefore._expirationTime >= expirationTime
-    ) {
-      insertAfter = insertBefore;
-      insertBefore = insertBefore._next;
-    }
-    batch._next = insertBefore;
-    if (insertAfter !== null) {
-      insertAfter._next = batch;
-    }
-  }
-
-  return batch;
-};
-
-/**
- * True if the supplied DOM node is a valid node element.
- *
- * @param {?DOMElement} node The candidate DOM node.
- * @return {boolean} True if the DOM is a valid DOM node.
- * @internal
- */
-function isValidContainer(node) {
-  return !!(
-    node &&
-    (node.nodeType === ELEMENT_NODE ||
-      node.nodeType === DOCUMENT_NODE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
-      (node.nodeType === COMMENT_NODE &&
-        node.nodeValue === ' react-mount-point-unstable '))
-  );
-}
-
-function getReactRootElementInContainer(container: any) {
-  if (!container) {
-    return null;
-  }
-
-  if (container.nodeType === DOCUMENT_NODE) {
-    return container.documentElement;
-  } else {
-    return container.firstChild;
-  }
-}
-
-function shouldHydrateDueToLegacyHeuristic(container) {
-  const rootElement = getReactRootElementInContainer(container);
-  return !!(
-    rootElement &&
-    rootElement.nodeType === ELEMENT_NODE &&
-    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
-  );
-}
-
 setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
@@ -488,101 +110,9 @@ setBatchingImplementation(
   batchedEventUpdates,
 );
 
-let warnedAboutHydrateAPI = false;
-
-function legacyCreateRootFromDOMContainer(
-  container: DOMContainer,
-  forceHydrate: boolean,
-): _ReactSyncRoot {
-  const shouldHydrate =
-    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
-  // First clear any existing content.
-  if (!shouldHydrate) {
-    let warned = false;
-    let rootSibling;
-    while ((rootSibling = container.lastChild)) {
-      if (__DEV__) {
-        if (
-          !warned &&
-          rootSibling.nodeType === ELEMENT_NODE &&
-          (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
-        ) {
-          warned = true;
-          warningWithoutStack(
-            false,
-            'render(): Target node has markup rendered by React, but there ' +
-              'are unrelated nodes as well. This is most commonly caused by ' +
-              'white-space inserted around server-rendered markup.',
-          );
-        }
-      }
-      container.removeChild(rootSibling);
-    }
-  }
-  if (__DEV__) {
-    if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
-      warnedAboutHydrateAPI = true;
-      lowPriorityWarning(
-        false,
-        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-          'will stop working in React v17. Replace the ReactDOM.render() call ' +
-          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-      );
-    }
-  }
-
-  // Legacy roots are not batched.
-  return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);
-}
-
-function legacyRenderSubtreeIntoContainer(
-  parentComponent: ?React$Component<any, any>,
-  children: ReactNodeList,
-  container: DOMContainer,
-  forceHydrate: boolean,
-  callback: ?Function,
-) {
-  if (__DEV__) {
-    topLevelUpdateWarnings(container);
-    warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
-  }
-
-  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
-  // member of intersection type." Whyyyyyy.
-  let root: _ReactSyncRoot = (container._reactRootContainer: any);
-  let fiberRoot;
-  if (!root) {
-    // Initial mount
-    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
-      container,
-      forceHydrate,
-    );
-    fiberRoot = root._internalRoot;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Initial mount should not be batched.
-    unbatchedUpdates(() => {
-      updateContainer(children, fiberRoot, parentComponent, callback);
-    });
-  } else {
-    fiberRoot = root._internalRoot;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Update
-    updateContainer(children, fiberRoot, parentComponent, callback);
-  }
-  return getPublicRootInstance(fiberRoot);
-}
+export type DOMContainer =
+  | (Element & {_reactRootContainer: ?RootType, ...})
+  | (Document & {_reactRootContainer: ?RootType, ...});
 
 function createPortal(
   children: ReactNodeList,
@@ -600,207 +130,16 @@ function createPortal(
 const ReactDOM: Object = {
   createPortal,
 
-  findDOMNode(
-    componentOrElement: Element | ?React$Component<any, any>,
-  ): null | Element | Text {
-    if (__DEV__) {
-      let owner = (ReactCurrentOwner.current: any);
-      if (owner !== null && owner.stateNode !== null) {
-        const warnedAboutRefsInRender =
-          owner.stateNode._warnedAboutRefsInRender;
-        warningWithoutStack(
-          warnedAboutRefsInRender,
-          '%s is accessing findDOMNode inside its render(). ' +
-            'render() should be a pure function of props and state. It should ' +
-            'never access something that requires stale data from the previous ' +
-            'render, such as refs. Move this logic to componentDidMount and ' +
-            'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
-        );
-        owner.stateNode._warnedAboutRefsInRender = true;
-      }
-    }
-    if (componentOrElement == null) {
-      return null;
-    }
-    if ((componentOrElement: any).nodeType === ELEMENT_NODE) {
-      return (componentOrElement: any);
-    }
-    if (__DEV__) {
-      return findHostInstanceWithWarning(componentOrElement, 'findDOMNode');
-    }
-    return findHostInstance(componentOrElement);
-  },
-
-  hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
-    invariant(
-      isValidContainer(container),
-      'Target container is not a DOM element.',
-    );
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. ' +
-          'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-    // TODO: throw or warn if we couldn't hydrate?
-    return legacyRenderSubtreeIntoContainer(
-      null,
-      element,
-      container,
-      true,
-      callback,
-    );
-  },
-
-  render(
-    element: React$Element<any>,
-    container: DOMContainer,
-    callback: ?Function,
-  ) {
-    invariant(
-      isValidContainer(container),
-      'Target container is not a DOM element.',
-    );
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. ' +
-          'Did you mean to call root.render(element)?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-    return legacyRenderSubtreeIntoContainer(
-      null,
-      element,
-      container,
-      false,
-      callback,
-    );
-  },
-
-  unstable_renderSubtreeIntoContainer(
-    parentComponent: React$Component<any, any>,
-    element: React$Element<any>,
-    containerNode: DOMContainer,
-    callback: ?Function,
-  ) {
-    invariant(
-      isValidContainer(containerNode),
-      'Target container is not a DOM element.',
-    );
-    invariant(
-      parentComponent != null && hasInstance(parentComponent),
-      'parentComponent must be a valid React Component',
-    );
-    return legacyRenderSubtreeIntoContainer(
-      parentComponent,
-      element,
-      containerNode,
-      false,
-      callback,
-    );
-  },
-
-  unmountComponentAtNode(container: DOMContainer) {
-    invariant(
-      isValidContainer(container),
-      'unmountComponentAtNode(...): Target container is not a DOM element.',
-    );
-
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-
-    if (container._reactRootContainer) {
-      if (__DEV__) {
-        const rootEl = getReactRootElementInContainer(container);
-        const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
-        warningWithoutStack(
-          !renderedByDifferentReact,
-          "unmountComponentAtNode(): The node you're attempting to unmount " +
-            'was rendered by another copy of React.',
-        );
-      }
-
-      // Unmount should not be batched.
-      unbatchedUpdates(() => {
-        legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
-          container._reactRootContainer = null;
-        });
-      });
-      // If you call unmountComponentAtNode twice in quick succession, you'll
-      // get `true` twice. That's probably fine?
-      return true;
-    } else {
-      if (__DEV__) {
-        const rootEl = getReactRootElementInContainer(container);
-        const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
-
-        // Check if the container itself is a React root node.
-        const isContainerReactRoot =
-          container.nodeType === ELEMENT_NODE &&
-          isValidContainer(container.parentNode) &&
-          !!container.parentNode._reactRootContainer;
-
-        warningWithoutStack(
-          !hasNonRootReactChild,
-          "unmountComponentAtNode(): The node you're attempting to unmount " +
-            'was rendered by React and is not a top-level container. %s',
-          isContainerReactRoot
-            ? 'You may have accidentally passed in a React root node instead ' +
-              'of its container.'
-            : 'Instead, have the parent component update its state and ' +
-              'rerender in order to remove this component.',
-        );
-      }
-
-      return false;
-    }
-  },
-
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 17.
-  unstable_createPortal(...args) {
-    if (!didWarnAboutUnstableCreatePortal) {
-      didWarnAboutUnstableCreatePortal = true;
-      lowPriorityWarning(
-        false,
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 17+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-      );
-    }
-    return createPortal(...args);
-  },
+  // Legacy
+  findDOMNode,
+  hydrate,
+  render,
+  unmountComponentAtNode,
 
   unstable_batchedUpdates: batchedUpdates,
 
-  // TODO remove this legacy method, unstable_discreteUpdates replaces it
-  unstable_interactiveUpdates: (fn, a, b, c) => {
-    flushDiscreteUpdates();
-    return discreteUpdates(fn, a, b, c);
-  },
-
-  unstable_discreteUpdates: discreteUpdates,
-  unstable_flushDiscreteUpdates: flushDiscreteUpdates,
-
   flushSync: flushSync,
 
-  unstable_createRoot: createRoot,
-  unstable_createSyncRoot: createSyncRoot,
-  unstable_flushControlled: flushControlled,
-
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
     // Keep in sync with ReactDOMUnstableNativeDependencies.js
     // ReactTestUtils.js, and ReactTestUtilsAct.js. This is an array for better minification.
@@ -817,64 +156,61 @@ const ReactDOM: Object = {
       dispatchEvent,
       runEventsInBatch,
       flushPassiveEffects,
-      ReactActingRendererSigil,
+      IsThisRendererActing,
     ],
   },
-};
 
-type RootOptions = {
-  hydrate?: boolean,
+  version: ReactVersion,
 };
 
-function createRoot(
-  container: DOMContainer,
-  options?: RootOptions,
-): _ReactRoot {
-  const functionName = enableStableConcurrentModeAPIs
-    ? 'createRoot'
-    : 'unstable_createRoot';
-  invariant(
-    isValidContainer(container),
-    '%s(...): Target container is not a DOM element.',
-    functionName,
-  );
-  warnIfReactDOMContainerInDEV(container);
-  const hydrate = options != null && options.hydrate === true;
-  return new ReactRoot(container, hydrate);
-}
+if (exposeConcurrentModeAPIs) {
+  ReactDOM.createRoot = createRoot;
+  ReactDOM.createBlockingRoot = createBlockingRoot;
 
-function createSyncRoot(
-  container: DOMContainer,
-  options?: RootOptions,
-): _ReactSyncRoot {
-  const functionName = enableStableConcurrentModeAPIs
-    ? 'createRoot'
-    : 'unstable_createRoot';
-  invariant(
-    isValidContainer(container),
-    '%s(...): Target container is not a DOM element.',
-    functionName,
-  );
-  warnIfReactDOMContainerInDEV(container);
-  const hydrate = options != null && options.hydrate === true;
-  return new ReactSyncRoot(container, BatchedRoot, hydrate);
+  ReactDOM.unstable_discreteUpdates = discreteUpdates;
+  ReactDOM.unstable_flushDiscreteUpdates = flushDiscreteUpdates;
+  ReactDOM.unstable_flushControlled = flushControlled;
+
+  ReactDOM.unstable_scheduleHydration = target => {
+    if (target) {
+      queueExplicitHydrationTarget(target);
+    }
+  };
 }
 
-function warnIfReactDOMContainerInDEV(container) {
-  if (__DEV__) {
-    warningWithoutStack(
-      !container._reactRootContainer,
-      'You are calling ReactDOM.%s() on a container that was previously ' +
-        'passed to ReactDOM.render(). This is not supported.',
-      enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-    );
-    container._reactHasBeenPassedToCreateRootDEV = true;
-  }
+if (!disableUnstableRenderSubtreeIntoContainer) {
+  ReactDOM.unstable_renderSubtreeIntoContainer = function(...args) {
+    if (__DEV__) {
+      if (!didWarnAboutUnstableRenderSubtreeIntoContainer) {
+        didWarnAboutUnstableRenderSubtreeIntoContainer = true;
+        console.warn(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated ' +
+            'and will be removed in a future major release. Consider using ' +
+            'React Portals instead.',
+        );
+      }
+    }
+    return unstable_renderSubtreeIntoContainer(...args);
+  };
 }
 
-if (enableStableConcurrentModeAPIs) {
-  ReactDOM.createRoot = createRoot;
-  ReactDOM.createSyncRoot = createSyncRoot;
+if (!disableUnstableCreatePortal) {
+  // Temporary alias since we already shipped React 16 RC with it.
+  // TODO: remove in React 17.
+  ReactDOM.unstable_createPortal = function(...args) {
+    if (__DEV__) {
+      if (!didWarnAboutUnstableCreatePortal) {
+        didWarnAboutUnstableCreatePortal = true;
+        console.warn(
+          'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
+            'and will be removed in React 17+. Update your code to use ' +
+            'ReactDOM.createPortal() instead. It has the exact same API, ' +
+            'but without the "unstable_" prefix.',
+        );
+      }
+    }
+    return createPortal(...args);
+  };
 }
 
 const foundDevTools = injectIntoDevTools({
@@ -895,6 +231,7 @@ if (__DEV__) {
       const protocol = window.location.protocol;
       // Don't warn in exotic cases like chrome-extension://.
       if (/^(https?|file):$/.test(protocol)) {
+        // eslint-disable-next-line react-internal/no-production-logging
         console.info(
           '%cDownload the React DevTools ' +
             'for a better development experience: ' +
diff --git a/packages/react-dom/src/client/ReactDOMClientInjection.js b/packages/react-dom/src/client/ReactDOMClientInjection.js
index c2c6229e05656..604c3ff976bb8 100644
--- a/packages/react-dom/src/client/ReactDOMClientInjection.js
+++ b/packages/react-dom/src/client/ReactDOMClientInjection.js
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
-import {setComponentTree} from 'events/EventPluginUtils';
+import {injection as EventPluginHubInjection} from 'legacy-events/EventPluginHub';
+import {setComponentTree} from 'legacy-events/EventPluginUtils';
 
 import {
   getFiberCurrentPropsFromNode,
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 33886140fd5ce..e5111ae603562 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -9,16 +9,10 @@
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import {registrationNameModules} from 'events/EventPluginRegistry';
-import warning from 'shared/warning';
+import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import type {ReactEventResponderEventType} from 'shared/ReactTypes';
-import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
-import {
-  setListenToResponderEventTypes,
-  generateListeningKey,
-} from '../events/DOMEventResponderSystem';
+import endsWith from 'shared/endsWith';
+import {setListenToResponderEventTypes} from '../events/DeprecatedDOMEventResponderSystem';
 
 import {
   getValueForAttribute,
@@ -66,9 +60,12 @@ import {
 import {
   listenTo,
   trapBubbledEvent,
-  getListeningSetForElement,
+  getListenerMapForElement,
 } from '../events/ReactBrowserEventEmitter';
-import {trapEventForResponderEventSystem} from '../events/ReactDOMEventListener.js';
+import {
+  addResponderEventSystemEvent,
+  removeActiveResponderEventSystemEvent,
+} from '../events/ReactDOMEventListener.js';
 import {mediaEventTypes} from '../events/DOMTopLevelEventTypes';
 import {
   createDangerousStringForStyles,
@@ -89,19 +86,23 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
+import {
+  enableDeprecatedFlareAPI,
+  enableTrustedTypesIntegration,
+} from 'shared/ReactFeatureFlags';
 
 let didWarnInvalidHydration = false;
 let didWarnShadyDOM = false;
+let didWarnScriptTags = false;
 
 const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
 const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
-const HYDRATE_TOUCH_HIT_TARGET = 'hydrateTouchHitTarget';
 const AUTOFOCUS = 'autoFocus';
 const CHILDREN = 'children';
 const STYLE = 'style';
 const HTML = '__html';
+const DEPRECATED_flareListeners = 'DEPRECATED_flareListeners';
 
 const {html: HTML_NAMESPACE} = Namespaces;
 
@@ -180,8 +181,7 @@ if (__DEV__) {
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Text content did not match. Server: "%s" Client: "%s"',
       normalizedServerText,
       normalizedClientText,
@@ -206,8 +206,7 @@ if (__DEV__) {
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Prop `%s` did not match. Server: %s Client: %s',
       propName,
       JSON.stringify(normalizedServerValue),
@@ -224,13 +223,12 @@ if (__DEV__) {
     attributeNames.forEach(function(name) {
       names.push(name);
     });
-    warningWithoutStack(false, 'Extra attributes from the server: %s', names);
+    console.error('Extra attributes from the server: %s', names);
   };
 
   warnForInvalidEventListener = function(registrationName, listener) {
     if (listener === false) {
-      warning(
-        false,
+      console.error(
         'Expected `%s` listener to be a function, instead got `false`.\n\n' +
           'If you used to conditionally omit it with %s={condition && value}, ' +
           'pass %s={condition ? value : undefined} instead.',
@@ -239,8 +237,7 @@ if (__DEV__) {
         registrationName,
       );
     } else {
-      warning(
-        false,
+      console.error(
         'Expected `%s` listener to be a function, instead got a value of `%s` type.',
         registrationName,
         typeof listener,
@@ -344,6 +341,7 @@ function setInitialDOMProperties(
         setTextContent(domElement, '' + nextProp);
       }
     } else if (
+      (enableDeprecatedFlareAPI && propKey === DEPRECATED_flareListeners) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -411,19 +409,31 @@ export function createElement(
       isCustomComponentTag = isCustomComponent(type, props);
       // Should this check be gated by parent namespace? Not sure we want to
       // allow <SVG> or <mATH>.
-      warning(
-        isCustomComponentTag || type === type.toLowerCase(),
-        '<%s /> is using incorrect casing. ' +
-          'Use PascalCase for React components, ' +
-          'or lowercase for HTML elements.',
-        type,
-      );
+      if (!isCustomComponentTag && type !== type.toLowerCase()) {
+        console.error(
+          '<%s /> is using incorrect casing. ' +
+            'Use PascalCase for React components, ' +
+            'or lowercase for HTML elements.',
+          type,
+        );
+      }
     }
 
     if (type === 'script') {
       // Create the script via .innerHTML so its "parser-inserted" flag is
       // set to true and it does not execute
       const div = ownerDocument.createElement('div');
+      if (__DEV__) {
+        if (enableTrustedTypesIntegration && !didWarnScriptTags) {
+          console.error(
+            'Encountered a script tag while rendering React component. ' +
+              'Scripts inside React components are never executed when rendering ' +
+              'on the client. Consider using template tag instead ' +
+              '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
+          );
+          didWarnScriptTags = true;
+        }
+      }
       div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
       // This is guaranteed to yield a script element.
       const firstChild = ((div.firstChild: any): HTMLScriptElement);
@@ -470,8 +480,7 @@ export function createElement(
         !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)
       ) {
         warnedUnknownTags[type] = true;
-        warning(
-          false,
+        console.error(
           'The tag <%s> is unrecognized in this browser. ' +
             'If you meant to render a React component, start its name with ' +
             'an uppercase letter.',
@@ -507,8 +516,7 @@ export function setInitialProperties(
       !didWarnShadyDOM &&
       (domElement: any).shadyRoot
     ) {
-      warning(
-        false,
+      console.error(
         '%s is using shady DOM. Using shady DOM with React can ' +
           'cause things to break subtly.',
         getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -700,6 +708,7 @@ export function diffProperties(
     } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {
       // Noop. This is handled by the clear text mechanism.
     } else if (
+      (enableDeprecatedFlareAPI && propKey === DEPRECATED_flareListeners) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -777,7 +786,7 @@ export function diffProperties(
       const lastHtml = lastProp ? lastProp[HTML] : undefined;
       if (nextHtml != null) {
         if (lastHtml !== nextHtml) {
-          (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);
+          (updatePayload = updatePayload || []).push(propKey, nextHtml);
         }
       } else {
         // TODO: It might be too late to clear this if we have children
@@ -791,6 +800,7 @@ export function diffProperties(
         (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
       }
     } else if (
+      (enableDeprecatedFlareAPI && propKey === DEPRECATED_flareListeners) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -903,8 +913,7 @@ export function diffHydratedProperties(
       !didWarnShadyDOM &&
       (domElement: any).shadyRoot
     ) {
-      warning(
-        false,
+      console.error(
         '%s is using shady DOM. Using shady DOM with React can ' +
           'cause things to break subtly.',
         getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -1034,8 +1043,6 @@ export function diffHydratedProperties(
         }
         ensureListeningTo(rootContainerElement, propKey);
       }
-    } else if (enableEventAPI && propKey === HYDRATE_TOUCH_HIT_TARGET) {
-      updatePayload = [STYLE, rawProps.style];
     } else if (
       __DEV__ &&
       // Convince Flow we've calculated it (it's DEV-only in this method.)
@@ -1047,6 +1054,7 @@ export function diffHydratedProperties(
       if (suppressHydrationWarning) {
         // Don't bother comparing. We're ignoring all these warnings.
       } else if (
+        (enableDeprecatedFlareAPI && propKey === DEPRECATED_flareListeners) ||
         propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
         propKey === SUPPRESS_HYDRATION_WARNING ||
         // Controlled attributes are not validated
@@ -1197,8 +1205,7 @@ export function warnForDeletedHydratableElement(
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Did not expect server HTML to contain a <%s> in <%s>.',
       child.nodeName.toLowerCase(),
       parentNode.nodeName.toLowerCase(),
@@ -1215,8 +1222,7 @@ export function warnForDeletedHydratableText(
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Did not expect server HTML to contain the text node "%s" in <%s>.',
       child.nodeValue,
       parentNode.nodeName.toLowerCase(),
@@ -1234,8 +1240,7 @@ export function warnForInsertedHydratedElement(
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Expected server HTML to contain a matching <%s> in <%s>.',
       tag,
       parentNode.nodeName.toLowerCase(),
@@ -1259,8 +1264,7 @@ export function warnForInsertedHydratedText(
       return;
     }
     didWarnInvalidHydration = true;
-    warningWithoutStack(
-      false,
+    console.error(
       'Expected server HTML to contain a matching text node for "%s" in <%s>.',
       text,
       parentNode.nodeName.toLowerCase(),
@@ -1287,56 +1291,57 @@ export function restoreControlledState(
 }
 
 export function listenToEventResponderEventTypes(
-  eventTypes: Array<ReactEventResponderEventType>,
-  element: Element | Document,
+  eventTypes: Array<string>,
+  document: Document,
 ): void {
-  if (enableEventAPI) {
-    // Get the listening Set for this element. We use this to track
+  if (enableDeprecatedFlareAPI) {
+    // Get the listening Map for this element. We use this to track
     // what events we're listening to.
-    const listeningSet = getListeningSetForElement(element);
+    const listenerMap = getListenerMapForElement(document);
 
     // Go through each target event type of the event responder
     for (let i = 0, length = eventTypes.length; i < length; ++i) {
-      const targetEventType = eventTypes[i];
-      let topLevelType;
-      let passive = true;
-
-      // If no event config object is provided (i.e. - only a string),
-      // we default to enabling passive and not capture.
-      if (typeof targetEventType === 'string') {
-        topLevelType = targetEventType;
-      } else {
-        if (__DEV__) {
-          warning(
-            typeof targetEventType === 'object' && targetEventType !== null,
-            'Event Responder: invalid entry in event types array. ' +
-              'Entry must be string or an object. Instead, got %s.',
-            targetEventType,
-          );
-        }
-        const targetEventConfigObject = ((targetEventType: any): {
-          name: string,
-          passive?: boolean,
-        });
-        topLevelType = targetEventConfigObject.name;
-        if (targetEventConfigObject.passive !== undefined) {
-          passive = targetEventConfigObject.passive;
+      const eventType = eventTypes[i];
+      const isPassive = !endsWith(eventType, '_active');
+      const eventKey = isPassive ? eventType + '_passive' : eventType;
+      const targetEventType = isPassive
+        ? eventType
+        : eventType.substring(0, eventType.length - 7);
+      if (!listenerMap.has(eventKey)) {
+        if (isPassive) {
+          const activeKey = targetEventType + '_active';
+          // If we have an active event listener, do not register
+          // a passive event listener. We use the same active event
+          // listener.
+          if (listenerMap.has(activeKey)) {
+            continue;
+          }
+        } else {
+          // If we have a passive event listener, remove the
+          // existing passive event listener before we add the
+          // active event listener.
+          const passiveKey = targetEventType + '_passive';
+          const passiveListener = listenerMap.get(passiveKey);
+          if (passiveListener != null) {
+            removeActiveResponderEventSystemEvent(
+              document,
+              targetEventType,
+              passiveListener,
+            );
+          }
         }
-      }
-      const listeningName = generateListeningKey(topLevelType, passive);
-      if (!listeningSet.has(listeningName)) {
-        trapEventForResponderEventSystem(
-          element,
-          ((topLevelType: any): DOMTopLevelEventType),
-          passive,
+        const eventListener = addResponderEventSystemEvent(
+          document,
+          targetEventType,
+          isPassive,
         );
-        listeningSet.add(listeningName);
+        listenerMap.set(eventKey, eventListener);
       }
     }
   }
 }
 
 // We can remove this once the event API is stable and out of a flag
-if (enableEventAPI) {
+if (enableDeprecatedFlareAPI) {
   setListenToResponderEventTypes(listenToEventResponderEventTypes);
 }
diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
index a3b61d6e49e0a..575cd3860a683 100644
--- a/packages/react-dom/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -5,44 +5,118 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {HostComponent, HostText} from 'shared/ReactWorkTags';
+import {
+  HostComponent,
+  HostText,
+  HostRoot,
+  SuspenseComponent,
+} from 'shared/ReactWorkTags';
 import invariant from 'shared/invariant';
 
+import {getParentSuspenseInstance} from './ReactDOMHostConfig';
+
 const randomKey = Math.random()
   .toString(36)
   .slice(2);
 const internalInstanceKey = '__reactInternalInstance$' + randomKey;
 const internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
+const internalContainerInstanceKey = '__reactContainere$' + randomKey;
 
 export function precacheFiberNode(hostInst, node) {
   node[internalInstanceKey] = hostInst;
 }
 
-/**
- * Given a DOM node, return the closest ReactDOMComponent or
- * ReactDOMTextComponent instance ancestor.
- */
-export function getClosestInstanceFromNode(node) {
-  if (node[internalInstanceKey]) {
-    return node[internalInstanceKey];
-  }
+export function markContainerAsRoot(hostRoot, node) {
+  node[internalContainerInstanceKey] = hostRoot;
+}
 
-  while (!node[internalInstanceKey]) {
-    if (node.parentNode) {
-      node = node.parentNode;
-    } else {
-      // Top of the tree. This node must not be part of a React tree (or is
-      // unmounted, potentially).
-      return null;
-    }
-  }
+export function unmarkContainerAsRoot(node) {
+  node[internalContainerInstanceKey] = null;
+}
 
-  let inst = node[internalInstanceKey];
-  if (inst.tag === HostComponent || inst.tag === HostText) {
-    // In Fiber, this will always be the deepest root.
-    return inst;
+export function isContainerMarkedAsRoot(node) {
+  return !!node[internalContainerInstanceKey];
+}
+
+// Given a DOM node, return the closest HostComponent or HostText fiber ancestor.
+// If the target node is part of a hydrated or not yet rendered subtree, then
+// this may also return a SuspenseComponent or HostRoot to indicate that.
+// Conceptually the HostRoot fiber is a child of the Container node. So if you
+// pass the Container node as the targetNode, you will not actually get the
+// HostRoot back. To get to the HostRoot, you need to pass a child of it.
+// The same thing applies to Suspense boundaries.
+export function getClosestInstanceFromNode(targetNode) {
+  let targetInst = targetNode[internalInstanceKey];
+  if (targetInst) {
+    // Don't return HostRoot or SuspenseComponent here.
+    return targetInst;
   }
+  // If the direct event target isn't a React owned DOM node, we need to look
+  // to see if one of its parents is a React owned DOM node.
+  let parentNode = targetNode.parentNode;
+  while (parentNode) {
+    // We'll check if this is a container root that could include
+    // React nodes in the future. We need to check this first because
+    // if we're a child of a dehydrated container, we need to first
+    // find that inner container before moving on to finding the parent
+    // instance. Note that we don't check this field on  the targetNode
+    // itself because the fibers are conceptually between the container
+    // node and the first child. It isn't surrounding the container node.
+    // If it's not a container, we check if it's an instance.
+    targetInst =
+      parentNode[internalContainerInstanceKey] ||
+      parentNode[internalInstanceKey];
+    if (targetInst) {
+      // Since this wasn't the direct target of the event, we might have
+      // stepped past dehydrated DOM nodes to get here. However they could
+      // also have been non-React nodes. We need to answer which one.
 
+      // If we the instance doesn't have any children, then there can't be
+      // a nested suspense boundary within it. So we can use this as a fast
+      // bailout. Most of the time, when people add non-React children to
+      // the tree, it is using a ref to a child-less DOM node.
+      // Normally we'd only need to check one of the fibers because if it
+      // has ever gone from having children to deleting them or vice versa
+      // it would have deleted the dehydrated boundary nested inside already.
+      // However, since the HostRoot starts out with an alternate it might
+      // have one on the alternate so we need to check in case this was a
+      // root.
+      const alternate = targetInst.alternate;
+      if (
+        targetInst.child !== null ||
+        (alternate !== null && alternate.child !== null)
+      ) {
+        // Next we need to figure out if the node that skipped past is
+        // nested within a dehydrated boundary and if so, which one.
+        let suspenseInstance = getParentSuspenseInstance(targetNode);
+        while (suspenseInstance !== null) {
+          // We found a suspense instance. That means that we haven't
+          // hydrated it yet. Even though we leave the comments in the
+          // DOM after hydrating, and there are boundaries in the DOM
+          // that could already be hydrated, we wouldn't have found them
+          // through this pass since if the target is hydrated it would
+          // have had an internalInstanceKey on it.
+          // Let's get the fiber associated with the SuspenseComponent
+          // as the deepest instance.
+          let targetSuspenseInst = suspenseInstance[internalInstanceKey];
+          if (targetSuspenseInst) {
+            return targetSuspenseInst;
+          }
+          // If we don't find a Fiber on the comment, it might be because
+          // we haven't gotten to hydrate it yet. There might still be a
+          // parent boundary that hasn't above this one so we need to find
+          // the outer most that is known.
+          suspenseInstance = getParentSuspenseInstance(suspenseInstance);
+          // If we don't find one, then that should mean that the parent
+          // host component also hasn't hydrated yet. We can return it
+          // below since it will bail out on the isMounted check later.
+        }
+      }
+      return targetInst;
+    }
+    targetNode = parentNode;
+    parentNode = targetNode.parentNode;
+  }
   return null;
 }
 
@@ -51,9 +125,14 @@ export function getClosestInstanceFromNode(node) {
  * instance, or null if the node was not rendered by this React.
  */
 export function getInstanceFromNode(node) {
-  const inst = node[internalInstanceKey];
+  const inst = node[internalInstanceKey] || node[internalContainerInstanceKey];
   if (inst) {
-    if (inst.tag === HostComponent || inst.tag === HostText) {
+    if (
+      inst.tag === HostComponent ||
+      inst.tag === HostText ||
+      inst.tag === SuspenseComponent ||
+      inst.tag === HostRoot
+    ) {
       return inst;
     } else {
       return null;
diff --git a/packages/react-dom/src/client/ReactDOMFB.js b/packages/react-dom/src/client/ReactDOMFB.js
index 2ff7ac5938cd0..83353421e4ae0 100644
--- a/packages/react-dom/src/client/ReactDOMFB.js
+++ b/packages/react-dom/src/client/ReactDOMFB.js
@@ -8,6 +8,7 @@
  */
 
 import {findCurrentFiberUsingSlowPath} from 'react-reconciler/reflection';
+import {getIsHydrating} from 'react-reconciler/src/ReactFiberHydrationContext';
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import {addUserTimingListener} from 'shared/ReactFeatureFlags';
 
@@ -33,6 +34,8 @@ Object.assign(
     },
     // Perf experiment
     addUserTimingListener,
+
+    getIsHydrating,
   },
 );
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index b4fa2dd61bed9..393f9f033f72a 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -7,9 +7,11 @@
  * @flow
  */
 
-import * as Scheduler from 'scheduler';
-
-import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
+import {
+  precacheFiberNode,
+  updateFiberProps,
+  getClosestInstanceFromNode,
+} from './ReactDOMComponentTree';
 import {
   createElement,
   createTextNode,
@@ -33,8 +35,7 @@ import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
 } from '../events/ReactBrowserEventEmitter';
-import {Namespaces, getChildNamespace} from '../shared/DOMNamespaces';
-import {addRootEventTypesForComponentInstance} from '../events/DOMEventResponderSystem';
+import {getChildNamespace} from '../shared/DOMNamespaces';
 import {
   ELEMENT_NODE,
   TEXT_NODE,
@@ -45,13 +46,17 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {
+  ReactDOMEventResponder,
+  ReactDOMEventResponderInstance,
+  ReactDOMFundamentalComponentInstance,
+} from 'shared/ReactDOMTypes';
 import {
   mountEventResponder,
   unmountEventResponder,
-} from '../events/DOMEventResponderSystem';
-import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
-import {canUseDOM} from 'shared/ExecutionEnvironment';
+  DEPRECATED_dispatchEventForResponderEventSystem,
+} from '../events/DeprecatedDOMEventResponderSystem';
+import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 export type Type = string;
 export type Props = {
@@ -60,13 +65,12 @@ export type Props = {
   hidden?: boolean,
   suppressHydrationWarning?: boolean,
   dangerouslySetInnerHTML?: mixed,
-  style?: {
-    display?: string,
-  },
+  style?: {display?: string, ...},
   bottom?: null | number,
   left?: null | number,
   right?: null | number,
   top?: null | number,
+  ...
 };
 export type EventTargetChildElement = {
   type: string,
@@ -78,22 +82,22 @@ export type EventTargetChildElement = {
       left?: string,
       right?: string,
       top?: string,
+      ...
     },
+    ...
   },
+  ...
 };
 export type Container = Element | Document;
 export type Instance = Element;
 export type TextInstance = Text;
-export type SuspenseInstance = Comment & {_reactRetry?: () => void};
+export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...};
 export type HydratableInstance = Instance | TextInstance | SuspenseInstance;
 export type PublicInstance = Element | Text;
 type HostContextDev = {
   namespace: string,
   ancestorInfo: mixed,
-  eventData: null | {|
-    isEventComponent?: boolean,
-    isEventTarget?: boolean,
-  |},
+  ...
 };
 type HostContextProd = string;
 export type HostContext = HostContextDev | HostContextProd;
@@ -102,24 +106,21 @@ export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
+type SelectionInformation = {|
+  activeElementDetached: null | HTMLElement,
+  focusedElem: null | HTMLElement,
+  selectionRange: mixed,
+|};
+
 import {
   enableSuspenseServerRenderer,
-  enableEventAPI,
+  enableDeprecatedFlareAPI,
+  enableFundamentalAPI,
 } from 'shared/ReactFeatureFlags';
-import warning from 'shared/warning';
-
-const {html: HTML_NAMESPACE} = Namespaces;
-
-// Intentionally not named imports because Rollup would
-// use dynamic dispatch for CommonJS interop named imports.
-const {
-  unstable_now: now,
-  unstable_scheduleCallback: scheduleDeferredCallback,
-  unstable_shouldYield: shouldYield,
-  unstable_cancelCallback: cancelDeferredCallback,
-} = Scheduler;
-
-export {now, scheduleDeferredCallback, shouldYield, cancelDeferredCallback};
+import {
+  RESPONDER_EVENT_SYSTEM,
+  IS_PASSIVE,
+} from 'legacy-events/EventSystemFlags';
 
 let SUPPRESS_HYDRATION_WARNING;
 if (__DEV__) {
@@ -134,7 +135,7 @@ const SUSPENSE_FALLBACK_START_DATA = '$!';
 const STYLE = 'style';
 
 let eventsEnabled: ?boolean = null;
-let selectionInformation: ?mixed = null;
+let selectionInformation: null | SelectionInformation = null;
 
 function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
   switch (type) {
@@ -177,7 +178,7 @@ export function getRootHostContext(
   if (__DEV__) {
     const validatedTag = type.toLowerCase();
     const ancestorInfo = updatedAncestorInfo(null, validatedTag);
-    return {namespace, ancestorInfo, eventData: null};
+    return {namespace, ancestorInfo};
   }
   return namespace;
 }
@@ -194,63 +195,12 @@ export function getChildHostContext(
       parentHostContextDev.ancestorInfo,
       type,
     );
-    return {namespace, ancestorInfo, eventData: null};
+    return {namespace, ancestorInfo};
   }
   const parentNamespace = ((parentHostContext: any): HostContextProd);
   return getChildNamespace(parentNamespace, type);
 }
 
-export function getChildHostContextForEventComponent(
-  parentHostContext: HostContext,
-): HostContext {
-  if (__DEV__) {
-    const parentHostContextDev = ((parentHostContext: any): HostContextDev);
-    const {namespace, ancestorInfo} = parentHostContextDev;
-    warning(
-      parentHostContextDev.eventData === null ||
-        !parentHostContextDev.eventData.isEventTarget,
-      'validateDOMNesting: React event targets must not have event components as children.',
-    );
-    const eventData = {
-      isEventComponent: true,
-      isEventTarget: false,
-    };
-    return {namespace, ancestorInfo, eventData};
-  }
-  return parentHostContext;
-}
-
-export function getChildHostContextForEventTarget(
-  parentHostContext: HostContext,
-  type: Symbol | number,
-): HostContext {
-  if (__DEV__) {
-    const parentHostContextDev = ((parentHostContext: any): HostContextDev);
-    const {namespace, ancestorInfo} = parentHostContextDev;
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      warning(
-        parentHostContextDev.eventData === null ||
-          !parentHostContextDev.eventData.isEventComponent,
-        'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-      const parentNamespace = parentHostContextDev.namespace;
-      if (parentNamespace !== HTML_NAMESPACE) {
-        throw new Error(
-          '<TouchHitTarget> was used in an unsupported DOM namespace. ' +
-            'Ensure the <TouchHitTarget> is used in an HTML namespace.',
-        );
-      }
-    }
-    const eventData = {
-      isEventComponent: false,
-      isEventTarget: true,
-    };
-    return {namespace, ancestorInfo, eventData};
-  }
-  return parentHostContext;
-}
-
 export function getPublicInstance(instance: Instance): * {
   return instance;
 }
@@ -263,9 +213,16 @@ export function prepareForCommit(containerInfo: Container): void {
 
 export function resetAfterCommit(containerInfo: Container): void {
   restoreSelection(selectionInformation);
-  selectionInformation = null;
   ReactBrowserEventEmitterSetEnabled(eventsEnabled);
   eventsEnabled = null;
+  if (enableDeprecatedFlareAPI) {
+    const activeElementDetached = (selectionInformation: any)
+      .activeElementDetached;
+    if (activeElementDetached !== null) {
+      dispatchDetachedBlur(activeElementDetached);
+    }
+  }
+  selectionInformation = null;
 }
 
 export function createInstance(
@@ -382,17 +339,6 @@ export function createTextInstance(
   if (__DEV__) {
     const hostContextDev = ((hostContext: any): HostContextDev);
     validateDOMNesting(null, text, hostContextDev.ancestorInfo);
-    if (enableEventAPI) {
-      const eventData = hostContextDev.eventData;
-      if (eventData !== null) {
-        warning(
-          !eventData.isEventComponent,
-          'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-            'Wrap the child text "%s" in an element.',
-          text,
-        );
-      }
-    }
   }
   const textNode: TextInstance = createTextNode(text, rootContainerInstance);
   precacheFiberNode(internalInstanceHandle, textNode);
@@ -400,12 +346,13 @@ export function createTextInstance(
 }
 
 export const isPrimaryRenderer = true;
+export const warnsIfNotActing = true;
 // This initialization code may run even on server environments
 // if a component just imports ReactDOM (e.g. for findDOMNode).
 // Some environments might not have setTimeout or clearTimeout.
-export const scheduleTimeout =
+export const scheduleTimeout: any =
   typeof setTimeout === 'function' ? setTimeout : (undefined: any);
-export const cancelTimeout =
+export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
 
@@ -520,6 +467,52 @@ export function insertInContainerBefore(
   }
 }
 
+function dispatchBeforeDetachedBlur(target: HTMLElement): void {
+  const targetInstance = getClosestInstanceFromNode(target);
+  ((selectionInformation: any): SelectionInformation).activeElementDetached = target;
+
+  DEPRECATED_dispatchEventForResponderEventSystem(
+    'beforeblur',
+    targetInstance,
+    ({
+      target,
+      timeStamp: Date.now(),
+    }: any),
+    target,
+    RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
+  );
+}
+
+function dispatchDetachedBlur(target: HTMLElement): void {
+  DEPRECATED_dispatchEventForResponderEventSystem(
+    'blur',
+    null,
+    ({
+      isTargetAttached: false,
+      target,
+      timeStamp: Date.now(),
+    }: any),
+    target,
+    RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
+  );
+}
+
+// This is a specific event for the React Flare
+// event system, so event responders can act
+// accordingly to a DOM node being unmounted that
+// previously had active document focus.
+export function beforeRemoveInstance(
+  instance: Instance | TextInstance | SuspenseInstance,
+): void {
+  if (
+    enableDeprecatedFlareAPI &&
+    selectionInformation &&
+    instance === selectionInformation.focusedElem
+  ) {
+    dispatchBeforeDetachedBlur(((instance: any): HTMLElement));
+  }
+}
+
 export function removeChild(
   parentInstance: Instance,
   child: Instance | TextInstance | SuspenseInstance,
@@ -555,6 +548,8 @@ export function clearSuspenseBoundary(
       if (data === SUSPENSE_END_DATA) {
         if (depth === 0) {
           parentInstance.removeChild(nextNode);
+          // Retry if any event replaying was blocked on this.
+          retryIfBlockedOn(suspenseInstance);
           return;
         } else {
           depth--;
@@ -570,6 +565,8 @@ export function clearSuspenseBoundary(
     node = nextNode;
   } while (node);
   // TODO: Warn, we didn't find the end comment boundary.
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(suspenseInstance);
 }
 
 export function clearSuspenseBoundaryFromContainer(
@@ -583,13 +580,20 @@ export function clearSuspenseBoundaryFromContainer(
   } else {
     // Document nodes should never contain suspense boundaries.
   }
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(container);
 }
 
 export function hideInstance(instance: Instance): void {
   // TODO: Does this work for all element types? What about MathML? Should we
   // pass host context to this method?
   instance = ((instance: any): HTMLElement);
-  instance.style.display = 'none';
+  const style = instance.style;
+  if (typeof style.setProperty === 'function') {
+    style.setProperty('display', 'none', 'important');
+  } else {
+    style.display = 'none';
+  }
 }
 
 export function hideTextInstance(textInstance: TextInstance): void {
@@ -674,44 +678,39 @@ export function registerSuspenseInstanceRetry(
   instance._reactRetry = callback;
 }
 
-export function getNextHydratableSibling(
-  instance: HydratableInstance,
-): null | HydratableInstance {
-  let node = instance.nextSibling;
+function getNextHydratable(node) {
   // Skip non-hydratable nodes.
-  while (
-    node &&
-    node.nodeType !== ELEMENT_NODE &&
-    node.nodeType !== TEXT_NODE &&
-    (!enableSuspenseServerRenderer ||
-      node.nodeType !== COMMENT_NODE ||
-      ((node: any).data !== SUSPENSE_START_DATA &&
-        (node: any).data !== SUSPENSE_PENDING_START_DATA &&
-        (node: any).data !== SUSPENSE_FALLBACK_START_DATA))
-  ) {
-    node = node.nextSibling;
+  for (; node != null; node = node.nextSibling) {
+    const nodeType = node.nodeType;
+    if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
+      break;
+    }
+    if (enableSuspenseServerRenderer) {
+      if (nodeType === COMMENT_NODE) {
+        const nodeData = (node: any).data;
+        if (
+          nodeData === SUSPENSE_START_DATA ||
+          nodeData === SUSPENSE_FALLBACK_START_DATA ||
+          nodeData === SUSPENSE_PENDING_START_DATA
+        ) {
+          break;
+        }
+      }
+    }
   }
   return (node: any);
 }
 
+export function getNextHydratableSibling(
+  instance: HydratableInstance,
+): null | HydratableInstance {
+  return getNextHydratable(instance.nextSibling);
+}
+
 export function getFirstHydratableChild(
   parentInstance: Container | Instance,
 ): null | HydratableInstance {
-  let next = parentInstance.firstChild;
-  // Skip non-hydratable nodes.
-  while (
-    next &&
-    next.nodeType !== ELEMENT_NODE &&
-    next.nodeType !== TEXT_NODE &&
-    (!enableSuspenseServerRenderer ||
-      next.nodeType !== COMMENT_NODE ||
-      ((next: any).data !== SUSPENSE_START_DATA &&
-        (next: any).data !== SUSPENSE_FALLBACK_START_DATA &&
-        (next: any).data !== SUSPENSE_PENDING_START_DATA))
-  ) {
-    next = next.nextSibling;
-  }
-  return (next: any);
+  return getNextHydratable(parentInstance.firstChild);
 }
 
 export function hydrateInstance(
@@ -751,6 +750,13 @@ export function hydrateTextInstance(
   return diffHydratedText(textInstance, text);
 }
 
+export function hydrateSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+  internalInstanceHandle: Object,
+) {
+  precacheFiberNode(internalInstanceHandle, suspenseInstance);
+}
+
 export function getNextHydratableInstanceAfterSuspenseInstance(
   suspenseInstance: SuspenseInstance,
 ): null | HydratableInstance {
@@ -768,7 +774,11 @@ export function getNextHydratableInstanceAfterSuspenseInstance(
         } else {
           depth--;
         }
-      } else if (data === SUSPENSE_START_DATA) {
+      } else if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA
+      ) {
         depth++;
       }
     }
@@ -778,6 +788,51 @@ export function getNextHydratableInstanceAfterSuspenseInstance(
   return null;
 }
 
+// Returns the SuspenseInstance if this node is a direct child of a
+// SuspenseInstance. I.e. if its previous sibling is a Comment with
+// SUSPENSE_x_START_DATA. Otherwise, null.
+export function getParentSuspenseInstance(
+  targetInstance: Instance,
+): null | SuspenseInstance {
+  let node = targetInstance.previousSibling;
+  // Skip past all nodes within this suspense boundary.
+  // There might be nested nodes so we need to keep track of how
+  // deep we are and only break out when we're back on top.
+  let depth = 0;
+  while (node) {
+    if (node.nodeType === COMMENT_NODE) {
+      let data = ((node: any).data: string);
+      if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA
+      ) {
+        if (depth === 0) {
+          return ((node: any): SuspenseInstance);
+        } else {
+          depth--;
+        }
+      } else if (data === SUSPENSE_END_DATA) {
+        depth++;
+      }
+    }
+    node = node.previousSibling;
+  }
+  return null;
+}
+
+export function commitHydratedContainer(container: Container): void {
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(container);
+}
+
+export function commitHydratedSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+): void {
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(suspenseInstance);
+}
+
 export function didNotMatchHydratedContainerTextInstance(
   parentContainer: Container,
   textInstance: TextInstance,
@@ -892,121 +947,99 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
-  if (enableEventAPI) {
-    const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
-    const rootElement = rootContainerInstance.ownerDocument;
-    const responder = eventComponentInstance.responder;
-    const {rootEventTypes, targetEventTypes} = responder;
-    if (targetEventTypes !== undefined) {
-      listenToEventResponderEventTypes(targetEventTypes, rootElement);
-    }
-    if (rootEventTypes !== undefined) {
-      addRootEventTypesForComponentInstance(
-        eventComponentInstance,
-        rootEventTypes,
-      );
-      listenToEventResponderEventTypes(rootEventTypes, rootElement);
-    }
-    mountEventResponder(eventComponentInstance);
+export function DEPRECATED_mountResponderInstance(
+  responder: ReactDOMEventResponder,
+  responderInstance: ReactDOMEventResponderInstance,
+  responderProps: Object,
+  responderState: Object,
+  instance: Instance,
+): ReactDOMEventResponderInstance {
+  // Listen to events
+  const doc = instance.ownerDocument;
+  const {targetEventTypes} = ((responder: any): ReactDOMEventResponder);
+  if (targetEventTypes !== null) {
+    listenToEventResponderEventTypes(targetEventTypes, doc);
   }
+  mountEventResponder(
+    responder,
+    responderInstance,
+    responderProps,
+    responderState,
+  );
+  return responderInstance;
 }
 
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
-  // NO-OP, why might use this in the future
-}
-
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+export function DEPRECATED_unmountResponderInstance(
+  responderInstance: ReactDOMEventResponderInstance,
 ): void {
-  if (enableEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     // TODO stop listening to targetEventTypes
-    unmountEventResponder(eventComponentInstance);
+    unmountEventResponder(responderInstance);
   }
 }
 
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null | EventTargetChildElement {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      const {bottom, left, right, top} = props;
+export function getFundamentalComponentInstance(
+  fundamentalInstance: ReactDOMFundamentalComponentInstance,
+): Instance {
+  if (enableFundamentalAPI) {
+    const {currentFiber, impl, props, state} = fundamentalInstance;
+    const instance = impl.getInstance(null, props, state);
+    precacheFiberNode(currentFiber, instance);
+    return instance;
+  }
+  // Because of the flag above, this gets around the Flow error;
+  return (null: any);
+}
 
-      if (!bottom && !left && !right && !top) {
-        return null;
-      }
-      return {
-        type: 'div',
-        props: {
-          style: {
-            position: 'absolute',
-            zIndex: -1,
-            pointerEvents: null,
-            bottom: bottom ? `-${bottom}px` : '0px',
-            left: left ? `-${left}px` : '0px',
-            right: right ? `-${right}px` : '0px',
-            top: top ? `-${top}px` : '0px',
-          },
-          hydrateTouchHitTarget: true,
-          suppressHydrationWarning: true,
-        },
-      };
+export function mountFundamentalComponent(
+  fundamentalInstance: ReactDOMFundamentalComponentInstance,
+): void {
+  if (enableFundamentalAPI) {
+    const {impl, instance, props, state} = fundamentalInstance;
+    const onMount = impl.onMount;
+    if (onMount !== undefined) {
+      onMount(null, instance, props, state);
     }
   }
-  return null;
 }
 
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+export function shouldUpdateFundamentalComponent(
+  fundamentalInstance: ReactDOMFundamentalComponentInstance,
 ): boolean {
-  if (
-    __DEV__ &&
-    type === REACT_EVENT_TARGET_TOUCH_HIT &&
-    (props.left || props.right || props.top || props.bottom)
-  ) {
-    return true;
+  if (enableFundamentalAPI) {
+    const {impl, prevProps, props, state} = fundamentalInstance;
+    const shouldUpdate = impl.shouldUpdate;
+    if (shouldUpdate !== undefined) {
+      return shouldUpdate(null, prevProps, props, state);
+    }
   }
-  return false;
+  return true;
 }
 
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
+export function updateFundamentalComponent(
+  fundamentalInstance: ReactDOMFundamentalComponentInstance,
 ): void {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      if (__DEV__ && canUseDOM) {
-        // This is done at DEV time because getComputedStyle will
-        // typically force a style recalculation and force a layout,
-        // reflow -– both of which are sync are expensive.
-        const computedStyles = window.getComputedStyle(parentInstance);
-        const position = computedStyles.getPropertyValue('position');
-        warning(
-          position !== '' && position !== 'static',
-          '<TouchHitTarget> inserts an empty absolutely positioned <div>. ' +
-            'This requires its parent DOM node to be positioned too, but the ' +
-            'parent DOM node was found to have the style "position" set to ' +
-            'either no value, or a value of "static". Try using a "position" ' +
-            'value of "relative".',
-        );
-        warning(
-          computedStyles.getPropertyValue('z-index') !== '',
-          '<TouchHitTarget> inserts an empty <div> with "z-index" of "-1". ' +
-            'This requires its parent DOM node to have a "z-index" greater than "-1",' +
-            'but the parent DOM node was found to no "z-index" value set.' +
-            ' Try using a "z-index" value of "0" or greater.',
-        );
-      }
+  if (enableFundamentalAPI) {
+    const {impl, instance, prevProps, props, state} = fundamentalInstance;
+    const onUpdate = impl.onUpdate;
+    if (onUpdate !== undefined) {
+      onUpdate(null, instance, prevProps, props, state);
+    }
+  }
+}
+
+export function unmountFundamentalComponent(
+  fundamentalInstance: ReactDOMFundamentalComponentInstance,
+): void {
+  if (enableFundamentalAPI) {
+    const {impl, instance, props, state} = fundamentalInstance;
+    const onUnmount = impl.onUnmount;
+    if (onUnmount !== undefined) {
+      onUnmount(null, instance, props, state);
     }
   }
 }
+
+export function getInstanceFromNode(node: HTMLElement): null | Object {
+  return getClosestInstanceFromNode(node) || null;
+}
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 54cef45d1a826..884c2ad9dfe2f 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -10,7 +10,6 @@
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 import {setValueForProperty} from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
@@ -26,7 +25,9 @@ type InputWithWrapperState = HTMLInputElement & {
     initialValue: ToStringValue,
     initialChecked: ?boolean,
     controlled?: boolean,
+    ...
   },
+  ...
 };
 
 let didWarnValueDefaultValue = false;
@@ -79,8 +80,7 @@ export function initWrapperState(element: Element, props: Object) {
       props.defaultChecked !== undefined &&
       !didWarnCheckedDefaultChecked
     ) {
-      warning(
-        false,
+      console.error(
         '%s contains an input of type %s with both checked and defaultChecked props. ' +
           'Input elements must be either controlled or uncontrolled ' +
           '(specify either the checked prop, or the defaultChecked prop, but not ' +
@@ -97,8 +97,7 @@ export function initWrapperState(element: Element, props: Object) {
       props.defaultValue !== undefined &&
       !didWarnValueDefaultValue
     ) {
-      warning(
-        false,
+      console.error(
         '%s contains an input of type %s with both value and defaultValue props. ' +
           'Input elements must be either controlled or uncontrolled ' +
           '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -143,8 +142,7 @@ export function updateWrapper(element: Element, props: Object) {
       controlled &&
       !didWarnUncontrolledToControlled
     ) {
-      warning(
-        false,
+      console.error(
         'A component is changing an uncontrolled input of type %s to be controlled. ' +
           'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
           'Decide between using a controlled or uncontrolled input ' +
@@ -158,8 +156,7 @@ export function updateWrapper(element: Element, props: Object) {
       !controlled &&
       !didWarnControlledToUncontrolled
     ) {
-      warning(
-        false,
+      console.error(
         'A component is changing a controlled input of type %s to be uncontrolled. ' +
           'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
           'Decide between using a controlled or uncontrolled input ' +
@@ -183,10 +180,10 @@ export function updateWrapper(element: Element, props: Object) {
         // eslint-disable-next-line
         node.value != (value: any)
       ) {
-        node.value = toString(value);
+        node.value = toString((value: any));
       }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
+    } else if (node.value !== toString((value: any))) {
+      node.value = toString((value: any));
     }
   } else if (type === 'submit' || type === 'reset') {
     // Submit/reset inputs need the attribute removed completely to avoid
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
new file mode 100644
index 0000000000000..3da5e468c2679
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -0,0 +1,397 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {DOMContainer} from './ReactDOM';
+import type {RootType} from './ReactDOMRoot';
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  getInstanceFromNode,
+  isContainerMarkedAsRoot,
+  unmarkContainerAsRoot,
+} from './ReactDOMComponentTree';
+import {
+  createLegacyRoot,
+  isValidContainer,
+  warnOnInvalidCallback,
+} from './ReactDOMRoot';
+import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty';
+import {
+  DOCUMENT_NODE,
+  ELEMENT_NODE,
+  COMMENT_NODE,
+} from '../shared/HTMLNodeType';
+
+import {
+  findHostInstanceWithNoPortals,
+  updateContainer,
+  unbatchedUpdates,
+  getPublicRootInstance,
+  findHostInstance,
+  findHostInstanceWithWarning,
+} from 'react-reconciler/inline.dom';
+import getComponentName from 'shared/getComponentName';
+import invariant from 'shared/invariant';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {has as hasInstance} from 'shared/ReactInstanceMap';
+
+const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+
+let topLevelUpdateWarnings;
+let warnedAboutHydrateAPI = false;
+
+if (__DEV__) {
+  topLevelUpdateWarnings = (container: DOMContainer) => {
+    if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
+      const hostInstance = findHostInstanceWithNoPortals(
+        container._reactRootContainer._internalRoot.current,
+      );
+      if (hostInstance) {
+        if (hostInstance.parentNode !== container) {
+          console.error(
+            'render(...): It looks like the React-rendered content of this ' +
+              'container was removed without using React. This is not ' +
+              'supported and will cause errors. Instead, call ' +
+              'ReactDOM.unmountComponentAtNode to empty a container.',
+          );
+        }
+      }
+    }
+
+    const isRootRenderedBySomeReact = !!container._reactRootContainer;
+    const rootEl = getReactRootElementInContainer(container);
+    const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
+
+    if (hasNonRootReactChild && !isRootRenderedBySomeReact) {
+      console.error(
+        'render(...): Replacing React-rendered children with a new root ' +
+          'component. If you intended to update the children of this node, ' +
+          'you should instead have the existing children update their state ' +
+          'and render the new components instead of calling ReactDOM.render.',
+      );
+    }
+
+    if (
+      container.nodeType === ELEMENT_NODE &&
+      ((container: any): Element).tagName &&
+      ((container: any): Element).tagName.toUpperCase() === 'BODY'
+    ) {
+      console.error(
+        'render(): Rendering components directly into document.body is ' +
+          'discouraged, since its children are often manipulated by third-party ' +
+          'scripts and browser extensions. This may lead to subtle ' +
+          'reconciliation issues. Try rendering into a container element created ' +
+          'for your app.',
+      );
+    }
+  };
+}
+
+function getReactRootElementInContainer(container: any) {
+  if (!container) {
+    return null;
+  }
+
+  if (container.nodeType === DOCUMENT_NODE) {
+    return container.documentElement;
+  } else {
+    return container.firstChild;
+  }
+}
+
+function shouldHydrateDueToLegacyHeuristic(container) {
+  const rootElement = getReactRootElementInContainer(container);
+  return !!(
+    rootElement &&
+    rootElement.nodeType === ELEMENT_NODE &&
+    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
+  );
+}
+
+function legacyCreateRootFromDOMContainer(
+  container: DOMContainer,
+  forceHydrate: boolean,
+): RootType {
+  const shouldHydrate =
+    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
+  // First clear any existing content.
+  if (!shouldHydrate) {
+    let warned = false;
+    let rootSibling;
+    while ((rootSibling = container.lastChild)) {
+      if (__DEV__) {
+        if (
+          !warned &&
+          rootSibling.nodeType === ELEMENT_NODE &&
+          (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
+        ) {
+          warned = true;
+          console.error(
+            'render(): Target node has markup rendered by React, but there ' +
+              'are unrelated nodes as well. This is most commonly caused by ' +
+              'white-space inserted around server-rendered markup.',
+          );
+        }
+      }
+      container.removeChild(rootSibling);
+    }
+  }
+  if (__DEV__) {
+    if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
+      warnedAboutHydrateAPI = true;
+      console.warn(
+        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+          'will stop working in React v17. Replace the ReactDOM.render() call ' +
+          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+      );
+    }
+  }
+
+  return createLegacyRoot(
+    container,
+    shouldHydrate
+      ? {
+          hydrate: true,
+        }
+      : undefined,
+  );
+}
+
+function legacyRenderSubtreeIntoContainer(
+  parentComponent: ?React$Component<any, any>,
+  children: ReactNodeList,
+  container: DOMContainer,
+  forceHydrate: boolean,
+  callback: ?Function,
+) {
+  if (__DEV__) {
+    topLevelUpdateWarnings(container);
+    warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
+  }
+
+  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
+  // member of intersection type." Whyyyyyy.
+  let root: RootType = (container._reactRootContainer: any);
+  let fiberRoot;
+  if (!root) {
+    // Initial mount
+    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
+      container,
+      forceHydrate,
+    );
+    fiberRoot = root._internalRoot;
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function() {
+        const instance = getPublicRootInstance(fiberRoot);
+        originalCallback.call(instance);
+      };
+    }
+    // Initial mount should not be batched.
+    unbatchedUpdates(() => {
+      updateContainer(children, fiberRoot, parentComponent, callback);
+    });
+  } else {
+    fiberRoot = root._internalRoot;
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function() {
+        const instance = getPublicRootInstance(fiberRoot);
+        originalCallback.call(instance);
+      };
+    }
+    // Update
+    updateContainer(children, fiberRoot, parentComponent, callback);
+  }
+  return getPublicRootInstance(fiberRoot);
+}
+
+export function findDOMNode(
+  componentOrElement: Element | ?React$Component<any, any>,
+): null | Element | Text {
+  if (__DEV__) {
+    let owner = (ReactCurrentOwner.current: any);
+    if (owner !== null && owner.stateNode !== null) {
+      const warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender;
+      if (!warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing findDOMNode inside its render(). ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(owner.type) || 'A component',
+        );
+      }
+      owner.stateNode._warnedAboutRefsInRender = true;
+    }
+  }
+  if (componentOrElement == null) {
+    return null;
+  }
+  if ((componentOrElement: any).nodeType === ELEMENT_NODE) {
+    return (componentOrElement: any);
+  }
+  if (__DEV__) {
+    return findHostInstanceWithWarning(componentOrElement, 'findDOMNode');
+  }
+  return findHostInstance(componentOrElement);
+}
+
+export function hydrate(
+  element: React$Node,
+  container: DOMContainer,
+  callback: ?Function,
+) {
+  invariant(
+    isValidContainer(container),
+    'Target container is not a DOM element.',
+  );
+  if (__DEV__) {
+    const isModernRoot =
+      isContainerMarkedAsRoot(container) &&
+      container._reactRootContainer === undefined;
+    if (isModernRoot) {
+      console.error(
+        'You are calling ReactDOM.hydrate() on a container that was previously ' +
+          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
+      );
+    }
+  }
+  // TODO: throw or warn if we couldn't hydrate?
+  return legacyRenderSubtreeIntoContainer(
+    null,
+    element,
+    container,
+    true,
+    callback,
+  );
+}
+
+export function render(
+  element: React$Element<any>,
+  container: DOMContainer,
+  callback: ?Function,
+) {
+  invariant(
+    isValidContainer(container),
+    'Target container is not a DOM element.',
+  );
+  if (__DEV__) {
+    const isModernRoot =
+      isContainerMarkedAsRoot(container) &&
+      container._reactRootContainer === undefined;
+    if (isModernRoot) {
+      console.error(
+        'You are calling ReactDOM.render() on a container that was previously ' +
+          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'Did you mean to call root.render(element)?',
+      );
+    }
+  }
+  return legacyRenderSubtreeIntoContainer(
+    null,
+    element,
+    container,
+    false,
+    callback,
+  );
+}
+
+export function unstable_renderSubtreeIntoContainer(
+  parentComponent: React$Component<any, any>,
+  element: React$Element<any>,
+  containerNode: DOMContainer,
+  callback: ?Function,
+) {
+  invariant(
+    isValidContainer(containerNode),
+    'Target container is not a DOM element.',
+  );
+  invariant(
+    parentComponent != null && hasInstance(parentComponent),
+    'parentComponent must be a valid React Component',
+  );
+  return legacyRenderSubtreeIntoContainer(
+    parentComponent,
+    element,
+    containerNode,
+    false,
+    callback,
+  );
+}
+
+export function unmountComponentAtNode(container: DOMContainer) {
+  invariant(
+    isValidContainer(container),
+    'unmountComponentAtNode(...): Target container is not a DOM element.',
+  );
+
+  if (__DEV__) {
+    const isModernRoot =
+      isContainerMarkedAsRoot(container) &&
+      container._reactRootContainer === undefined;
+    if (isModernRoot) {
+      console.error(
+        'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
+          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+      );
+    }
+  }
+
+  if (container._reactRootContainer) {
+    if (__DEV__) {
+      const rootEl = getReactRootElementInContainer(container);
+      const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
+      if (renderedByDifferentReact) {
+        console.error(
+          "unmountComponentAtNode(): The node you're attempting to unmount " +
+            'was rendered by another copy of React.',
+        );
+      }
+    }
+
+    // Unmount should not be batched.
+    unbatchedUpdates(() => {
+      legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
+        container._reactRootContainer = null;
+        unmarkContainerAsRoot(container);
+      });
+    });
+    // If you call unmountComponentAtNode twice in quick succession, you'll
+    // get `true` twice. That's probably fine?
+    return true;
+  } else {
+    if (__DEV__) {
+      const rootEl = getReactRootElementInContainer(container);
+      const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
+
+      // Check if the container itself is a React root node.
+      const isContainerReactRoot =
+        container.nodeType === ELEMENT_NODE &&
+        isValidContainer(container.parentNode) &&
+        !!container.parentNode._reactRootContainer;
+
+      if (hasNonRootReactChild) {
+        console.error(
+          "unmountComponentAtNode(): The node you're attempting to unmount " +
+            'was rendered by React and is not a top-level container. %s',
+          isContainerReactRoot
+            ? 'You may have accidentally passed in a React root node instead ' +
+                'of its container.'
+            : 'Instead, have the parent component update its state and ' +
+                'rerender in order to remove this component.',
+        );
+      }
+    }
+
+    return false;
+  }
+}
diff --git a/packages/react-dom/src/client/ReactDOMOption.js b/packages/react-dom/src/client/ReactDOMOption.js
index 6007600ead42a..d18813cfa4459 100644
--- a/packages/react-dom/src/client/ReactDOMOption.js
+++ b/packages/react-dom/src/client/ReactDOMOption.js
@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import warning from 'shared/warning';
 import {getToStringValue, toString} from './ToStringValue';
 
 let didWarnSelectedSetOnOption = false;
@@ -58,8 +57,7 @@ export function validateProps(element: Element, props: Object) {
         }
         if (!didWarnInvalidChild) {
           didWarnInvalidChild = true;
-          warning(
-            false,
+          console.error(
             'Only strings and numbers are supported as <option> children.',
           );
         }
@@ -68,8 +66,7 @@ export function validateProps(element: Element, props: Object) {
 
     // TODO: Remove support for `selected` in <option>.
     if (props.selected != null && !didWarnSelectedSetOnOption) {
-      warning(
-        false,
+      console.error(
         'Use the `defaultValue` or `value` props on <select> instead of ' +
           'setting `selected` on <option>.',
       );
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
new file mode 100644
index 0000000000000..b11430b8b3c0f
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -0,0 +1,188 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {DOMContainer} from './ReactDOM';
+import type {RootTag} from 'shared/ReactRootTags';
+import type {ReactNodeList} from 'shared/ReactTypes';
+// TODO: This type is shared between the reconciler and ReactDOM, but will
+// eventually be lifted out to the renderer.
+import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
+
+export type RootType = {
+  render(children: ReactNodeList, callback: ?() => mixed): void,
+  unmount(callback: ?() => mixed): void,
+  _internalRoot: FiberRoot,
+  ...
+};
+
+export type RootOptions = {
+  hydrate?: boolean,
+  hydrationOptions?: {
+    onHydrated?: (suspenseNode: Comment) => void,
+    onDeleted?: (suspenseNode: Comment) => void,
+    ...
+  },
+  ...
+};
+
+import {
+  isContainerMarkedAsRoot,
+  markContainerAsRoot,
+  unmarkContainerAsRoot,
+} from './ReactDOMComponentTree';
+import {eagerlyTrapReplayableEvents} from '../events/ReactDOMEventReplaying';
+import {
+  ELEMENT_NODE,
+  COMMENT_NODE,
+  DOCUMENT_NODE,
+  DOCUMENT_FRAGMENT_NODE,
+} from '../shared/HTMLNodeType';
+
+import {createContainer, updateContainer} from 'react-reconciler/inline.dom';
+import invariant from 'shared/invariant';
+import {BlockingRoot, ConcurrentRoot, LegacyRoot} from 'shared/ReactRootTags';
+
+function ReactDOMRoot(container: DOMContainer, options: void | RootOptions) {
+  this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
+}
+
+function ReactDOMBlockingRoot(
+  container: DOMContainer,
+  tag: RootTag,
+  options: void | RootOptions,
+) {
+  this._internalRoot = createRootImpl(container, tag, options);
+}
+
+ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
+  children: ReactNodeList,
+  callback: ?() => mixed,
+): void {
+  const root = this._internalRoot;
+  const cb = callback === undefined ? null : callback;
+  if (__DEV__) {
+    warnOnInvalidCallback(cb, 'render');
+  }
+  updateContainer(children, root, null, cb);
+};
+
+ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(
+  callback: ?() => mixed,
+): void {
+  const root = this._internalRoot;
+  const cb = callback === undefined ? null : callback;
+  if (__DEV__) {
+    warnOnInvalidCallback(cb, 'render');
+  }
+  const container = root.containerInfo;
+  updateContainer(null, root, null, () => {
+    unmarkContainerAsRoot(container);
+    if (cb !== null) {
+      cb();
+    }
+  });
+};
+
+function createRootImpl(
+  container: DOMContainer,
+  tag: RootTag,
+  options: void | RootOptions,
+) {
+  // Tag is either LegacyRoot or Concurrent Root
+  const hydrate = options != null && options.hydrate === true;
+  const hydrationCallbacks =
+    (options != null && options.hydrationOptions) || null;
+  const root = createContainer(container, tag, hydrate, hydrationCallbacks);
+  markContainerAsRoot(root.current, container);
+  if (hydrate && tag !== LegacyRoot) {
+    const doc =
+      container.nodeType === DOCUMENT_NODE
+        ? container
+        : container.ownerDocument;
+    eagerlyTrapReplayableEvents(doc);
+  }
+  return root;
+}
+
+export function createRoot(
+  container: DOMContainer,
+  options?: RootOptions,
+): RootType {
+  invariant(
+    isValidContainer(container),
+    'createRoot(...): Target container is not a DOM element.',
+  );
+  warnIfReactDOMContainerInDEV(container);
+  return new ReactDOMRoot(container, options);
+}
+
+export function createBlockingRoot(
+  container: DOMContainer,
+  options?: RootOptions,
+): RootType {
+  invariant(
+    isValidContainer(container),
+    'createRoot(...): Target container is not a DOM element.',
+  );
+  warnIfReactDOMContainerInDEV(container);
+  return new ReactDOMBlockingRoot(container, BlockingRoot, options);
+}
+
+export function createLegacyRoot(
+  container: DOMContainer,
+  options?: RootOptions,
+): RootType {
+  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
+}
+
+export function isValidContainer(node: mixed): boolean {
+  return !!(
+    node &&
+    (node.nodeType === ELEMENT_NODE ||
+      node.nodeType === DOCUMENT_NODE ||
+      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
+      (node.nodeType === COMMENT_NODE &&
+        (node: any).nodeValue === ' react-mount-point-unstable '))
+  );
+}
+
+export function warnOnInvalidCallback(
+  callback: mixed,
+  callerName: string,
+): void {
+  if (__DEV__) {
+    if (callback !== null && typeof callback !== 'function') {
+      console.error(
+        '%s(...): Expected the last optional `callback` argument to be a ' +
+          'function. Instead received: %s.',
+        callerName,
+        callback,
+      );
+    }
+  }
+}
+
+function warnIfReactDOMContainerInDEV(container) {
+  if (__DEV__) {
+    if (isContainerMarkedAsRoot(container)) {
+      if (container._reactRootContainer) {
+        console.error(
+          'You are calling ReactDOM.createRoot() on a container that was previously ' +
+            'passed to ReactDOM.render(). This is not supported.',
+        );
+      } else {
+        console.error(
+          'You are calling ReactDOM.createRoot() on a container that ' +
+            'has already been passed to createRoot() before. Instead, call ' +
+            'root.render() on the existing root instead if you want to update it.',
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index 3bc982d77c6a7..725159685428d 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -9,7 +9,6 @@
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
@@ -20,11 +19,9 @@ if (__DEV__) {
   didWarnValueDefaultValue = false;
 }
 
-type SelectWithWrapperState = HTMLSelectElement & {
-  _wrapperState: {
-    wasMultiple: boolean,
-  },
-};
+type SelectWithWrapperState = HTMLSelectElement & {|
+  _wrapperState: {|wasMultiple: boolean|},
+|};
 
 function getDeclarationErrorAddendum() {
   const ownerName = getCurrentFiberOwnerNameInDevOrNull();
@@ -40,30 +37,30 @@ const valuePropNames = ['value', 'defaultValue'];
  * Validation function for `value` and `defaultValue`.
  */
 function checkSelectPropTypes(props) {
-  ReactControlledValuePropTypes.checkPropTypes('select', props);
+  if (__DEV__) {
+    ReactControlledValuePropTypes.checkPropTypes('select', props);
 
-  for (let i = 0; i < valuePropNames.length; i++) {
-    const propName = valuePropNames[i];
-    if (props[propName] == null) {
-      continue;
-    }
-    const isArray = Array.isArray(props[propName]);
-    if (props.multiple && !isArray) {
-      warning(
-        false,
-        'The `%s` prop supplied to <select> must be an array if ' +
-          '`multiple` is true.%s',
-        propName,
-        getDeclarationErrorAddendum(),
-      );
-    } else if (!props.multiple && isArray) {
-      warning(
-        false,
-        'The `%s` prop supplied to <select> must be a scalar ' +
-          'value if `multiple` is false.%s',
-        propName,
-        getDeclarationErrorAddendum(),
-      );
+    for (let i = 0; i < valuePropNames.length; i++) {
+      const propName = valuePropNames[i];
+      if (props[propName] == null) {
+        continue;
+      }
+      const isArray = Array.isArray(props[propName]);
+      if (props.multiple && !isArray) {
+        console.error(
+          'The `%s` prop supplied to <select> must be an array if ' +
+            '`multiple` is true.%s',
+          propName,
+          getDeclarationErrorAddendum(),
+        );
+      } else if (!props.multiple && isArray) {
+        console.error(
+          'The `%s` prop supplied to <select> must be a scalar ' +
+            'value if `multiple` is false.%s',
+          propName,
+          getDeclarationErrorAddendum(),
+        );
+      }
     }
   }
 }
@@ -76,6 +73,7 @@ function updateOptions(
 ) {
   type IndexableHTMLOptionsCollection = HTMLOptionsCollection & {
     [key: number]: HTMLOptionElement,
+    ...,
   };
   const options: IndexableHTMLOptionsCollection = node.options;
 
@@ -156,8 +154,7 @@ export function initWrapperState(element: Element, props: Object) {
       props.defaultValue !== undefined &&
       !didWarnValueDefaultValue
     ) {
-      warning(
-        false,
+      console.error(
         'Select elements must be either controlled or uncontrolled ' +
           '(specify either the value prop, or the defaultValue prop, but not ' +
           'both). Decide between using a controlled or uncontrolled select ' +
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index b1bdcdd00f0b1..9c1505bac6345 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -8,20 +8,19 @@
  */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {getToStringValue, toString} from './ToStringValue';
 import type {ToStringValue} from './ToStringValue';
 
+import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
+
 let didWarnValDefaultVal = false;
 
-type TextAreaWithWrapperState = HTMLTextAreaElement & {
-  _wrapperState: {
-    initialValue: ToStringValue,
-  },
-};
+type TextAreaWithWrapperState = HTMLTextAreaElement & {|
+  _wrapperState: {|initialValue: ToStringValue|},
+|};
 
 /**
  * Implements a <textarea> host component that allows setting `value`, and
@@ -71,8 +70,7 @@ export function initWrapperState(element: Element, props: Object) {
       props.defaultValue !== undefined &&
       !didWarnValDefaultVal
     ) {
-      warning(
-        false,
+      console.error(
         '%s contains a textarea with both value and defaultValue props. ' +
           'Textarea elements must be either controlled or uncontrolled ' +
           '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -89,30 +87,29 @@ export function initWrapperState(element: Element, props: Object) {
 
   // Only bother fetching default value if we're going to use it
   if (initialValue == null) {
-    let defaultValue = props.defaultValue;
-    // TODO (yungsters): Remove support for children content in <textarea>.
-    let children = props.children;
+    let {children, defaultValue} = props;
     if (children != null) {
       if (__DEV__) {
-        warning(
-          false,
+        console.error(
           'Use the `defaultValue` or `value` props instead of setting ' +
             'children on <textarea>.',
         );
       }
-      invariant(
-        defaultValue == null,
-        'If you supply `defaultValue` on a <textarea>, do not pass children.',
-      );
-      if (Array.isArray(children)) {
+      if (!disableTextareaChildren) {
         invariant(
-          children.length <= 1,
-          '<textarea> can only have at most one child.',
+          defaultValue == null,
+          'If you supply `defaultValue` on a <textarea>, do not pass children.',
         );
-        children = children[0];
+        if (Array.isArray(children)) {
+          invariant(
+            children.length <= 1,
+            '<textarea> can only have at most one child.',
+          );
+          children = children[0];
+        }
+
+        defaultValue = children;
       }
-
-      defaultValue = children;
     }
     if (defaultValue == null) {
       defaultValue = '';
@@ -157,7 +154,9 @@ export function postMountWrapper(element: Element, props: Object) {
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
   if (textContent === node._wrapperState.initialValue) {
-    node.value = textContent;
+    if (textContent !== '' && textContent !== null) {
+      node.value = textContent;
+    }
   }
 }
 
diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index f2d0987608b3e..ec785d03461e2 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -100,6 +100,8 @@ export function hasSelectionCapabilities(elem) {
 export function getSelectionInformation() {
   const focusedElem = getActiveElementDeep();
   return {
+    // Used by Flare
+    activeElementDetached: null,
     focusedElem: focusedElem,
     selectionRange: hasSelectionCapabilities(focusedElem)
       ? getSelection(focusedElem)
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
new file mode 100644
index 0000000000000..10470098e89b5
--- /dev/null
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
@@ -0,0 +1,245 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+describe('when Trusted Types are available in global object', () => {
+  let React;
+  let ReactDOM;
+  let ReactFeatureFlags;
+  let container;
+  let ttObject1;
+  let ttObject2;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    const fakeTTObjects = new Set();
+    window.trustedTypes = {
+      isHTML: function(value) {
+        if (this !== window.trustedTypes) {
+          throw new Error(this);
+        }
+        return fakeTTObjects.has(value);
+      },
+      isScript: () => false,
+      isScriptURL: () => false,
+    };
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableTrustedTypesIntegration = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ttObject1 = {
+      toString() {
+        return '<b>Hi</b>';
+      },
+    };
+    ttObject2 = {
+      toString() {
+        return '<b>Bye</b>';
+      },
+    };
+    fakeTTObjects.add(ttObject1);
+    fakeTTObjects.add(ttObject2);
+  });
+
+  afterEach(() => {
+    delete window.trustedTypes;
+  });
+
+  it('should not stringify trusted values for dangerouslySetInnerHTML', () => {
+    let innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+      Element.prototype,
+      'innerHTML',
+    );
+    try {
+      const innerHTMLCalls = [];
+      Object.defineProperty(Element.prototype, 'innerHTML', {
+        get() {
+          return innerHTMLDescriptor.get.apply(this, arguments);
+        },
+        set(value) {
+          innerHTMLCalls.push(value);
+          return innerHTMLDescriptor.set.apply(this, arguments);
+        },
+      });
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: ttObject1}} />,
+        container,
+      );
+      expect(container.innerHTML).toBe('<div><b>Hi</b></div>');
+      expect(innerHTMLCalls.length).toBe(1);
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(innerHTMLCalls[0]).toBe(ttObject1);
+
+      innerHTMLCalls.length = 0;
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: ttObject2}} />,
+        container,
+      );
+      expect(container.innerHTML).toBe('<div><b>Bye</b></div>');
+      expect(innerHTMLCalls.length).toBe(1);
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(innerHTMLCalls[0]).toBe(ttObject2);
+    } finally {
+      Object.defineProperty(
+        Element.prototype,
+        'innerHTML',
+        innerHTMLDescriptor,
+      );
+    }
+  });
+
+  it('should not stringify trusted values for setAttribute (unknown attribute)', () => {
+    let setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function(name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      ReactDOM.render(<div data-foo={ttObject1} />, container);
+      expect(container.innerHTML).toBe('<div data-foo="<b>Hi</b>"></div>');
+      expect(setAttributeCalls.length).toBe(1);
+      expect(setAttributeCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeCalls[0][1]).toBe('data-foo');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeCalls[0][2]).toBe(ttObject1);
+
+      setAttributeCalls.length = 0;
+      ReactDOM.render(<div data-foo={ttObject2} />, container);
+      expect(setAttributeCalls.length).toBe(1);
+      expect(setAttributeCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeCalls[0][1]).toBe('data-foo');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeCalls[0][2]).toBe(ttObject2);
+    } finally {
+      Element.prototype.setAttribute = setAttribute;
+    }
+  });
+
+  it('should not stringify trusted values for setAttribute (known attribute)', () => {
+    let setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function(name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      ReactDOM.render(<div className={ttObject1} />, container);
+      expect(container.innerHTML).toBe('<div class="<b>Hi</b>"></div>');
+      expect(setAttributeCalls.length).toBe(1);
+      expect(setAttributeCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeCalls[0][1]).toBe('class');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeCalls[0][2]).toBe(ttObject1);
+
+      setAttributeCalls.length = 0;
+      ReactDOM.render(<div className={ttObject2} />, container);
+      expect(setAttributeCalls.length).toBe(1);
+      expect(setAttributeCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeCalls[0][1]).toBe('class');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeCalls[0][2]).toBe(ttObject2);
+    } finally {
+      Element.prototype.setAttribute = setAttribute;
+    }
+  });
+
+  it('should not stringify trusted values for setAttributeNS', () => {
+    let setAttributeNS = Element.prototype.setAttributeNS;
+    try {
+      const setAttributeNSCalls = [];
+      Element.prototype.setAttributeNS = function(ns, name, value) {
+        setAttributeNSCalls.push([this, ns, name, value]);
+        return setAttributeNS.apply(this, arguments);
+      };
+      ReactDOM.render(<svg xlinkHref={ttObject1} />, container);
+      expect(container.innerHTML).toBe('<svg xlink:href="<b>Hi</b>"></svg>');
+      expect(setAttributeNSCalls.length).toBe(1);
+      expect(setAttributeNSCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
+      expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+
+      setAttributeNSCalls.length = 0;
+      ReactDOM.render(<svg xlinkHref={ttObject2} />, container);
+      expect(setAttributeNSCalls.length).toBe(1);
+      expect(setAttributeNSCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
+      expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+    } finally {
+      Element.prototype.setAttributeNS = setAttributeNS;
+    }
+  });
+
+  describe('dangerouslySetInnerHTML in svg elements in Internet Explorer', () => {
+    let innerHTMLDescriptor;
+
+    // simulate svg elements in Internet Explorer which don't have 'innerHTML' property
+    beforeEach(() => {
+      innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+        Element.prototype,
+        'innerHTML',
+      );
+      delete Element.prototype.innerHTML;
+      Object.defineProperty(
+        HTMLDivElement.prototype,
+        'innerHTML',
+        innerHTMLDescriptor,
+      );
+    });
+
+    afterEach(() => {
+      delete HTMLDivElement.prototype.innerHTML;
+      Object.defineProperty(
+        Element.prototype,
+        'innerHTML',
+        innerHTMLDescriptor,
+      );
+    });
+
+    it('should log a warning', () => {
+      class Component extends React.Component {
+        render() {
+          return <svg dangerouslySetInnerHTML={{__html: 'unsafe html'}} />;
+        }
+      }
+      expect(() => {
+        ReactDOM.render(<Component />, container);
+      }).toErrorDev(
+        "Warning: Using 'dangerouslySetInnerHTML' in an svg element with " +
+          'Trusted Types enabled in an Internet Explorer will cause ' +
+          'the trusted value to be converted to string. Assigning string ' +
+          "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
+          "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
+          'on the enclosing div instead.',
+      );
+      expect(container.innerHTML).toBe('<svg>unsafe html</svg>');
+    });
+  });
+
+  it('should warn once when rendering script tag in jsx on client', () => {
+    expect(() => {
+      ReactDOM.render(<script>alert("I am not executed")</script>, container);
+    }).toErrorDev(
+      'Warning: Encountered a script tag while rendering React component. ' +
+        'Scripts inside React components are never executed when rendering ' +
+        'on the client. Consider using template tag instead ' +
+        '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n' +
+        '    in script (at **)',
+    );
+
+    // check that the warning is printed only once
+    ReactDOM.render(<script>alert("I am not executed")</script>, container);
+  });
+});
diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 5bf48ef2ae015..54c850662ab2b 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-type ValueTracker = {
+type ValueTracker = {|
   getValue(): string,
   setValue(value: string): void,
   stopTracking(): void,
-};
-type WrapperState = {_valueTracker?: ?ValueTracker};
+|};
+type WrapperState = {_valueTracker?: ?ValueTracker, ...};
 type ElementWithValueTracker = HTMLInputElement & WrapperState;
 
 function isCheckable(elem: HTMLInputElement) {
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 0c328b17e0b2f..7afcd9a6306b4 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -9,6 +9,7 @@
 
 import {Namespaces} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
 // SVG temp container for IE lacking innerHTML
 let reusableSVGContainer;
@@ -22,26 +23,44 @@ let reusableSVGContainer;
  */
 const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   node: Element,
-  html: string,
+  html: {valueOf(): {toString(): string, ...}, ...},
 ): void {
-  // IE does not have innerHTML for SVG nodes, so instead we inject the
-  // new markup in a temp node and then move the child nodes across into
-  // the target node
-
-  if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {
-    reusableSVGContainer =
-      reusableSVGContainer || document.createElement('div');
-    reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
-    const svgNode = reusableSVGContainer.firstChild;
-    while (node.firstChild) {
-      node.removeChild(node.firstChild);
+  if (node.namespaceURI === Namespaces.svg) {
+    if (__DEV__) {
+      if (enableTrustedTypesIntegration) {
+        // TODO: reconsider the text of this warning and when it should show
+        // before enabling the feature flag.
+        if (typeof trustedTypes !== 'undefined') {
+          console.error(
+            "Using 'dangerouslySetInnerHTML' in an svg element with " +
+              'Trusted Types enabled in an Internet Explorer will cause ' +
+              'the trusted value to be converted to string. Assigning string ' +
+              "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
+              "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
+              'on the enclosing div instead.',
+          );
+        }
+      }
     }
-    while (svgNode.firstChild) {
-      node.appendChild(svgNode.firstChild);
+    if (!('innerHTML' in node)) {
+      // IE does not have innerHTML for SVG nodes, so instead we inject the
+      // new markup in a temp node and then move the child nodes across into
+      // the target node
+      reusableSVGContainer =
+        reusableSVGContainer || document.createElement('div');
+      reusableSVGContainer.innerHTML =
+        '<svg>' + html.valueOf().toString() + '</svg>';
+      const svgNode = reusableSVGContainer.firstChild;
+      while (node.firstChild) {
+        node.removeChild(node.firstChild);
+      }
+      while (svgNode.firstChild) {
+        node.appendChild(svgNode.firstChild);
+      }
+      return;
     }
-  } else {
-    node.innerHTML = html;
   }
+  node.innerHTML = (html: any);
 });
 
 export default setInnerHTML;
diff --git a/packages/react-dom/src/client/validateDOMNesting.js b/packages/react-dom/src/client/validateDOMNesting.js
index 3bd82241c082d..4d0c981514c3e 100644
--- a/packages/react-dom/src/client/validateDOMNesting.js
+++ b/packages/react-dom/src/client/validateDOMNesting.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import warningWithoutStack from 'shared/warningWithoutStack';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberStackInDev} from 'react-reconciler/src/ReactCurrentFiber';
 
@@ -411,10 +410,11 @@ if (__DEV__) {
     const parentTag = parentInfo && parentInfo.tag;
 
     if (childText != null) {
-      warningWithoutStack(
-        childTag == null,
-        'validateDOMNesting: when childText is passed, childTag should be null',
-      );
+      if (childTag != null) {
+        console.error(
+          'validateDOMNesting: when childText is passed, childTag should be null',
+        );
+      }
       childTag = '#text';
     }
 
@@ -458,26 +458,22 @@ if (__DEV__) {
       let info = '';
       if (ancestorTag === 'table' && childTag === 'tr') {
         info +=
-          ' Add a <tbody> to your code to match the DOM tree generated by ' +
+          ' Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by ' +
           'the browser.';
       }
-      warningWithoutStack(
-        false,
-        'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s%s',
+      console.error(
+        'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s',
         tagDisplayName,
         ancestorTag,
         whitespaceInfo,
         info,
-        addendum,
       );
     } else {
-      warningWithoutStack(
-        false,
+      console.error(
         'validateDOMNesting(...): %s cannot appear as a descendant of ' +
-          '<%s>.%s',
+          '<%s>.',
         tagDisplayName,
         ancestorTag,
-        addendum,
       );
     }
   };
diff --git a/packages/react-dom/src/events/BeforeInputEventPlugin.js b/packages/react-dom/src/events/BeforeInputEventPlugin.js
index 6895e0dc6254d..2508448f66654 100644
--- a/packages/react-dom/src/events/BeforeInputEventPlugin.js
+++ b/packages/react-dom/src/events/BeforeInputEventPlugin.js
@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {TopLevelType} from 'events/TopLevelEventTypes';
+import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
 
-import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
+import {accumulateTwoPhaseDispatches} from 'legacy-events/EventPropagators';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
 import {
@@ -467,6 +467,7 @@ const BeforeInputEventPlugin = {
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const composition = extractCompositionEvent(
       topLevelType,
diff --git a/packages/react-dom/src/events/ChangeEventPlugin.js b/packages/react-dom/src/events/ChangeEventPlugin.js
index 214becb6732a6..960cb7ffccf09 100644
--- a/packages/react-dom/src/events/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/ChangeEventPlugin.js
@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {runEventsInBatch} from 'events/EventBatching';
-import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
-import {enqueueStateRestore} from 'events/ReactControlledComponent';
-import {batchedUpdates} from 'events/ReactGenericBatching';
-import SyntheticEvent from 'events/SyntheticEvent';
+import {runEventsInBatch} from 'legacy-events/EventBatching';
+import {accumulateTwoPhaseDispatches} from 'legacy-events/EventPropagators';
+import {enqueueStateRestore} from 'legacy-events/ReactControlledComponent';
+import {batchedUpdates} from 'legacy-events/ReactGenericBatching';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 import isTextInputElement from 'shared/isTextInputElement';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
@@ -265,6 +265,7 @@ const ChangeEventPlugin = {
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
 
diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
new file mode 100644
index 0000000000000..05f43b1b1120c
--- /dev/null
+++ b/packages/react-dom/src/events/DOMEventProperties.js
@@ -0,0 +1,189 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {EventPriority} from 'shared/ReactTypes';
+import type {
+  TopLevelType,
+  DOMTopLevelEventType,
+} from 'legacy-events/TopLevelEventTypes';
+import type {DispatchConfig} from 'legacy-events/ReactSyntheticEventType';
+
+import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
+import {
+  DiscreteEvent,
+  UserBlockingEvent,
+  ContinuousEvent,
+} from 'shared/ReactTypes';
+
+// Needed for SimpleEventPlugin, rather than
+// do it in two places, which duplicates logic
+// and increases the bundle size, we do it all
+// here once. If we remove or refactor the
+// SimpleEventPlugin, we should also remove or
+// update the below line.
+export const simpleEventPluginEventTypes = {};
+
+export const topLevelEventsToDispatchConfig: Map<
+  TopLevelType,
+  DispatchConfig,
+> = new Map();
+
+const eventPriorities = new Map();
+
+// We store all the DOMTopLevelEventTypes and their React Types in pairs of two.
+// Furthermore, we ignore prettier so we can keep the formatting sane.
+
+// prettier-ignore
+const discreteEvents = [
+  DOMTopLevelEventTypes.TOP_BLUR, 'blur',
+  DOMTopLevelEventTypes.TOP_CANCEL, 'cancel',
+  DOMTopLevelEventTypes.TOP_CLICK, 'click',
+  DOMTopLevelEventTypes.TOP_CLOSE, 'close',
+  DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu',
+  DOMTopLevelEventTypes.TOP_COPY, 'copy',
+  DOMTopLevelEventTypes.TOP_CUT, 'cut',
+  DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick',
+  DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick',
+  DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd',
+  DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart',
+  DOMTopLevelEventTypes.TOP_DROP, 'drop',
+  DOMTopLevelEventTypes.TOP_FOCUS, 'focus',
+  DOMTopLevelEventTypes.TOP_INPUT, 'input',
+  DOMTopLevelEventTypes.TOP_INVALID, 'invalid',
+  DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown',
+  DOMTopLevelEventTypes.TOP_KEY_PRESS, 'keyPress',
+  DOMTopLevelEventTypes.TOP_KEY_UP, 'keyUp',
+  DOMTopLevelEventTypes.TOP_MOUSE_DOWN, 'mouseDown',
+  DOMTopLevelEventTypes.TOP_MOUSE_UP, 'mouseUp',
+  DOMTopLevelEventTypes.TOP_PASTE, 'paste',
+  DOMTopLevelEventTypes.TOP_PAUSE, 'pause',
+  DOMTopLevelEventTypes.TOP_PLAY, 'play',
+  DOMTopLevelEventTypes.TOP_POINTER_CANCEL, 'pointerCancel',
+  DOMTopLevelEventTypes.TOP_POINTER_DOWN, 'pointerDown',
+  DOMTopLevelEventTypes.TOP_POINTER_UP, 'pointerUp',
+  DOMTopLevelEventTypes.TOP_RATE_CHANGE, 'rateChange',
+  DOMTopLevelEventTypes.TOP_RESET, 'reset',
+  DOMTopLevelEventTypes.TOP_SEEKED, 'seeked',
+  DOMTopLevelEventTypes.TOP_SUBMIT, 'submit',
+  DOMTopLevelEventTypes.TOP_TOUCH_CANCEL, 'touchCancel',
+  DOMTopLevelEventTypes.TOP_TOUCH_END, 'touchEnd',
+  DOMTopLevelEventTypes.TOP_TOUCH_START, 'touchStart',
+  DOMTopLevelEventTypes.TOP_VOLUME_CHANGE, 'volumeChange',
+];
+
+// prettier-ignore
+const userBlockingEvents = [
+  DOMTopLevelEventTypes.TOP_DRAG, 'drag',
+  DOMTopLevelEventTypes.TOP_DRAG_ENTER, 'dragEnter',
+  DOMTopLevelEventTypes.TOP_DRAG_EXIT, 'dragExit',
+  DOMTopLevelEventTypes.TOP_DRAG_LEAVE, 'dragLeave',
+  DOMTopLevelEventTypes.TOP_DRAG_OVER, 'dragOver',
+  DOMTopLevelEventTypes.TOP_MOUSE_MOVE, 'mouseMove',
+  DOMTopLevelEventTypes.TOP_MOUSE_OUT, 'mouseOut',
+  DOMTopLevelEventTypes.TOP_MOUSE_OVER, 'mouseOver',
+  DOMTopLevelEventTypes.TOP_POINTER_MOVE, 'pointerMove',
+  DOMTopLevelEventTypes.TOP_POINTER_OUT, 'pointerOut',
+  DOMTopLevelEventTypes.TOP_POINTER_OVER, 'pointerOver',
+  DOMTopLevelEventTypes.TOP_SCROLL, 'scroll',
+  DOMTopLevelEventTypes.TOP_TOGGLE, 'toggle',
+  DOMTopLevelEventTypes.TOP_TOUCH_MOVE, 'touchMove',
+  DOMTopLevelEventTypes.TOP_WHEEL, 'wheel',
+];
+
+// prettier-ignore
+const continuousEvents = [
+  DOMTopLevelEventTypes.TOP_ABORT, 'abort',
+  DOMTopLevelEventTypes.TOP_ANIMATION_END, 'animationEnd',
+  DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION, 'animationIteration',
+  DOMTopLevelEventTypes.TOP_ANIMATION_START, 'animationStart',
+  DOMTopLevelEventTypes.TOP_CAN_PLAY, 'canPlay',
+  DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH, 'canPlayThrough',
+  DOMTopLevelEventTypes.TOP_DURATION_CHANGE, 'durationChange',
+  DOMTopLevelEventTypes.TOP_EMPTIED, 'emptied',
+  DOMTopLevelEventTypes.TOP_ENCRYPTED, 'encrypted',
+  DOMTopLevelEventTypes.TOP_ENDED, 'ended',
+  DOMTopLevelEventTypes.TOP_ERROR, 'error',
+  DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture',
+  DOMTopLevelEventTypes.TOP_LOAD, 'load',
+  DOMTopLevelEventTypes.TOP_LOADED_DATA, 'loadedData',
+  DOMTopLevelEventTypes.TOP_LOADED_METADATA, 'loadedMetadata',
+  DOMTopLevelEventTypes.TOP_LOAD_START, 'loadStart',
+  DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture',
+  DOMTopLevelEventTypes.TOP_PLAYING, 'playing',
+  DOMTopLevelEventTypes.TOP_PROGRESS, 'progress',
+  DOMTopLevelEventTypes.TOP_SEEKING, 'seeking',
+  DOMTopLevelEventTypes.TOP_STALLED, 'stalled',
+  DOMTopLevelEventTypes.TOP_SUSPEND, 'suspend',
+  DOMTopLevelEventTypes.TOP_TIME_UPDATE, 'timeUpdate',
+  DOMTopLevelEventTypes.TOP_TRANSITION_END, 'transitionEnd',
+  DOMTopLevelEventTypes.TOP_WAITING, 'waiting',
+];
+
+/**
+ * Turns
+ * ['abort', ...]
+ * into
+ * eventTypes = {
+ *   'abort': {
+ *     phasedRegistrationNames: {
+ *       bubbled: 'onAbort',
+ *       captured: 'onAbortCapture',
+ *     },
+ *     dependencies: [TOP_ABORT],
+ *   },
+ *   ...
+ * };
+ * topLevelEventsToDispatchConfig = new Map([
+ *   [TOP_ABORT, { sameConfig }],
+ * ]);
+ */
+
+function processTopEventTypesByPriority(
+  eventTypes: Array<DOMTopLevelEventType | string>,
+  priority: EventPriority,
+): void {
+  // As the event types are in pairs of two, we need to iterate
+  // through in twos. The events are in pairs of two to save code
+  // and improve init perf of processing this array, as it will
+  // result in far fewer object allocations and property accesses
+  // if we only use three arrays to process all the categories of
+  // instead of tuples.
+  for (let i = 0; i < eventTypes.length; i += 2) {
+    const topEvent = ((eventTypes[i]: any): DOMTopLevelEventType);
+    const event = ((eventTypes[i + 1]: any): string);
+    const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
+    const onEvent = 'on' + capitalizedEvent;
+
+    const config = {
+      phasedRegistrationNames: {
+        bubbled: onEvent,
+        captured: onEvent + 'Capture',
+      },
+      dependencies: [topEvent],
+      eventPriority: priority,
+    };
+    eventPriorities.set(topEvent, priority);
+    topLevelEventsToDispatchConfig.set(topEvent, config);
+    simpleEventPluginEventTypes[event] = config;
+  }
+}
+
+processTopEventTypesByPriority(discreteEvents, DiscreteEvent);
+processTopEventTypesByPriority(userBlockingEvents, UserBlockingEvent);
+processTopEventTypesByPriority(continuousEvents, ContinuousEvent);
+
+export function getEventPriorityForPluginSystem(
+  topLevelType: TopLevelType,
+): EventPriority {
+  const priority = eventPriorities.get(topLevelType);
+  // Default to a ContinuousEvent. Note: we might
+  // want to warn if we can't detect the priority
+  // for the event.
+  return priority === undefined ? ContinuousEvent : priority;
+}
diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js
deleted file mode 100644
index 690421deee93b..0000000000000
--- a/packages/react-dom/src/events/DOMEventResponderSystem.js
+++ /dev/null
@@ -1,1040 +0,0 @@
-/**
- * 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.
- * @flow
- */
-
-import {
-  type EventSystemFlags,
-  IS_PASSIVE,
-  PASSIVE_NOT_SUPPORTED,
-} from 'events/EventSystemFlags';
-import type {AnyNativeEvent} from 'events/PluginModuleType';
-import {
-  EventComponent,
-  EventTarget as EventTargetWorkTag,
-  HostComponent,
-} from 'shared/ReactWorkTags';
-import type {
-  ReactEventResponder,
-  ReactEventResponderEventType,
-  ReactEventComponentInstance,
-  ReactResponderContext,
-  ReactResponderEvent,
-} from 'shared/ReactTypes';
-import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
-import {
-  batchedEventUpdates,
-  discreteUpdates,
-  flushDiscreteUpdates,
-} from 'events/ReactGenericBatching';
-import type {Fiber} from 'react-reconciler/src/ReactFiber';
-import warning from 'shared/warning';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
-import invariant from 'shared/invariant';
-import {
-  isFiberSuspenseAndTimedOut,
-  getSuspenseFallbackChild,
-} from 'react-reconciler/src/ReactFiberEvents';
-
-import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
-
-export let listenToResponderEventTypesImpl;
-
-export function setListenToResponderEventTypes(
-  _listenToResponderEventTypesImpl: Function,
-) {
-  listenToResponderEventTypesImpl = _listenToResponderEventTypesImpl;
-}
-
-type EventObjectType = $Shape<PartialEventObject>;
-
-type EventQueue = {
-  events: Array<EventObjectType>,
-  discrete: boolean,
-};
-
-type PartialEventObject = {
-  target: Element | Document,
-  type: string,
-};
-
-type ResponderTimeout = {|
-  id: TimeoutID,
-  timers: Map<Symbol, ResponderTimer>,
-|};
-
-type ResponderTimer = {|
-  instance: ReactEventComponentInstance,
-  func: () => void,
-  id: Symbol,
-  timeStamp: number,
-|};
-
-const activeTimeouts: Map<Symbol, ResponderTimeout> = new Map();
-const rootEventTypesToEventComponentInstances: Map<
-  DOMTopLevelEventType | string,
-  Set<ReactEventComponentInstance>,
-> = new Map();
-const targetEventTypeCached: Map<
-  Array<ReactEventResponderEventType>,
-  Set<string>,
-> = new Map();
-const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-const eventListeners:
-  | WeakMap
-  | Map<
-      $Shape<PartialEventObject>,
-      ($Shape<PartialEventObject>) => void,
-    > = new PossiblyWeakMap();
-
-const responderOwners: Map<
-  ReactEventResponder,
-  ReactEventComponentInstance,
-> = new Map();
-let globalOwner = null;
-
-let currentTimeStamp = 0;
-let currentTimers = new Map();
-let currentInstance: null | ReactEventComponentInstance = null;
-let currentEventQueue: null | EventQueue = null;
-
-const eventResponderContext: ReactResponderContext = {
-  dispatchEvent(
-    possibleEventObject: Object,
-    listener: ($Shape<PartialEventObject>) => void,
-    discrete: boolean,
-  ): void {
-    validateResponderContext();
-    const {target, type, timeStamp} = possibleEventObject;
-
-    if (target == null || type == null || timeStamp == null) {
-      throw new Error(
-        'context.dispatchEvent: "target", "timeStamp", and "type" fields on event object are required.',
-      );
-    }
-    const showWarning = name => {
-      if (__DEV__) {
-        warning(
-          false,
-          '%s is not available on event objects created from event responder modules (React Flare). ' +
-            'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.%s }`',
-          name,
-          name,
-        );
-      }
-    };
-    possibleEventObject.preventDefault = () => {
-      if (__DEV__) {
-        showWarning('preventDefault()');
-      }
-    };
-    possibleEventObject.stopPropagation = () => {
-      if (__DEV__) {
-        showWarning('stopPropagation()');
-      }
-    };
-    possibleEventObject.isDefaultPrevented = () => {
-      if (__DEV__) {
-        showWarning('isDefaultPrevented()');
-      }
-    };
-    possibleEventObject.isPropagationStopped = () => {
-      if (__DEV__) {
-        showWarning('isPropagationStopped()');
-      }
-    };
-    // $FlowFixMe: we don't need value, Flow thinks we do
-    Object.defineProperty(possibleEventObject, 'nativeEvent', {
-      get() {
-        if (__DEV__) {
-          showWarning('nativeEvent');
-        }
-      },
-    });
-    // $FlowFixMe: we don't need value, Flow thinks we do
-    Object.defineProperty(possibleEventObject, 'defaultPrevented', {
-      get() {
-        if (__DEV__) {
-          showWarning('defaultPrevented');
-        }
-      },
-    });
-
-    const eventObject = ((possibleEventObject: any): $Shape<
-      PartialEventObject,
-    >);
-    const eventQueue = ((currentEventQueue: any): EventQueue);
-    if (discrete) {
-      eventQueue.discrete = true;
-    }
-    eventListeners.set(eventObject, listener);
-    eventQueue.events.push(eventObject);
-  },
-  isPositionWithinTouchHitTarget(x: number, y: number): boolean {
-    validateResponderContext();
-    const doc = getActiveDocument();
-    // This isn't available in some environments (JSDOM)
-    if (typeof doc.elementFromPoint !== 'function') {
-      return false;
-    }
-    const target = doc.elementFromPoint(x, y);
-    if (target === null) {
-      return false;
-    }
-    const childFiber = getClosestInstanceFromNode(target);
-    if (childFiber === null) {
-      return false;
-    }
-    const parentFiber = childFiber.return;
-    if (parentFiber !== null && parentFiber.tag === EventTargetWorkTag) {
-      const parentNode = ((target.parentNode: any): Element);
-      // TODO find another way to do this without using the
-      // expensive getBoundingClientRect.
-      const {left, top, right, bottom} = parentNode.getBoundingClientRect();
-      // Check if the co-ords intersect with the target element's rect.
-      if (x > left && y > top && x < right && y < bottom) {
-        return false;
-      }
-      return true;
-    }
-    return false;
-  },
-  isTargetWithinEventComponent,
-  isTargetWithinEventResponderScope(target: Element | Document): boolean {
-    validateResponderContext();
-    const responder = ((currentInstance: any): ReactEventComponentInstance)
-      .responder;
-    if (target != null) {
-      let fiber = getClosestInstanceFromNode(target);
-      while (fiber !== null) {
-        if (fiber.stateNode === currentInstance) {
-          return true;
-        }
-        if (
-          fiber.tag === EventComponent &&
-          (fiber.stateNode === null || fiber.stateNode.responder === responder)
-        ) {
-          return false;
-        }
-        fiber = fiber.return;
-      }
-    }
-    return false;
-  },
-  isTargetWithinElement(
-    childTarget: Element | Document,
-    parentTarget: Element | Document,
-  ): boolean {
-    validateResponderContext();
-    const childFiber = getClosestInstanceFromNode(childTarget);
-    const parentFiber = getClosestInstanceFromNode(parentTarget);
-
-    let node = childFiber;
-    while (node !== null) {
-      if (node === parentFiber) {
-        return true;
-      }
-      node = node.return;
-    }
-    return false;
-  },
-  addRootEventTypes(rootEventTypes: Array<ReactEventResponderEventType>): void {
-    validateResponderContext();
-    const activeDocument = getActiveDocument();
-    listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
-    for (let i = 0; i < rootEventTypes.length; i++) {
-      const rootEventType = rootEventTypes[i];
-      const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
-      registerRootEventType(rootEventType, eventComponentInstance);
-    }
-  },
-  removeRootEventTypes(
-    rootEventTypes: Array<ReactEventResponderEventType>,
-  ): void {
-    validateResponderContext();
-    for (let i = 0; i < rootEventTypes.length; i++) {
-      const rootEventType = rootEventTypes[i];
-      let name = rootEventType;
-      let passive = true;
-
-      if (typeof rootEventType !== 'string') {
-        const targetEventConfigObject = ((rootEventType: any): {
-          name: string,
-          passive?: boolean,
-        });
-        name = targetEventConfigObject.name;
-        if (targetEventConfigObject.passive !== undefined) {
-          passive = targetEventConfigObject.passive;
-        }
-      }
-
-      const listeningName = generateListeningKey(
-        ((name: any): string),
-        passive,
-      );
-      let rootEventComponents = rootEventTypesToEventComponentInstances.get(
-        listeningName,
-      );
-      let rootEventTypesSet = ((currentInstance: any): ReactEventComponentInstance)
-        .rootEventTypes;
-      if (rootEventTypesSet !== null) {
-        rootEventTypesSet.delete(listeningName);
-      }
-      if (rootEventComponents !== undefined) {
-        rootEventComponents.delete(
-          ((currentInstance: any): ReactEventComponentInstance),
-        );
-      }
-    }
-  },
-  hasOwnership(): boolean {
-    validateResponderContext();
-    const responder = ((currentInstance: any): ReactEventComponentInstance)
-      .responder;
-    return (
-      globalOwner === currentInstance ||
-      responderOwners.get(responder) === currentInstance
-    );
-  },
-  requestGlobalOwnership(): boolean {
-    validateResponderContext();
-    if (globalOwner !== null) {
-      return false;
-    }
-    globalOwner = currentInstance;
-    triggerOwnershipListeners(null);
-    return true;
-  },
-  requestResponderOwnership(): boolean {
-    validateResponderContext();
-    const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
-    const responder = eventComponentInstance.responder;
-    if (responderOwners.has(responder)) {
-      return false;
-    }
-    responderOwners.set(responder, eventComponentInstance);
-    triggerOwnershipListeners(responder);
-    return true;
-  },
-  releaseOwnership(): boolean {
-    validateResponderContext();
-    return releaseOwnershipForEventComponentInstance(
-      ((currentInstance: any): ReactEventComponentInstance),
-    );
-  },
-  setTimeout(func: () => void, delay): Symbol {
-    validateResponderContext();
-    if (currentTimers === null) {
-      currentTimers = new Map();
-    }
-    let timeout = currentTimers.get(delay);
-
-    const timerId = Symbol();
-    if (timeout === undefined) {
-      const timers = new Map();
-      const id = setTimeout(() => {
-        processTimers(timers, delay);
-      }, delay);
-      timeout = {
-        id,
-        timers,
-      };
-      currentTimers.set(delay, timeout);
-    }
-    timeout.timers.set(timerId, {
-      instance: ((currentInstance: any): ReactEventComponentInstance),
-      func,
-      id: timerId,
-      timeStamp: currentTimeStamp,
-    });
-    activeTimeouts.set(timerId, timeout);
-    return timerId;
-  },
-  clearTimeout(timerId: Symbol): void {
-    validateResponderContext();
-    const timeout = activeTimeouts.get(timerId);
-
-    if (timeout !== undefined) {
-      const timers = timeout.timers;
-      timers.delete(timerId);
-      if (timers.size === 0) {
-        clearTimeout(timeout.id);
-      }
-    }
-  },
-  getFocusableElementsInScope(): Array<HTMLElement> {
-    validateResponderContext();
-    const focusableElements = [];
-    const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
-    const child = ((eventComponentInstance.currentFiber: any): Fiber).child;
-
-    if (child !== null) {
-      collectFocusableElements(child, focusableElements);
-    }
-    return focusableElements;
-  },
-  getActiveDocument,
-  objectAssign: Object.assign,
-  getEventPointerType(
-    event: ReactResponderEvent,
-  ): '' | 'mouse' | 'keyboard' | 'pen' | 'touch' {
-    validateResponderContext();
-    const nativeEvent: any = event.nativeEvent;
-    const {type, pointerType} = nativeEvent;
-    if (pointerType != null) {
-      return pointerType;
-    }
-    if (type.indexOf('mouse') === 0) {
-      return 'mouse';
-    }
-    if (type.indexOf('touch') === 0) {
-      return 'touch';
-    }
-    if (type.indexOf('key') === 0) {
-      return 'keyboard';
-    }
-    return '';
-  },
-  getEventCurrentTarget(event: ReactResponderEvent): Element {
-    validateResponderContext();
-    const target = event.target;
-    let fiber = getClosestInstanceFromNode(target);
-    let hostComponent = target;
-
-    while (fiber !== null) {
-      if (fiber.stateNode === currentInstance) {
-        break;
-      }
-      if (fiber.tag === HostComponent) {
-        hostComponent = fiber.stateNode;
-      }
-      fiber = fiber.return;
-    }
-    return ((hostComponent: any): Element);
-  },
-  getTimeStamp(): number {
-    validateResponderContext();
-    return currentTimeStamp;
-  },
-  isTargetWithinHostComponent(
-    target: Element | Document,
-    elementType: string,
-    deep: boolean,
-  ): boolean {
-    validateResponderContext();
-    let fiber = getClosestInstanceFromNode(target);
-    while (fiber !== null) {
-      if (!deep && fiber.stateNode === currentInstance) {
-        return false;
-      }
-      if (fiber.tag === HostComponent && fiber.type === elementType) {
-        return true;
-      }
-      fiber = fiber.return;
-    }
-    return false;
-  },
-};
-
-function collectFocusableElements(
-  node: Fiber,
-  focusableElements: Array<HTMLElement>,
-): void {
-  if (isFiberSuspenseAndTimedOut(node)) {
-    const fallbackChild = getSuspenseFallbackChild(node);
-    if (fallbackChild !== null) {
-      collectFocusableElements(fallbackChild, focusableElements);
-    }
-  } else {
-    if (isFiberHostComponentFocusable(node)) {
-      focusableElements.push(node.stateNode);
-    } else {
-      const child = node.child;
-
-      if (child !== null) {
-        collectFocusableElements(child, focusableElements);
-      }
-    }
-  }
-  const sibling = node.sibling;
-
-  if (sibling !== null) {
-    collectFocusableElements(sibling, focusableElements);
-  }
-}
-
-function isTargetWithinEventComponent(target: Element | Document): boolean {
-  validateResponderContext();
-  if (target != null) {
-    let fiber = getClosestInstanceFromNode(target);
-    while (fiber !== null) {
-      if (fiber.stateNode === currentInstance) {
-        return true;
-      }
-      fiber = fiber.return;
-    }
-  }
-  return false;
-}
-
-function getActiveDocument(): Document {
-  const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
-  const rootElement = ((eventComponentInstance.rootInstance: any): Element);
-  return rootElement.ownerDocument;
-}
-
-function releaseOwnershipForEventComponentInstance(
-  eventComponentInstance: ReactEventComponentInstance,
-): boolean {
-  const responder = eventComponentInstance.responder;
-  let triggerOwnershipListenersWith;
-  if (responderOwners.get(responder) === eventComponentInstance) {
-    responderOwners.delete(responder);
-    triggerOwnershipListenersWith = responder;
-  }
-  if (globalOwner === eventComponentInstance) {
-    globalOwner = null;
-    triggerOwnershipListenersWith = null;
-  }
-  if (triggerOwnershipListenersWith !== undefined) {
-    triggerOwnershipListeners(triggerOwnershipListenersWith);
-    return true;
-  } else {
-    return false;
-  }
-}
-
-function isFiberHostComponentFocusable(fiber: Fiber): boolean {
-  if (fiber.tag !== HostComponent) {
-    return false;
-  }
-  const {type, memoizedProps} = fiber;
-  if (memoizedProps.tabIndex === -1 || memoizedProps.disabled) {
-    return false;
-  }
-  if (memoizedProps.tabIndex === 0 || memoizedProps.contentEditable === true) {
-    return true;
-  }
-  if (type === 'a' || type === 'area') {
-    return !!memoizedProps.href && memoizedProps.rel !== 'ignore';
-  }
-  if (type === 'input') {
-    return memoizedProps.type !== 'hidden' && memoizedProps.type !== 'file';
-  }
-  return (
-    type === 'button' ||
-    type === 'textarea' ||
-    type === 'object' ||
-    type === 'select' ||
-    type === 'iframe' ||
-    type === 'embed'
-  );
-}
-
-function processTimers(
-  timers: Map<Symbol, ResponderTimer>,
-  delay: number,
-): void {
-  const timersArr = Array.from(timers.values());
-  currentEventQueue = createEventQueue();
-  try {
-    for (let i = 0; i < timersArr.length; i++) {
-      const {instance, func, id, timeStamp} = timersArr[i];
-      currentInstance = instance;
-      currentTimeStamp = timeStamp + delay;
-      try {
-        func();
-      } finally {
-        activeTimeouts.delete(id);
-      }
-    }
-    processEventQueue();
-  } finally {
-    currentTimers = null;
-    currentInstance = null;
-    currentEventQueue = null;
-    currentTimeStamp = 0;
-  }
-}
-
-function createResponderEvent(
-  topLevelType: string,
-  nativeEvent: AnyNativeEvent,
-  nativeEventTarget: Element | Document,
-  passive: boolean,
-  passiveSupported: boolean,
-): ReactResponderEvent {
-  const responderEvent = {
-    nativeEvent: nativeEvent,
-    target: nativeEventTarget,
-    type: topLevelType,
-    passive,
-    passiveSupported,
-  };
-  if (__DEV__) {
-    Object.freeze(responderEvent);
-  }
-  return responderEvent;
-}
-
-function createEventQueue(): EventQueue {
-  return {
-    events: [],
-    discrete: false,
-  };
-}
-
-function processEvent(event: $Shape<PartialEventObject>): void {
-  const type = event.type;
-  const listener = ((eventListeners.get(event): any): (
-    $Shape<PartialEventObject>,
-  ) => void);
-  invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
-}
-
-function processEvents(events: Array<EventObjectType>): void {
-  for (let i = 0, length = events.length; i < length; i++) {
-    processEvent(events[i]);
-  }
-}
-
-export function processEventQueue(): void {
-  const {events, discrete} = ((currentEventQueue: any): EventQueue);
-
-  if (events.length === 0) {
-    return;
-  }
-  if (discrete) {
-    if (shouldflushDiscreteUpdates(currentTimeStamp)) {
-      flushDiscreteUpdates();
-    }
-    discreteUpdates(() => {
-      batchedEventUpdates(processEvents, events);
-    });
-  } else {
-    batchedEventUpdates(processEvents, events);
-  }
-}
-
-function getTargetEventTypesSet(
-  eventTypes: Array<ReactEventResponderEventType>,
-): Set<string> {
-  let cachedSet = targetEventTypeCached.get(eventTypes);
-
-  if (cachedSet === undefined) {
-    cachedSet = new Set();
-    for (let i = 0; i < eventTypes.length; i++) {
-      const eventType = eventTypes[i];
-      let name = eventType;
-      let passive = true;
-
-      if (typeof eventType !== 'string') {
-        const targetEventConfigObject = ((eventType: any): {
-          name: string,
-          passive?: boolean,
-        });
-        name = targetEventConfigObject.name;
-        if (targetEventConfigObject.passive !== undefined) {
-          passive = targetEventConfigObject.passive;
-        }
-      }
-      const listeningName = generateListeningKey(
-        ((name: any): string),
-        passive,
-      );
-      cachedSet.add(listeningName);
-    }
-    targetEventTypeCached.set(eventTypes, cachedSet);
-  }
-  return cachedSet;
-}
-
-function getTargetEventResponderInstances(
-  listeningName: string,
-  targetFiber: null | Fiber,
-): Array<ReactEventComponentInstance> {
-  const eventResponderInstances = [];
-  let node = targetFiber;
-  while (node !== null) {
-    // Traverse up the fiber tree till we find event component fibers.
-    if (node.tag === EventComponent) {
-      const eventComponentInstance = node.stateNode;
-      const responder = eventComponentInstance.responder;
-      const targetEventTypes = responder.targetEventTypes;
-      // Validate the target event type exists on the responder
-      if (targetEventTypes !== undefined) {
-        const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);
-        if (targetEventTypesSet.has(listeningName)) {
-          eventResponderInstances.push(eventComponentInstance);
-        }
-      }
-    }
-    node = node.return;
-  }
-  return eventResponderInstances;
-}
-
-function getRootEventResponderInstances(
-  listeningName: string,
-): Array<ReactEventComponentInstance> {
-  const eventResponderInstances = [];
-  const rootEventInstances = rootEventTypesToEventComponentInstances.get(
-    listeningName,
-  );
-  if (rootEventInstances !== undefined) {
-    const rootEventComponentInstances = Array.from(rootEventInstances);
-
-    for (let i = 0; i < rootEventComponentInstances.length; i++) {
-      const rootEventComponentInstance = rootEventComponentInstances[i];
-      eventResponderInstances.push(rootEventComponentInstance);
-    }
-  }
-  return eventResponderInstances;
-}
-
-function shouldSkipEventComponent(
-  eventResponderInstance: ReactEventComponentInstance,
-  propagatedEventResponders: null | Set<ReactEventResponder>,
-): boolean {
-  const responder = eventResponderInstance.responder;
-  if (propagatedEventResponders !== null && responder.stopLocalPropagation) {
-    if (propagatedEventResponders.has(responder)) {
-      return true;
-    }
-    propagatedEventResponders.add(responder);
-  }
-  if (globalOwner && globalOwner !== eventResponderInstance) {
-    return true;
-  }
-  if (
-    responderOwners.has(responder) &&
-    responderOwners.get(responder) !== eventResponderInstance
-  ) {
-    return true;
-  }
-  return false;
-}
-
-function traverseAndHandleEventResponderInstances(
-  topLevelType: DOMTopLevelEventType,
-  targetFiber: null | Fiber,
-  nativeEvent: AnyNativeEvent,
-  nativeEventTarget: EventTarget,
-  eventSystemFlags: EventSystemFlags,
-): void {
-  const isPassiveEvent = (eventSystemFlags & IS_PASSIVE) !== 0;
-  const isPassiveSupported = (eventSystemFlags & PASSIVE_NOT_SUPPORTED) === 0;
-  const listeningName = generateListeningKey(
-    ((topLevelType: any): string),
-    isPassiveEvent || !isPassiveSupported,
-  );
-
-  // Trigger event responders in this order:
-  // - Capture target phase
-  // - Bubble target phase
-  // - Root phase
-
-  const targetEventResponderInstances = getTargetEventResponderInstances(
-    listeningName,
-    targetFiber,
-  );
-  const responderEvent = createResponderEvent(
-    ((topLevelType: any): string),
-    nativeEvent,
-    ((nativeEventTarget: any): Element | Document),
-    isPassiveEvent,
-    isPassiveSupported,
-  );
-  const propagatedEventResponders: Set<ReactEventResponder> = new Set();
-  let length = targetEventResponderInstances.length;
-  let i;
-
-  // Captured and bubbled event phases have the notion of local propagation.
-  // This means that the propgation chain can be stopped part of the the way
-  // through processing event component instances. The major difference to other
-  // events systems is that the stopping of propgation is localized to a single
-  // phase, rather than both phases.
-  if (length > 0) {
-    // Capture target phase
-    for (i = length; i-- > 0; ) {
-      const targetEventResponderInstance = targetEventResponderInstances[i];
-      const {responder, props, state} = targetEventResponderInstance;
-      const eventListener = responder.onEventCapture;
-      if (eventListener !== undefined) {
-        if (
-          shouldSkipEventComponent(
-            targetEventResponderInstance,
-            propagatedEventResponders,
-          )
-        ) {
-          continue;
-        }
-        currentInstance = targetEventResponderInstance;
-        eventListener(responderEvent, eventResponderContext, props, state);
-      }
-    }
-    // We clean propagated event responders between phases.
-    propagatedEventResponders.clear();
-    // Bubble target phase
-    for (i = 0; i < length; i++) {
-      const targetEventResponderInstance = targetEventResponderInstances[i];
-      const {responder, props, state} = targetEventResponderInstance;
-      const eventListener = responder.onEvent;
-      if (eventListener !== undefined) {
-        if (
-          shouldSkipEventComponent(
-            targetEventResponderInstance,
-            propagatedEventResponders,
-          )
-        ) {
-          continue;
-        }
-        currentInstance = targetEventResponderInstance;
-        eventListener(responderEvent, eventResponderContext, props, state);
-      }
-    }
-  }
-  // Root phase
-  const rootEventResponderInstances = getRootEventResponderInstances(
-    listeningName,
-  );
-  length = rootEventResponderInstances.length;
-  if (length > 0) {
-    for (i = 0; i < length; i++) {
-      const rootEventResponderInstance = rootEventResponderInstances[i];
-      const {responder, props, state} = rootEventResponderInstance;
-      const eventListener = responder.onRootEvent;
-      if (eventListener !== undefined) {
-        if (shouldSkipEventComponent(rootEventResponderInstance, null)) {
-          continue;
-        }
-        currentInstance = rootEventResponderInstance;
-        eventListener(responderEvent, eventResponderContext, props, state);
-      }
-    }
-  }
-}
-
-function triggerOwnershipListeners(
-  limitByResponder: null | ReactEventResponder,
-): void {
-  const listeningInstances = Array.from(ownershipChangeListeners);
-  const previousInstance = currentInstance;
-  try {
-    for (let i = 0; i < listeningInstances.length; i++) {
-      const instance = listeningInstances[i];
-      const {props, responder, state} = instance;
-      if (limitByResponder !== null && limitByResponder !== responder) {
-        continue;
-      }
-      currentInstance = instance;
-      const onOwnershipChange = responder.onOwnershipChange;
-      if (onOwnershipChange !== undefined) {
-        onOwnershipChange(eventResponderContext, props, state);
-      }
-    }
-  } finally {
-    currentInstance = previousInstance;
-  }
-}
-
-export function mountEventResponder(
-  eventComponentInstance: ReactEventComponentInstance,
-) {
-  const responder = eventComponentInstance.responder;
-  if (responder.onOwnershipChange !== undefined) {
-    ownershipChangeListeners.add(eventComponentInstance);
-  }
-  const onMount = responder.onMount;
-  if (onMount !== undefined) {
-    let {props, state} = eventComponentInstance;
-    currentEventQueue = createEventQueue();
-    currentInstance = eventComponentInstance;
-    try {
-      onMount(eventResponderContext, props, state);
-    } finally {
-      currentEventQueue = null;
-      currentInstance = null;
-      currentTimers = null;
-    }
-  }
-}
-
-export function unmountEventResponder(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
-  const responder = eventComponentInstance.responder;
-  const onUnmount = responder.onUnmount;
-  if (onUnmount !== undefined) {
-    let {props, state} = eventComponentInstance;
-    currentEventQueue = createEventQueue();
-    currentInstance = eventComponentInstance;
-    try {
-      onUnmount(eventResponderContext, props, state);
-    } finally {
-      currentEventQueue = null;
-      currentInstance = null;
-      currentTimers = null;
-    }
-  }
-  try {
-    currentEventQueue = createEventQueue();
-    releaseOwnershipForEventComponentInstance(eventComponentInstance);
-    processEventQueue();
-  } finally {
-    currentEventQueue = null;
-  }
-  if (responder.onOwnershipChange !== undefined) {
-    ownershipChangeListeners.delete(eventComponentInstance);
-  }
-  const rootEventTypesSet = eventComponentInstance.rootEventTypes;
-  if (rootEventTypesSet !== null) {
-    const rootEventTypes = Array.from(rootEventTypesSet);
-
-    for (let i = 0; i < rootEventTypes.length; i++) {
-      const topLevelEventType = rootEventTypes[i];
-      let rootEventComponentInstances = rootEventTypesToEventComponentInstances.get(
-        topLevelEventType,
-      );
-      if (rootEventComponentInstances !== undefined) {
-        rootEventComponentInstances.delete(eventComponentInstance);
-      }
-    }
-  }
-}
-
-function validateResponderContext(): void {
-  invariant(
-    currentEventQueue && currentInstance,
-    'An event responder context was used outside of an event cycle. ' +
-      'Use context.setTimeout() to use asynchronous responder context outside of event cycle .',
-  );
-}
-
-export function dispatchEventForResponderEventSystem(
-  topLevelType: DOMTopLevelEventType,
-  targetFiber: null | Fiber,
-  nativeEvent: AnyNativeEvent,
-  nativeEventTarget: EventTarget,
-  eventSystemFlags: EventSystemFlags,
-): void {
-  if (enableEventAPI) {
-    const previousEventQueue = currentEventQueue;
-    const previousInstance = currentInstance;
-    const previousTimers = currentTimers;
-    const previousTimeStamp = currentTimeStamp;
-    currentTimers = null;
-    currentEventQueue = createEventQueue();
-    // We might want to control timeStamp another way here
-    currentTimeStamp = (nativeEvent: any).timeStamp;
-    try {
-      traverseAndHandleEventResponderInstances(
-        topLevelType,
-        targetFiber,
-        nativeEvent,
-        nativeEventTarget,
-        eventSystemFlags,
-      );
-      processEventQueue();
-    } finally {
-      currentTimers = previousTimers;
-      currentInstance = previousInstance;
-      currentEventQueue = previousEventQueue;
-      currentTimeStamp = previousTimeStamp;
-    }
-  }
-}
-
-export function addRootEventTypesForComponentInstance(
-  eventComponentInstance: ReactEventComponentInstance,
-  rootEventTypes: Array<ReactEventResponderEventType>,
-): void {
-  for (let i = 0; i < rootEventTypes.length; i++) {
-    const rootEventType = rootEventTypes[i];
-    registerRootEventType(rootEventType, eventComponentInstance);
-  }
-}
-
-function registerRootEventType(
-  rootEventType: ReactEventResponderEventType,
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
-  let name = rootEventType;
-  let passive = true;
-
-  if (typeof rootEventType !== 'string') {
-    const targetEventConfigObject = ((rootEventType: any): {
-      name: string,
-      passive?: boolean,
-    });
-    name = targetEventConfigObject.name;
-    if (targetEventConfigObject.passive !== undefined) {
-      passive = targetEventConfigObject.passive;
-    }
-  }
-
-  const listeningName = generateListeningKey(((name: any): string), passive);
-  let rootEventComponentInstances = rootEventTypesToEventComponentInstances.get(
-    listeningName,
-  );
-  if (rootEventComponentInstances === undefined) {
-    rootEventComponentInstances = new Set();
-    rootEventTypesToEventComponentInstances.set(
-      listeningName,
-      rootEventComponentInstances,
-    );
-  }
-  let rootEventTypesSet = eventComponentInstance.rootEventTypes;
-  if (rootEventTypesSet === null) {
-    rootEventTypesSet = eventComponentInstance.rootEventTypes = new Set();
-  }
-  invariant(
-    !rootEventTypesSet.has(listeningName),
-    'addRootEventTypes() found a duplicate root event ' +
-      'type of "%s". This might be because the event type exists in the event responder "rootEventTypes" ' +
-      'array or because of a previous addRootEventTypes() using this root event type.',
-    name,
-  );
-  rootEventTypesSet.add(listeningName);
-  rootEventComponentInstances.add(
-    ((eventComponentInstance: any): ReactEventComponentInstance),
-  );
-}
-
-export function generateListeningKey(
-  topLevelType: string,
-  passive: boolean,
-): string {
-  // Create a unique name for this event, plus its properties. We'll
-  // use this to ensure we don't listen to the same event with the same
-  // properties again.
-  const passiveKey = passive ? '_passive' : '_active';
-  return `${topLevelType}${passiveKey}`;
-}
-
-let lastDiscreteEventTimeStamp = 0;
-
-export function shouldflushDiscreteUpdates(timeStamp: number): boolean {
-  // event.timeStamp isn't overly reliable due to inconsistencies in
-  // how different browsers have historically provided the time stamp.
-  // Some browsers provide high-resolution time stamps for all events,
-  // some provide low-resoltion time stamps for all events. FF < 52
-  // even mixes both time stamps together. Some browsers even report
-  // negative time stamps or time stamps that are 0 (iOS9) in some cases.
-  // Given we are only comparing two time stamps with equality (!==),
-  // we are safe from the resolution differences. If the time stamp is 0
-  // we bail-out of preventing the flush, which can affect semantics,
-  // such as if an earlier flush removes or adds event listeners that
-  // are fired in the subsequent flush. However, this is the same
-  // behaviour as we had before this change, so the risks are low.
-  if (timeStamp === 0 || lastDiscreteEventTimeStamp !== timeStamp) {
-    lastDiscreteEventTimeStamp = timeStamp;
-    return true;
-  }
-  return false;
-}
diff --git a/packages/react-dom/src/events/DOMTopLevelEventTypes.js b/packages/react-dom/src/events/DOMTopLevelEventTypes.js
index 31717af8b9099..2cd291855638f 100644
--- a/packages/react-dom/src/events/DOMTopLevelEventTypes.js
+++ b/packages/react-dom/src/events/DOMTopLevelEventTypes.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
 
 import {
   unsafeCastStringToDOMTopLevelType,
   unsafeCastDOMTopLevelTypeToString,
-} from 'events/TopLevelEventTypes';
+} from 'legacy-events/TopLevelEventTypes';
 import getVendorPrefixedEventName from './getVendorPrefixedEventName';
 
 /**
diff --git a/packages/react-dom/src/events/DeprecatedDOMEventResponderSystem.js b/packages/react-dom/src/events/DeprecatedDOMEventResponderSystem.js
new file mode 100644
index 0000000000000..eb1e7fba882c6
--- /dev/null
+++ b/packages/react-dom/src/events/DeprecatedDOMEventResponderSystem.js
@@ -0,0 +1,569 @@
+/**
+ * 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.
+ * @flow
+ */
+
+import {
+  type EventSystemFlags,
+  IS_PASSIVE,
+  PASSIVE_NOT_SUPPORTED,
+} from 'legacy-events/EventSystemFlags';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
+import {HostComponent, ScopeComponent, HostPortal} from 'shared/ReactWorkTags';
+import type {EventPriority} from 'shared/ReactTypes';
+import type {
+  ReactDOMEventResponder,
+  ReactDOMEventResponderInstance,
+  ReactDOMResponderContext,
+  ReactDOMResponderEvent,
+} from 'shared/ReactDOMTypes';
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
+import {
+  batchedEventUpdates,
+  discreteUpdates,
+  flushDiscreteUpdatesIfNeeded,
+  executeUserEventHandler,
+} from 'legacy-events/ReactGenericBatching';
+import {enqueueStateRestore} from 'legacy-events/ReactControlledComponent';
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import invariant from 'shared/invariant';
+
+import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {
+  ContinuousEvent,
+  UserBlockingEvent,
+  DiscreteEvent,
+} from 'shared/ReactTypes';
+
+// Intentionally not named imports because Rollup would use dynamic dispatch for
+// CommonJS interop named imports.
+import * as Scheduler from 'scheduler';
+const {
+  unstable_UserBlockingPriority: UserBlockingPriority,
+  unstable_runWithPriority: runWithPriority,
+} = Scheduler;
+
+export let listenToResponderEventTypesImpl;
+
+export function setListenToResponderEventTypes(
+  _listenToResponderEventTypesImpl: Function,
+) {
+  listenToResponderEventTypesImpl = _listenToResponderEventTypesImpl;
+}
+
+const rootEventTypesToEventResponderInstances: Map<
+  DOMTopLevelEventType | string,
+  Set<ReactDOMEventResponderInstance>,
+> = new Map();
+
+type PropagationBehavior = 0 | 1;
+
+const DoNotPropagateToNextResponder = 0;
+const PropagateToNextResponder = 1;
+
+let currentTimeStamp = 0;
+let currentInstance: null | ReactDOMEventResponderInstance = null;
+let currentDocument: null | Document = null;
+let currentPropagationBehavior: PropagationBehavior = DoNotPropagateToNextResponder;
+
+const eventResponderContext: ReactDOMResponderContext = {
+  dispatchEvent(
+    eventValue: any,
+    eventListener: any => void,
+    eventPriority: EventPriority,
+  ): void {
+    validateResponderContext();
+    validateEventValue(eventValue);
+    switch (eventPriority) {
+      case DiscreteEvent: {
+        flushDiscreteUpdatesIfNeeded(currentTimeStamp);
+        discreteUpdates(() =>
+          executeUserEventHandler(eventListener, eventValue),
+        );
+        break;
+      }
+      case UserBlockingEvent: {
+        runWithPriority(UserBlockingPriority, () =>
+          executeUserEventHandler(eventListener, eventValue),
+        );
+        break;
+      }
+      case ContinuousEvent: {
+        executeUserEventHandler(eventListener, eventValue);
+        break;
+      }
+    }
+  },
+  isTargetWithinResponder(target: null | Element | Document): boolean {
+    validateResponderContext();
+    if (target != null) {
+      let fiber = getClosestInstanceFromNode(target);
+      const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance)
+        .fiber;
+
+      while (fiber !== null) {
+        if (fiber === responderFiber || fiber.alternate === responderFiber) {
+          return true;
+        }
+        fiber = fiber.return;
+      }
+    }
+    return false;
+  },
+  isTargetWithinResponderScope(target: null | Element | Document): boolean {
+    validateResponderContext();
+    const componentInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
+    const responder = componentInstance.responder;
+
+    if (target != null) {
+      let fiber = getClosestInstanceFromNode(target);
+      const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance)
+        .fiber;
+
+      while (fiber !== null) {
+        if (fiber === responderFiber || fiber.alternate === responderFiber) {
+          return true;
+        }
+        if (doesFiberHaveResponder(fiber, responder)) {
+          return false;
+        }
+        fiber = fiber.return;
+      }
+    }
+    return false;
+  },
+  isTargetWithinNode(
+    childTarget: Element | Document,
+    parentTarget: Element | Document,
+  ): boolean {
+    validateResponderContext();
+    const childFiber = getClosestInstanceFromNode(childTarget);
+    const parentFiber = getClosestInstanceFromNode(parentTarget);
+
+    if (childFiber != null && parentFiber != null) {
+      const parentAlternateFiber = parentFiber.alternate;
+      let node = childFiber;
+      while (node !== null) {
+        if (node === parentFiber || node === parentAlternateFiber) {
+          return true;
+        }
+        node = node.return;
+      }
+      return false;
+    }
+    // Fallback to DOM APIs
+    return parentTarget.contains(childTarget);
+  },
+  addRootEventTypes(rootEventTypes: Array<string>): void {
+    validateResponderContext();
+    listenToResponderEventTypesImpl(rootEventTypes, currentDocument);
+    for (let i = 0; i < rootEventTypes.length; i++) {
+      const rootEventType = rootEventTypes[i];
+      const eventResponderInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
+      DEPRECATED_registerRootEventType(rootEventType, eventResponderInstance);
+    }
+  },
+  removeRootEventTypes(rootEventTypes: Array<string>): void {
+    validateResponderContext();
+    for (let i = 0; i < rootEventTypes.length; i++) {
+      const rootEventType = rootEventTypes[i];
+      let rootEventResponders = rootEventTypesToEventResponderInstances.get(
+        rootEventType,
+      );
+      let rootEventTypesSet = ((currentInstance: any): ReactDOMEventResponderInstance)
+        .rootEventTypes;
+      if (rootEventTypesSet !== null) {
+        rootEventTypesSet.delete(rootEventType);
+      }
+      if (rootEventResponders !== undefined) {
+        rootEventResponders.delete(
+          ((currentInstance: any): ReactDOMEventResponderInstance),
+        );
+      }
+    }
+  },
+  getActiveDocument,
+  objectAssign: Object.assign,
+  getTimeStamp(): number {
+    validateResponderContext();
+    return currentTimeStamp;
+  },
+  isTargetWithinHostComponent(
+    target: Element | Document,
+    elementType: string,
+  ): boolean {
+    validateResponderContext();
+    let fiber = getClosestInstanceFromNode(target);
+
+    while (fiber !== null) {
+      if (fiber.tag === HostComponent && fiber.type === elementType) {
+        return true;
+      }
+      fiber = fiber.return;
+    }
+    return false;
+  },
+  continuePropagation() {
+    currentPropagationBehavior = PropagateToNextResponder;
+  },
+  enqueueStateRestore,
+  getResponderNode(): Element | null {
+    validateResponderContext();
+    const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance)
+      .fiber;
+    if (responderFiber.tag === ScopeComponent) {
+      return null;
+    }
+    return responderFiber.stateNode;
+  },
+};
+
+function validateEventValue(eventValue: any): void {
+  if (typeof eventValue === 'object' && eventValue !== null) {
+    const {target, type, timeStamp} = eventValue;
+
+    if (target == null || type == null || timeStamp == null) {
+      throw new Error(
+        'context.dispatchEvent: "target", "timeStamp", and "type" fields on event object are required.',
+      );
+    }
+    const showWarning = name => {
+      if (__DEV__) {
+        console.error(
+          '%s is not available on event objects created from event responder modules (React Flare). ' +
+            'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.%s }`',
+          name,
+          name,
+        );
+      }
+    };
+    eventValue.isDefaultPrevented = () => {
+      if (__DEV__) {
+        showWarning('isDefaultPrevented()');
+      }
+    };
+    eventValue.isPropagationStopped = () => {
+      if (__DEV__) {
+        showWarning('isPropagationStopped()');
+      }
+    };
+    // $FlowFixMe: we don't need value, Flow thinks we do
+    Object.defineProperty(eventValue, 'nativeEvent', {
+      get() {
+        if (__DEV__) {
+          showWarning('nativeEvent');
+        }
+      },
+    });
+  }
+}
+
+function doesFiberHaveResponder(
+  fiber: Fiber,
+  responder: ReactDOMEventResponder,
+): boolean {
+  const tag = fiber.tag;
+  if (tag === HostComponent || tag === ScopeComponent) {
+    const dependencies = fiber.dependencies;
+    if (dependencies !== null) {
+      const respondersMap = dependencies.responders;
+      if (respondersMap !== null && respondersMap.has(responder)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function getActiveDocument(): Document {
+  return ((currentDocument: any): Document);
+}
+
+function createDOMResponderEvent(
+  topLevelType: string,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: Element | Document,
+  passive: boolean,
+): ReactDOMResponderEvent {
+  const {buttons, pointerType} = (nativeEvent: any);
+  let eventPointerType = '';
+
+  if (pointerType !== undefined) {
+    eventPointerType = pointerType;
+  } else if (nativeEvent.key !== undefined) {
+    eventPointerType = 'keyboard';
+  } else if (buttons !== undefined) {
+    eventPointerType = 'mouse';
+  } else if ((nativeEvent: any).changedTouches !== undefined) {
+    eventPointerType = 'touch';
+  }
+
+  return {
+    nativeEvent: nativeEvent,
+    passive,
+    pointerType: eventPointerType,
+    target: nativeEventTarget,
+    type: topLevelType,
+  };
+}
+
+function responderEventTypesContainType(
+  eventTypes: Array<string>,
+  type: string,
+  isPassive: boolean,
+): boolean {
+  for (let i = 0, len = eventTypes.length; i < len; i++) {
+    const eventType = eventTypes[i];
+    if (eventType === type || (!isPassive && eventType === type + '_active')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function validateResponderTargetEventTypes(
+  eventType: string,
+  responder: ReactDOMEventResponder,
+  isPassive: boolean,
+): boolean {
+  const {targetEventTypes} = responder;
+  // Validate the target event type exists on the responder
+  if (targetEventTypes !== null) {
+    return responderEventTypesContainType(
+      targetEventTypes,
+      eventType,
+      isPassive,
+    );
+  }
+  return false;
+}
+
+function traverseAndHandleEventResponderInstances(
+  topLevelType: string,
+  targetFiber: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: Document | Element,
+  eventSystemFlags: EventSystemFlags,
+): void {
+  const isPassiveEvent = (eventSystemFlags & IS_PASSIVE) !== 0;
+  const isPassiveSupported = (eventSystemFlags & PASSIVE_NOT_SUPPORTED) === 0;
+  const isPassive = isPassiveEvent || !isPassiveSupported;
+
+  // Trigger event responders in this order:
+  // - Bubble target responder phase
+  // - Root responder phase
+
+  const visitedResponders = new Set();
+  const responderEvent = createDOMResponderEvent(
+    topLevelType,
+    nativeEvent,
+    nativeEventTarget,
+    isPassiveEvent,
+  );
+  let node = targetFiber;
+  let insidePortal = false;
+  while (node !== null) {
+    const {dependencies, tag} = node;
+    if (tag === HostPortal) {
+      insidePortal = true;
+    } else if (
+      (tag === HostComponent || tag === ScopeComponent) &&
+      dependencies !== null
+    ) {
+      const respondersMap = dependencies.responders;
+      if (respondersMap !== null) {
+        const responderInstances = Array.from(respondersMap.values());
+        for (let i = 0, length = responderInstances.length; i < length; i++) {
+          const responderInstance = responderInstances[i];
+          const {props, responder, state} = responderInstance;
+          if (
+            !visitedResponders.has(responder) &&
+            validateResponderTargetEventTypes(
+              topLevelType,
+              responder,
+              isPassive,
+            ) &&
+            (!insidePortal || responder.targetPortalPropagation)
+          ) {
+            visitedResponders.add(responder);
+            const onEvent = responder.onEvent;
+            if (onEvent !== null) {
+              currentInstance = responderInstance;
+              onEvent(responderEvent, eventResponderContext, props, state);
+              if (currentPropagationBehavior === PropagateToNextResponder) {
+                visitedResponders.delete(responder);
+                currentPropagationBehavior = DoNotPropagateToNextResponder;
+              }
+            }
+          }
+        }
+      }
+    }
+    node = node.return;
+  }
+  // Root phase
+  const passive = rootEventTypesToEventResponderInstances.get(topLevelType);
+  const rootEventResponderInstances = [];
+  if (passive !== undefined) {
+    rootEventResponderInstances.push(...Array.from(passive));
+  }
+  if (!isPassive) {
+    const active = rootEventTypesToEventResponderInstances.get(
+      topLevelType + '_active',
+    );
+    if (active !== undefined) {
+      rootEventResponderInstances.push(...Array.from(active));
+    }
+  }
+  if (rootEventResponderInstances.length > 0) {
+    const responderInstances = Array.from(rootEventResponderInstances);
+
+    for (let i = 0; i < responderInstances.length; i++) {
+      const responderInstance = responderInstances[i];
+      const {props, responder, state} = responderInstance;
+      const onRootEvent = responder.onRootEvent;
+      if (onRootEvent !== null) {
+        currentInstance = responderInstance;
+        onRootEvent(responderEvent, eventResponderContext, props, state);
+      }
+    }
+  }
+}
+
+export function mountEventResponder(
+  responder: ReactDOMEventResponder,
+  responderInstance: ReactDOMEventResponderInstance,
+  props: Object,
+  state: Object,
+) {
+  const onMount = responder.onMount;
+  if (onMount !== null) {
+    const previousInstance = currentInstance;
+    currentInstance = responderInstance;
+    try {
+      onMount(eventResponderContext, props, state);
+    } finally {
+      currentInstance = previousInstance;
+    }
+  }
+}
+
+export function unmountEventResponder(
+  responderInstance: ReactDOMEventResponderInstance,
+): void {
+  const responder = ((responderInstance.responder: any): ReactDOMEventResponder);
+  const onUnmount = responder.onUnmount;
+  if (onUnmount !== null) {
+    let {props, state} = responderInstance;
+    const previousInstance = currentInstance;
+    currentInstance = responderInstance;
+    try {
+      onUnmount(eventResponderContext, props, state);
+    } finally {
+      currentInstance = previousInstance;
+    }
+  }
+  const rootEventTypesSet = responderInstance.rootEventTypes;
+  if (rootEventTypesSet !== null) {
+    const rootEventTypes = Array.from(rootEventTypesSet);
+
+    for (let i = 0; i < rootEventTypes.length; i++) {
+      const topLevelEventType = rootEventTypes[i];
+      let rootEventResponderInstances = rootEventTypesToEventResponderInstances.get(
+        topLevelEventType,
+      );
+      if (rootEventResponderInstances !== undefined) {
+        rootEventResponderInstances.delete(responderInstance);
+      }
+    }
+  }
+}
+
+function validateResponderContext(): void {
+  invariant(
+    currentInstance !== null,
+    'An event responder context was used outside of an event cycle.',
+  );
+}
+
+export function DEPRECATED_dispatchEventForResponderEventSystem(
+  topLevelType: string,
+  targetFiber: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: Document | Element,
+  eventSystemFlags: EventSystemFlags,
+): void {
+  if (enableDeprecatedFlareAPI) {
+    const previousInstance = currentInstance;
+    const previousTimeStamp = currentTimeStamp;
+    const previousDocument = currentDocument;
+    const previousPropagationBehavior = currentPropagationBehavior;
+    currentPropagationBehavior = DoNotPropagateToNextResponder;
+    // nodeType 9 is DOCUMENT_NODE
+    currentDocument =
+      (nativeEventTarget: any).nodeType === 9
+        ? ((nativeEventTarget: any): Document)
+        : (nativeEventTarget: any).ownerDocument;
+    // We might want to control timeStamp another way here
+    currentTimeStamp = (nativeEvent: any).timeStamp;
+    try {
+      batchedEventUpdates(() => {
+        traverseAndHandleEventResponderInstances(
+          topLevelType,
+          targetFiber,
+          nativeEvent,
+          nativeEventTarget,
+          eventSystemFlags,
+        );
+      });
+    } finally {
+      currentInstance = previousInstance;
+      currentTimeStamp = previousTimeStamp;
+      currentDocument = previousDocument;
+      currentPropagationBehavior = previousPropagationBehavior;
+    }
+  }
+}
+
+export function addRootEventTypesForResponderInstance(
+  responderInstance: ReactDOMEventResponderInstance,
+  rootEventTypes: Array<string>,
+): void {
+  for (let i = 0; i < rootEventTypes.length; i++) {
+    const rootEventType = rootEventTypes[i];
+    DEPRECATED_registerRootEventType(rootEventType, responderInstance);
+  }
+}
+
+function DEPRECATED_registerRootEventType(
+  rootEventType: string,
+  eventResponderInstance: ReactDOMEventResponderInstance,
+): void {
+  let rootEventResponderInstances = rootEventTypesToEventResponderInstances.get(
+    rootEventType,
+  );
+  if (rootEventResponderInstances === undefined) {
+    rootEventResponderInstances = new Set();
+    rootEventTypesToEventResponderInstances.set(
+      rootEventType,
+      rootEventResponderInstances,
+    );
+  }
+  let rootEventTypesSet = eventResponderInstance.rootEventTypes;
+  if (rootEventTypesSet === null) {
+    rootEventTypesSet = eventResponderInstance.rootEventTypes = new Set();
+  }
+  invariant(
+    !rootEventTypesSet.has(rootEventType),
+    'addRootEventTypes() found a duplicate root event ' +
+      'type of "%s". This might be because the event type exists in the event responder "rootEventTypes" ' +
+      'array or because of a previous addRootEventTypes() using this root event type.',
+    rootEventType,
+  );
+  rootEventTypesSet.add(rootEventType);
+  rootEventResponderInstances.add(eventResponderInstance);
+}
diff --git a/packages/react-dom/src/events/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/EnterLeaveEventPlugin.js
index b608da3870d08..de9b130462fb0 100644
--- a/packages/react-dom/src/events/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/EnterLeaveEventPlugin.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {accumulateEnterLeaveDispatches} from 'events/EventPropagators';
+import {accumulateEnterLeaveDispatches} from 'legacy-events/EventPropagators';
 
 import {
   TOP_MOUSE_OUT,
@@ -13,12 +13,15 @@ import {
   TOP_POINTER_OUT,
   TOP_POINTER_OVER,
 } from './DOMTopLevelEventTypes';
+import {IS_REPLAYED, IS_FIRST_ANCESTOR} from 'legacy-events/EventSystemFlags';
 import SyntheticMouseEvent from './SyntheticMouseEvent';
 import SyntheticPointerEvent from './SyntheticPointerEvent';
 import {
   getClosestInstanceFromNode,
   getNodeFromInstance,
 } from '../client/ReactDOMComponentTree';
+import {HostComponent, HostText} from 'shared/ReactWorkTags';
+import {getNearestMountedFiber} from 'react-reconciler/reflection';
 
 const eventTypes = {
   mouseEnter: {
@@ -54,13 +57,22 @@ const EnterLeaveEventPlugin = {
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const isOverEvent =
       topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
     const isOutEvent =
       topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
 
-    if (isOverEvent && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
+    if (
+      isOverEvent &&
+      (eventSystemFlags & IS_REPLAYED) === 0 &&
+      (nativeEvent.relatedTarget || nativeEvent.fromElement)
+    ) {
+      // If this is an over event with a target, then we've already dispatched
+      // the event in the out event of the other target. If this is replayed,
+      // then it's because we couldn't dispatch against this target previously
+      // so we have to do it now instead.
       return null;
     }
 
@@ -89,6 +101,15 @@ const EnterLeaveEventPlugin = {
       from = targetInst;
       const related = nativeEvent.relatedTarget || nativeEvent.toElement;
       to = related ? getClosestInstanceFromNode(related) : null;
+      if (to !== null) {
+        const nearestMounted = getNearestMountedFiber(to);
+        if (
+          to !== nearestMounted ||
+          (to.tag !== HostComponent && to.tag !== HostText)
+        ) {
+          to = null;
+        }
+      }
     } else {
       // Moving to a node from outside the window.
       from = null;
@@ -142,6 +163,13 @@ const EnterLeaveEventPlugin = {
 
     accumulateEnterLeaveDispatches(leave, enter, from, to);
 
+    // If we are not processing the first ancestor, then we
+    // should not process the same nativeEvent again, as we
+    // will have already processed it in the first ancestor.
+    if ((eventSystemFlags & IS_FIRST_ANCESTOR) === 0) {
+      return [leave];
+    }
+
     return [leave, enter];
   },
 };
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
index 810e08f106bb7..16cd407cba787 100644
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
-import {registrationNameDependencies} from 'events/EventPluginRegistry';
-import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
+import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
 import {
   TOP_BLUR,
   TOP_CANCEL,
@@ -86,22 +86,24 @@ import isEventSupported from './isEventSupported';
  */
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-const elementListeningSets:
+// prettier-ignore
+const elementListenerMap:
+  // $FlowFixMe Work around Flow bug
   | WeakMap
   | Map<
       Document | Element | Node,
-      Set<DOMTopLevelEventType | string>,
+      Map<DOMTopLevelEventType | string, null | (any => void)>,
     > = new PossiblyWeakMap();
 
-export function getListeningSetForElement(
+export function getListenerMapForElement(
   element: Document | Element | Node,
-): Set<DOMTopLevelEventType | string> {
-  let listeningSet = elementListeningSets.get(element);
-  if (listeningSet === undefined) {
-    listeningSet = new Set();
-    elementListeningSets.set(element, listeningSet);
+): Map<DOMTopLevelEventType | string, null | (any => void)> {
+  let listenerMap = elementListenerMap.get(element);
+  if (listenerMap === undefined) {
+    listenerMap = new Map();
+    elementListenerMap.set(element, listenerMap);
   }
-  return listeningSet;
+  return listenerMap;
 }
 
 /**
@@ -129,48 +131,56 @@ export function listenTo(
   registrationName: string,
   mountAt: Document | Element | Node,
 ): void {
-  const listeningSet = getListeningSetForElement(mountAt);
+  const listeningSet = getListenerMapForElement(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
 
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
-    if (!listeningSet.has(dependency)) {
-      switch (dependency) {
-        case TOP_SCROLL:
-          trapCapturedEvent(TOP_SCROLL, mountAt);
-          break;
-        case TOP_FOCUS:
-        case TOP_BLUR:
-          trapCapturedEvent(TOP_FOCUS, mountAt);
-          trapCapturedEvent(TOP_BLUR, mountAt);
-          // We set the flag for a single dependency later in this function,
-          // but this ensures we mark both as attached rather than just one.
-          listeningSet.add(TOP_BLUR);
-          listeningSet.add(TOP_FOCUS);
-          break;
-        case TOP_CANCEL:
-        case TOP_CLOSE:
-          if (isEventSupported(getRawEventName(dependency))) {
-            trapCapturedEvent(dependency, mountAt);
-          }
-          break;
-        case TOP_INVALID:
-        case TOP_SUBMIT:
-        case TOP_RESET:
-          // We listen to them on the target DOM elements.
-          // Some of them bubble so we don't want them to fire twice.
-          break;
-        default:
-          // By default, listen on the top level to all non-media events.
-          // Media events don't bubble so adding the listener wouldn't do anything.
-          const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
-          if (!isMediaEvent) {
-            trapBubbledEvent(dependency, mountAt);
-          }
-          break;
-      }
-      listeningSet.add(dependency);
+    listenToTopLevel(dependency, mountAt, listeningSet);
+  }
+}
+
+export function listenToTopLevel(
+  topLevelType: DOMTopLevelEventType,
+  mountAt: Document | Element | Node,
+  listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
+): void {
+  if (!listenerMap.has(topLevelType)) {
+    switch (topLevelType) {
+      case TOP_SCROLL:
+        trapCapturedEvent(TOP_SCROLL, mountAt);
+        break;
+      case TOP_FOCUS:
+      case TOP_BLUR:
+        trapCapturedEvent(TOP_FOCUS, mountAt);
+        trapCapturedEvent(TOP_BLUR, mountAt);
+        // We set the flag for a single dependency later in this function,
+        // but this ensures we mark both as attached rather than just one.
+        listenerMap.set(TOP_BLUR, null);
+        listenerMap.set(TOP_FOCUS, null);
+        break;
+      case TOP_CANCEL:
+      case TOP_CLOSE:
+        if (isEventSupported(getRawEventName(topLevelType))) {
+          trapCapturedEvent(topLevelType, mountAt);
+        }
+        break;
+      case TOP_INVALID:
+      case TOP_SUBMIT:
+      case TOP_RESET:
+        // We listen to them on the target DOM elements.
+        // Some of them bubble so we don't want them to fire twice.
+        break;
+      default:
+        // By default, listen on the top level to all non-media events.
+        // Media events don't bubble so adding the listener wouldn't do anything.
+        const isMediaEvent = mediaEventTypes.indexOf(topLevelType) !== -1;
+        if (!isMediaEvent) {
+          trapBubbledEvent(topLevelType, mountAt);
+        }
+        break;
     }
+    listenerMap.set(topLevelType, null);
   }
 }
 
@@ -178,12 +188,12 @@ export function isListeningToAllDependencies(
   registrationName: string,
   mountAt: Document | Element,
 ): boolean {
-  const listeningSet = getListeningSetForElement(mountAt);
+  const listenerMap = getListenerMapForElement(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
 
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
-    if (!listeningSet.has(dependency)) {
+    if (!listenerMap.has(dependency)) {
       return false;
     }
   }
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index a7749f5e8adf2..d43c201168531 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -7,22 +7,41 @@
  * @flow
  */
 
-import type {AnyNativeEvent} from 'events/PluginModuleType';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
-import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
+import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
+import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
+
+// Intentionally not named imports because Rollup would use dynamic dispatch for
+// CommonJS interop named imports.
+import * as Scheduler from 'scheduler';
 
 import {
   batchedEventUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
-} from 'events/ReactGenericBatching';
-import {runExtractedPluginEventsInBatch} from 'events/EventPluginHub';
+  flushDiscreteUpdatesIfNeeded,
+} from 'legacy-events/ReactGenericBatching';
+import {runExtractedPluginEventsInBatch} from 'legacy-events/EventPluginHub';
+import {DEPRECATED_dispatchEventForResponderEventSystem} from './DeprecatedDOMEventResponderSystem';
+import {
+  isReplayableDiscreteEvent,
+  queueDiscreteEvent,
+  hasQueuedDiscreteEvents,
+  clearIfContinuousEvent,
+  queueIfContinuousEvent,
+} from './ReactDOMEventReplaying';
 import {
-  dispatchEventForResponderEventSystem,
-  shouldflushDiscreteUpdates,
-} from '../events/DOMEventResponderSystem';
-import {isFiberMounted} from 'react-reconciler/reflection';
-import {HostRoot} from 'shared/ReactWorkTags';
+  getNearestMountedFiber,
+  getContainerFromFiber,
+  getSuspenseInstanceFromFiber,
+} from 'react-reconciler/reflection';
+import {
+  HostRoot,
+  SuspenseComponent,
+  HostComponent,
+  HostText,
+} from 'shared/ReactWorkTags';
 import {
   type EventSystemFlags,
   PLUGIN_EVENT_SYSTEM,
@@ -30,7 +49,8 @@ import {
   IS_PASSIVE,
   IS_ACTIVE,
   PASSIVE_NOT_SUPPORTED,
-} from 'events/EventSystemFlags';
+  IS_FIRST_ANCESTOR,
+} from 'legacy-events/EventSystemFlags';
 
 import {
   addEventBubbleListener,
@@ -39,23 +59,32 @@ import {
 } from './EventListener';
 import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
-import SimpleEventPlugin from './SimpleEventPlugin';
 import {getRawEventName} from './DOMTopLevelEventTypes';
 import {passiveBrowserEventsSupported} from './checkPassiveEvents';
 
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import {
+  UserBlockingEvent,
+  ContinuousEvent,
+  DiscreteEvent,
+} from 'shared/ReactTypes';
+import {getEventPriorityForPluginSystem} from './DOMEventProperties';
 
-const {isInteractiveTopLevelEventType} = SimpleEventPlugin;
+const {
+  unstable_UserBlockingPriority: UserBlockingPriority,
+  unstable_runWithPriority: runWithPriority,
+} = Scheduler;
 
 const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
 const callbackBookkeepingPool = [];
 
-type BookKeepingInstance = {
+type BookKeepingInstance = {|
   topLevelType: DOMTopLevelEventType | null,
+  eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent | null,
   targetInst: Fiber | null,
   ancestors: Array<Fiber | null>,
-};
+|};
 
 /**
  * Find the deepest React component completely containing the root of the
@@ -63,6 +92,9 @@ type BookKeepingInstance = {
  * other). If React trees are not nested, returns null.
  */
 function findRootContainerNode(inst) {
+  if (inst.tag === HostRoot) {
+    return inst.stateNode.containerInfo;
+  }
   // TODO: It may be a good idea to cache this to prevent unnecessary DOM
   // traversal, but caching is difficult to do correctly without using a
   // mutation observer to listen for all DOM changes.
@@ -81,16 +113,19 @@ function getTopLevelCallbackBookKeeping(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,
   targetInst: Fiber | null,
+  eventSystemFlags: EventSystemFlags,
 ): BookKeepingInstance {
   if (callbackBookkeepingPool.length) {
     const instance = callbackBookkeepingPool.pop();
     instance.topLevelType = topLevelType;
+    instance.eventSystemFlags = eventSystemFlags;
     instance.nativeEvent = nativeEvent;
     instance.targetInst = targetInst;
     return instance;
   }
   return {
     topLevelType,
+    eventSystemFlags,
     nativeEvent,
     targetInst,
     ancestors: [],
@@ -127,7 +162,10 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
     if (!root) {
       break;
     }
-    bookKeeping.ancestors.push(ancestor);
+    const tag = ancestor.tag;
+    if (tag === HostComponent || tag === HostText) {
+      bookKeeping.ancestors.push(ancestor);
+    }
     ancestor = getClosestInstanceFromNode(root);
   } while (ancestor);
 
@@ -136,12 +174,19 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
     const eventTarget = getEventTarget(bookKeeping.nativeEvent);
     const topLevelType = ((bookKeeping.topLevelType: any): DOMTopLevelEventType);
     const nativeEvent = ((bookKeeping.nativeEvent: any): AnyNativeEvent);
+    let eventSystemFlags = bookKeeping.eventSystemFlags;
+
+    // If this is the first ancestor, we mark it on the system flags
+    if (i === 0) {
+      eventSystemFlags |= IS_FIRST_ANCESTOR;
+    }
 
     runExtractedPluginEventsInBatch(
       topLevelType,
       targetInst,
       nativeEvent,
       eventTarget,
+      eventSystemFlags,
     );
   }
 }
@@ -171,42 +216,59 @@ export function trapCapturedEvent(
   trapEventForPluginEventSystem(element, topLevelType, true);
 }
 
-export function trapEventForResponderEventSystem(
-  element: Document | Element | Node,
-  topLevelType: DOMTopLevelEventType,
+export function addResponderEventSystemEvent(
+  document: Document,
+  topLevelType: string,
   passive: boolean,
-): void {
-  if (enableEventAPI) {
-    const rawEventName = getRawEventName(topLevelType);
-    let eventFlags = RESPONDER_EVENT_SYSTEM;
-
-    // If passive option is not supported, then the event will be
-    // active and not passive, but we flag it as using not being
-    // supported too. This way the responder event plugins know,
-    // and can provide polyfills if needed.
-    if (passive) {
-      if (passiveBrowserEventsSupported) {
-        eventFlags |= IS_PASSIVE;
-      } else {
-        eventFlags |= IS_ACTIVE;
-        eventFlags |= PASSIVE_NOT_SUPPORTED;
-        passive = false;
-      }
-    } else {
-      eventFlags |= IS_ACTIVE;
-    }
-    // Check if interactive and wrap in discreteUpdates
-    const listener = dispatchEvent.bind(null, topLevelType, eventFlags);
+): any => void {
+  let eventFlags = RESPONDER_EVENT_SYSTEM;
+
+  // If passive option is not supported, then the event will be
+  // active and not passive, but we flag it as using not being
+  // supported too. This way the responder event plugins know,
+  // and can provide polyfills if needed.
+  if (passive) {
     if (passiveBrowserEventsSupported) {
-      addEventCaptureListenerWithPassiveFlag(
-        element,
-        rawEventName,
-        listener,
-        passive,
-      );
+      eventFlags |= IS_PASSIVE;
     } else {
-      addEventCaptureListener(element, rawEventName, listener);
+      eventFlags |= IS_ACTIVE;
+      eventFlags |= PASSIVE_NOT_SUPPORTED;
+      passive = false;
     }
+  } else {
+    eventFlags |= IS_ACTIVE;
+  }
+  // Check if interactive and wrap in discreteUpdates
+  const listener = dispatchEvent.bind(
+    null,
+    ((topLevelType: any): DOMTopLevelEventType),
+    eventFlags,
+  );
+  if (passiveBrowserEventsSupported) {
+    addEventCaptureListenerWithPassiveFlag(
+      document,
+      topLevelType,
+      listener,
+      passive,
+    );
+  } else {
+    addEventCaptureListener(document, topLevelType, listener);
+  }
+  return listener;
+}
+
+export function removeActiveResponderEventSystemEvent(
+  document: Document,
+  topLevelType: string,
+  listener: any => void,
+) {
+  if (passiveBrowserEventsSupported) {
+    document.removeEventListener(topLevelType, listener, {
+      capture: true,
+      passive: false,
+    });
+  } else {
+    document.removeEventListener(topLevelType, listener, true);
   }
 }
 
@@ -215,12 +277,29 @@ function trapEventForPluginEventSystem(
   topLevelType: DOMTopLevelEventType,
   capture: boolean,
 ): void {
-  const dispatch = isInteractiveTopLevelEventType(topLevelType)
-    ? dispatchInteractiveEvent
-    : dispatchEvent;
+  let listener;
+  switch (getEventPriorityForPluginSystem(topLevelType)) {
+    case DiscreteEvent:
+      listener = dispatchDiscreteEvent.bind(
+        null,
+        topLevelType,
+        PLUGIN_EVENT_SYSTEM,
+      );
+      break;
+    case UserBlockingEvent:
+      listener = dispatchUserBlockingUpdate.bind(
+        null,
+        topLevelType,
+        PLUGIN_EVENT_SYSTEM,
+      );
+      break;
+    case ContinuousEvent:
+    default:
+      listener = dispatchEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);
+      break;
+  }
+
   const rawEventName = getRawEventName(topLevelType);
-  // Check if interactive and wrap in discreteUpdates
-  const listener = dispatch.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);
   if (capture) {
     addEventCaptureListener(element, rawEventName, listener);
   } else {
@@ -228,13 +307,22 @@ function trapEventForPluginEventSystem(
   }
 }
 
-function dispatchInteractiveEvent(topLevelType, eventSystemFlags, nativeEvent) {
-  if (!enableEventAPI || shouldflushDiscreteUpdates(nativeEvent.timeStamp)) {
-    flushDiscreteUpdates();
-  }
+function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
+  flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
   discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
 }
 
+function dispatchUserBlockingUpdate(
+  topLevelType,
+  eventSystemFlags,
+  nativeEvent,
+) {
+  runWithPriority(
+    UserBlockingPriority,
+    dispatchEvent.bind(null, topLevelType, eventSystemFlags, nativeEvent),
+  );
+}
+
 function dispatchEventForPluginEventSystem(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
@@ -245,6 +333,7 @@ function dispatchEventForPluginEventSystem(
     topLevelType,
     nativeEvent,
     targetInst,
+    eventSystemFlags,
   );
 
   try {
@@ -264,33 +353,145 @@ export function dispatchEvent(
   if (!_enabled) {
     return;
   }
-  const nativeEventTarget = getEventTarget(nativeEvent);
-  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+  if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(topLevelType)) {
+    // If we already have a queue of discrete events, and this is another discrete
+    // event, then we can't dispatch it regardless of its target, since they
+    // need to dispatch in order.
+    queueDiscreteEvent(
+      null, // Flags that we're not actually blocked on anything as far as we know.
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+    );
+    return;
+  }
+
+  const blockedOn = attemptToDispatchEvent(
+    topLevelType,
+    eventSystemFlags,
+    nativeEvent,
+  );
+
+  if (blockedOn === null) {
+    // We successfully dispatched this event.
+    clearIfContinuousEvent(topLevelType, nativeEvent);
+    return;
+  }
+
+  if (isReplayableDiscreteEvent(topLevelType)) {
+    // This this to be replayed later once the target is available.
+    queueDiscreteEvent(blockedOn, topLevelType, eventSystemFlags, nativeEvent);
+    return;
+  }
 
   if (
-    targetInst !== null &&
-    typeof targetInst.tag === 'number' &&
-    !isFiberMounted(targetInst)
+    queueIfContinuousEvent(
+      blockedOn,
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+    )
   ) {
-    // If we get an event (ex: img onload) before committing that
-    // component's mount, ignore it for now (that is, treat it as if it was an
-    // event on a non-React tree). We might also consider queueing events and
-    // dispatching them after the mount.
-    targetInst = null;
+    return;
   }
 
-  if (enableEventAPI) {
-    if (eventSystemFlags === PLUGIN_EVENT_SYSTEM) {
+  // We need to clear only if we didn't queue because
+  // queueing is accummulative.
+  clearIfContinuousEvent(topLevelType, nativeEvent);
+
+  // This is not replayable so we'll invoke it but without a target,
+  // in case the event system needs to trace it.
+  if (enableDeprecatedFlareAPI) {
+    if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
       dispatchEventForPluginEventSystem(
         topLevelType,
         eventSystemFlags,
         nativeEvent,
-        targetInst,
+        null,
       );
+    }
+    if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {
+      // React Flare event system
+      DEPRECATED_dispatchEventForResponderEventSystem(
+        (topLevelType: any),
+        null,
+        nativeEvent,
+        getEventTarget(nativeEvent),
+        eventSystemFlags,
+      );
+    }
+  } else {
+    dispatchEventForPluginEventSystem(
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+      null,
+    );
+  }
+}
+
+// Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
+export function attemptToDispatchEvent(
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+): null | Container | SuspenseInstance {
+  // TODO: Warn if _enabled is false.
+
+  const nativeEventTarget = getEventTarget(nativeEvent);
+  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+
+  if (targetInst !== null) {
+    let nearestMounted = getNearestMountedFiber(targetInst);
+    if (nearestMounted === null) {
+      // This tree has been unmounted already. Dispatch without a target.
+      targetInst = null;
     } else {
-      // Responder event system (experimental event API)
-      dispatchEventForResponderEventSystem(
+      const tag = nearestMounted.tag;
+      if (tag === SuspenseComponent) {
+        let instance = getSuspenseInstanceFromFiber(nearestMounted);
+        if (instance !== null) {
+          // Queue the event to be replayed later. Abort dispatching since we
+          // don't want this event dispatched twice through the event system.
+          // TODO: If this is the first discrete event in the queue. Schedule an increased
+          // priority for this boundary.
+          return instance;
+        }
+        // This shouldn't happen, something went wrong but to avoid blocking
+        // the whole system, dispatch the event without a target.
+        // TODO: Warn.
+        targetInst = null;
+      } else if (tag === HostRoot) {
+        const root: FiberRoot = nearestMounted.stateNode;
+        if (root.hydrate) {
+          // If this happens during a replay something went wrong and it might block
+          // the whole system.
+          return getContainerFromFiber(nearestMounted);
+        }
+        targetInst = null;
+      } else if (nearestMounted !== targetInst) {
+        // If we get an event (ex: img onload) before committing that
+        // component's mount, ignore it for now (that is, treat it as if it was an
+        // event on a non-React tree). We might also consider queueing events and
+        // dispatching them after the mount.
+        targetInst = null;
+      }
+    }
+  }
+
+  if (enableDeprecatedFlareAPI) {
+    if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
+      dispatchEventForPluginEventSystem(
         topLevelType,
+        eventSystemFlags,
+        nativeEvent,
+        targetInst,
+      );
+    }
+    if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {
+      // React Flare event system
+      DEPRECATED_dispatchEventForResponderEventSystem(
+        (topLevelType: any),
         targetInst,
         nativeEvent,
         nativeEventTarget,
@@ -305,4 +506,6 @@ export function dispatchEvent(
       targetInst,
     );
   }
+  // We're not blocked on anything.
+  return null;
 }
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
new file mode 100644
index 0000000000000..78c742a301cd4
--- /dev/null
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -0,0 +1,646 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
+import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
+import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
+import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
+
+import {
+  enableDeprecatedFlareAPI,
+  enableSelectiveHydration,
+} from 'shared/ReactFeatureFlags';
+import {
+  unstable_runWithPriority as runWithPriority,
+  unstable_scheduleCallback as scheduleCallback,
+  unstable_NormalPriority as NormalPriority,
+  unstable_getCurrentPriorityLevel as getCurrentPriorityLevel,
+} from 'scheduler';
+import {
+  getNearestMountedFiber,
+  getContainerFromFiber,
+  getSuspenseInstanceFromFiber,
+} from 'react-reconciler/reflection';
+import {
+  attemptToDispatchEvent,
+  addResponderEventSystemEvent,
+} from './ReactDOMEventListener';
+import {
+  getListenerMapForElement,
+  listenToTopLevel,
+} from './ReactBrowserEventEmitter';
+import {
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+} from '../client/ReactDOMComponentTree';
+import {unsafeCastDOMTopLevelTypeToString} from 'legacy-events/TopLevelEventTypes';
+import {HostRoot, SuspenseComponent} from 'shared/ReactWorkTags';
+
+let attemptSynchronousHydration: (fiber: Object) => void;
+
+export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {
+  attemptSynchronousHydration = fn;
+}
+
+let attemptUserBlockingHydration: (fiber: Object) => void;
+
+export function setAttemptUserBlockingHydration(fn: (fiber: Object) => void) {
+  attemptUserBlockingHydration = fn;
+}
+
+let attemptContinuousHydration: (fiber: Object) => void;
+
+export function setAttemptContinuousHydration(fn: (fiber: Object) => void) {
+  attemptContinuousHydration = fn;
+}
+
+let attemptHydrationAtCurrentPriority: (fiber: Object) => void;
+
+export function setAttemptHydrationAtCurrentPriority(
+  fn: (fiber: Object) => void,
+) {
+  attemptHydrationAtCurrentPriority = fn;
+}
+
+// TODO: Upgrade this definition once we're on a newer version of Flow that
+// has this definition built-in.
+type PointerEvent = Event & {
+  pointerId: number,
+  relatedTarget: EventTarget | null,
+  ...
+};
+
+import {
+  TOP_MOUSE_DOWN,
+  TOP_MOUSE_UP,
+  TOP_TOUCH_CANCEL,
+  TOP_TOUCH_END,
+  TOP_TOUCH_START,
+  TOP_AUX_CLICK,
+  TOP_DOUBLE_CLICK,
+  TOP_POINTER_CANCEL,
+  TOP_POINTER_DOWN,
+  TOP_POINTER_UP,
+  TOP_DRAG_END,
+  TOP_DRAG_START,
+  TOP_DROP,
+  TOP_COMPOSITION_END,
+  TOP_COMPOSITION_START,
+  TOP_KEY_DOWN,
+  TOP_KEY_PRESS,
+  TOP_KEY_UP,
+  TOP_INPUT,
+  TOP_TEXT_INPUT,
+  TOP_CLOSE,
+  TOP_CANCEL,
+  TOP_COPY,
+  TOP_CUT,
+  TOP_PASTE,
+  TOP_CLICK,
+  TOP_CHANGE,
+  TOP_CONTEXT_MENU,
+  TOP_RESET,
+  TOP_SUBMIT,
+  TOP_DRAG_ENTER,
+  TOP_DRAG_LEAVE,
+  TOP_MOUSE_OVER,
+  TOP_MOUSE_OUT,
+  TOP_POINTER_OVER,
+  TOP_POINTER_OUT,
+  TOP_GOT_POINTER_CAPTURE,
+  TOP_LOST_POINTER_CAPTURE,
+  TOP_FOCUS,
+  TOP_BLUR,
+} from './DOMTopLevelEventTypes';
+import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
+
+type QueuedReplayableEvent = {|
+  blockedOn: null | Container | SuspenseInstance,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+|};
+
+let hasScheduledReplayAttempt = false;
+
+// The queue of discrete events to be replayed.
+let queuedDiscreteEvents: Array<QueuedReplayableEvent> = [];
+
+// Indicates if any continuous event targets are non-null for early bailout.
+let hasAnyQueuedContinuousEvents: boolean = false;
+// The last of each continuous event type. We only need to replay the last one
+// if the last target was dehydrated.
+let queuedFocus: null | QueuedReplayableEvent = null;
+let queuedDrag: null | QueuedReplayableEvent = null;
+let queuedMouse: null | QueuedReplayableEvent = null;
+// For pointer events there can be one latest event per pointerId.
+let queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
+let queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
+// We could consider replaying selectionchange and touchmoves too.
+
+type QueuedHydrationTarget = {|
+  blockedOn: null | Container | SuspenseInstance,
+  target: Node,
+  priority: number,
+|};
+let queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
+
+export function hasQueuedDiscreteEvents(): boolean {
+  return queuedDiscreteEvents.length > 0;
+}
+
+export function hasQueuedContinuousEvents(): boolean {
+  return hasAnyQueuedContinuousEvents;
+}
+
+const discreteReplayableEvents = [
+  TOP_MOUSE_DOWN,
+  TOP_MOUSE_UP,
+  TOP_TOUCH_CANCEL,
+  TOP_TOUCH_END,
+  TOP_TOUCH_START,
+  TOP_AUX_CLICK,
+  TOP_DOUBLE_CLICK,
+  TOP_POINTER_CANCEL,
+  TOP_POINTER_DOWN,
+  TOP_POINTER_UP,
+  TOP_DRAG_END,
+  TOP_DRAG_START,
+  TOP_DROP,
+  TOP_COMPOSITION_END,
+  TOP_COMPOSITION_START,
+  TOP_KEY_DOWN,
+  TOP_KEY_PRESS,
+  TOP_KEY_UP,
+  TOP_INPUT,
+  TOP_TEXT_INPUT,
+  TOP_CLOSE,
+  TOP_CANCEL,
+  TOP_COPY,
+  TOP_CUT,
+  TOP_PASTE,
+  TOP_CLICK,
+  TOP_CHANGE,
+  TOP_CONTEXT_MENU,
+  TOP_RESET,
+  TOP_SUBMIT,
+];
+
+const continuousReplayableEvents = [
+  TOP_FOCUS,
+  TOP_BLUR,
+  TOP_DRAG_ENTER,
+  TOP_DRAG_LEAVE,
+  TOP_MOUSE_OVER,
+  TOP_MOUSE_OUT,
+  TOP_POINTER_OVER,
+  TOP_POINTER_OUT,
+  TOP_GOT_POINTER_CAPTURE,
+  TOP_LOST_POINTER_CAPTURE,
+];
+
+export function isReplayableDiscreteEvent(
+  eventType: DOMTopLevelEventType,
+): boolean {
+  return discreteReplayableEvents.indexOf(eventType) > -1;
+}
+
+function trapReplayableEvent(
+  topLevelType: DOMTopLevelEventType,
+  document: Document,
+  listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
+) {
+  listenToTopLevel(topLevelType, document, listenerMap);
+  if (enableDeprecatedFlareAPI) {
+    // Trap events for the responder system.
+    const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);
+    const passiveEventKey = topLevelTypeString + '_passive';
+    if (!listenerMap.has(passiveEventKey)) {
+      const listener = addResponderEventSystemEvent(
+        document,
+        topLevelTypeString,
+        true,
+      );
+      listenerMap.set(passiveEventKey, listener);
+    }
+  }
+}
+
+export function eagerlyTrapReplayableEvents(document: Document) {
+  const listenerMap = getListenerMapForElement(document);
+  // Discrete
+  discreteReplayableEvents.forEach(topLevelType => {
+    trapReplayableEvent(topLevelType, document, listenerMap);
+  });
+  // Continuous
+  continuousReplayableEvents.forEach(topLevelType => {
+    trapReplayableEvent(topLevelType, document, listenerMap);
+  });
+}
+
+function createQueuedReplayableEvent(
+  blockedOn: null | Container | SuspenseInstance,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+): QueuedReplayableEvent {
+  return {
+    blockedOn,
+    topLevelType,
+    eventSystemFlags: eventSystemFlags | IS_REPLAYED,
+    nativeEvent,
+  };
+}
+
+export function queueDiscreteEvent(
+  blockedOn: null | Container | SuspenseInstance,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+): void {
+  const queuedEvent = createQueuedReplayableEvent(
+    blockedOn,
+    topLevelType,
+    eventSystemFlags,
+    nativeEvent,
+  );
+  queuedDiscreteEvents.push(queuedEvent);
+  if (enableSelectiveHydration) {
+    if (queuedDiscreteEvents.length === 1) {
+      // If this was the first discrete event, we might be able to
+      // synchronously unblock it so that preventDefault still works.
+      while (queuedEvent.blockedOn !== null) {
+        let fiber = getInstanceFromNode(queuedEvent.blockedOn);
+        if (fiber === null) {
+          break;
+        }
+        attemptSynchronousHydration(fiber);
+        if (queuedEvent.blockedOn === null) {
+          // We got unblocked by hydration. Let's try again.
+          replayUnblockedEvents();
+          // If we're reblocked, on an inner boundary, we might need
+          // to attempt hydrating that one.
+          continue;
+        } else {
+          // We're still blocked from hydation, we have to give up
+          // and replay later.
+          break;
+        }
+      }
+    }
+  }
+}
+
+// Resets the replaying for this type of continuous event to no event.
+export function clearIfContinuousEvent(
+  topLevelType: DOMTopLevelEventType,
+  nativeEvent: AnyNativeEvent,
+): void {
+  switch (topLevelType) {
+    case TOP_FOCUS:
+    case TOP_BLUR:
+      queuedFocus = null;
+      break;
+    case TOP_DRAG_ENTER:
+    case TOP_DRAG_LEAVE:
+      queuedDrag = null;
+      break;
+    case TOP_MOUSE_OVER:
+    case TOP_MOUSE_OUT:
+      queuedMouse = null;
+      break;
+    case TOP_POINTER_OVER:
+    case TOP_POINTER_OUT: {
+      let pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      queuedPointers.delete(pointerId);
+      break;
+    }
+    case TOP_GOT_POINTER_CAPTURE:
+    case TOP_LOST_POINTER_CAPTURE: {
+      let pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      queuedPointerCaptures.delete(pointerId);
+      break;
+    }
+  }
+}
+
+function accumulateOrCreateContinuousQueuedReplayableEvent(
+  existingQueuedEvent: null | QueuedReplayableEvent,
+  blockedOn: null | Container | SuspenseInstance,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+): QueuedReplayableEvent {
+  if (
+    existingQueuedEvent === null ||
+    existingQueuedEvent.nativeEvent !== nativeEvent
+  ) {
+    let queuedEvent = createQueuedReplayableEvent(
+      blockedOn,
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+    );
+    if (blockedOn !== null) {
+      let fiber = getInstanceFromNode(blockedOn);
+      if (fiber !== null) {
+        // Attempt to increase the priority of this target.
+        attemptContinuousHydration(fiber);
+      }
+    }
+    return queuedEvent;
+  }
+  // If we have already queued this exact event, then it's because
+  // the different event systems have different DOM event listeners.
+  // We can accumulate the flags and store a single event to be
+  // replayed.
+  existingQueuedEvent.eventSystemFlags |= eventSystemFlags;
+  return existingQueuedEvent;
+}
+
+export function queueIfContinuousEvent(
+  blockedOn: null | Container | SuspenseInstance,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+): boolean {
+  // These set relatedTarget to null because the replayed event will be treated as if we
+  // moved from outside the window (no target) onto the target once it hydrates.
+  // Instead of mutating we could clone the event.
+  switch (topLevelType) {
+    case TOP_FOCUS: {
+      const focusEvent = ((nativeEvent: any): FocusEvent);
+      queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedFocus,
+        blockedOn,
+        topLevelType,
+        eventSystemFlags,
+        focusEvent,
+      );
+      return true;
+    }
+    case TOP_DRAG_ENTER: {
+      const dragEvent = ((nativeEvent: any): DragEvent);
+      queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedDrag,
+        blockedOn,
+        topLevelType,
+        eventSystemFlags,
+        dragEvent,
+      );
+      return true;
+    }
+    case TOP_MOUSE_OVER: {
+      const mouseEvent = ((nativeEvent: any): MouseEvent);
+      queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedMouse,
+        blockedOn,
+        topLevelType,
+        eventSystemFlags,
+        mouseEvent,
+      );
+      return true;
+    }
+    case TOP_POINTER_OVER: {
+      const pointerEvent = ((nativeEvent: any): PointerEvent);
+      const pointerId = pointerEvent.pointerId;
+      queuedPointers.set(
+        pointerId,
+        accumulateOrCreateContinuousQueuedReplayableEvent(
+          queuedPointers.get(pointerId) || null,
+          blockedOn,
+          topLevelType,
+          eventSystemFlags,
+          pointerEvent,
+        ),
+      );
+      return true;
+    }
+    case TOP_GOT_POINTER_CAPTURE: {
+      const pointerEvent = ((nativeEvent: any): PointerEvent);
+      const pointerId = pointerEvent.pointerId;
+      queuedPointerCaptures.set(
+        pointerId,
+        accumulateOrCreateContinuousQueuedReplayableEvent(
+          queuedPointerCaptures.get(pointerId) || null,
+          blockedOn,
+          topLevelType,
+          eventSystemFlags,
+          pointerEvent,
+        ),
+      );
+      return true;
+    }
+  }
+  return false;
+}
+
+// Check if this target is unblocked. Returns true if it's unblocked.
+function attemptExplicitHydrationTarget(
+  queuedTarget: QueuedHydrationTarget,
+): void {
+  // TODO: This function shares a lot of logic with attemptToDispatchEvent.
+  // Try to unify them. It's a bit tricky since it would require two return
+  // values.
+  let targetInst = getClosestInstanceFromNode(queuedTarget.target);
+  if (targetInst !== null) {
+    let nearestMounted = getNearestMountedFiber(targetInst);
+    if (nearestMounted !== null) {
+      const tag = nearestMounted.tag;
+      if (tag === SuspenseComponent) {
+        let instance = getSuspenseInstanceFromFiber(nearestMounted);
+        if (instance !== null) {
+          // We're blocked on hydrating this boundary.
+          // Increase its priority.
+          queuedTarget.blockedOn = instance;
+          runWithPriority(queuedTarget.priority, () => {
+            attemptHydrationAtCurrentPriority(nearestMounted);
+          });
+          return;
+        }
+      } else if (tag === HostRoot) {
+        const root: FiberRoot = nearestMounted.stateNode;
+        if (root.hydrate) {
+          queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
+          // We don't currently have a way to increase the priority of
+          // a root other than sync.
+          return;
+        }
+      }
+    }
+  }
+  queuedTarget.blockedOn = null;
+}
+
+export function queueExplicitHydrationTarget(target: Node): void {
+  if (enableSelectiveHydration) {
+    let priority = getCurrentPriorityLevel();
+    const queuedTarget: QueuedHydrationTarget = {
+      blockedOn: null,
+      target: target,
+      priority: priority,
+    };
+    let i = 0;
+    for (; i < queuedExplicitHydrationTargets.length; i++) {
+      if (priority <= queuedExplicitHydrationTargets[i].priority) {
+        break;
+      }
+    }
+    queuedExplicitHydrationTargets.splice(i, 0, queuedTarget);
+    if (i === 0) {
+      attemptExplicitHydrationTarget(queuedTarget);
+    }
+  }
+}
+
+function attemptReplayContinuousQueuedEvent(
+  queuedEvent: QueuedReplayableEvent,
+): boolean {
+  if (queuedEvent.blockedOn !== null) {
+    return false;
+  }
+  let nextBlockedOn = attemptToDispatchEvent(
+    queuedEvent.topLevelType,
+    queuedEvent.eventSystemFlags,
+    queuedEvent.nativeEvent,
+  );
+  if (nextBlockedOn !== null) {
+    // We're still blocked. Try again later.
+    let fiber = getInstanceFromNode(nextBlockedOn);
+    if (fiber !== null) {
+      attemptContinuousHydration(fiber);
+    }
+    queuedEvent.blockedOn = nextBlockedOn;
+    return false;
+  }
+  return true;
+}
+
+function attemptReplayContinuousQueuedEventInMap(
+  queuedEvent: QueuedReplayableEvent,
+  key: number,
+  map: Map<number, QueuedReplayableEvent>,
+): void {
+  if (attemptReplayContinuousQueuedEvent(queuedEvent)) {
+    map.delete(key);
+  }
+}
+
+function replayUnblockedEvents() {
+  hasScheduledReplayAttempt = false;
+  // First replay discrete events.
+  while (queuedDiscreteEvents.length > 0) {
+    let nextDiscreteEvent = queuedDiscreteEvents[0];
+    if (nextDiscreteEvent.blockedOn !== null) {
+      // We're still blocked.
+      // Increase the priority of this boundary to unblock
+      // the next discrete event.
+      let fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+      if (fiber !== null) {
+        attemptUserBlockingHydration(fiber);
+      }
+      break;
+    }
+    let nextBlockedOn = attemptToDispatchEvent(
+      nextDiscreteEvent.topLevelType,
+      nextDiscreteEvent.eventSystemFlags,
+      nextDiscreteEvent.nativeEvent,
+    );
+    if (nextBlockedOn !== null) {
+      // We're still blocked. Try again later.
+      nextDiscreteEvent.blockedOn = nextBlockedOn;
+    } else {
+      // We've successfully replayed the first event. Let's try the next one.
+      queuedDiscreteEvents.shift();
+    }
+  }
+  // Next replay any continuous events.
+  if (queuedFocus !== null && attemptReplayContinuousQueuedEvent(queuedFocus)) {
+    queuedFocus = null;
+  }
+  if (queuedDrag !== null && attemptReplayContinuousQueuedEvent(queuedDrag)) {
+    queuedDrag = null;
+  }
+  if (queuedMouse !== null && attemptReplayContinuousQueuedEvent(queuedMouse)) {
+    queuedMouse = null;
+  }
+  queuedPointers.forEach(attemptReplayContinuousQueuedEventInMap);
+  queuedPointerCaptures.forEach(attemptReplayContinuousQueuedEventInMap);
+}
+
+function scheduleCallbackIfUnblocked(
+  queuedEvent: QueuedReplayableEvent,
+  unblocked: Container | SuspenseInstance,
+) {
+  if (queuedEvent.blockedOn === unblocked) {
+    queuedEvent.blockedOn = null;
+    if (!hasScheduledReplayAttempt) {
+      hasScheduledReplayAttempt = true;
+      // Schedule a callback to attempt replaying as many events as are
+      // now unblocked. This first might not actually be unblocked yet.
+      // We could check it early to avoid scheduling an unnecessary callback.
+      scheduleCallback(NormalPriority, replayUnblockedEvents);
+    }
+  }
+}
+
+export function retryIfBlockedOn(
+  unblocked: Container | SuspenseInstance,
+): void {
+  // Mark anything that was blocked on this as no longer blocked
+  // and eligible for a replay.
+  if (queuedDiscreteEvents.length > 0) {
+    scheduleCallbackIfUnblocked(queuedDiscreteEvents[0], unblocked);
+    // This is a exponential search for each boundary that commits. I think it's
+    // worth it because we expect very few discrete events to queue up and once
+    // we are actually fully unblocked it will be fast to replay them.
+    for (let i = 1; i < queuedDiscreteEvents.length; i++) {
+      let queuedEvent = queuedDiscreteEvents[i];
+      if (queuedEvent.blockedOn === unblocked) {
+        queuedEvent.blockedOn = null;
+      }
+    }
+  }
+
+  if (queuedFocus !== null) {
+    scheduleCallbackIfUnblocked(queuedFocus, unblocked);
+  }
+  if (queuedDrag !== null) {
+    scheduleCallbackIfUnblocked(queuedDrag, unblocked);
+  }
+  if (queuedMouse !== null) {
+    scheduleCallbackIfUnblocked(queuedMouse, unblocked);
+  }
+  const unblock = queuedEvent =>
+    scheduleCallbackIfUnblocked(queuedEvent, unblocked);
+  queuedPointers.forEach(unblock);
+  queuedPointerCaptures.forEach(unblock);
+
+  for (let i = 0; i < queuedExplicitHydrationTargets.length; i++) {
+    let queuedTarget = queuedExplicitHydrationTargets[i];
+    if (queuedTarget.blockedOn === unblocked) {
+      queuedTarget.blockedOn = null;
+    }
+  }
+
+  while (queuedExplicitHydrationTargets.length > 0) {
+    let nextExplicitTarget = queuedExplicitHydrationTargets[0];
+    if (nextExplicitTarget.blockedOn !== null) {
+      // We're still blocked.
+      break;
+    } else {
+      attemptExplicitHydrationTarget(nextExplicitTarget);
+      if (nextExplicitTarget.blockedOn === null) {
+        // We're unblocked.
+        queuedExplicitHydrationTargets.shift();
+      }
+    }
+  }
+}
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 9d1b7f16dda73..b358e896eaf37 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
+import {accumulateTwoPhaseDispatches} from 'legacy-events/EventPropagators';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 import isTextInputElement from 'shared/isTextInputElement';
 import shallowEqual from 'shared/shallowEqual';
 
@@ -94,8 +94,8 @@ function getEventTargetDocument(eventTarget) {
   return eventTarget.window === eventTarget
     ? eventTarget.document
     : eventTarget.nodeType === DOCUMENT_NODE
-      ? eventTarget
-      : eventTarget.ownerDocument;
+    ? eventTarget
+    : eventTarget.ownerDocument;
 }
 
 /**
@@ -165,6 +165,7 @@ const SelectEventPlugin = {
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const doc = getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do
diff --git a/packages/react-dom/src/events/SimpleEventPlugin.js b/packages/react-dom/src/events/SimpleEventPlugin.js
index aa8ffe675a1ad..384c2ead552c6 100644
--- a/packages/react-dom/src/events/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/SimpleEventPlugin.js
@@ -10,19 +10,20 @@
 import type {
   TopLevelType,
   DOMTopLevelEventType,
-} from 'events/TopLevelEventTypes';
-import type {
-  DispatchConfig,
-  ReactSyntheticEvent,
-} from 'events/ReactSyntheticEventType';
+} from 'legacy-events/TopLevelEventTypes';
+import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
-import type {EventTypes, PluginModule} from 'events/PluginModuleType';
+import type {PluginModule} from 'legacy-events/PluginModuleType';
+import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 
-import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
-import SyntheticEvent from 'events/SyntheticEvent';
+import {accumulateTwoPhaseDispatches} from 'legacy-events/EventPropagators';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
-import warningWithoutStack from 'shared/warningWithoutStack';
+import {
+  topLevelEventsToDispatchConfig,
+  simpleEventPluginEventTypes,
+} from './DOMEventProperties';
 
 import SyntheticAnimationEvent from './SyntheticAnimationEvent';
 import SyntheticClipboardEvent from './SyntheticClipboardEvent';
@@ -37,135 +38,6 @@ import SyntheticUIEvent from './SyntheticUIEvent';
 import SyntheticWheelEvent from './SyntheticWheelEvent';
 import getEventCharCode from './getEventCharCode';
 
-/**
- * Turns
- * ['abort', ...]
- * into
- * eventTypes = {
- *   'abort': {
- *     phasedRegistrationNames: {
- *       bubbled: 'onAbort',
- *       captured: 'onAbortCapture',
- *     },
- *     dependencies: [TOP_ABORT],
- *   },
- *   ...
- * };
- * topLevelEventsToDispatchConfig = new Map([
- *   [TOP_ABORT, { sameConfig }],
- * ]);
- */
-type EventTuple = [DOMTopLevelEventType, string];
-const interactiveEventTypeNames: Array<EventTuple> = [
-  [DOMTopLevelEventTypes.TOP_BLUR, 'blur'],
-  [DOMTopLevelEventTypes.TOP_CANCEL, 'cancel'],
-  [DOMTopLevelEventTypes.TOP_CLICK, 'click'],
-  [DOMTopLevelEventTypes.TOP_CLOSE, 'close'],
-  [DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu'],
-  [DOMTopLevelEventTypes.TOP_COPY, 'copy'],
-  [DOMTopLevelEventTypes.TOP_CUT, 'cut'],
-  [DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick'],
-  [DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick'],
-  [DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd'],
-  [DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart'],
-  [DOMTopLevelEventTypes.TOP_DROP, 'drop'],
-  [DOMTopLevelEventTypes.TOP_FOCUS, 'focus'],
-  [DOMTopLevelEventTypes.TOP_INPUT, 'input'],
-  [DOMTopLevelEventTypes.TOP_INVALID, 'invalid'],
-  [DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown'],
-  [DOMTopLevelEventTypes.TOP_KEY_PRESS, 'keyPress'],
-  [DOMTopLevelEventTypes.TOP_KEY_UP, 'keyUp'],
-  [DOMTopLevelEventTypes.TOP_MOUSE_DOWN, 'mouseDown'],
-  [DOMTopLevelEventTypes.TOP_MOUSE_UP, 'mouseUp'],
-  [DOMTopLevelEventTypes.TOP_PASTE, 'paste'],
-  [DOMTopLevelEventTypes.TOP_PAUSE, 'pause'],
-  [DOMTopLevelEventTypes.TOP_PLAY, 'play'],
-  [DOMTopLevelEventTypes.TOP_POINTER_CANCEL, 'pointerCancel'],
-  [DOMTopLevelEventTypes.TOP_POINTER_DOWN, 'pointerDown'],
-  [DOMTopLevelEventTypes.TOP_POINTER_UP, 'pointerUp'],
-  [DOMTopLevelEventTypes.TOP_RATE_CHANGE, 'rateChange'],
-  [DOMTopLevelEventTypes.TOP_RESET, 'reset'],
-  [DOMTopLevelEventTypes.TOP_SEEKED, 'seeked'],
-  [DOMTopLevelEventTypes.TOP_SUBMIT, 'submit'],
-  [DOMTopLevelEventTypes.TOP_TOUCH_CANCEL, 'touchCancel'],
-  [DOMTopLevelEventTypes.TOP_TOUCH_END, 'touchEnd'],
-  [DOMTopLevelEventTypes.TOP_TOUCH_START, 'touchStart'],
-  [DOMTopLevelEventTypes.TOP_VOLUME_CHANGE, 'volumeChange'],
-];
-const nonInteractiveEventTypeNames: Array<EventTuple> = [
-  [DOMTopLevelEventTypes.TOP_ABORT, 'abort'],
-  [DOMTopLevelEventTypes.TOP_ANIMATION_END, 'animationEnd'],
-  [DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION, 'animationIteration'],
-  [DOMTopLevelEventTypes.TOP_ANIMATION_START, 'animationStart'],
-  [DOMTopLevelEventTypes.TOP_CAN_PLAY, 'canPlay'],
-  [DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH, 'canPlayThrough'],
-  [DOMTopLevelEventTypes.TOP_DRAG, 'drag'],
-  [DOMTopLevelEventTypes.TOP_DRAG_ENTER, 'dragEnter'],
-  [DOMTopLevelEventTypes.TOP_DRAG_EXIT, 'dragExit'],
-  [DOMTopLevelEventTypes.TOP_DRAG_LEAVE, 'dragLeave'],
-  [DOMTopLevelEventTypes.TOP_DRAG_OVER, 'dragOver'],
-  [DOMTopLevelEventTypes.TOP_DURATION_CHANGE, 'durationChange'],
-  [DOMTopLevelEventTypes.TOP_EMPTIED, 'emptied'],
-  [DOMTopLevelEventTypes.TOP_ENCRYPTED, 'encrypted'],
-  [DOMTopLevelEventTypes.TOP_ENDED, 'ended'],
-  [DOMTopLevelEventTypes.TOP_ERROR, 'error'],
-  [DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture'],
-  [DOMTopLevelEventTypes.TOP_LOAD, 'load'],
-  [DOMTopLevelEventTypes.TOP_LOADED_DATA, 'loadedData'],
-  [DOMTopLevelEventTypes.TOP_LOADED_METADATA, 'loadedMetadata'],
-  [DOMTopLevelEventTypes.TOP_LOAD_START, 'loadStart'],
-  [DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture'],
-  [DOMTopLevelEventTypes.TOP_MOUSE_MOVE, 'mouseMove'],
-  [DOMTopLevelEventTypes.TOP_MOUSE_OUT, 'mouseOut'],
-  [DOMTopLevelEventTypes.TOP_MOUSE_OVER, 'mouseOver'],
-  [DOMTopLevelEventTypes.TOP_PLAYING, 'playing'],
-  [DOMTopLevelEventTypes.TOP_POINTER_MOVE, 'pointerMove'],
-  [DOMTopLevelEventTypes.TOP_POINTER_OUT, 'pointerOut'],
-  [DOMTopLevelEventTypes.TOP_POINTER_OVER, 'pointerOver'],
-  [DOMTopLevelEventTypes.TOP_PROGRESS, 'progress'],
-  [DOMTopLevelEventTypes.TOP_SCROLL, 'scroll'],
-  [DOMTopLevelEventTypes.TOP_SEEKING, 'seeking'],
-  [DOMTopLevelEventTypes.TOP_STALLED, 'stalled'],
-  [DOMTopLevelEventTypes.TOP_SUSPEND, 'suspend'],
-  [DOMTopLevelEventTypes.TOP_TIME_UPDATE, 'timeUpdate'],
-  [DOMTopLevelEventTypes.TOP_TOGGLE, 'toggle'],
-  [DOMTopLevelEventTypes.TOP_TOUCH_MOVE, 'touchMove'],
-  [DOMTopLevelEventTypes.TOP_TRANSITION_END, 'transitionEnd'],
-  [DOMTopLevelEventTypes.TOP_WAITING, 'waiting'],
-  [DOMTopLevelEventTypes.TOP_WHEEL, 'wheel'],
-];
-
-const eventTypes: EventTypes = {};
-const topLevelEventsToDispatchConfig: {
-  [key: TopLevelType]: DispatchConfig,
-} = {};
-
-function addEventTypeNameToConfig(
-  [topEvent, event]: EventTuple,
-  isInteractive: boolean,
-) {
-  const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
-  const onEvent = 'on' + capitalizedEvent;
-
-  const type = {
-    phasedRegistrationNames: {
-      bubbled: onEvent,
-      captured: onEvent + 'Capture',
-    },
-    dependencies: [topEvent],
-    isInteractive,
-  };
-  eventTypes[event] = type;
-  topLevelEventsToDispatchConfig[topEvent] = type;
-}
-
-interactiveEventTypeNames.forEach(eventTuple => {
-  addEventTypeNameToConfig(eventTuple, true);
-});
-nonInteractiveEventTypeNames.forEach(eventTuple => {
-  addEventTypeNameToConfig(eventTuple, false);
-});
-
 // Only used in DEV for exhaustiveness validation.
 const knownHTMLTopLevelTypes: Array<DOMTopLevelEventType> = [
   DOMTopLevelEventTypes.TOP_ABORT,
@@ -201,23 +73,18 @@ const knownHTMLTopLevelTypes: Array<DOMTopLevelEventType> = [
   DOMTopLevelEventTypes.TOP_WAITING,
 ];
 
-const SimpleEventPlugin: PluginModule<MouseEvent> & {
-  isInteractiveTopLevelEventType: (topLevelType: TopLevelType) => boolean,
-} = {
-  eventTypes: eventTypes,
-
-  isInteractiveTopLevelEventType(topLevelType: TopLevelType): boolean {
-    const config = topLevelEventsToDispatchConfig[topLevelType];
-    return config !== undefined && config.isInteractive === true;
-  },
-
+const SimpleEventPlugin: PluginModule<MouseEvent> = {
+  // simpleEventPluginEventTypes gets populated from
+  // the DOMEventProperties module.
+  eventTypes: simpleEventPluginEventTypes,
   extractEvents: function(
     topLevelType: TopLevelType,
     targetInst: null | Fiber,
     nativeEvent: MouseEvent,
-    nativeEventTarget: EventTarget,
+    nativeEventTarget: null | EventTarget,
+    eventSystemFlags: EventSystemFlags,
   ): null | ReactSyntheticEvent {
-    const dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
+    const dispatchConfig = topLevelEventsToDispatchConfig.get(topLevelType);
     if (!dispatchConfig) {
       return null;
     }
@@ -306,8 +173,7 @@ const SimpleEventPlugin: PluginModule<MouseEvent> & {
       default:
         if (__DEV__) {
           if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
-            warningWithoutStack(
-              false,
+            console.error(
               'SimpleEventPlugin: Unhandled event type, `%s`. This warning ' +
                 'is likely caused by a bug in React. Please file an issue.',
               topLevelType,
diff --git a/packages/react-dom/src/events/SyntheticAnimationEvent.js b/packages/react-dom/src/events/SyntheticAnimationEvent.js
index 36e625041bffd..f284445f90524 100644
--- a/packages/react-dom/src/events/SyntheticAnimationEvent.js
+++ b/packages/react-dom/src/events/SyntheticAnimationEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 /**
  * @interface Event
diff --git a/packages/react-dom/src/events/SyntheticClipboardEvent.js b/packages/react-dom/src/events/SyntheticClipboardEvent.js
index 16072137cd6bd..0bab76e2d7568 100644
--- a/packages/react-dom/src/events/SyntheticClipboardEvent.js
+++ b/packages/react-dom/src/events/SyntheticClipboardEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 /**
  * @interface Event
diff --git a/packages/react-dom/src/events/SyntheticCompositionEvent.js b/packages/react-dom/src/events/SyntheticCompositionEvent.js
index 293ffe3bb0005..14697893ded5d 100644
--- a/packages/react-dom/src/events/SyntheticCompositionEvent.js
+++ b/packages/react-dom/src/events/SyntheticCompositionEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 /**
  * @interface Event
diff --git a/packages/react-dom/src/events/SyntheticInputEvent.js b/packages/react-dom/src/events/SyntheticInputEvent.js
index c14fe56e0cfcd..3842a75f937ef 100644
--- a/packages/react-dom/src/events/SyntheticInputEvent.js
+++ b/packages/react-dom/src/events/SyntheticInputEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 /**
  * @interface Event
diff --git a/packages/react-dom/src/events/SyntheticTransitionEvent.js b/packages/react-dom/src/events/SyntheticTransitionEvent.js
index 90933e7d5d041..f22a0147de8b3 100644
--- a/packages/react-dom/src/events/SyntheticTransitionEvent.js
+++ b/packages/react-dom/src/events/SyntheticTransitionEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 /**
  * @interface Event
diff --git a/packages/react-dom/src/events/SyntheticUIEvent.js b/packages/react-dom/src/events/SyntheticUIEvent.js
index 1b6a7e3bee5bd..43fcef6602b3d 100644
--- a/packages/react-dom/src/events/SyntheticUIEvent.js
+++ b/packages/react-dom/src/events/SyntheticUIEvent.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 
 const SyntheticUIEvent = SyntheticEvent.extend({
   view: null,
diff --git a/packages/react-dom/src/events/SyntheticWheelEvent.js b/packages/react-dom/src/events/SyntheticWheelEvent.js
index 7c6a1d1f4eef1..e8e152d3414c1 100644
--- a/packages/react-dom/src/events/SyntheticWheelEvent.js
+++ b/packages/react-dom/src/events/SyntheticWheelEvent.js
@@ -16,20 +16,20 @@ const SyntheticWheelEvent = SyntheticMouseEvent.extend({
     return 'deltaX' in event
       ? event.deltaX
       : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
-        'wheelDeltaX' in event
-        ? -event.wheelDeltaX
-        : 0;
+      'wheelDeltaX' in event
+      ? -event.wheelDeltaX
+      : 0;
   },
   deltaY(event) {
     return 'deltaY' in event
       ? event.deltaY
       : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
-        'wheelDeltaY' in event
-        ? -event.wheelDeltaY
-        : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
-          'wheelDelta' in event
-          ? -event.wheelDelta
-          : 0;
+      'wheelDeltaY' in event
+      ? -event.wheelDeltaY
+      : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
+      'wheelDelta' in event
+      ? -event.wheelDelta
+      : 0;
   },
   deltaZ: null,
 
diff --git a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
index 5b0317d447dac..3dc0f33b67bf9 100644
--- a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
@@ -9,8 +9,9 @@
 
 'use strict';
 
-const React = require('react');
+let React = require('react');
 let ReactDOM = require('react-dom');
+let TestUtils = require('react-dom/test-utils');
 let ReactFeatureFlags;
 let Scheduler;
 
@@ -36,13 +37,7 @@ describe('ChangeEventPlugin', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     // TODO pull this into helper method, reduce repetition.
     // mock the browser APIs which are used in schedule:
-    // - requestAnimationFrame should pass the DOMHighResTimeStamp argument
     // - calling 'window.postMessage' should actually fire postmessage handlers
-    global.requestAnimationFrame = function(cb) {
-      return setTimeout(() => {
-        cb(Date.now());
-      });
-    };
     const originalAddEventListener = global.addEventListener;
     let postMessageCallback;
     global.addEventListener = function(eventName, callback, useCapture) {
@@ -479,16 +474,19 @@ describe('ChangeEventPlugin', () => {
     }
   });
 
-  describe('async mode', () => {
+  describe('concurrent mode', () => {
     beforeEach(() => {
       jest.resetModules();
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+      React = require('react');
       ReactDOM = require('react-dom');
+      TestUtils = require('react-dom/test-utils');
       Scheduler = require('scheduler');
     });
-    it('text input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+
+    it.experimental('text input', () => {
+      const root = ReactDOM.createRoot(container);
       let input;
 
       let ops = [];
@@ -517,7 +515,7 @@ describe('ChangeEventPlugin', () => {
       expect(ops).toEqual([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(ops).toEqual(['render: initial']);
       expect(input.value).toBe('initial');
 
@@ -534,8 +532,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('changed [!]');
     });
 
-    it('checkbox input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+    it.experimental('checkbox input', () => {
+      const root = ReactDOM.createRoot(container);
       let input;
 
       let ops = [];
@@ -567,7 +565,7 @@ describe('ChangeEventPlugin', () => {
       expect(ops).toEqual([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(ops).toEqual(['render: false']);
       expect(input.checked).toBe(false);
 
@@ -583,7 +581,7 @@ describe('ChangeEventPlugin', () => {
 
       // Now let's make sure we're using the controlled value.
       root.render(<ControlledInput reverse={true} />);
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
 
       ops = [];
 
@@ -596,8 +594,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.checked).toBe(false);
     });
 
-    it('textarea', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+    it.experimental('textarea', () => {
+      const root = ReactDOM.createRoot(container);
       let textarea;
 
       let ops = [];
@@ -626,7 +624,7 @@ describe('ChangeEventPlugin', () => {
       expect(ops).toEqual([]);
       expect(textarea).toBe(undefined);
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(ops).toEqual(['render: initial']);
       expect(textarea.value).toBe('initial');
 
@@ -643,8 +641,8 @@ describe('ChangeEventPlugin', () => {
       expect(textarea.value).toBe('changed [!]');
     });
 
-    it('parent of input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+    it.experimental('parent of input', () => {
+      const root = ReactDOM.createRoot(container);
       let input;
 
       let ops = [];
@@ -677,7 +675,7 @@ describe('ChangeEventPlugin', () => {
       expect(ops).toEqual([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(ops).toEqual(['render: initial']);
       expect(input.value).toBe('initial');
 
@@ -694,8 +692,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('changed [!]');
     });
 
-    it('is async for non-input events', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+    it.experimental('is async for non-input events', () => {
+      const root = ReactDOM.createRoot(container);
       let input;
 
       let ops = [];
@@ -728,7 +726,7 @@ describe('ChangeEventPlugin', () => {
       expect(ops).toEqual([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(ops).toEqual(['render: initial']);
       expect(input.value).toBe('initial');
 
@@ -743,10 +741,55 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('initial');
 
       // Flush callbacks.
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       // Now the click update has flushed.
       expect(ops).toEqual(['render: ']);
       expect(input.value).toBe('');
     });
+
+    it.experimental(
+      'mouse enter/leave should be user-blocking but not discrete',
+      async () => {
+        // This is currently behind a feature flag
+        jest.resetModules();
+        React = require('react');
+        ReactDOM = require('react-dom');
+        TestUtils = require('react-dom/test-utils');
+        Scheduler = require('scheduler');
+
+        const {act} = TestUtils;
+        const {useState} = React;
+
+        const root = ReactDOM.createRoot(container);
+
+        const target = React.createRef(null);
+        function Foo() {
+          const [isHover, setHover] = useState(false);
+          return (
+            <div
+              ref={target}
+              onMouseEnter={() => setHover(true)}
+              onMouseLeave={() => setHover(false)}>
+              {isHover ? 'hovered' : 'not hovered'}
+            </div>
+          );
+        }
+
+        await act(async () => {
+          root.render(<Foo />);
+        });
+        expect(container.textContent).toEqual('not hovered');
+
+        await act(async () => {
+          const mouseOverEvent = document.createEvent('MouseEvents');
+          mouseOverEvent.initEvent('mouseover', true, true);
+          target.current.dispatchEvent(mouseOverEvent);
+
+          // 3s should be enough to expire the updates
+          Scheduler.unstable_advanceTime(3000);
+          expect(container.textContent).toEqual('hovered');
+        });
+      },
+    );
   });
 });
diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
deleted file mode 100644
index 9a4dd5a6f7163..0000000000000
--- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+++ /dev/null
@@ -1,1053 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-
-function createReactEventComponent({
-  targetEventTypes,
-  rootEventTypes,
-  createInitialState,
-  onEvent,
-  onEventCapture,
-  onRootEvent,
-  onMount,
-  onUnmount,
-  onOwnershipChange,
-  stopLocalPropagation,
-  allowMultipleHostChildren,
-}) {
-  const testEventResponder = {
-    targetEventTypes,
-    rootEventTypes,
-    createInitialState,
-    onEvent,
-    onEventCapture,
-    onRootEvent,
-    onMount,
-    onUnmount,
-    onOwnershipChange,
-    stopLocalPropagation: stopLocalPropagation || false,
-    allowMultipleHostChildren: allowMultipleHostChildren || false,
-  };
-
-  return {
-    $$typeof: Symbol.for('react.event_component'),
-    displayName: 'TestEventComponent',
-    props: null,
-    responder: testEventResponder,
-  };
-}
-
-function dispatchEvent(element, type) {
-  const event = document.createEvent('Event');
-  event.initEvent(type, true, true);
-  element.dispatchEvent(event);
-}
-
-function dispatchClickEvent(element) {
-  dispatchEvent(element, 'click');
-}
-
-// This is a new feature in Fiber so I put it in its own test file. It could
-// probably move to one of the other test files once it is official.
-describe('DOMEventResponderSystem', () => {
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('the event responder event listeners should fire on click event', () => {
-    let eventResponderFiredCount = 0;
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'bubble',
-        });
-      },
-      onEventCapture: (event, context, props) => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'capture',
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent>
-        <button ref={buttonRef}>Click me!</button>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-    expect(container.innerHTML).toBe('<button>Click me!</button>');
-
-    // Clicking the button should trigger the event responder onEvent() twice
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    expect(eventResponderFiredCount).toBe(2);
-    expect(eventLog.length).toBe(2);
-    // JSDOM does not support passive events, so this will be false
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'capture',
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'bubble',
-      },
-    ]);
-
-    // Unmounting the container and clicking should not increment anything
-    ReactDOM.render(null, container);
-    dispatchClickEvent(buttonElement);
-    expect(eventResponderFiredCount).toBe(2);
-
-    // Re-rendering the container and clicking should increase the counters again
-    ReactDOM.render(<Test />, container);
-    buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    expect(eventResponderFiredCount).toBe(4);
-  });
-
-  it('the event responder event listeners should fire on click event (passive events forced)', () => {
-    // JSDOM does not support passive events, so this manually overrides the value to be true
-    const checkPassiveEvents = require('react-dom/src/events/checkPassiveEvents');
-    checkPassiveEvents.passiveBrowserEventsSupported = true;
-
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'bubble',
-        });
-      },
-      onEventCapture: (event, context, props) => {
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'capture',
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent>
-        <button ref={buttonRef}>Click me!</button>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    expect(eventLog.length).toBe(2);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: true,
-        passiveSupported: true,
-        phase: 'capture',
-      },
-      {
-        name: 'click',
-        passive: true,
-        passiveSupported: true,
-        phase: 'bubble',
-      },
-    ]);
-  });
-
-  it('nested event responders and their event listeners should fire multiple times', () => {
-    let eventResponderFiredCount = 0;
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'bubble',
-        });
-      },
-      onEventCapture: (event, context, props) => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'capture',
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent>
-        <ClickEventComponent>
-          <button ref={buttonRef}>Click me!</button>
-        </ClickEventComponent>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    expect(eventResponderFiredCount).toBe(4);
-    expect(eventLog.length).toBe(4);
-    // JSDOM does not support passive events, so this will be false
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'capture',
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'capture',
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'bubble',
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'bubble',
-      },
-    ]);
-  });
-
-  it('nested event responders and their event listeners should fire in the correct order', () => {
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponentA = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventLog.push(`A [bubble]`);
-      },
-      onEventCapture: (event, context, props) => {
-        eventLog.push(`A [capture]`);
-      },
-    });
-
-    const ClickEventComponentB = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventLog.push(`B [bubble]`);
-      },
-      onEventCapture: (event, context, props) => {
-        eventLog.push(`B [capture]`);
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponentA>
-        <ClickEventComponentB>
-          <button ref={buttonRef}>Click me!</button>
-        </ClickEventComponentB>
-      </ClickEventComponentA>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-
-    expect(eventLog).toEqual([
-      'A [capture]',
-      'B [capture]',
-      'B [bubble]',
-      'A [bubble]',
-    ]);
-  });
-
-  it('nested event responders should fire in the correct order without stopLocalPropagation', () => {
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventLog.push(`${props.name} [bubble]`);
-      },
-      onEventCapture: (event, context, props) => {
-        eventLog.push(`${props.name} [capture]`);
-      },
-      stopLocalPropagation: false,
-    });
-
-    const Test = () => (
-      <ClickEventComponent name="A">
-        <ClickEventComponent name="B">
-          <button ref={buttonRef}>Click me!</button>
-        </ClickEventComponent>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-
-    expect(eventLog).toEqual([
-      'A [capture]',
-      'B [capture]',
-      'B [bubble]',
-      'A [bubble]',
-    ]);
-  });
-
-  it('nested event responders should fire in the correct order with stopLocalPropagation', () => {
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        eventLog.push(`${props.name} [bubble]`);
-      },
-      onEventCapture: (event, context, props) => {
-        eventLog.push(`${props.name} [capture]`);
-      },
-      stopLocalPropagation: true,
-    });
-
-    const Test = () => (
-      <ClickEventComponent name="A">
-        <ClickEventComponent name="B">
-          <button ref={buttonRef}>Click me!</button>
-        </ClickEventComponent>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-
-    expect(eventLog).toEqual(['A [capture]', 'B [bubble]']);
-  });
-
-  it('custom event dispatching for click -> magicClick works', () => {
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        if (props.onMagicClick) {
-          const syntheticEvent = {
-            target: event.target,
-            type: 'magicclick',
-            phase: 'bubble',
-            timeStamp: context.getTimeStamp(),
-          };
-          context.dispatchEvent(syntheticEvent, props.onMagicClick, true);
-        }
-      },
-      onEventCapture: (event, context, props) => {
-        if (props.onMagicClick) {
-          const syntheticEvent = {
-            target: event.target,
-            type: 'magicclick',
-            phase: 'capture',
-            timeStamp: context.getTimeStamp(),
-          };
-          context.dispatchEvent(syntheticEvent, props.onMagicClick, true);
-        }
-      },
-    });
-
-    function handleMagicEvent(e) {
-      eventLog.push('magic event fired', e.type, e.phase);
-    }
-
-    const Test = () => (
-      <ClickEventComponent onMagicClick={handleMagicEvent}>
-        <button ref={buttonRef}>Click me!</button>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-
-    expect(eventLog).toEqual([
-      'magic event fired',
-      'magicclick',
-      'capture',
-      'magic event fired',
-      'magicclick',
-      'bubble',
-    ]);
-  });
-
-  it('async event dispatching works', () => {
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    function handleEvent(event, context, props, phase) {
-      const pressEvent = {
-        target: event.target,
-        type: 'press',
-        phase,
-        timeStamp: context.getTimeStamp(),
-      };
-      context.dispatchEvent(pressEvent, props.onPress, true);
-
-      context.setTimeout(() => {
-        if (props.onLongPress) {
-          const longPressEvent = {
-            target: event.target,
-            type: 'longpress',
-            phase,
-            timeStamp: context.getTimeStamp(),
-          };
-          context.dispatchEvent(longPressEvent, props.onLongPress, true);
-        }
-
-        if (props.onLongPressChange) {
-          const longPressChangeEvent = {
-            target: event.target,
-            type: 'longpresschange',
-            phase,
-            timeStamp: context.getTimeStamp(),
-          };
-          context.dispatchEvent(
-            longPressChangeEvent,
-            props.onLongPressChange,
-            true,
-          );
-        }
-      }, 500);
-    }
-
-    const LongPressEventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props) => {
-        handleEvent(event, context, props, 'bubble');
-      },
-      onEventCapture: (event, context, props) => {
-        handleEvent(event, context, props, 'capture');
-      },
-    });
-
-    function log(msg) {
-      eventLog.push(msg);
-    }
-
-    const Test = () => (
-      <LongPressEventComponent
-        onPress={e => log('press ' + e.phase)}
-        onLongPress={e => log('longpress ' + e.phase)}
-        onLongPressChange={e => log('longpresschange ' + e.phase)}>
-        <button ref={buttonRef}>Click me!</button>
-      </LongPressEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    jest.runAllTimers();
-
-    expect(eventLog).toEqual([
-      'press capture',
-      'press bubble',
-      'longpress capture',
-      'longpresschange capture',
-      'longpress bubble',
-      'longpresschange bubble',
-    ]);
-  });
-
-  it('the event responder onMount() function should fire', () => {
-    let onMountFired = 0;
-
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      onMount: () => {
-        onMountFired++;
-      },
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <button />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-    expect(onMountFired).toEqual(1);
-  });
-
-  it('the event responder onUnmount() function should fire', () => {
-    let onUnmountFired = 0;
-
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      onUnmount: () => {
-        onUnmountFired++;
-      },
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <button />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-    ReactDOM.render(null, container);
-    expect(onUnmountFired).toEqual(1);
-  });
-
-  it('the event responder onUnmount() function should fire with state', () => {
-    let counter = 0;
-
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      createInitialState: () => ({
-        incrementAmount: 5,
-      }),
-      onUnmount: (context, props, state) => {
-        counter += state.incrementAmount;
-      },
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <button />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-    ReactDOM.render(null, container);
-    expect(counter).toEqual(5);
-  });
-
-  it('the event responder onOwnershipChange() function should fire', () => {
-    let onOwnershipChangeFired = 0;
-    let ownershipGained = false;
-    const buttonRef = React.createRef();
-
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: ['click'],
-      onEvent: (event, context, props, state) => {
-        ownershipGained = context.requestGlobalOwnership();
-      },
-      onOwnershipChange: () => {
-        onOwnershipChangeFired++;
-      },
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <button ref={buttonRef} />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    // Clicking the button should trigger the event responder onEvent()
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-    jest.runAllTimers();
-
-    expect(ownershipGained).toEqual(true);
-    expect(onOwnershipChangeFired).toEqual(1);
-  });
-
-  it('the event responder root listeners should fire on a root click event', () => {
-    let eventResponderFiredCount = 0;
-    let eventLog = [];
-
-    const ClickEventComponent = createReactEventComponent({
-      rootEventTypes: ['click'],
-      onRootEvent: event => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-          phase: 'root',
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent>
-        <button>Click me!</button>
-      </ClickEventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-    expect(container.innerHTML).toBe('<button>Click me!</button>');
-
-    // Clicking the button should trigger the event responder onEvent() twice
-    dispatchClickEvent(document.body);
-    expect(eventResponderFiredCount).toBe(1);
-    expect(eventLog.length).toBe(1);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-        phase: 'root',
-      },
-    ]);
-  });
-
-  it('isTargetWithinEventResponderScope works', () => {
-    const buttonRef = React.createRef();
-    const divRef = React.createRef();
-    const log = [];
-
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: ['pointerout'],
-      onEvent: (event, context) => {
-        const isWithin = context.isTargetWithinEventResponderScope(
-          event.nativeEvent.relatedTarget,
-        );
-        log.push(isWithin);
-      },
-      allowMultipleHostChildren: true,
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <div ref={divRef} />
-        <EventComponent>
-          <button ref={buttonRef}>Click me!</button>
-        </EventComponent>
-      </EventComponent>
-    );
-    ReactDOM.render(<Test />, container);
-
-    const createEvent = (type, data) => {
-      const event = document.createEvent('CustomEvent');
-      event.initCustomEvent(type, true, true);
-      if (data != null) {
-        Object.entries(data).forEach(([key, value]) => {
-          event[key] = value;
-        });
-      }
-      return event;
-    };
-
-    buttonRef.current.dispatchEvent(
-      createEvent('pointerout', {relatedTarget: divRef.current}),
-    );
-    divRef.current.dispatchEvent(
-      createEvent('pointerout', {relatedTarget: buttonRef.current}),
-    );
-
-    expect(log).toEqual([false, true, false]);
-  });
-
-  it('the event responder target listeners should correctly fire for only their events', () => {
-    let clickEventComponent1Fired = 0;
-    let clickEventComponent2Fired = 0;
-    let eventLog = [];
-    const buttonRef = React.createRef();
-
-    const ClickEventComponent1 = createReactEventComponent({
-      targetEventTypes: [{name: 'click', passive: false, capture: false}],
-      onEvent: event => {
-        clickEventComponent1Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-        });
-      },
-    });
-
-    const ClickEventComponent2 = createReactEventComponent({
-      targetEventTypes: [{name: 'click', passive: true, capture: false}],
-      onEvent: event => {
-        clickEventComponent2Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent1>
-        <ClickEventComponent2>
-          <button ref={buttonRef}>Click me!</button>
-        </ClickEventComponent2>
-      </ClickEventComponent1>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    let buttonElement = buttonRef.current;
-    dispatchClickEvent(buttonElement);
-
-    expect(clickEventComponent1Fired).toBe(1);
-    expect(clickEventComponent2Fired).toBe(1);
-    expect(eventLog.length).toBe(2);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: true,
-      },
-    ]);
-  });
-
-  it('the event responder root listeners should correctly fire for only their events', () => {
-    let clickEventComponent1Fired = 0;
-    let clickEventComponent2Fired = 0;
-    let eventLog = [];
-
-    const ClickEventComponent1 = createReactEventComponent({
-      rootEventTypes: [{name: 'click', passive: false, capture: false}],
-      onRootEvent: event => {
-        clickEventComponent1Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-        });
-      },
-    });
-
-    const ClickEventComponent2 = createReactEventComponent({
-      rootEventTypes: [{name: 'click', passive: true, capture: false}],
-      onRootEvent: event => {
-        clickEventComponent2Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          passiveSupported: event.passiveSupported,
-        });
-      },
-    });
-
-    const Test = () => (
-      <ClickEventComponent1>
-        <ClickEventComponent2>
-          <button>Click me!</button>
-        </ClickEventComponent2>
-      </ClickEventComponent1>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    dispatchClickEvent(document.body);
-
-    expect(clickEventComponent1Fired).toBe(1);
-    expect(clickEventComponent2Fired).toBe(1);
-    expect(eventLog.length).toBe(2);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: false,
-      },
-      {
-        name: 'click',
-        passive: false,
-        passiveSupported: true,
-      },
-    ]);
-
-    ReactDOM.render(<Test />, container);
-  });
-
-  it('the event responder system should warn on accessing invalid properties', () => {
-    const ClickEventComponent = createReactEventComponent({
-      rootEventTypes: ['click'],
-      onRootEvent: (event, context, props) => {
-        const syntheticEvent = {
-          target: event.target,
-          type: 'click',
-          timeStamp: context.getTimeStamp(),
-        };
-        context.dispatchEvent(syntheticEvent, props.onClick, true);
-      },
-    });
-
-    let handler;
-    const Test = () => (
-      <ClickEventComponent onClick={handler}>
-        <button>Click me!</button>
-      </ClickEventComponent>
-    );
-    expect(() => {
-      handler = event => {
-        event.preventDefault();
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: preventDefault() is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.preventDefault() }`',
-      {withoutStack: true},
-    );
-    expect(() => {
-      handler = event => {
-        event.stopPropagation();
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: stopPropagation() is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
-      {withoutStack: true},
-    );
-    expect(() => {
-      handler = event => {
-        event.isDefaultPrevented();
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: isDefaultPrevented() is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isDefaultPrevented() }`',
-      {withoutStack: true},
-    );
-    expect(() => {
-      handler = event => {
-        event.isPropagationStopped();
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: isPropagationStopped() is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isPropagationStopped() }`',
-      {withoutStack: true},
-    );
-    expect(() => {
-      handler = event => {
-        return event.nativeEvent;
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: nativeEvent is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.nativeEvent }`',
-      {withoutStack: true},
-    );
-    expect(() => {
-      handler = event => {
-        return event.defaultPrevented;
-      };
-      ReactDOM.render(<Test />, container);
-      dispatchClickEvent(document.body);
-    }).toWarnDev(
-      'Warning: defaultPrevented is not available on event objects created from event responder modules ' +
-        '(React Flare).' +
-        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.defaultPrevented }`',
-      {withoutStack: true},
-    );
-
-    expect(container.innerHTML).toBe('<button>Click me!</button>');
-  });
-
-  it('should warn if multiple host components are detected without allowMultipleHostChildren', () => {
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      onEvent: () => {},
-      allowMultipleHostChildren: false,
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <div />
-        <div />
-      </EventComponent>
-    );
-
-    expect(() => {
-      ReactDOM.render(<Test />, container);
-    }).toWarnDev(
-      'Warning: A "<TestEventComponent>" event component cannot contain multiple host children.',
-    );
-
-    function Component() {
-      return <div />;
-    }
-
-    const Test2 = () => (
-      <EventComponent>
-        <div />
-        <Component />
-      </EventComponent>
-    );
-
-    expect(() => {
-      ReactDOM.render(<Test2 />, container);
-    }).toWarnDev(
-      'Warning: A "<TestEventComponent>" event component cannot contain multiple host children.',
-    );
-  });
-
-  it('should handle suspended nodes correctly when detecting host components without allowMultipleHostChildren', () => {
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      onEvent: () => {},
-      allowMultipleHostChildren: false,
-    });
-
-    function SuspendedComponent() {
-      throw Promise.resolve();
-    }
-
-    function Component() {
-      return (
-        <React.Fragment>
-          <div />
-          <SuspendedComponent />
-        </React.Fragment>
-      );
-    }
-
-    const Test = () => (
-      <EventComponent>
-        <React.Suspense fallback={<div>Loading...</div>}>
-          <Component />
-        </React.Suspense>
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    function Component2() {
-      return (
-        <React.Fragment>
-          <SuspendedComponent />
-        </React.Fragment>
-      );
-    }
-
-    const Test2 = () => (
-      <EventComponent>
-        <React.Suspense
-          fallback={
-            <React.Fragment>
-              <div />
-              <div />
-            </React.Fragment>
-          }>
-          <Component2 />
-        </React.Suspense>
-      </EventComponent>
-    );
-
-    expect(() => {
-      ReactDOM.render(<Test2 />, container);
-    }).toWarnDev(
-      'Warning: A "<TestEventComponent>" event component cannot contain multiple host children.',
-    );
-  });
-
-  it('should not warn if multiple host components are detected with allowMultipleHostChildren', () => {
-    const EventComponent = createReactEventComponent({
-      targetEventTypes: [],
-      onEvent: () => {},
-      allowMultipleHostChildren: true,
-    });
-
-    const Test = () => (
-      <EventComponent>
-        <div />
-        <div />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test />, container);
-
-    function Component() {
-      return <div />;
-    }
-
-    const Test2 = () => (
-      <EventComponent>
-        <div />
-        <Component />
-      </EventComponent>
-    );
-
-    ReactDOM.render(<Test2 />, container);
-  });
-});
diff --git a/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
new file mode 100644
index 0000000000000..fa6b895561c5a
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
@@ -0,0 +1,948 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let ReactDOMServer;
+let ReactTestRenderer;
+let Scheduler;
+
+// FIXME: What should the public API be for setting an event's priority? Right
+// now it's an enum but is that what we want? Hard coding this for now.
+const DiscreteEvent = 0;
+
+function createEventResponder({
+  onEvent,
+  onRootEvent,
+  targetEventTypes,
+  onMount,
+  onUnmount,
+  getInitialState,
+  targetPortalPropagation,
+}) {
+  return React.DEPRECATED_createResponder('TestEventResponder', {
+    targetEventTypes,
+    onEvent,
+    onRootEvent,
+    onMount,
+    onUnmount,
+    getInitialState,
+    targetPortalPropagation,
+  });
+}
+
+const createEvent = (type, data) => {
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(type, true, true);
+  if (data != null) {
+    Object.entries(data).forEach(([key, value]) => {
+      event[key] = value;
+    });
+  }
+  return event;
+};
+
+function dispatchEvent(element, type) {
+  const event = document.createEvent('Event');
+  event.initEvent(type, true, true);
+  element.dispatchEvent(event);
+}
+
+function dispatchClickEvent(element) {
+  dispatchEvent(element, 'click');
+}
+
+// This is a new feature in Fiber so I put it in its own test file. It could
+// probably move to one of the other test files once it is official.
+describe('DOMEventResponderSystem', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    ReactFeatureFlags.enableScopeAPI = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('can mount and render correctly with the ReactTestRenderer', () => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    const TestResponder = createEventResponder({});
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
+    }
+    const renderer = ReactTestRenderer.create(<Test />);
+    expect(renderer).toMatchRenderedOutput(<div>Hello world</div>);
+  });
+
+  it('can render correctly with the ReactDOMServer', () => {
+    const TestResponder = createEventResponder({});
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
+    }
+    const output = ReactDOMServer.renderToString(<Test />);
+    expect(output).toBe(`<div data-reactroot="">Hello world</div>`);
+  });
+
+  it('can render correctly with the ReactDOMServer hydration', () => {
+    const onEvent = jest.fn();
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent,
+    });
+    const ref = React.createRef();
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return (
+        <div>
+          <span DEPRECATED_flareListeners={listener} ref={ref}>
+            Hello world
+          </span>
+        </div>
+      );
+    }
+    const output = ReactDOMServer.renderToString(<Test />);
+    expect(output).toBe(
+      `<div data-reactroot=""><span>Hello world</span></div>`,
+    );
+    container.innerHTML = output;
+    ReactDOM.hydrate(<Test />, container);
+    dispatchClickEvent(ref.current);
+    expect(onEvent).toHaveBeenCalledTimes(1);
+  });
+
+  it('the event responders should fire on click event', () => {
+    let eventResponderFiredCount = 0;
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventResponderFiredCount++;
+        eventLog.push({
+          name: event.type,
+          passive: event.passive,
+          phase: 'bubble',
+        });
+      },
+    });
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return (
+        <button ref={buttonRef} DEPRECATED_flareListeners={listener}>
+          Click me!
+        </button>
+      );
+    }
+
+    ReactDOM.render(<Test />, container);
+    expect(container.innerHTML).toBe('<button>Click me!</button>');
+
+    // Clicking the button should trigger the event responder onEvent() twice
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+    expect(eventResponderFiredCount).toBe(1);
+    expect(eventLog.length).toBe(1);
+    // JSDOM does not support passive events, so this will be false
+    expect(eventLog).toEqual([
+      {
+        name: 'click',
+        passive: false,
+        phase: 'bubble',
+      },
+    ]);
+
+    // Unmounting the container and clicking should not increment anything
+    ReactDOM.render(null, container);
+    dispatchClickEvent(buttonElement);
+    expect(eventResponderFiredCount).toBe(1);
+
+    // Re-rendering the container and clicking should increase the counters again
+    ReactDOM.render(<Test />, container);
+    buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+    expect(eventResponderFiredCount).toBe(2);
+  });
+
+  it('the event responders should fire on click event (passive events forced)', () => {
+    // JSDOM does not support passive events, so this manually overrides the value to be true
+    const checkPassiveEvents = require('react-dom/src/events/checkPassiveEvents');
+    checkPassiveEvents.passiveBrowserEventsSupported = true;
+
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventLog.push({
+          name: event.type,
+          passive: event.passive,
+          phase: 'bubble',
+        });
+      },
+    });
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return (
+        <button ref={buttonRef} DEPRECATED_flareListeners={listener}>
+          Click me!
+        </button>
+      );
+    }
+
+    ReactDOM.render(<Test />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+    expect(eventLog.length).toBe(1);
+    expect(eventLog).toEqual([
+      {
+        name: 'click',
+        passive: true,
+        phase: 'bubble',
+      },
+    ]);
+  });
+
+  it('nested event responders should not fire multiple times', () => {
+    let eventResponderFiredCount = 0;
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventResponderFiredCount++;
+        eventLog.push({
+          name: event.type,
+          passive: event.passive,
+          phase: 'bubble',
+        });
+      },
+    });
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      const listener2 = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return (
+        <button
+          ref={buttonRef}
+          DEPRECATED_flareListeners={[listener, listener2]}>
+          Click me!
+        </button>
+      );
+    }
+
+    expect(() => {
+      ReactDOM.render(<Test />, container);
+    }).toErrorDev(
+      'Duplicate event responder "TestEventResponder" found in event listeners. ' +
+        'Event listeners passed to elements cannot use the same event responder more than once.',
+    );
+
+    // Clicking the button should trigger the event responder onEvent()
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+    expect(eventResponderFiredCount).toBe(1);
+    expect(eventLog.length).toBe(1);
+    // JSDOM does not support passive events, so this will be false
+    expect(eventLog).toEqual([
+      {
+        name: 'click',
+        passive: false,
+        phase: 'bubble',
+      },
+    ]);
+
+    eventLog = [];
+
+    function Test2() {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          <button ref={buttonRef} DEPRECATED_flareListeners={listener}>
+            Click me!
+          </button>
+        </div>
+      );
+    }
+
+    ReactDOM.render(<Test2 />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+    expect(eventResponderFiredCount).toBe(2);
+    expect(eventLog.length).toBe(1);
+
+    expect(eventLog).toEqual([
+      {
+        name: 'click',
+        passive: false,
+        phase: 'bubble',
+      },
+    ]);
+  });
+
+  it('nested event responders should fire in the correct order', () => {
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponderA = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventLog.push(`A [bubble]`);
+      },
+    });
+
+    const TestResponderB = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventLog.push(`B [bubble]`);
+      },
+    });
+
+    function Test() {
+      const listener = React.DEPRECATED_useResponder(TestResponderA, {});
+      const listener2 = React.DEPRECATED_useResponder(TestResponderB, {});
+
+      return (
+        <button
+          ref={buttonRef}
+          DEPRECATED_flareListeners={[listener, listener2]}>
+          Click me!
+        </button>
+      );
+    }
+
+    ReactDOM.render(<Test />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+
+    expect(eventLog).toEqual(['A [bubble]', 'B [bubble]']);
+
+    eventLog = [];
+
+    function Test2() {
+      const listener = React.DEPRECATED_useResponder(TestResponderA, {});
+      const listener2 = React.DEPRECATED_useResponder(TestResponderB, {});
+
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          <button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
+            Click me!
+          </button>
+        </div>
+      );
+    }
+
+    ReactDOM.render(<Test2 />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+
+    expect(eventLog).toEqual(['B [bubble]', 'A [bubble]']);
+  });
+
+  it('nested event responders should fire in the correct order #2', () => {
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        eventLog.push(`${props.name} [bubble]`);
+      },
+    });
+
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        name: 'A',
+      });
+      const listener2 = React.DEPRECATED_useResponder(TestResponder, {
+        name: 'B',
+      });
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          <button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
+            Click me!
+          </button>
+        </div>
+      );
+    };
+
+    ReactDOM.render(<Test />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+
+    expect(eventLog).toEqual(['B [bubble]']);
+  });
+
+  it('custom event dispatching for click -> magicClick works', () => {
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        const syntheticEvent = {
+          target: event.target,
+          type: 'magicclick',
+          phase: 'bubble',
+          timeStamp: context.getTimeStamp(),
+        };
+        context.dispatchEvent(
+          syntheticEvent,
+          props.onMagicClick,
+          DiscreteEvent,
+        );
+      },
+    });
+
+    function handleMagicEvent(e) {
+      eventLog.push('magic event fired', e.type, e.phase);
+    }
+
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        onMagicClick: handleMagicEvent,
+      });
+
+      return (
+        <button ref={buttonRef} DEPRECATED_flareListeners={listener}>
+          Click me!
+        </button>
+      );
+    };
+
+    ReactDOM.render(<Test />, container);
+
+    // Clicking the button should trigger the event responder onEvent()
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+
+    expect(eventLog).toEqual(['magic event fired', 'magicclick', 'bubble']);
+  });
+
+  it('the event responder onMount() function should fire', () => {
+    let onMountFired = 0;
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: [],
+      onMount: () => {
+        onMountFired++;
+      },
+    });
+
+    const TestResponder2 = createEventResponder({
+      targetEventTypes: [],
+      onMount: () => {
+        onMountFired++;
+      },
+    });
+
+    function Test({toggle}) {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      const listener2 = React.DEPRECATED_useResponder(TestResponder2, {});
+      if (toggle) {
+        return <button DEPRECATED_flareListeners={[listener2, listener]} />;
+      }
+      return <button DEPRECATED_flareListeners={[listener, listener2]} />;
+    }
+
+    ReactDOM.render(<Test />, container);
+    expect(onMountFired).toEqual(2);
+
+    ReactDOM.render(<Test toggle={true} />, container);
+    expect(onMountFired).toEqual(2);
+  });
+
+  it('the event responder onUnmount() function should fire', () => {
+    let onUnmountFired = 0;
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: [],
+      onUnmount: () => {
+        onUnmountFired++;
+      },
+    });
+
+    function Test({test}) {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      if (test === 0) {
+        return <button DEPRECATED_flareListeners={[listener]} />;
+      } else if (test === 1) {
+        return <button DEPRECATED_flareListeners={null} />;
+      } else if (test === 2) {
+        return <button DEPRECATED_flareListeners={[]} />;
+      } else if (test === 3) {
+        return <button />;
+      } else if (test === 4) {
+        return <button DEPRECATED_flareListeners={listener} />;
+      }
+    }
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(null, container);
+    expect(onUnmountFired).toEqual(1);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={1} />, container);
+    expect(onUnmountFired).toEqual(2);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={2} />, container);
+    expect(onUnmountFired).toEqual(3);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={3} />, container);
+    expect(onUnmountFired).toEqual(4);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={4} />, container);
+    expect(onUnmountFired).toEqual(4);
+  });
+
+  it('the event responder onUnmount() function should fire using scopes', () => {
+    let onUnmountFired = 0;
+
+    const TestScope = React.unstable_createScope();
+    const TestResponder = createEventResponder({
+      targetEventTypes: [],
+      onUnmount: () => {
+        onUnmountFired++;
+      },
+    });
+
+    function Test({test}) {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      if (test === 0) {
+        return <TestScope DEPRECATED_flareListeners={[listener]} />;
+      } else if (test === 1) {
+        return <TestScope DEPRECATED_flareListeners={null} />;
+      } else if (test === 2) {
+        return <TestScope DEPRECATED_flareListeners={[]} />;
+      } else if (test === 3) {
+        return <TestScope />;
+      } else if (test === 4) {
+        return <TestScope DEPRECATED_flareListeners={listener} />;
+      }
+    }
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(null, container);
+    expect(onUnmountFired).toEqual(1);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={1} />, container);
+    expect(onUnmountFired).toEqual(2);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={2} />, container);
+    expect(onUnmountFired).toEqual(3);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={3} />, container);
+    expect(onUnmountFired).toEqual(4);
+
+    ReactDOM.render(<Test test={0} />, container);
+    ReactDOM.render(<Test test={4} />, container);
+    expect(onUnmountFired).toEqual(4);
+  });
+
+  it('the event responder onUnmount() function should fire with state', () => {
+    let counter = 0;
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: [],
+      getInitialState: () => ({
+        incrementAmount: 5,
+      }),
+      onUnmount: (context, props, state) => {
+        counter += state.incrementAmount;
+      },
+    });
+
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      return <button DEPRECATED_flareListeners={listener} />;
+    };
+
+    ReactDOM.render(<Test />, container);
+    ReactDOM.render(null, container);
+    expect(counter).toEqual(5);
+  });
+
+  it('the event responder target listeners should correctly fire for only their events', () => {
+    let clickEventComponent1Fired = 0;
+    let clickEventComponent2Fired = 0;
+    let eventLog = [];
+    const buttonRef = React.createRef();
+
+    const TestResponderA = createEventResponder({
+      targetEventTypes: ['click_active'],
+      onEvent: event => {
+        clickEventComponent1Fired++;
+        eventLog.push({
+          name: event.type,
+          passive: event.passive,
+        });
+      },
+    });
+
+    const TestResponderB = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: event => {
+        clickEventComponent2Fired++;
+        eventLog.push({
+          name: event.type,
+          passive: event.passive,
+        });
+      },
+    });
+
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponderA, {});
+      const listener2 = React.DEPRECATED_useResponder(TestResponderB, {});
+
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          <button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
+            Click me!
+          </button>
+        </div>
+      );
+    };
+
+    ReactDOM.render(<Test />, container);
+
+    let buttonElement = buttonRef.current;
+    dispatchClickEvent(buttonElement);
+
+    expect(clickEventComponent1Fired).toBe(1);
+    expect(clickEventComponent2Fired).toBe(1);
+    expect(eventLog.length).toBe(2);
+    expect(eventLog).toEqual([
+      {
+        name: 'click',
+        passive: false,
+      },
+      {
+        name: 'click',
+        passive: false,
+      },
+    ]);
+  });
+
+  it('the event responder system should warn on accessing invalid properties', () => {
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent: (event, context, props) => {
+        const syntheticEvent = {
+          target: event.target,
+          type: 'click',
+          timeStamp: context.getTimeStamp(),
+        };
+        context.dispatchEvent(syntheticEvent, props.onClick, DiscreteEvent);
+      },
+    });
+
+    let handler;
+    let buttonRef = React.createRef();
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        onClick: handler,
+      });
+
+      return (
+        <button DEPRECATED_flareListeners={listener} ref={buttonRef}>
+          Click me!
+        </button>
+      );
+    };
+    expect(() => {
+      handler = event => {
+        event.isDefaultPrevented();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(buttonRef.current);
+    }).toErrorDev(
+      'Warning: isDefaultPrevented() is not available on event objects created from event responder modules ' +
+        '(React Flare).' +
+        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isDefaultPrevented() }`',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        event.isPropagationStopped();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(buttonRef.current);
+    }).toErrorDev(
+      'Warning: isPropagationStopped() is not available on event objects created from event responder modules ' +
+        '(React Flare).' +
+        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isPropagationStopped() }`',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        return event.nativeEvent;
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(buttonRef.current);
+    }).toErrorDev(
+      'Warning: nativeEvent is not available on event objects created from event responder modules ' +
+        '(React Flare).' +
+        ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.nativeEvent }`',
+      {withoutStack: true},
+    );
+    expect(container.innerHTML).toBe('<button>Click me!</button>');
+  });
+
+  it('should work with event responder hooks', () => {
+    const buttonRef = React.createRef();
+    const eventLogs = [];
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['foo'],
+      onEvent: (event, context, props) => {
+        const fooEvent = {
+          target: event.target,
+          type: 'foo',
+          timeStamp: context.getTimeStamp(),
+        };
+        context.dispatchEvent(fooEvent, props.onFoo, DiscreteEvent);
+      },
+    });
+
+    const Test = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        onFoo: e => eventLogs.push('hook'),
+      });
+
+      return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
+    };
+
+    ReactDOM.render(<Test />, container);
+    buttonRef.current.dispatchEvent(createEvent('foo'));
+    expect(eventLogs).toEqual(['hook']);
+
+    // Clear events
+    eventLogs.length = 0;
+
+    const Test2 = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        onFoo: e => eventLogs.push('hook'),
+      });
+
+      return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
+    };
+
+    ReactDOM.render(<Test2 />, container);
+    buttonRef.current.dispatchEvent(createEvent('foobar'));
+  });
+
+  it.experimental('should work with concurrent mode updates', async () => {
+    const log = [];
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent(event, context, props) {
+        log.push(props);
+      },
+    });
+    const ref = React.createRef();
+
+    function Test({counter}) {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {counter});
+      Scheduler.unstable_yieldValue('Test');
+      return (
+        <button DEPRECATED_flareListeners={listener} ref={ref}>
+          Press me
+        </button>
+      );
+    }
+
+    let root = ReactDOM.createRoot(container);
+    root.render(<Test counter={0} />);
+    expect(Scheduler).toFlushAndYield(['Test']);
+
+    // Click the button
+    dispatchClickEvent(ref.current);
+    expect(log).toEqual([{counter: 0}]);
+
+    // Clear log
+    log.length = 0;
+
+    // Increase counter
+    root.render(<Test counter={1} />);
+    // Yield before committing
+    expect(Scheduler).toFlushAndYieldThrough(['Test']);
+
+    // Click the button again
+    dispatchClickEvent(ref.current);
+    expect(log).toEqual([{counter: 0}]);
+
+    // Clear log
+    log.length = 0;
+
+    // Commit
+    expect(Scheduler).toFlushAndYield([]);
+    dispatchClickEvent(ref.current);
+    expect(log).toEqual([{counter: 1}]);
+  });
+
+  it('should correctly pass through event properties', () => {
+    const timeStamps = [];
+    const ref = React.createRef();
+    const eventLog = [];
+    const logEvent = event => {
+      const propertiesWeCareAbout = {
+        counter: event.counter,
+        target: event.target,
+        timeStamp: event.timeStamp,
+        type: event.type,
+      };
+      timeStamps.push(event.timeStamp);
+      eventLog.push(propertiesWeCareAbout);
+    };
+    let counter = 0;
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent(event, context, props) {
+        const obj = {
+          counter,
+          timeStamp: context.getTimeStamp(),
+          target: context.getResponderNode(),
+          type: 'click-test',
+        };
+        context.dispatchEvent(obj, props.onClick, DiscreteEvent);
+      },
+    });
+
+    const Component = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {
+        onClick: logEvent,
+      });
+      return <button ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+    dispatchClickEvent(ref.current);
+    counter++;
+    dispatchClickEvent(ref.current);
+    counter++;
+    dispatchClickEvent(ref.current);
+    expect(typeof timeStamps[0] === 'number').toBe(true);
+    expect(eventLog).toEqual([
+      {
+        counter: 0,
+        target: ref.current,
+        timeStamp: timeStamps[0],
+        type: 'click-test',
+      },
+      {
+        counter: 1,
+        target: ref.current,
+        timeStamp: timeStamps[1],
+        type: 'click-test',
+      },
+      {
+        counter: 2,
+        target: ref.current,
+        timeStamp: timeStamps[2],
+        type: 'click-test',
+      },
+    ]);
+  });
+
+  it('should not propagate target events through portals by default', () => {
+    const buttonRef = React.createRef();
+    const onEvent = jest.fn();
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent,
+    });
+    const domNode = document.createElement('div');
+    document.body.appendChild(domNode);
+    const Component = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          {ReactDOM.createPortal(<button ref={buttonRef} />, domNode)}
+        </div>
+      );
+    };
+    ReactDOM.render(<Component />, container);
+    dispatchClickEvent(buttonRef.current);
+    document.body.removeChild(domNode);
+    expect(onEvent).not.toBeCalled();
+  });
+
+  it('should propagate target events through portals when enabled', () => {
+    const buttonRef = React.createRef();
+    const onEvent = jest.fn();
+    const TestResponder = createEventResponder({
+      targetPortalPropagation: true,
+      targetEventTypes: ['click'],
+      onEvent,
+    });
+    const domNode = document.createElement('div');
+    document.body.appendChild(domNode);
+    const Component = () => {
+      const listener = React.DEPRECATED_useResponder(TestResponder, {});
+      return (
+        <div DEPRECATED_flareListeners={listener}>
+          {ReactDOM.createPortal(<button ref={buttonRef} />, domNode)}
+        </div>
+      );
+    };
+    ReactDOM.render(<Component />, container);
+    dispatchClickEvent(buttonRef.current);
+    document.body.removeChild(domNode);
+    expect(onEvent).toBeCalled();
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
index 33dd3e964ee40..e91eb737914cc 100644
--- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
+++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
@@ -134,4 +134,106 @@ describe('EnterLeaveEventPlugin', () => {
     expect(childEnterCalls).toBe(1);
     expect(parentEnterCalls).toBe(0);
   });
+
+  // Test for https://github.com/facebook/react/issues/16763.
+  it('should call mouseEnter once from sibling rendered inside a rendered component', done => {
+    const mockFn = jest.fn();
+
+    class Parent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.parentEl = React.createRef();
+      }
+
+      componentDidMount() {
+        ReactDOM.render(<MouseEnterDetect />, this.parentEl.current);
+      }
+
+      render() {
+        return <div ref={this.parentEl} />;
+      }
+    }
+
+    class MouseEnterDetect extends React.Component {
+      constructor(props) {
+        super(props);
+        this.firstEl = React.createRef();
+        this.siblingEl = React.createRef();
+      }
+
+      componentDidMount() {
+        this.siblingEl.current.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: this.firstEl.current,
+          }),
+        );
+        expect(mockFn.mock.calls.length).toBe(1);
+        done();
+      }
+
+      render() {
+        return (
+          <React.Fragment>
+            <div ref={this.firstEl} onMouseEnter={mockFn} />
+            <div ref={this.siblingEl} />
+          </React.Fragment>
+        );
+      }
+    }
+
+    ReactDOM.render(<Parent />, container);
+  });
+
+  it('should call mouseEnter when pressing a non tracked React node', done => {
+    const mockFn = jest.fn();
+
+    class Parent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.parentEl = React.createRef();
+      }
+
+      componentDidMount() {
+        ReactDOM.render(<MouseEnterDetect />, this.parentEl.current);
+      }
+
+      render() {
+        return <div ref={this.parentEl} />;
+      }
+    }
+
+    class MouseEnterDetect extends React.Component {
+      constructor(props) {
+        super(props);
+        this.divRef = React.createRef();
+        this.siblingEl = React.createRef();
+      }
+
+      componentDidMount() {
+        const attachedNode = document.createElement('div');
+        this.divRef.current.appendChild(attachedNode);
+        attachedNode.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: this.siblingEl.current,
+          }),
+        );
+        expect(mockFn.mock.calls.length).toBe(1);
+        done();
+      }
+
+      render() {
+        return (
+          <div ref={this.divRef}>
+            <div ref={this.siblingEl} onMouseEnter={mockFn} />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<Parent />, container);
+  });
 });
diff --git a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
index bce3242e77384..43d2ad44397c1 100644
--- a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
@@ -230,7 +230,7 @@ describe('SimpleEventPlugin', function() {
     expect(button.textContent).toEqual('Count: 3');
   });
 
-  describe('interactive events, in async mode', () => {
+  describe('interactive events, in concurrent mode', () => {
     beforeEach(() => {
       jest.resetModules();
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -239,142 +239,148 @@ describe('SimpleEventPlugin', function() {
       Scheduler = require('scheduler');
     });
 
-    it('flushes pending interactive work before extracting event handler', () => {
-      container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
-      document.body.appendChild(container);
-
-      let ops = [];
+    it.experimental(
+      'flushes pending interactive work before extracting event handler',
+      () => {
+        container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+        document.body.appendChild(container);
 
-      let button;
-      class Button extends React.Component {
-        state = {disabled: false};
-        onClick = () => {
-          // Perform some side-effect
-          ops.push('Side-effect');
-          // Disable the button
-          this.setState({disabled: true});
-        };
-        render() {
-          ops.push(
-            `render button: ${this.state.disabled ? 'disabled' : 'enabled'}`,
-          );
-          return (
-            <button
-              ref={el => (button = el)}
-              // Handler is removed after the first click
-              onClick={this.state.disabled ? null : this.onClick}
-            />
-          );
+        let ops = [];
+
+        let button;
+        class Button extends React.Component {
+          state = {disabled: false};
+          onClick = () => {
+            // Perform some side-effect
+            ops.push('Side-effect');
+            // Disable the button
+            this.setState({disabled: true});
+          };
+          render() {
+            ops.push(
+              `render button: ${this.state.disabled ? 'disabled' : 'enabled'}`,
+            );
+            return (
+              <button
+                ref={el => (button = el)}
+                // Handler is removed after the first click
+                onClick={this.state.disabled ? null : this.onClick}
+              />
+            );
+          }
         }
-      }
-
-      // Initial mount
-      root.render(<Button />);
-      // Should not have flushed yet because it's async
-      expect(ops).toEqual([]);
-      expect(button).toBe(undefined);
-      // Flush async work
-      Scheduler.flushAll();
-      expect(ops).toEqual(['render button: enabled']);
-
-      ops = [];
-
-      function click() {
-        button.dispatchEvent(
-          new MouseEvent('click', {bubbles: true, cancelable: true}),
-        );
-      }
-
-      // Click the button to trigger the side-effect
-      click();
-      expect(ops).toEqual([
-        // The handler fired
-        'Side-effect',
-        // but the component did not re-render yet, because it's async
-      ]);
-
-      ops = [];
 
-      // Click the button again
-      click();
-      expect(ops).toEqual([
-        // Before handling this second click event, the previous interactive
-        // update is flushed
-        'render button: disabled',
-        // The event handler was removed from the button, so there's no second
-        // side-effect
-      ]);
-
-      ops = [];
+        // Initial mount
+        root.render(<Button />);
+        // Should not have flushed yet because it's async
+        expect(ops).toEqual([]);
+        expect(button).toBe(undefined);
+        // Flush async work
+        Scheduler.unstable_flushAll();
+        expect(ops).toEqual(['render button: enabled']);
 
-      // The handler should not fire again no matter how many times we
-      // click the handler.
-      click();
-      click();
-      click();
-      click();
-      click();
-      Scheduler.flushAll();
-      expect(ops).toEqual([]);
-    });
+        ops = [];
 
-    it('end result of many interactive updates is deterministic', () => {
-      container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
-      document.body.appendChild(container);
-
-      let button;
-      class Button extends React.Component {
-        state = {count: 0};
-        render() {
-          return (
-            <button
-              ref={el => (button = el)}
-              onClick={() =>
-                // Intentionally not using the updater form here
-                this.setState({count: this.state.count + 1})
-              }>
-              Count: {this.state.count}
-            </button>
+        function click() {
+          button.dispatchEvent(
+            new MouseEvent('click', {bubbles: true, cancelable: true}),
           );
         }
-      }
 
-      // Initial mount
-      root.render(<Button />);
-      // Should not have flushed yet because it's async
-      expect(button).toBe(undefined);
-      // Flush async work
-      Scheduler.flushAll();
-      expect(button.textContent).toEqual('Count: 0');
+        // Click the button to trigger the side-effect
+        click();
+        expect(ops).toEqual([
+          // The handler fired
+          'Side-effect',
+          // but the component did not re-render yet, because it's async
+        ]);
+
+        ops = [];
+
+        // Click the button again
+        click();
+        expect(ops).toEqual([
+          // Before handling this second click event, the previous interactive
+          // update is flushed
+          'render button: disabled',
+          // The event handler was removed from the button, so there's no second
+          // side-effect
+        ]);
+
+        ops = [];
+
+        // The handler should not fire again no matter how many times we
+        // click the handler.
+        click();
+        click();
+        click();
+        click();
+        click();
+        Scheduler.unstable_flushAll();
+        expect(ops).toEqual([]);
+      },
+    );
 
-      function click() {
-        button.dispatchEvent(
-          new MouseEvent('click', {bubbles: true, cancelable: true}),
-        );
-      }
+    it.experimental(
+      'end result of many interactive updates is deterministic',
+      () => {
+        container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+        document.body.appendChild(container);
 
-      // Click the button a single time
-      click();
-      // The counter should not have updated yet because it's async
-      expect(button.textContent).toEqual('Count: 0');
+        let button;
+        class Button extends React.Component {
+          state = {count: 0};
+          render() {
+            return (
+              <button
+                ref={el => (button = el)}
+                onClick={() =>
+                  // Intentionally not using the updater form here
+                  this.setState({count: this.state.count + 1})
+                }>
+                Count: {this.state.count}
+              </button>
+            );
+          }
+        }
 
-      // Click the button many more times
-      click();
-      click();
-      click();
-      click();
-      click();
-      click();
+        // Initial mount
+        root.render(<Button />);
+        // Should not have flushed yet because it's async
+        expect(button).toBe(undefined);
+        // Flush async work
+        Scheduler.unstable_flushAll();
+        expect(button.textContent).toEqual('Count: 0');
+
+        function click() {
+          button.dispatchEvent(
+            new MouseEvent('click', {bubbles: true, cancelable: true}),
+          );
+        }
 
-      // Flush the remaining work
-      Scheduler.flushAll();
-      // The counter should equal the total number of clicks
-      expect(button.textContent).toEqual('Count: 7');
-    });
+        // Click the button a single time
+        click();
+        // The counter should not have updated yet because it's async
+        expect(button.textContent).toEqual('Count: 0');
+
+        // Click the button many more times
+        click();
+        click();
+        click();
+        click();
+        click();
+        click();
+
+        // Flush the remaining work
+        Scheduler.unstable_flushAll();
+        // The counter should equal the total number of clicks
+        expect(button.textContent).toEqual('Count: 7');
+      },
+    );
 
-    it('flushes discrete updates in order', () => {
+    it.experimental('flushes discrete updates in order', () => {
       container = document.createElement('div');
       document.body.appendChild(container);
 
@@ -382,10 +388,8 @@ describe('SimpleEventPlugin', function() {
       class Button extends React.Component {
         state = {lowPriCount: 0};
         render() {
-          const text = `High-pri count: ${
-            this.props.highPriCount
-          }, Low-pri count: ${this.state.lowPriCount}`;
-          Scheduler.yieldValue(text);
+          const text = `High-pri count: ${this.props.highPriCount}, Low-pri count: ${this.state.lowPriCount}`;
+          Scheduler.unstable_yieldValue(text);
           return (
             <button
               ref={el => (button = el)}
@@ -421,7 +425,7 @@ describe('SimpleEventPlugin', function() {
       }
 
       // Initial mount
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Wrapper />);
       expect(Scheduler).toFlushAndYield([
         'High-pri count: 0, Low-pri count: 0',
diff --git a/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js
index 906ae127cf4ae..5e1bec454b65f 100644
--- a/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js
+++ b/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js
@@ -151,18 +151,15 @@ describe('SyntheticEvent', () => {
       'See https://fb.me/react-event-pooling for more information.';
 
     // once for each property accessed
-    expect(() => expect(syntheticEvent.type).toBe(null)).toWarnDev(
-      getExpectedWarning('type'),
-      {withoutStack: true},
-    );
-    expect(() => expect(syntheticEvent.nativeEvent).toBe(null)).toWarnDev(
-      getExpectedWarning('nativeEvent'),
-      {withoutStack: true},
-    );
-    expect(() => expect(syntheticEvent.target).toBe(null)).toWarnDev(
-      getExpectedWarning('target'),
-      {withoutStack: true},
-    );
+    expect(() =>
+      expect(syntheticEvent.type).toBe(null),
+    ).toErrorDev(getExpectedWarning('type'), {withoutStack: true});
+    expect(() =>
+      expect(syntheticEvent.nativeEvent).toBe(null),
+    ).toErrorDev(getExpectedWarning('nativeEvent'), {withoutStack: true});
+    expect(() =>
+      expect(syntheticEvent.target).toBe(null),
+    ).toErrorDev(getExpectedWarning('target'), {withoutStack: true});
 
     expect(expectedCount).toBe(1);
   });
@@ -185,7 +182,7 @@ describe('SyntheticEvent', () => {
 
     expect(() => {
       syntheticEvent.type = 'MouseEvent';
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're setting the property `type` on a " +
         'released/nullified synthetic event. This is effectively a no-op. If you must ' +
@@ -211,7 +208,9 @@ describe('SyntheticEvent', () => {
     event.initEvent('click', true, true);
     node.dispatchEvent(event);
 
-    expect(() => syntheticEvent.preventDefault()).toWarnDev(
+    expect(() =>
+      syntheticEvent.preventDefault(),
+    ).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're accessing the method `preventDefault` on a " +
         'released/nullified synthetic event. This is a no-op function. If you must ' +
@@ -238,7 +237,9 @@ describe('SyntheticEvent', () => {
 
     node.dispatchEvent(event);
 
-    expect(() => syntheticEvent.stopPropagation()).toWarnDev(
+    expect(() =>
+      syntheticEvent.stopPropagation(),
+    ).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're accessing the method `stopPropagation` on a " +
         'released/nullified synthetic event. This is a no-op function. If you must ' +
@@ -266,7 +267,7 @@ describe('SyntheticEvent', () => {
 
     expect(() =>
       expect(syntheticEvent.isPropagationStopped()).toBe(false),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're accessing the method `isPropagationStopped` on a " +
         'released/nullified synthetic event. This is a no-op function. If you must ' +
@@ -294,7 +295,7 @@ describe('SyntheticEvent', () => {
 
     expect(() =>
       expect(syntheticEvent.isDefaultPrevented()).toBe(false),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're accessing the method `isDefaultPrevented` on a " +
         'released/nullified synthetic event. This is a no-op function. If you must ' +
@@ -316,7 +317,7 @@ describe('SyntheticEvent', () => {
     // access a property to cause the warning
     expect(() => {
       event.nativeEvent; // eslint-disable-line no-unused-expressions
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: This synthetic event is reused for performance reasons. If ' +
         "you're seeing this, you're accessing the property `nativeEvent` on a " +
         'released/nullified synthetic event. This is set to null. If you must ' +
@@ -338,7 +339,7 @@ describe('SyntheticEvent', () => {
     const eventHandler = e => {
       expect(() => {
         e.foo = 'bar';
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: This synthetic event is reused for performance reasons. If ' +
           "you're seeing this, you're adding a new property in the synthetic " +
           'event object. The property is never released. ' +
diff --git a/packages/react-dom/src/events/checkPassiveEvents.js b/packages/react-dom/src/events/checkPassiveEvents.js
index 640caab67c24c..da31b7d440201 100644
--- a/packages/react-dom/src/events/checkPassiveEvents.js
+++ b/packages/react-dom/src/events/checkPassiveEvents.js
@@ -8,13 +8,13 @@
  */
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
 
 export let passiveBrowserEventsSupported = false;
 
 // Check if browser support events with passive listeners
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
-if (enableEventAPI && canUseDOM) {
+if (enableDeprecatedFlareAPI && canUseDOM) {
   try {
     const options = {};
     // $FlowFixMe: Ignore Flow complaining about needing a value
diff --git a/packages/react-dom/src/events/getEventModifierState.js b/packages/react-dom/src/events/getEventModifierState.js
index 304fe84ed303f..b2f32b82b69fd 100644
--- a/packages/react-dom/src/events/getEventModifierState.js
+++ b/packages/react-dom/src/events/getEventModifierState.js
@@ -12,7 +12,7 @@
  * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
  */
 
-import type {AnyNativeEvent} from 'events/PluginModuleType';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
 
 const modifierKeyToProp = {
   Alt: 'altKey',
diff --git a/packages/react-dom/src/fire/ReactFire.js b/packages/react-dom/src/fire/ReactFire.js
deleted file mode 100644
index bb74931fdc3ef..0000000000000
--- a/packages/react-dom/src/fire/ReactFire.js
+++ /dev/null
@@ -1,919 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-// This file is copy paste from ReactDOM with adjusted paths
-// and a different host config import (react-reconciler/inline.fire).
-// TODO: real implementation.
-// console.log('Hello from Fire entry point.');
-
-import type {ReactNodeList} from 'shared/ReactTypes';
-import type {RootTag} from 'shared/ReactRootTags';
-// TODO: This type is shared between the reconciler and ReactDOM, but will
-// eventually be lifted out to the renderer.
-import type {
-  FiberRoot,
-  Batch as FiberRootBatch,
-} from 'react-reconciler/src/ReactFiberRoot';
-
-import '../shared/checkReact';
-import '../client/ReactDOMClientInjection';
-
-import {
-  computeUniqueAsyncExpiration,
-  findHostInstanceWithNoPortals,
-  updateContainerAtExpirationTime,
-  flushRoot,
-  createContainer,
-  updateContainer,
-  batchedEventUpdates,
-  batchedUpdates,
-  unbatchedUpdates,
-  discreteUpdates,
-  flushDiscreteUpdates,
-  flushSync,
-  flushControlled,
-  injectIntoDevTools,
-  getPublicRootInstance,
-  findHostInstance,
-  findHostInstanceWithWarning,
-  flushPassiveEffects,
-  ReactActingRendererSigil,
-} from 'react-reconciler/inline.fire';
-import {createPortal as createPortalImpl} from 'shared/ReactPortal';
-import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {setBatchingImplementation} from 'events/ReactGenericBatching';
-import {
-  setRestoreImplementation,
-  enqueueStateRestore,
-  restoreStateIfNeeded,
-} from 'events/ReactControlledComponent';
-import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
-
-import {runEventsInBatch} from 'events/EventBatching';
-import {eventNameDispatchConfigs} from 'events/EventPluginRegistry';
-import {
-  accumulateTwoPhaseDispatches,
-  accumulateDirectDispatches,
-} from 'events/EventPropagators';
-import {LegacyRoot, ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags';
-import {has as hasInstance} from 'shared/ReactInstanceMap';
-import ReactVersion from 'shared/ReactVersion';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import getComponentName from 'shared/getComponentName';
-import invariant from 'shared/invariant';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
-
-import {
-  getInstanceFromNode,
-  getNodeFromInstance,
-  getFiberCurrentPropsFromNode,
-  getClosestInstanceFromNode,
-} from '../client/ReactDOMComponentTree';
-import {restoreControlledState} from '../client/ReactDOMComponent';
-import {dispatchEvent} from '../events/ReactDOMEventListener';
-import {
-  ELEMENT_NODE,
-  COMMENT_NODE,
-  DOCUMENT_NODE,
-  DOCUMENT_FRAGMENT_NODE,
-} from '../shared/HTMLNodeType';
-import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty';
-
-const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-
-let topLevelUpdateWarnings;
-let warnOnInvalidCallback;
-let didWarnAboutUnstableCreatePortal = false;
-
-if (__DEV__) {
-  if (
-    typeof Map !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Map has no prototype
-    Map.prototype == null ||
-    typeof Map.prototype.forEach !== 'function' ||
-    typeof Set !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Set has no prototype
-    Set.prototype == null ||
-    typeof Set.prototype.clear !== 'function' ||
-    typeof Set.prototype.forEach !== 'function'
-  ) {
-    warningWithoutStack(
-      false,
-      'React depends on Map and Set built-in types. Make sure that you load a ' +
-        'polyfill in older browsers. https://fb.me/react-polyfills',
-    );
-  }
-
-  topLevelUpdateWarnings = (container: DOMContainer) => {
-    if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
-      const hostInstance = findHostInstanceWithNoPortals(
-        container._reactRootContainer._internalRoot.current,
-      );
-      if (hostInstance) {
-        warningWithoutStack(
-          hostInstance.parentNode === container,
-          'render(...): It looks like the React-rendered content of this ' +
-            'container was removed without using React. This is not ' +
-            'supported and will cause errors. Instead, call ' +
-            'ReactDOM.unmountComponentAtNode to empty a container.',
-        );
-      }
-    }
-
-    const isRootRenderedBySomeReact = !!container._reactRootContainer;
-    const rootEl = getReactRootElementInContainer(container);
-    const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
-
-    warningWithoutStack(
-      !hasNonRootReactChild || isRootRenderedBySomeReact,
-      'render(...): Replacing React-rendered children with a new root ' +
-        'component. If you intended to update the children of this node, ' +
-        'you should instead have the existing children update their state ' +
-        'and render the new components instead of calling ReactDOM.render.',
-    );
-
-    warningWithoutStack(
-      container.nodeType !== ELEMENT_NODE ||
-        !((container: any): Element).tagName ||
-        ((container: any): Element).tagName.toUpperCase() !== 'BODY',
-      'render(): Rendering components directly into document.body is ' +
-        'discouraged, since its children are often manipulated by third-party ' +
-        'scripts and browser extensions. This may lead to subtle ' +
-        'reconciliation issues. Try rendering into a container element created ' +
-        'for your app.',
-    );
-  };
-
-  warnOnInvalidCallback = function(callback: mixed, callerName: string) {
-    warningWithoutStack(
-      callback === null || typeof callback === 'function',
-      '%s(...): Expected the last optional `callback` argument to be a ' +
-        'function. Instead received: %s.',
-      callerName,
-      callback,
-    );
-  };
-}
-
-setRestoreImplementation(restoreControlledState);
-
-export type DOMContainer =
-  | (Element & {
-      _reactRootContainer: ?(_ReactRoot | _ReactSyncRoot),
-      _reactHasBeenPassedToCreateRootDEV: ?boolean,
-    })
-  | (Document & {
-      _reactRootContainer: ?(_ReactRoot | _ReactSyncRoot),
-      _reactHasBeenPassedToCreateRootDEV: ?boolean,
-    });
-
-type Batch = FiberRootBatch & {
-  render(children: ReactNodeList): Work,
-  then(onComplete: () => mixed): void,
-  commit(): void,
-
-  // The ReactRoot constructor is hoisted but the prototype methods are not. If
-  // we move ReactRoot to be above ReactBatch, the inverse error occurs.
-  // $FlowFixMe Hoisting issue.
-  _root: _ReactRoot | _ReactSyncRoot,
-  _hasChildren: boolean,
-  _children: ReactNodeList,
-
-  _callbacks: Array<() => mixed> | null,
-  _didComplete: boolean,
-};
-
-type _ReactSyncRoot = {
-  render(children: ReactNodeList, callback: ?() => mixed): Work,
-  unmount(callback: ?() => mixed): Work,
-
-  _internalRoot: FiberRoot,
-};
-
-type _ReactRoot = _ReactSyncRoot & {
-  createBatch(): Batch,
-};
-
-function ReactBatch(root: _ReactRoot | _ReactSyncRoot) {
-  const expirationTime = computeUniqueAsyncExpiration();
-  this._expirationTime = expirationTime;
-  this._root = root;
-  this._next = null;
-  this._callbacks = null;
-  this._didComplete = false;
-  this._hasChildren = false;
-  this._children = null;
-  this._defer = true;
-}
-ReactBatch.prototype.render = function(children: ReactNodeList) {
-  invariant(
-    this._defer,
-    'batch.render: Cannot render a batch that already committed.',
-  );
-  this._hasChildren = true;
-  this._children = children;
-  const internalRoot = this._root._internalRoot;
-  const expirationTime = this._expirationTime;
-  const work = new ReactWork();
-  updateContainerAtExpirationTime(
-    children,
-    internalRoot,
-    null,
-    expirationTime,
-    null,
-    work._onCommit,
-  );
-  return work;
-};
-ReactBatch.prototype.then = function(onComplete: () => mixed) {
-  if (this._didComplete) {
-    onComplete();
-    return;
-  }
-  let callbacks = this._callbacks;
-  if (callbacks === null) {
-    callbacks = this._callbacks = [];
-  }
-  callbacks.push(onComplete);
-};
-ReactBatch.prototype.commit = function() {
-  const internalRoot = this._root._internalRoot;
-  let firstBatch = internalRoot.firstBatch;
-  invariant(
-    this._defer && firstBatch !== null,
-    'batch.commit: Cannot commit a batch multiple times.',
-  );
-
-  if (!this._hasChildren) {
-    // This batch is empty. Return.
-    this._next = null;
-    this._defer = false;
-    return;
-  }
-
-  let expirationTime = this._expirationTime;
-
-  // Ensure this is the first batch in the list.
-  if (firstBatch !== this) {
-    // This batch is not the earliest batch. We need to move it to the front.
-    // Update its expiration time to be the expiration time of the earliest
-    // batch, so that we can flush it without flushing the other batches.
-    if (this._hasChildren) {
-      expirationTime = this._expirationTime = firstBatch._expirationTime;
-      // Rendering this batch again ensures its children will be the final state
-      // when we flush (updates are processed in insertion order: last
-      // update wins).
-      // TODO: This forces a restart. Should we print a warning?
-      this.render(this._children);
-    }
-
-    // Remove the batch from the list.
-    let previous = null;
-    let batch = firstBatch;
-    while (batch !== this) {
-      previous = batch;
-      batch = batch._next;
-    }
-    invariant(
-      previous !== null,
-      'batch.commit: Cannot commit a batch multiple times.',
-    );
-    previous._next = batch._next;
-
-    // Add it to the front.
-    this._next = firstBatch;
-    firstBatch = internalRoot.firstBatch = this;
-  }
-
-  // Synchronously flush all the work up to this batch's expiration time.
-  this._defer = false;
-  flushRoot(internalRoot, expirationTime);
-
-  // Pop the batch from the list.
-  const next = this._next;
-  this._next = null;
-  firstBatch = internalRoot.firstBatch = next;
-
-  // Append the next earliest batch's children to the update queue.
-  if (firstBatch !== null && firstBatch._hasChildren) {
-    firstBatch.render(firstBatch._children);
-  }
-};
-ReactBatch.prototype._onComplete = function() {
-  if (this._didComplete) {
-    return;
-  }
-  this._didComplete = true;
-  const callbacks = this._callbacks;
-  if (callbacks === null) {
-    return;
-  }
-  // TODO: Error handling.
-  for (let i = 0; i < callbacks.length; i++) {
-    const callback = callbacks[i];
-    callback();
-  }
-};
-
-type Work = {
-  then(onCommit: () => mixed): void,
-  _onCommit: () => void,
-  _callbacks: Array<() => mixed> | null,
-  _didCommit: boolean,
-};
-
-function ReactWork() {
-  this._callbacks = null;
-  this._didCommit = false;
-  // TODO: Avoid need to bind by replacing callbacks in the update queue with
-  // list of Work objects.
-  this._onCommit = this._onCommit.bind(this);
-}
-ReactWork.prototype.then = function(onCommit: () => mixed): void {
-  if (this._didCommit) {
-    onCommit();
-    return;
-  }
-  let callbacks = this._callbacks;
-  if (callbacks === null) {
-    callbacks = this._callbacks = [];
-  }
-  callbacks.push(onCommit);
-};
-ReactWork.prototype._onCommit = function(): void {
-  if (this._didCommit) {
-    return;
-  }
-  this._didCommit = true;
-  const callbacks = this._callbacks;
-  if (callbacks === null) {
-    return;
-  }
-  // TODO: Error handling.
-  for (let i = 0; i < callbacks.length; i++) {
-    const callback = callbacks[i];
-    invariant(
-      typeof callback === 'function',
-      'Invalid argument passed as callback. Expected a function. Instead ' +
-        'received: %s',
-      callback,
-    );
-    callback();
-  }
-};
-
-function ReactSyncRoot(
-  container: DOMContainer,
-  tag: RootTag,
-  hydrate: boolean,
-) {
-  // Tag is either LegacyRoot or Concurrent Root
-  const root = createContainer(container, tag, hydrate);
-  this._internalRoot = root;
-}
-
-function ReactRoot(container: DOMContainer, hydrate: boolean) {
-  const root = createContainer(container, ConcurrentRoot, hydrate);
-  this._internalRoot = root;
-}
-
-ReactRoot.prototype.render = ReactSyncRoot.prototype.render = function(
-  children: ReactNodeList,
-  callback: ?() => mixed,
-): Work {
-  const root = this._internalRoot;
-  const work = new ReactWork();
-  callback = callback === undefined ? null : callback;
-  if (__DEV__) {
-    warnOnInvalidCallback(callback, 'render');
-  }
-  if (callback !== null) {
-    work.then(callback);
-  }
-  updateContainer(children, root, null, work._onCommit);
-  return work;
-};
-
-ReactRoot.prototype.unmount = ReactSyncRoot.prototype.unmount = function(
-  callback: ?() => mixed,
-): Work {
-  const root = this._internalRoot;
-  const work = new ReactWork();
-  callback = callback === undefined ? null : callback;
-  if (__DEV__) {
-    warnOnInvalidCallback(callback, 'render');
-  }
-  if (callback !== null) {
-    work.then(callback);
-  }
-  updateContainer(null, root, null, work._onCommit);
-  return work;
-};
-
-// Sync roots cannot create batches. Only concurrent ones.
-ReactRoot.prototype.createBatch = function(): Batch {
-  const batch = new ReactBatch(this);
-  const expirationTime = batch._expirationTime;
-
-  const internalRoot = this._internalRoot;
-  const firstBatch = internalRoot.firstBatch;
-  if (firstBatch === null) {
-    internalRoot.firstBatch = batch;
-    batch._next = null;
-  } else {
-    // Insert sorted by expiration time then insertion order
-    let insertAfter = null;
-    let insertBefore = firstBatch;
-    while (
-      insertBefore !== null &&
-      insertBefore._expirationTime >= expirationTime
-    ) {
-      insertAfter = insertBefore;
-      insertBefore = insertBefore._next;
-    }
-    batch._next = insertBefore;
-    if (insertAfter !== null) {
-      insertAfter._next = batch;
-    }
-  }
-
-  return batch;
-};
-
-/**
- * True if the supplied DOM node is a valid node element.
- *
- * @param {?DOMElement} node The candidate DOM node.
- * @return {boolean} True if the DOM is a valid DOM node.
- * @internal
- */
-function isValidContainer(node) {
-  return !!(
-    node &&
-    (node.nodeType === ELEMENT_NODE ||
-      node.nodeType === DOCUMENT_NODE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
-      (node.nodeType === COMMENT_NODE &&
-        node.nodeValue === ' react-mount-point-unstable '))
-  );
-}
-
-function getReactRootElementInContainer(container: any) {
-  if (!container) {
-    return null;
-  }
-
-  if (container.nodeType === DOCUMENT_NODE) {
-    return container.documentElement;
-  } else {
-    return container.firstChild;
-  }
-}
-
-function shouldHydrateDueToLegacyHeuristic(container) {
-  const rootElement = getReactRootElementInContainer(container);
-  return !!(
-    rootElement &&
-    rootElement.nodeType === ELEMENT_NODE &&
-    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
-  );
-}
-
-setBatchingImplementation(
-  batchedUpdates,
-  discreteUpdates,
-  flushDiscreteUpdates,
-  batchedEventUpdates,
-);
-
-let warnedAboutHydrateAPI = false;
-
-function legacyCreateRootFromDOMContainer(
-  container: DOMContainer,
-  forceHydrate: boolean,
-): _ReactSyncRoot {
-  const shouldHydrate =
-    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
-  // First clear any existing content.
-  if (!shouldHydrate) {
-    let warned = false;
-    let rootSibling;
-    while ((rootSibling = container.lastChild)) {
-      if (__DEV__) {
-        if (
-          !warned &&
-          rootSibling.nodeType === ELEMENT_NODE &&
-          (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
-        ) {
-          warned = true;
-          warningWithoutStack(
-            false,
-            'render(): Target node has markup rendered by React, but there ' +
-              'are unrelated nodes as well. This is most commonly caused by ' +
-              'white-space inserted around server-rendered markup.',
-          );
-        }
-      }
-      container.removeChild(rootSibling);
-    }
-  }
-  if (__DEV__) {
-    if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
-      warnedAboutHydrateAPI = true;
-      lowPriorityWarning(
-        false,
-        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-          'will stop working in React v17. Replace the ReactDOM.render() call ' +
-          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-      );
-    }
-  }
-
-  // Legacy roots are not batched.
-  return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);
-}
-
-function legacyRenderSubtreeIntoContainer(
-  parentComponent: ?React$Component<any, any>,
-  children: ReactNodeList,
-  container: DOMContainer,
-  forceHydrate: boolean,
-  callback: ?Function,
-) {
-  if (__DEV__) {
-    topLevelUpdateWarnings(container);
-    warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
-  }
-
-  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
-  // member of intersection type." Whyyyyyy.
-  let root: _ReactSyncRoot = (container._reactRootContainer: any);
-  let fiberRoot;
-  if (!root) {
-    // Initial mount
-    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
-      container,
-      forceHydrate,
-    );
-    fiberRoot = root._internalRoot;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Initial mount should not be batched.
-    unbatchedUpdates(() => {
-      updateContainer(children, fiberRoot, parentComponent, callback);
-    });
-  } else {
-    fiberRoot = root._internalRoot;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Update
-    updateContainer(children, fiberRoot, parentComponent, callback);
-  }
-  return getPublicRootInstance(fiberRoot);
-}
-
-function createPortal(
-  children: ReactNodeList,
-  container: DOMContainer,
-  key: ?string = null,
-) {
-  invariant(
-    isValidContainer(container),
-    'Target container is not a DOM element.',
-  );
-  // TODO: pass ReactDOM portal implementation as third argument
-  return createPortalImpl(children, container, null, key);
-}
-
-const ReactDOM: Object = {
-  createPortal,
-
-  findDOMNode(
-    componentOrElement: Element | ?React$Component<any, any>,
-  ): null | Element | Text {
-    if (__DEV__) {
-      let owner = (ReactCurrentOwner.current: any);
-      if (owner !== null && owner.stateNode !== null) {
-        const warnedAboutRefsInRender =
-          owner.stateNode._warnedAboutRefsInRender;
-        warningWithoutStack(
-          warnedAboutRefsInRender,
-          '%s is accessing findDOMNode inside its render(). ' +
-            'render() should be a pure function of props and state. It should ' +
-            'never access something that requires stale data from the previous ' +
-            'render, such as refs. Move this logic to componentDidMount and ' +
-            'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
-        );
-        owner.stateNode._warnedAboutRefsInRender = true;
-      }
-    }
-    if (componentOrElement == null) {
-      return null;
-    }
-    if ((componentOrElement: any).nodeType === ELEMENT_NODE) {
-      return (componentOrElement: any);
-    }
-    if (__DEV__) {
-      return findHostInstanceWithWarning(componentOrElement, 'findDOMNode');
-    }
-    return findHostInstance(componentOrElement);
-  },
-
-  hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
-    invariant(
-      isValidContainer(container),
-      'Target container is not a DOM element.',
-    );
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. ' +
-          'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-    // TODO: throw or warn if we couldn't hydrate?
-    return legacyRenderSubtreeIntoContainer(
-      null,
-      element,
-      container,
-      true,
-      callback,
-    );
-  },
-
-  render(
-    element: React$Element<any>,
-    container: DOMContainer,
-    callback: ?Function,
-  ) {
-    invariant(
-      isValidContainer(container),
-      'Target container is not a DOM element.',
-    );
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. ' +
-          'Did you mean to call root.render(element)?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-    return legacyRenderSubtreeIntoContainer(
-      null,
-      element,
-      container,
-      false,
-      callback,
-    );
-  },
-
-  unstable_renderSubtreeIntoContainer(
-    parentComponent: React$Component<any, any>,
-    element: React$Element<any>,
-    containerNode: DOMContainer,
-    callback: ?Function,
-  ) {
-    invariant(
-      isValidContainer(containerNode),
-      'Target container is not a DOM element.',
-    );
-    invariant(
-      parentComponent != null && hasInstance(parentComponent),
-      'parentComponent must be a valid React Component',
-    );
-    return legacyRenderSubtreeIntoContainer(
-      parentComponent,
-      element,
-      containerNode,
-      false,
-      callback,
-    );
-  },
-
-  unmountComponentAtNode(container: DOMContainer) {
-    invariant(
-      isValidContainer(container),
-      'unmountComponentAtNode(...): Target container is not a DOM element.',
-    );
-
-    if (__DEV__) {
-      warningWithoutStack(
-        !container._reactHasBeenPassedToCreateRootDEV,
-        'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?',
-        enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-      );
-    }
-
-    if (container._reactRootContainer) {
-      if (__DEV__) {
-        const rootEl = getReactRootElementInContainer(container);
-        const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
-        warningWithoutStack(
-          !renderedByDifferentReact,
-          "unmountComponentAtNode(): The node you're attempting to unmount " +
-            'was rendered by another copy of React.',
-        );
-      }
-
-      // Unmount should not be batched.
-      unbatchedUpdates(() => {
-        legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
-          container._reactRootContainer = null;
-        });
-      });
-      // If you call unmountComponentAtNode twice in quick succession, you'll
-      // get `true` twice. That's probably fine?
-      return true;
-    } else {
-      if (__DEV__) {
-        const rootEl = getReactRootElementInContainer(container);
-        const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
-
-        // Check if the container itself is a React root node.
-        const isContainerReactRoot =
-          container.nodeType === ELEMENT_NODE &&
-          isValidContainer(container.parentNode) &&
-          !!container.parentNode._reactRootContainer;
-
-        warningWithoutStack(
-          !hasNonRootReactChild,
-          "unmountComponentAtNode(): The node you're attempting to unmount " +
-            'was rendered by React and is not a top-level container. %s',
-          isContainerReactRoot
-            ? 'You may have accidentally passed in a React root node instead ' +
-              'of its container.'
-            : 'Instead, have the parent component update its state and ' +
-              'rerender in order to remove this component.',
-        );
-      }
-
-      return false;
-    }
-  },
-
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 17.
-  unstable_createPortal(...args) {
-    if (!didWarnAboutUnstableCreatePortal) {
-      didWarnAboutUnstableCreatePortal = true;
-      lowPriorityWarning(
-        false,
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 17+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-      );
-    }
-    return createPortal(...args);
-  },
-
-  unstable_batchedUpdates: batchedUpdates,
-
-  // TODO remove this legacy method, unstable_discreteUpdates replaces it
-  unstable_interactiveUpdates: (fn, a, b, c) => {
-    flushDiscreteUpdates();
-    return discreteUpdates(fn, a, b, c);
-  },
-
-  unstable_discreteUpdates: discreteUpdates,
-  unstable_flushDiscreteUpdates: flushDiscreteUpdates,
-
-  flushSync: flushSync,
-
-  unstable_createRoot: createRoot,
-  unstable_createSyncRoot: createSyncRoot,
-  unstable_flushControlled: flushControlled,
-
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
-    // Keep in sync with ReactDOMUnstableNativeDependencies.js
-    // ReactTestUtils.js, and ReactTestUtilsAct.js. This is an array for better minification.
-    Events: [
-      getInstanceFromNode,
-      getNodeFromInstance,
-      getFiberCurrentPropsFromNode,
-      EventPluginHubInjection.injectEventPluginsByName,
-      eventNameDispatchConfigs,
-      accumulateTwoPhaseDispatches,
-      accumulateDirectDispatches,
-      enqueueStateRestore,
-      restoreStateIfNeeded,
-      dispatchEvent,
-      runEventsInBatch,
-      flushPassiveEffects,
-      ReactActingRendererSigil,
-    ],
-  },
-};
-
-type RootOptions = {
-  hydrate?: boolean,
-};
-
-function createRoot(
-  container: DOMContainer,
-  options?: RootOptions,
-): _ReactRoot {
-  const functionName = enableStableConcurrentModeAPIs
-    ? 'createRoot'
-    : 'unstable_createRoot';
-  invariant(
-    isValidContainer(container),
-    '%s(...): Target container is not a DOM element.',
-    functionName,
-  );
-  warnIfReactDOMContainerInDEV(container);
-  const hydrate = options != null && options.hydrate === true;
-  return new ReactRoot(container, hydrate);
-}
-
-function createSyncRoot(
-  container: DOMContainer,
-  options?: RootOptions,
-): _ReactSyncRoot {
-  const functionName = enableStableConcurrentModeAPIs
-    ? 'createRoot'
-    : 'unstable_createRoot';
-  invariant(
-    isValidContainer(container),
-    '%s(...): Target container is not a DOM element.',
-    functionName,
-  );
-  warnIfReactDOMContainerInDEV(container);
-  const hydrate = options != null && options.hydrate === true;
-  return new ReactSyncRoot(container, BatchedRoot, hydrate);
-}
-
-function warnIfReactDOMContainerInDEV(container) {
-  if (__DEV__) {
-    warningWithoutStack(
-      !container._reactRootContainer,
-      'You are calling ReactDOM.%s() on a container that was previously ' +
-        'passed to ReactDOM.render(). This is not supported.',
-      enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
-    );
-    container._reactHasBeenPassedToCreateRootDEV = true;
-  }
-}
-
-if (enableStableConcurrentModeAPIs) {
-  ReactDOM.createRoot = createRoot;
-  ReactDOM.createSyncRoot = createSyncRoot;
-}
-
-const foundDevTools = injectIntoDevTools({
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-dom',
-});
-
-if (__DEV__) {
-  if (!foundDevTools && canUseDOM && window.top === window.self) {
-    // If we're in Chrome or Firefox, provide a download link if not installed.
-    if (
-      (navigator.userAgent.indexOf('Chrome') > -1 &&
-        navigator.userAgent.indexOf('Edge') === -1) ||
-      navigator.userAgent.indexOf('Firefox') > -1
-    ) {
-      const protocol = window.location.protocol;
-      // Don't warn in exotic cases like chrome-extension://.
-      if (/^(https?|file):$/.test(protocol)) {
-        console.info(
-          '%cDownload the React DevTools ' +
-            'for a better development experience: ' +
-            'https://fb.me/react-devtools' +
-            (protocol === 'file:'
-              ? '\nYou might need to use a local HTTP server (instead of file://): ' +
-                'https://fb.me/react-devtools-faq'
-              : ''),
-          'font-weight:bold',
-        );
-      }
-    }
-  }
-}
-
-export default ReactDOM;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 17da2d7e48e87..93419fa27194b 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -13,7 +13,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
-} from 'react-stream/inline.dom-browser';
+} from 'react-server/inline.dom-browser';
 
 function renderToReadableStream(children: ReactNodeList): ReadableStream {
   let request;
@@ -23,7 +23,7 @@ function renderToReadableStream(children: ReactNodeList): ReadableStream {
       startWork(request);
     },
     pull(controller) {
-      startFlowing(request, controller.desiredSize);
+      startFlowing(request);
     },
     cancel(reason) {},
   });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.js
deleted file mode 100644
index a9c6dc79df830..0000000000000
--- a/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import {convertStringToBuffer} from 'react-stream/src/ReactFizzHostConfig';
-
-export function formatChunk(type: string, props: Object): Uint8Array {
-  let str = '<' + type + '>';
-  if (typeof props.children === 'string') {
-    str += props.children;
-  }
-  str += '</' + type + '>';
-  return convertStringToBuffer(str);
-}
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 72b1bcb74272c..3815e1f958ef8 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -10,10 +10,10 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
 
-import {createRequest, startWork, startFlowing} from 'react-stream/inline.dom';
+import {createRequest, startWork, startFlowing} from 'react-server/inline.dom';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request, 0);
+  return () => startFlowing(request);
 }
 
 function pipeToNodeWritable(
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 8adc08052a2df..ecee219346a6a 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -9,20 +9,27 @@
 
 import type {ThreadID} from './ReactThreadIDAllocator';
 import type {ReactElement} from 'shared/ReactElementType';
+import type {LazyComponent} from 'shared/ReactLazyComponent';
 import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import React from 'react';
 import invariant from 'shared/invariant';
 import getComponentName from 'shared/getComponentName';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warning from 'shared/warning';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  Resolved,
+  Rejected,
+  Pending,
+  initializeLazyComponentType,
+} from 'shared/ReactLazyComponent';
 import {
   warnAboutDeprecatedLifecycles,
+  disableLegacyContext,
   enableSuspenseServerRenderer,
-  enableEventAPI,
+  enableFundamentalAPI,
+  enableDeprecatedFlareAPI,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -31,15 +38,15 @@ import {
   REACT_STRICT_MODE_TYPE,
   REACT_CONCURRENT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
   REACT_PORTAL_TYPE,
   REACT_PROFILER_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
   REACT_LAZY_TYPE,
   REACT_MEMO_TYPE,
-  REACT_EVENT_COMPONENT_TYPE,
-  REACT_EVENT_TARGET_TYPE,
-  REACT_EVENT_TARGET_TOUCH_HIT,
+  REACT_FUNDAMENTAL_TYPE,
+  REACT_SCOPE_TYPE,
 } from 'shared/ReactSymbols';
 
 import {
@@ -231,7 +238,10 @@ function createMarkupForStyles(styles): string | null {
       }
     }
     if (styleValue != null) {
-      serialized += delimiter + processStyleName(styleName) + ':';
+      serialized +=
+        delimiter +
+        (isCustomProperty ? styleName : processStyleName(styleName)) +
+        ':';
       serialized += dangerousStyleValue(
         styleName,
         styleValue,
@@ -257,8 +267,7 @@ function warnNoop(
       return;
     }
 
-    warningWithoutStack(
-      false,
+    console.error(
       '%s(...): Can only update a mounting component. ' +
         'This usually means you called %s() outside componentWillMount() on the server. ' +
         'This is a no-op.\n\nPlease check the code for the %s component.',
@@ -324,8 +333,7 @@ function flattenOptionChildren(children: mixed): ?string {
         typeof child !== 'number'
       ) {
         didWarnInvalidOptionChildren = true;
-        warning(
-          false,
+        console.error(
           'Only strings and numbers are supported as <option> children.',
         );
       }
@@ -357,6 +365,9 @@ function createOpenTagMarkup(
     if (!hasOwnProperty.call(props, propKey)) {
       continue;
     }
+    if (enableDeprecatedFlareAPI && propKey === 'DEPRECATED_flareListeners') {
+      continue;
+    }
     let propValue = props[propKey];
     if (propValue == null) {
       continue;
@@ -424,7 +435,8 @@ function resolve(
 
   // Extra closure so queue and replace can be captured properly
   function processChild(element, Component) {
-    let publicContext = processContext(Component, context, threadID);
+    const isClass = shouldConstruct(Component);
+    const publicContext = processContext(Component, context, threadID, isClass);
 
     let queue = [];
     let replace = false;
@@ -452,7 +464,7 @@ function resolve(
     };
 
     let inst;
-    if (shouldConstruct(Component)) {
+    if (isClass) {
       inst = new Component(element.props, publicContext, updater);
 
       if (typeof Component.getDerivedStateFromProps === 'function') {
@@ -460,8 +472,7 @@ function resolve(
           if (inst.state === null || inst.state === undefined) {
             const componentName = getComponentName(Component) || 'Unknown';
             if (!didWarnAboutUninitializedState[componentName]) {
-              warningWithoutStack(
-                false,
+              console.error(
                 '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
                   '%s. This is not recommended. Instead, define the initial state by ' +
                   'assigning an object to `this.state` in the constructor of `%s`. ' +
@@ -485,8 +496,7 @@ function resolve(
           if (partialState === undefined) {
             const componentName = getComponentName(Component) || 'Unknown';
             if (!didWarnAboutUndefinedDerivedState[componentName]) {
-              warningWithoutStack(
-                false,
+              console.error(
                 '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
                   'You have returned undefined.',
                 componentName,
@@ -509,8 +519,7 @@ function resolve(
           const componentName = getComponentName(Component) || 'Unknown';
 
           if (!didWarnAboutBadClass[componentName]) {
-            warningWithoutStack(
-              false,
+            console.error(
               "The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
                 'This is likely to cause errors. Change %s to extend React.Component instead.',
               componentName,
@@ -534,8 +543,7 @@ function resolve(
       if (__DEV__) {
         const componentName = getComponentName(Component) || 'Unknown';
         if (!didWarnAboutModulePatternComponent[componentName]) {
-          warningWithoutStack(
-            false,
+          console.error(
             'The <%s /> component appears to be a function component that returns a class instance. ' +
               'Change %s to a class that extends React.Component instead. ' +
               "If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -571,15 +579,13 @@ function resolve(
             const componentName = getComponentName(Component) || 'Unknown';
 
             if (!didWarnAboutDeprecatedWillMount[componentName]) {
-              lowPriorityWarning(
-                false,
-                '%s: componentWillMount() is deprecated and will be ' +
-                  'removed in the next major version. Read about the motivations ' +
-                  'behind this change: ' +
-                  'https://fb.me/react-async-component-lifecycle-hooks' +
-                  '\n\n' +
-                  'As a temporary workaround, you can rename to ' +
-                  'UNSAFE_componentWillMount instead.',
+              console.warn(
+                // keep this warning in sync with ReactStrictModeWarning.js
+                'componentWillMount has been renamed, and is not recommended for use. ' +
+                  'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+                  '* Move code from componentWillMount to componentDidMount (preferred in most cases) ' +
+                  'or the constructor.\n' +
+                  '\nPlease update the following components: %s',
                 componentName,
               );
               didWarnAboutDeprecatedWillMount[componentName] = true;
@@ -645,29 +651,43 @@ function resolve(
     validateRenderResult(child, Component);
 
     let childContext;
-    if (typeof inst.getChildContext === 'function') {
-      let childContextTypes = Component.childContextTypes;
-      if (typeof childContextTypes === 'object') {
-        childContext = inst.getChildContext();
-        for (let contextKey in childContext) {
-          invariant(
-            contextKey in childContextTypes,
-            '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
+    if (disableLegacyContext) {
+      if (__DEV__) {
+        let childContextTypes = Component.childContextTypes;
+        if (childContextTypes !== undefined) {
+          console.error(
+            '%s uses the legacy childContextTypes API which is no longer supported. ' +
+              'Use React.createContext() instead.',
             getComponentName(Component) || 'Unknown',
-            contextKey,
           );
         }
-      } else {
-        warningWithoutStack(
-          false,
-          '%s.getChildContext(): childContextTypes must be defined in order to ' +
-            'use getChildContext().',
-          getComponentName(Component) || 'Unknown',
-        );
       }
-    }
-    if (childContext) {
-      context = Object.assign({}, context, childContext);
+    } else {
+      if (typeof inst.getChildContext === 'function') {
+        let childContextTypes = Component.childContextTypes;
+        if (typeof childContextTypes === 'object') {
+          childContext = inst.getChildContext();
+          for (let contextKey in childContext) {
+            invariant(
+              contextKey in childContextTypes,
+              '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
+              getComponentName(Component) || 'Unknown',
+              contextKey,
+            );
+          }
+        } else {
+          if (__DEV__) {
+            console.error(
+              '%s.getChildContext(): childContextTypes must be defined in order to ' +
+                'use getChildContext().',
+              getComponentName(Component) || 'Unknown',
+            );
+          }
+        }
+      }
+      if (childContext) {
+        context = Object.assign({}, context, childContext);
+      }
     }
   }
   return {child, context};
@@ -681,11 +701,10 @@ type Frame = {
   childIndex: number,
   context: Object,
   footer: string,
+  ...
 };
 
-type FrameDev = Frame & {
-  debugElementStack: Array<ReactElement>,
-};
+type FrameDev = Frame & {|debugElementStack: Array<ReactElement>|};
 
 class ReactDOMServerRenderer {
   threadID: ThreadID;
@@ -775,10 +794,9 @@ class ReactDOMServerRenderer {
   popProvider<T>(provider: ReactProvider<T>): void {
     const index = this.contextIndex;
     if (__DEV__) {
-      warningWithoutStack(
-        index > -1 && provider === (this.contextProviderStack: any)[index],
-        'Unexpected pop.',
-      );
+      if (index < 0 || provider !== (this.contextProviderStack: any)[index]) {
+        console.error('Unexpected pop.');
+      }
     }
 
     const context: ReactContext<any> = this.contextStack[index];
@@ -855,7 +873,8 @@ class ReactDOMServerRenderer {
               const fallbackFrame = frame.fallbackFrame;
               invariant(
                 fallbackFrame,
-                'suspense fallback not found, something is broken',
+                'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
+                  'This is a bug in React. Please file an issue.',
               );
               this.stack.push(fallbackFrame);
               out[this.suspenseDepth] += '<!--$!-->';
@@ -881,8 +900,20 @@ class ReactDOMServerRenderer {
         try {
           outBuffer += this.render(child, frame.context, frame.domNamespace);
         } catch (err) {
-          if (enableSuspenseServerRenderer && typeof err.then === 'function') {
-            suspended = true;
+          if (err != null && typeof err.then === 'function') {
+            if (enableSuspenseServerRenderer) {
+              invariant(
+                this.suspenseDepth > 0,
+                // TODO: include component name. This is a bit tricky with current factoring.
+                'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                  '\n' +
+                  'Add a <Suspense fallback=...> component higher in the tree to ' +
+                  'provide a loading indicator or placeholder to display.',
+              );
+              suspended = true;
+            } else {
+              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+            }
           } else {
             throw err;
           }
@@ -970,6 +1001,7 @@ class ReactDOMServerRenderer {
         case REACT_STRICT_MODE_TYPE:
         case REACT_CONCURRENT_MODE_TYPE:
         case REACT_PROFILER_TYPE:
+        case REACT_SUSPENSE_LIST_TYPE:
         case REACT_FRAGMENT_TYPE: {
           const nextChildren = toArray(
             ((nextChild: any): ReactElement).props.children,
@@ -1135,8 +1167,7 @@ class ReactDOMServerRenderer {
                 if (reactContext !== reactContext.Consumer) {
                   if (!hasWarnedAboutUsingContextAsConsumer) {
                     hasWarnedAboutUsingContextAsConsumer = true;
-                    warning(
-                      false,
+                    console.error(
                       'Rendering <Context> directly is not supported and will be removed in ' +
                         'a future major release. Did you mean to render <Context.Consumer> instead?',
                     );
@@ -1166,32 +1197,86 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          case REACT_EVENT_COMPONENT_TYPE:
-          case REACT_EVENT_TARGET_TYPE: {
-            if (enableEventAPI) {
-              if (
-                elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
-                elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
-              ) {
-                const props = nextElement.props;
-                const bottom = props.bottom || 0;
-                const left = props.left || 0;
-                const right = props.right || 0;
-                const top = props.top || 0;
-
-                if (bottom === 0 && left === 0 && right === 0 && top === 0) {
-                  return '';
+          // eslint-disable-next-line-no-fallthrough
+          case REACT_FUNDAMENTAL_TYPE: {
+            if (enableFundamentalAPI) {
+              const fundamentalImpl = elementType.impl;
+              const open = fundamentalImpl.getServerSideString(
+                null,
+                nextElement.props,
+              );
+              const getServerSideStringClose =
+                fundamentalImpl.getServerSideStringClose;
+              const close =
+                getServerSideStringClose !== undefined
+                  ? getServerSideStringClose(null, nextElement.props)
+                  : '';
+              const nextChildren =
+                fundamentalImpl.reconcileChildren !== false
+                  ? toArray(((nextChild: any): ReactElement).props.children)
+                  : [];
+              const frame: Frame = {
+                type: null,
+                domNamespace: parentNamespace,
+                children: nextChildren,
+                childIndex: 0,
+                context: context,
+                footer: close,
+              };
+              if (__DEV__) {
+                ((frame: any): FrameDev).debugElementStack = [];
+              }
+              this.stack.push(frame);
+              return open;
+            }
+            invariant(
+              false,
+              'ReactDOMServer does not yet support the fundamental API.',
+            );
+          }
+          // eslint-disable-next-line-no-fallthrough
+          case REACT_LAZY_TYPE: {
+            const element: ReactElement = (nextChild: any);
+            const lazyComponent: LazyComponent<any> = (nextChild: any).type;
+            // Attempt to initialize lazy component regardless of whether the
+            // suspense server-side renderer is enabled so synchronously
+            // resolved constructors are supported.
+            initializeLazyComponentType(lazyComponent);
+            switch (lazyComponent._status) {
+              case Resolved: {
+                const nextChildren = [
+                  React.createElement(
+                    lazyComponent._result,
+                    Object.assign({ref: element.ref}, element.props),
+                  ),
+                ];
+                const frame: Frame = {
+                  type: null,
+                  domNamespace: parentNamespace,
+                  children: nextChildren,
+                  childIndex: 0,
+                  context: context,
+                  footer: '',
+                };
+                if (__DEV__) {
+                  ((frame: any): FrameDev).debugElementStack = [];
                 }
-                let topString = top ? `-${top}px` : '0px';
-                let leftString = left ? `-${left}px` : '0px';
-                let rightString = right ? `-${right}px` : '0x';
-                let bottomString = bottom ? `-${bottom}px` : '0px';
-
-                return (
-                  `<div style="position:absolute;pointer-events:none;z-index:-1;bottom:` +
-                  `${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
-                );
+                this.stack.push(frame);
+                return '';
               }
+              case Rejected:
+                throw lazyComponent._result;
+              case Pending:
+              default:
+                invariant(
+                  false,
+                  'ReactDOMServer does not yet support lazy-loaded components.',
+                );
+            }
+          }
+          // eslint-disable-next-line-no-fallthrough
+          case REACT_SCOPE_TYPE: {
+            if (enableScopeAPI) {
               const nextChildren = toArray(
                 ((nextChild: any): ReactElement).props.children,
               );
@@ -1211,15 +1296,9 @@ class ReactDOMServerRenderer {
             }
             invariant(
               false,
-              'ReactDOMServer does not yet support the event API.',
+              'ReactDOMServer does not yet support scope components.',
             );
           }
-          // eslint-disable-next-line-no-fallthrough
-          case REACT_LAZY_TYPE:
-            invariant(
-              false,
-              'ReactDOMServer does not yet support lazy-loaded components.',
-            );
         }
       }
 
@@ -1269,13 +1348,14 @@ class ReactDOMServerRenderer {
       if (namespace === Namespaces.html) {
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
-        warning(
-          tag === element.type,
-          '<%s /> is using incorrect casing. ' +
-            'Use PascalCase for React components, ' +
-            'or lowercase for HTML elements.',
-          element.type,
-        );
+        if (tag !== element.type) {
+          console.error(
+            '<%s /> is using incorrect casing. ' +
+              'Use PascalCase for React components, ' +
+              'or lowercase for HTML elements.',
+            element.type,
+          );
+        }
       }
     }
 
@@ -1291,8 +1371,7 @@ class ReactDOMServerRenderer {
           props.defaultChecked !== undefined &&
           !didWarnDefaultChecked
         ) {
-          warning(
-            false,
+          console.error(
             '%s contains an input of type %s with both checked and defaultChecked props. ' +
               'Input elements must be either controlled or uncontrolled ' +
               '(specify either the checked prop, or the defaultChecked prop, but not ' +
@@ -1309,8 +1388,7 @@ class ReactDOMServerRenderer {
           props.defaultValue !== undefined &&
           !didWarnDefaultInputValue
         ) {
-          warning(
-            false,
+          console.error(
             '%s contains an input of type %s with both value and defaultValue props. ' +
               'Input elements must be either controlled or uncontrolled ' +
               '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -1344,8 +1422,7 @@ class ReactDOMServerRenderer {
           props.defaultValue !== undefined &&
           !didWarnDefaultTextareaValue
         ) {
-          warning(
-            false,
+          console.error(
             'Textarea elements must be either controlled or uncontrolled ' +
               '(specify either the value prop, or the defaultValue prop, but not ' +
               'both). Decide between using a controlled or uncontrolled textarea ' +
@@ -1363,8 +1440,7 @@ class ReactDOMServerRenderer {
         let textareaChildren = props.children;
         if (textareaChildren != null) {
           if (__DEV__) {
-            warning(
-              false,
+            console.error(
               'Use the `defaultValue` or `value` props instead of setting ' +
                 'children on <textarea>.',
             );
@@ -1404,15 +1480,13 @@ class ReactDOMServerRenderer {
           }
           const isArray = Array.isArray(props[propName]);
           if (props.multiple && !isArray) {
-            warning(
-              false,
+            console.error(
               'The `%s` prop supplied to <select> must be an array if ' +
                 '`multiple` is true.',
               propName,
             );
           } else if (!props.multiple && isArray) {
-            warning(
-              false,
+            console.error(
               'The `%s` prop supplied to <select> must be a scalar ' +
                 'value if `multiple` is false.',
               propName,
@@ -1425,8 +1499,7 @@ class ReactDOMServerRenderer {
           props.defaultValue !== undefined &&
           !didWarnDefaultSelectValue
         ) {
-          warning(
-            false,
+          console.error(
             'Select elements must be either controlled or uncontrolled ' +
               '(specify either the value prop, or the defaultValue prop, but not ' +
               'both). Decide between using a controlled or uncontrolled select ' +
@@ -1504,7 +1577,10 @@ class ReactDOMServerRenderer {
     const innerMarkup = getNonChildrenInnerMarkup(props);
     if (innerMarkup != null) {
       children = [];
-      if (newlineEatingTags[tag] && innerMarkup.charAt(0) === '\n') {
+      if (
+        newlineEatingTags.hasOwnProperty(tag) &&
+        innerMarkup.charAt(0) === '\n'
+      ) {
         // text/html ignores the first character in these tags if it's a newline
         // Prefer to break application/xml over text/html (for now) by adding
         // a newline specifically to get eaten by the parser. (Alternately for
diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js
index 2ad914eb2b1ad..808afae0bcdfd 100644
--- a/packages/react-dom/src/server/ReactPartialRendererContext.js
+++ b/packages/react-dom/src/server/ReactPartialRendererContext.js
@@ -10,10 +10,10 @@
 import type {ThreadID} from './ReactThreadIDAllocator';
 import type {ReactContext} from 'shared/ReactTypes';
 
+import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentName from 'shared/getComponentName';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import checkPropTypes from 'prop-types/checkPropTypes';
 
 let ReactDebugCurrentFrame;
@@ -73,60 +73,97 @@ export function processContext(
   type: Function,
   context: Object,
   threadID: ThreadID,
+  isClass: boolean,
 ) {
-  const contextType = type.contextType;
-  if (__DEV__) {
-    if ('contextType' in (type: any)) {
-      let isValid =
-        // Allow null for conditional declaration
-        contextType === null ||
-        (contextType !== undefined &&
-          contextType.$$typeof === REACT_CONTEXT_TYPE &&
-          contextType._context === undefined); // Not a <Context.Consumer>
+  if (isClass) {
+    const contextType = type.contextType;
+    if (__DEV__) {
+      if ('contextType' in (type: any)) {
+        let isValid =
+          // Allow null for conditional declaration
+          contextType === null ||
+          (contextType !== undefined &&
+            contextType.$$typeof === REACT_CONTEXT_TYPE &&
+            contextType._context === undefined); // Not a <Context.Consumer>
 
-      if (!isValid && !didWarnAboutInvalidateContextType.has(type)) {
-        didWarnAboutInvalidateContextType.add(type);
+        if (!isValid && !didWarnAboutInvalidateContextType.has(type)) {
+          didWarnAboutInvalidateContextType.add(type);
 
-        let addendum = '';
-        if (contextType === undefined) {
-          addendum =
-            ' However, it is set to undefined. ' +
-            'This can be caused by a typo or by mixing up named and default imports. ' +
-            'This can also happen due to a circular dependency, so ' +
-            'try moving the createContext() call to a separate file.';
-        } else if (typeof contextType !== 'object') {
-          addendum = ' However, it is set to a ' + typeof contextType + '.';
-        } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
-          addendum = ' Did you accidentally pass the Context.Provider instead?';
-        } else if (contextType._context !== undefined) {
-          // <Context.Consumer>
-          addendum = ' Did you accidentally pass the Context.Consumer instead?';
-        } else {
-          addendum =
-            ' However, it is set to an object with keys {' +
-            Object.keys(contextType).join(', ') +
-            '}.';
+          let addendum = '';
+          if (contextType === undefined) {
+            addendum =
+              ' However, it is set to undefined. ' +
+              'This can be caused by a typo or by mixing up named and default imports. ' +
+              'This can also happen due to a circular dependency, so ' +
+              'try moving the createContext() call to a separate file.';
+          } else if (typeof contextType !== 'object') {
+            addendum = ' However, it is set to a ' + typeof contextType + '.';
+          } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
+            addendum =
+              ' Did you accidentally pass the Context.Provider instead?';
+          } else if (contextType._context !== undefined) {
+            // <Context.Consumer>
+            addendum =
+              ' Did you accidentally pass the Context.Consumer instead?';
+          } else {
+            addendum =
+              ' However, it is set to an object with keys {' +
+              Object.keys(contextType).join(', ') +
+              '}.';
+          }
+          console.error(
+            '%s defines an invalid contextType. ' +
+              'contextType should point to the Context object returned by React.createContext().%s',
+            getComponentName(type) || 'Component',
+            addendum,
+          );
         }
-        warningWithoutStack(
-          false,
-          '%s defines an invalid contextType. ' +
-            'contextType should point to the Context object returned by React.createContext().%s',
-          getComponentName(type) || 'Component',
-          addendum,
-        );
       }
     }
-  }
-  if (typeof contextType === 'object' && contextType !== null) {
-    validateContextBounds(contextType, threadID);
-    return contextType[threadID];
+    if (typeof contextType === 'object' && contextType !== null) {
+      validateContextBounds(contextType, threadID);
+      return contextType[threadID];
+    }
+    if (disableLegacyContext) {
+      if (__DEV__) {
+        if (type.contextTypes) {
+          console.error(
+            '%s uses the legacy contextTypes API which is no longer supported. ' +
+              'Use React.createContext() with static contextType instead.',
+            getComponentName(type) || 'Unknown',
+          );
+        }
+      }
+      return emptyObject;
+    } else {
+      const maskedContext = maskContext(type, context);
+      if (__DEV__) {
+        if (type.contextTypes) {
+          checkContextTypes(type.contextTypes, maskedContext, 'context');
+        }
+      }
+      return maskedContext;
+    }
   } else {
-    const maskedContext = maskContext(type, context);
-    if (__DEV__) {
-      if (type.contextTypes) {
-        checkContextTypes(type.contextTypes, maskedContext, 'context');
+    if (disableLegacyContext) {
+      if (__DEV__) {
+        if (type.contextTypes) {
+          console.error(
+            '%s uses the legacy contextTypes API which is no longer supported. ' +
+              'Use React.createContext() with React.useContext() instead.',
+            getComponentName(type) || 'Unknown',
+          );
+        }
+      }
+      return undefined;
+    } else {
+      const maskedContext = maskContext(type, context);
+      if (__DEV__) {
+        if (type.contextTypes) {
+          checkContextTypes(type.contextTypes, maskedContext, 'context');
+        }
       }
+      return maskedContext;
     }
-    return maskedContext;
   }
 }
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 00c7869883551..b8df948461ad6 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -7,34 +7,39 @@
  * @flow
  */
 
-import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
+import type {
+  Dispatcher as DispatcherType,
+  TimeoutConfig,
+} from 'react-reconciler/src/ReactFiberHooks';
 import type {ThreadID} from './ReactThreadIDAllocator';
-import type {ReactContext} from 'shared/ReactTypes';
-
+import type {
+  ReactContext,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
+import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
 import {validateContextBounds} from './ReactPartialRendererContext';
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-type Update<A> = {
+type Update<A> = {|
   action: A,
   next: Update<A> | null,
-};
+|};
 
-type UpdateQueue<A> = {
+type UpdateQueue<A> = {|
   last: Update<A> | null,
   dispatch: any,
-};
+|};
 
-type Hook = {
+type Hook = {|
   memoizedState: any,
   queue: UpdateQueue<any> | null,
   next: Hook | null,
-};
+|};
 
 let currentlyRenderingComponent: Object | null = null;
 let firstWorkInProgressHook: Hook | null = null;
@@ -65,13 +70,14 @@ function resolveCurrentlyRenderingComponent(): Object {
       'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
   );
   if (__DEV__) {
-    warning(
-      !isInHookUserCodeInDev,
-      'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
-        'You can only call Hooks at the top level of your React function. ' +
-        'For more information, see ' +
-        'https://fb.me/rules-of-hooks',
-    );
+    if (isInHookUserCodeInDev) {
+      console.error(
+        'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
+          'You can only call Hooks at the top level of your React function. ' +
+          'For more information, see ' +
+          'https://fb.me/rules-of-hooks',
+      );
+    }
   }
   return currentlyRenderingComponent;
 }
@@ -82,8 +88,7 @@ function areHookInputsEqual(
 ) {
   if (prevDeps === null) {
     if (__DEV__) {
-      warning(
-        false,
+      console.error(
         '%s received a final argument during this render, but not during ' +
           'the previous render. Even though the final argument is optional, ' +
           'its type cannot change between renders.',
@@ -97,8 +102,7 @@ function areHookInputsEqual(
     // Don't bother comparing lengths in prod because these arrays should be
     // passed inline.
     if (nextDeps.length !== prevDeps.length) {
-      warning(
-        false,
+      console.error(
         'The final argument passed to %s changed size between renders. The ' +
           'order and size of this array must remain constant.\n\n' +
           'Previous: %s\n' +
@@ -217,13 +221,14 @@ function readContext<T>(
   let threadID = currentThreadID;
   validateContextBounds(context, threadID);
   if (__DEV__) {
-    warning(
-      !isInHookUserCodeInDev,
-      'Context can only be read while React is rendering. ' +
-        'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-        'In function components, you can read it directly in the function body, but not ' +
-        'inside Hooks like useReducer() or useMemo().',
-    );
+    if (isInHookUserCodeInDev) {
+      console.error(
+        'Context can only be read while React is rendering. ' +
+          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+          'In function components, you can read it directly in the function body, but not ' +
+          'inside Hooks like useReducer() or useMemo().',
+      );
+    }
   }
   return context[threadID];
 }
@@ -364,7 +369,7 @@ function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
   return nextValue;
 }
 
-function useRef<T>(initialValue: T): {current: T} {
+function useRef<T>(initialValue: T): {|current: T|} {
   currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
   workInProgressHook = createWorkInProgressHook();
   const previousRef = workInProgressHook.memoizedState;
@@ -386,16 +391,15 @@ export function useLayoutEffect(
 ) {
   if (__DEV__) {
     currentHookNameInDev = 'useLayoutEffect';
+    console.error(
+      'useLayoutEffect does nothing on the server, because its effect cannot ' +
+        "be encoded into the server renderer's output format. This will lead " +
+        'to a mismatch between the initial, non-hydrated UI and the intended ' +
+        'UI. To avoid this, useLayoutEffect should only be used in ' +
+        'components that render exclusively on the client. ' +
+        'See https://fb.me/react-uselayouteffect-ssr for common fixes.',
+    );
   }
-  warning(
-    false,
-    'useLayoutEffect does nothing on the server, because its effect cannot ' +
-      "be encoded into the server renderer's output format. This will lead " +
-      'to a mismatch between the initial, non-hydrated UI and the intended ' +
-      'UI. To avoid this, useLayoutEffect should only be used in ' +
-      'components that render exclusively on the client. ' +
-      'See https://fb.me/react-uselayouteffect-ssr for common fixes.',
-  );
 }
 
 function dispatchAction<A>(
@@ -447,6 +451,28 @@ export function useCallback<T>(
   return callback;
 }
 
+function useResponder(responder, props): ReactEventResponderListener<any, any> {
+  return {
+    props,
+    responder,
+  };
+}
+
+function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
+  resolveCurrentlyRenderingComponent();
+  return value;
+}
+
+function useTransition(
+  config: SuspenseConfig | null | void,
+): [(callback: () => void) => void, boolean] {
+  resolveCurrentlyRenderingComponent();
+  const startTransition = callback => {
+    callback();
+  };
+  return [startTransition, false];
+}
+
 function noop(): void {}
 
 export let currentThreadID: ThreadID = 0;
@@ -470,4 +496,7 @@ export const Dispatcher: DispatcherType = {
   useEffect: noop,
   // Debugging effect
   useDebugValue: noop,
+  useResponder,
+  useDeferredValue,
+  useTransition,
 };
diff --git a/packages/react-dom/src/server/ReactThreadIDAllocator.js b/packages/react-dom/src/server/ReactThreadIDAllocator.js
index 48ada00443558..b8f7b622df764 100644
--- a/packages/react-dom/src/server/ReactThreadIDAllocator.js
+++ b/packages/react-dom/src/server/ReactThreadIDAllocator.js
@@ -8,7 +8,7 @@
  */
 
 // Allocates a new index for each request. Tries to stay as compact as possible so that these
-// indices can be used to reference a tightly packaged array. As opposed to being used in a Map.
+// indices can be used to reference a tightly packed array. As opposed to being used in a Map.
 // The first allocated index is 1.
 
 import invariant from 'shared/invariant';
diff --git a/packages/react-dom/src/shared/CSSPropertyOperations.js b/packages/react-dom/src/shared/CSSPropertyOperations.js
index c7f6786e8c76b..f307510813cc4 100644
--- a/packages/react-dom/src/shared/CSSPropertyOperations.js
+++ b/packages/react-dom/src/shared/CSSPropertyOperations.js
@@ -10,7 +10,6 @@ import {shorthandToLonghand} from './CSSShorthandProperty';
 import dangerousStyleValue from './dangerousStyleValue';
 import hyphenateStyleName from './hyphenateStyleName';
 import warnValidStyle from './warnValidStyle';
-import warning from 'shared/warning';
 
 import {warnAboutShorthandPropertyCollision} from 'shared/ReactFeatureFlags';
 
@@ -35,7 +34,10 @@ export function createDangerousStringForStyles(styles) {
       const styleValue = styles[styleName];
       if (styleValue != null) {
         const isCustomProperty = styleName.indexOf('--') === 0;
-        serialized += delimiter + hyphenateStyleName(styleName) + ':';
+        serialized +=
+          delimiter +
+          (isCustomProperty ? styleName : hyphenateStyleName(styleName)) +
+          ':';
         serialized += dangerousStyleValue(
           styleName,
           styleValue,
@@ -125,37 +127,38 @@ export function validateShorthandPropertyCollisionInDev(
   styleUpdates,
   nextStyles,
 ) {
-  if (!warnAboutShorthandPropertyCollision) {
-    return;
-  }
+  if (__DEV__) {
+    if (!warnAboutShorthandPropertyCollision) {
+      return;
+    }
 
-  if (!nextStyles) {
-    return;
-  }
+    if (!nextStyles) {
+      return;
+    }
 
-  const expandedUpdates = expandShorthandMap(styleUpdates);
-  const expandedStyles = expandShorthandMap(nextStyles);
-  const warnedAbout = {};
-  for (const key in expandedUpdates) {
-    const originalKey = expandedUpdates[key];
-    const correctOriginalKey = expandedStyles[key];
-    if (correctOriginalKey && originalKey !== correctOriginalKey) {
-      const warningKey = originalKey + ',' + correctOriginalKey;
-      if (warnedAbout[warningKey]) {
-        continue;
+    const expandedUpdates = expandShorthandMap(styleUpdates);
+    const expandedStyles = expandShorthandMap(nextStyles);
+    const warnedAbout = {};
+    for (const key in expandedUpdates) {
+      const originalKey = expandedUpdates[key];
+      const correctOriginalKey = expandedStyles[key];
+      if (correctOriginalKey && originalKey !== correctOriginalKey) {
+        const warningKey = originalKey + ',' + correctOriginalKey;
+        if (warnedAbout[warningKey]) {
+          continue;
+        }
+        warnedAbout[warningKey] = true;
+        console.error(
+          '%s a style property during rerender (%s) when a ' +
+            'conflicting property is set (%s) can lead to styling bugs. To ' +
+            "avoid this, don't mix shorthand and non-shorthand properties " +
+            'for the same value; instead, replace the shorthand with ' +
+            'separate values.',
+          isValueEmpty(styleUpdates[originalKey]) ? 'Removing' : 'Updating',
+          originalKey,
+          correctOriginalKey,
+        );
       }
-      warnedAbout[warningKey] = true;
-      warning(
-        false,
-        '%s a style property during rerender (%s) when a ' +
-          'conflicting property is set (%s) can lead to styling bugs. To ' +
-          "avoid this, don't mix shorthand and non-shorthand properties " +
-          'for the same value; instead, replace the shorthand with ' +
-          'separate values.',
-        isValueEmpty(styleUpdates[originalKey]) ? 'Removing' : 'Updating',
-        originalKey,
-        correctOriginalKey,
-      );
     }
   }
 }
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 2db29095fed60..1caa13baa3eb7 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import warning from 'shared/warning';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
 
 type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -84,7 +84,7 @@ export function isAttributeNameSafe(attributeName: string): boolean {
   }
   illegalAttributeNameCache[attributeName] = true;
   if (__DEV__) {
-    warning(false, 'Invalid attribute name: `%s`', attributeName);
+    console.error('Invalid attribute name: `%s`', attributeName);
   }
   return false;
 }
@@ -207,7 +207,7 @@ function PropertyInfoRecord(
 const properties = {};
 
 // These props are reserved by React. They shouldn't be written to the DOM.
-[
+const reservedProps = [
   'children',
   'dangerouslySetInnerHTML',
   // TODO: This prevents the assignment of defaultValue to regular
@@ -219,8 +219,12 @@ const properties = {};
   'suppressContentEditableWarning',
   'suppressHydrationWarning',
   'style',
-  'hydrateTouchHitTarget',
-].forEach(name => {
+];
+if (enableDeprecatedFlareAPI) {
+  reservedProps.push('DEPRECATED_flareListeners');
+}
+
+reservedProps.forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     RESERVED,
diff --git a/packages/react-dom/src/shared/ReactControlledValuePropTypes.js b/packages/react-dom/src/shared/ReactControlledValuePropTypes.js
index 97e1cbb56e324..dfb6e0f715e1d 100644
--- a/packages/react-dom/src/shared/ReactControlledValuePropTypes.js
+++ b/packages/react-dom/src/shared/ReactControlledValuePropTypes.js
@@ -7,6 +7,7 @@
 
 import checkPropTypes from 'prop-types/checkPropTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
 
 let ReactDebugCurrentFrame = null;
 
@@ -34,7 +35,8 @@ if (__DEV__) {
         props.onChange ||
         props.readOnly ||
         props.disabled ||
-        props[propName] == null
+        props[propName] == null ||
+        (enableDeprecatedFlareAPI && props.DEPRECATED_flareListeners)
       ) {
         return null;
       }
@@ -50,7 +52,8 @@ if (__DEV__) {
         props.onChange ||
         props.readOnly ||
         props.disabled ||
-        props[propName] == null
+        props[propName] == null ||
+        (enableDeprecatedFlareAPI && props.DEPRECATED_flareListeners)
       ) {
         return null;
       }
diff --git a/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js b/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
index 59a7720c0a19b..cceea9758c57f 100644
--- a/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
+++ b/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import warning from 'shared/warning';
-
 import {ATTRIBUTE_NAME_CHAR} from './DOMProperty';
 import isCustomComponent from './isCustomComponent';
 import validAriaProperties from './validAriaProperties';
@@ -18,62 +16,61 @@ const rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 function validateProperty(tagName, name) {
-  if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
-    return true;
-  }
-
-  if (rARIACamel.test(name)) {
-    const ariaName = 'aria-' + name.slice(4).toLowerCase();
-    const correctName = validAriaProperties.hasOwnProperty(ariaName)
-      ? ariaName
-      : null;
-
-    // If this is an aria-* attribute, but is not listed in the known DOM
-    // DOM properties, then it is an invalid aria-* attribute.
-    if (correctName == null) {
-      warning(
-        false,
-        'Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.',
-        name,
-      );
-      warnedProperties[name] = true;
+  if (__DEV__) {
+    if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
       return true;
     }
-    // aria-* attributes should be lowercase; suggest the lowercase version.
-    if (name !== correctName) {
-      warning(
-        false,
-        'Invalid ARIA attribute `%s`. Did you mean `%s`?',
-        name,
-        correctName,
-      );
-      warnedProperties[name] = true;
-      return true;
-    }
-  }
 
-  if (rARIA.test(name)) {
-    const lowerCasedName = name.toLowerCase();
-    const standardName = validAriaProperties.hasOwnProperty(lowerCasedName)
-      ? lowerCasedName
-      : null;
+    if (rARIACamel.test(name)) {
+      const ariaName = 'aria-' + name.slice(4).toLowerCase();
+      const correctName = validAriaProperties.hasOwnProperty(ariaName)
+        ? ariaName
+        : null;
 
-    // If this is an aria-* attribute, but is not listed in the known DOM
-    // DOM properties, then it is an invalid aria-* attribute.
-    if (standardName == null) {
-      warnedProperties[name] = true;
-      return false;
+      // If this is an aria-* attribute, but is not listed in the known DOM
+      // DOM properties, then it is an invalid aria-* attribute.
+      if (correctName == null) {
+        console.error(
+          'Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.',
+          name,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
+      // aria-* attributes should be lowercase; suggest the lowercase version.
+      if (name !== correctName) {
+        console.error(
+          'Invalid ARIA attribute `%s`. Did you mean `%s`?',
+          name,
+          correctName,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
     }
-    // aria-* attributes should be lowercase; suggest the lowercase version.
-    if (name !== standardName) {
-      warning(
-        false,
-        'Unknown ARIA attribute `%s`. Did you mean `%s`?',
-        name,
-        standardName,
-      );
-      warnedProperties[name] = true;
-      return true;
+
+    if (rARIA.test(name)) {
+      const lowerCasedName = name.toLowerCase();
+      const standardName = validAriaProperties.hasOwnProperty(lowerCasedName)
+        ? lowerCasedName
+        : null;
+
+      // If this is an aria-* attribute, but is not listed in the known DOM
+      // DOM properties, then it is an invalid aria-* attribute.
+      if (standardName == null) {
+        warnedProperties[name] = true;
+        return false;
+      }
+      // aria-* attributes should be lowercase; suggest the lowercase version.
+      if (name !== standardName) {
+        console.error(
+          'Unknown ARIA attribute `%s`. Did you mean `%s`?',
+          name,
+          standardName,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
     }
   }
 
@@ -81,35 +78,35 @@ function validateProperty(tagName, name) {
 }
 
 function warnInvalidARIAProps(type, props) {
-  const invalidProps = [];
+  if (__DEV__) {
+    const invalidProps = [];
 
-  for (const key in props) {
-    const isValid = validateProperty(type, key);
-    if (!isValid) {
-      invalidProps.push(key);
+    for (const key in props) {
+      const isValid = validateProperty(type, key);
+      if (!isValid) {
+        invalidProps.push(key);
+      }
     }
-  }
 
-  const unknownPropString = invalidProps
-    .map(prop => '`' + prop + '`')
-    .join(', ');
+    const unknownPropString = invalidProps
+      .map(prop => '`' + prop + '`')
+      .join(', ');
 
-  if (invalidProps.length === 1) {
-    warning(
-      false,
-      'Invalid aria prop %s on <%s> tag. ' +
-        'For details, see https://fb.me/invalid-aria-prop',
-      unknownPropString,
-      type,
-    );
-  } else if (invalidProps.length > 1) {
-    warning(
-      false,
-      'Invalid aria props %s on <%s> tag. ' +
-        'For details, see https://fb.me/invalid-aria-prop',
-      unknownPropString,
-      type,
-    );
+    if (invalidProps.length === 1) {
+      console.error(
+        'Invalid aria prop %s on <%s> tag. ' +
+          'For details, see https://fb.me/invalid-aria-prop',
+        unknownPropString,
+        type,
+      );
+    } else if (invalidProps.length > 1) {
+      console.error(
+        'Invalid aria props %s on <%s> tag. ' +
+          'For details, see https://fb.me/invalid-aria-prop',
+        unknownPropString,
+        type,
+      );
+    }
   }
 }
 
diff --git a/packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js b/packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js
index 95f407b7da0c5..20879a4c79747 100644
--- a/packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js
+++ b/packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js
@@ -5,33 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import warning from 'shared/warning';
-
 let didWarnValueNull = false;
 
 export function validateProperties(type, props) {
-  if (type !== 'input' && type !== 'textarea' && type !== 'select') {
-    return;
-  }
+  if (__DEV__) {
+    if (type !== 'input' && type !== 'textarea' && type !== 'select') {
+      return;
+    }
 
-  if (props != null && props.value === null && !didWarnValueNull) {
-    didWarnValueNull = true;
-    if (type === 'select' && props.multiple) {
-      warning(
-        false,
-        '`value` prop on `%s` should not be null. ' +
-          'Consider using an empty array when `multiple` is set to `true` ' +
-          'to clear the component or `undefined` for uncontrolled components.',
-        type,
-      );
-    } else {
-      warning(
-        false,
-        '`value` prop on `%s` should not be null. ' +
-          'Consider using an empty string to clear the component or `undefined` ' +
-          'for uncontrolled components.',
-        type,
-      );
+    if (props != null && props.value === null && !didWarnValueNull) {
+      didWarnValueNull = true;
+      if (type === 'select' && props.multiple) {
+        console.error(
+          '`value` prop on `%s` should not be null. ' +
+            'Consider using an empty array when `multiple` is set to `true` ' +
+            'to clear the component or `undefined` for uncontrolled components.',
+          type,
+        );
+      } else {
+        console.error(
+          '`value` prop on `%s` should not be null. ' +
+            'Consider using an empty string to clear the component or `undefined` ' +
+            'for uncontrolled components.',
+          type,
+        );
+      }
     }
   }
 }
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index f3d43f1846590..fd0f71dacb82d 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -8,8 +8,7 @@
 import {
   registrationNameModules,
   possibleRegistrationNames,
-} from 'events/EventPluginRegistry';
-import warning from 'shared/warning';
+} from 'legacy-events/EventPluginRegistry';
 
 import {
   ATTRIBUTE_NAME_CHAR,
@@ -38,8 +37,7 @@ if (__DEV__) {
 
     const lowerCasedName = name.toLowerCase();
     if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
-      warning(
-        false,
+      console.error(
         'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' +
           'All React events are normalized to bubble, so onFocusIn and onFocusOut ' +
           'are not needed/supported by React.',
@@ -59,8 +57,7 @@ if (__DEV__) {
         ? possibleRegistrationNames[lowerCasedName]
         : null;
       if (registrationName != null) {
-        warning(
-          false,
+        console.error(
           'Invalid event handler property `%s`. Did you mean `%s`?',
           name,
           registrationName,
@@ -69,8 +66,7 @@ if (__DEV__) {
         return true;
       }
       if (EVENT_NAME_REGEX.test(name)) {
-        warning(
-          false,
+        console.error(
           'Unknown event handler property `%s`. It will be ignored.',
           name,
         );
@@ -82,8 +78,7 @@ if (__DEV__) {
       // So we can't tell if the event name is correct for sure, but we can filter
       // out known bad ones like `onclick`. We can't suggest a specific replacement though.
       if (INVALID_EVENT_NAME_REGEX.test(name)) {
-        warning(
-          false,
+        console.error(
           'Invalid event handler property `%s`. ' +
             'React events use the camelCase naming convention, for example `onClick`.',
           name,
@@ -99,8 +94,7 @@ if (__DEV__) {
     }
 
     if (lowerCasedName === 'innerhtml') {
-      warning(
-        false,
+      console.error(
         'Directly setting property `innerHTML` is not permitted. ' +
           'For more information, lookup documentation on `dangerouslySetInnerHTML`.',
       );
@@ -109,8 +103,7 @@ if (__DEV__) {
     }
 
     if (lowerCasedName === 'aria') {
-      warning(
-        false,
+      console.error(
         'The `aria` attribute is reserved for future use in React. ' +
           'Pass individual `aria-` attributes instead.',
       );
@@ -124,8 +117,7 @@ if (__DEV__) {
       value !== undefined &&
       typeof value !== 'string'
     ) {
-      warning(
-        false,
+      console.error(
         'Received a `%s` for a string attribute `is`. If this is expected, cast ' +
           'the value to a string.',
         typeof value,
@@ -135,8 +127,7 @@ if (__DEV__) {
     }
 
     if (typeof value === 'number' && isNaN(value)) {
-      warning(
-        false,
+      console.error(
         'Received NaN for the `%s` attribute. If this is expected, cast ' +
           'the value to a string.',
         name,
@@ -152,8 +143,7 @@ if (__DEV__) {
     if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
       const standardName = possibleStandardNames[lowerCasedName];
       if (standardName !== name) {
-        warning(
-          false,
+        console.error(
           'Invalid DOM property `%s`. Did you mean `%s`?',
           name,
           standardName,
@@ -164,8 +154,7 @@ if (__DEV__) {
     } else if (!isReserved && name !== lowerCasedName) {
       // Unknown attributes should have lowercase casing since that's how they
       // will be cased anyway with server rendering.
-      warning(
-        false,
+      console.error(
         'React does not recognize the `%s` prop on a DOM element. If you ' +
           'intentionally want it to appear in the DOM as a custom ' +
           'attribute, spell it as lowercase `%s` instead. ' +
@@ -183,8 +172,7 @@ if (__DEV__) {
       shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)
     ) {
       if (value) {
-        warning(
-          false,
+        console.error(
           'Received `%s` for a non-boolean attribute `%s`.\n\n' +
             'If you want to write it to the DOM, pass a string instead: ' +
             '%s="%s" or %s={value.toString()}.',
@@ -195,8 +183,7 @@ if (__DEV__) {
           name,
         );
       } else {
-        warning(
-          false,
+        console.error(
           'Received `%s` for a non-boolean attribute `%s`.\n\n' +
             'If you want to write it to the DOM, pass a string instead: ' +
             '%s="%s" or %s={value.toString()}.\n\n' +
@@ -233,8 +220,7 @@ if (__DEV__) {
       propertyInfo !== null &&
       propertyInfo.type === BOOLEAN
     ) {
-      warning(
-        false,
+      console.error(
         'Received the string `%s` for the boolean attribute `%s`. ' +
           '%s ' +
           'Did you mean %s={%s}?',
@@ -255,35 +241,40 @@ if (__DEV__) {
 }
 
 const warnUnknownProperties = function(type, props, canUseEventSystem) {
-  const unknownProps = [];
-  for (const key in props) {
-    const isValid = validateProperty(type, key, props[key], canUseEventSystem);
-    if (!isValid) {
-      unknownProps.push(key);
+  if (__DEV__) {
+    const unknownProps = [];
+    for (const key in props) {
+      const isValid = validateProperty(
+        type,
+        key,
+        props[key],
+        canUseEventSystem,
+      );
+      if (!isValid) {
+        unknownProps.push(key);
+      }
     }
-  }
 
-  const unknownPropString = unknownProps
-    .map(prop => '`' + prop + '`')
-    .join(', ');
-  if (unknownProps.length === 1) {
-    warning(
-      false,
-      'Invalid value for prop %s on <%s> tag. Either remove it from the element, ' +
-        'or pass a string or number value to keep it in the DOM. ' +
-        'For details, see https://fb.me/react-attribute-behavior',
-      unknownPropString,
-      type,
-    );
-  } else if (unknownProps.length > 1) {
-    warning(
-      false,
-      'Invalid values for props %s on <%s> tag. Either remove them from the element, ' +
-        'or pass a string or number value to keep them in the DOM. ' +
-        'For details, see https://fb.me/react-attribute-behavior',
-      unknownPropString,
-      type,
-    );
+    const unknownPropString = unknownProps
+      .map(prop => '`' + prop + '`')
+      .join(', ');
+    if (unknownProps.length === 1) {
+      console.error(
+        'Invalid value for prop %s on <%s> tag. Either remove it from the element, ' +
+          'or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://fb.me/react-attribute-behavior',
+        unknownPropString,
+        type,
+      );
+    } else if (unknownProps.length > 1) {
+      console.error(
+        'Invalid values for props %s on <%s> tag. Either remove them from the element, ' +
+          'or pass a string or number value to keep them in the DOM. ' +
+          'For details, see https://fb.me/react-attribute-behavior',
+        unknownPropString,
+        type,
+      );
+    }
   }
 };
 
diff --git a/packages/react-dom/src/shared/assertValidProps.js b/packages/react-dom/src/shared/assertValidProps.js
index 30fc5c6ce5ffc..52a1b5b47ff88 100644
--- a/packages/react-dom/src/shared/assertValidProps.js
+++ b/packages/react-dom/src/shared/assertValidProps.js
@@ -6,14 +6,11 @@
  */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 // TODO: We can remove this if we add invariantWithStack()
 // or add stack by default to invariants where possible.
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import voidElementTags from './voidElementTags';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-import {REACT_EVENT_TARGET_TYPE} from 'shared/ReactSymbols';
 
 const HTML = '__html';
 
@@ -29,11 +26,7 @@ function assertValidProps(tag: string, props: ?Object) {
   // Note the use of `==` which checks for null or undefined.
   if (voidElementTags[tag]) {
     invariant(
-      (props.children == null ||
-        (enableEventAPI &&
-          props.children.type &&
-          props.children.type.$$typeof === REACT_EVENT_TARGET_TYPE)) &&
-        props.dangerouslySetInnerHTML == null,
+      props.children == null && props.dangerouslySetInnerHTML == null,
       '%s is a void element tag and must neither have `children` nor ' +
         'use `dangerouslySetInnerHTML`.%s',
       tag,
@@ -54,15 +47,18 @@ function assertValidProps(tag: string, props: ?Object) {
     );
   }
   if (__DEV__) {
-    warning(
-      props.suppressContentEditableWarning ||
-        !props.contentEditable ||
-        props.children == null,
-      'A component is `contentEditable` and contains `children` managed by ' +
-        'React. It is now your responsibility to guarantee that none of ' +
-        'those nodes are unexpectedly modified or duplicated. This is ' +
-        'probably not intentional.',
-    );
+    if (
+      !props.suppressContentEditableWarning &&
+      props.contentEditable &&
+      props.children != null
+    ) {
+      console.error(
+        'A component is `contentEditable` and contains `children` managed by ' +
+          'React. It is now your responsibility to guarantee that none of ' +
+          'those nodes are unexpectedly modified or duplicated. This is ' +
+          'probably not intentional.',
+      );
+    }
   }
   invariant(
     props.style == null || typeof props.style === 'object',
diff --git a/packages/react-dom/src/shared/sanitizeURL.js b/packages/react-dom/src/shared/sanitizeURL.js
index 9e1034c1fe459..e84c0de737742 100644
--- a/packages/react-dom/src/shared/sanitizeURL.js
+++ b/packages/react-dom/src/shared/sanitizeURL.js
@@ -8,11 +8,10 @@
  */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 
-let ReactDebugCurrentFrame = ((null: any): {getStackAddendum(): string});
+let ReactDebugCurrentFrame = ((null: any): {getStackAddendum(): string, ...});
 if (__DEV__) {
   ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 }
@@ -38,15 +37,16 @@ function sanitizeURL(url: string) {
       'React has blocked a javascript: URL as a security precaution.%s',
       __DEV__ ? ReactDebugCurrentFrame.getStackAddendum() : '',
     );
-  } else if (__DEV__ && !didWarn && isJavaScriptProtocol.test(url)) {
-    didWarn = true;
-    warning(
-      false,
-      'A future version of React will block javascript: URLs as a security precaution. ' +
-        'Use event handlers instead if you can. If you need to generate unsafe HTML try ' +
-        'using dangerouslySetInnerHTML instead. React was passed %s.',
-      JSON.stringify(url),
-    );
+  } else if (__DEV__) {
+    if (!didWarn && isJavaScriptProtocol.test(url)) {
+      didWarn = true;
+      console.error(
+        'A future version of React will block javascript: URLs as a security precaution. ' +
+          'Use event handlers instead if you can. If you need to generate unsafe HTML try ' +
+          'using dangerouslySetInnerHTML instead. React was passed %s.',
+        JSON.stringify(url),
+      );
+    }
   }
 }
 
diff --git a/packages/react-dom/src/shared/warnValidStyle.js b/packages/react-dom/src/shared/warnValidStyle.js
index 995b550ee0ca1..648e51cf3c26e 100644
--- a/packages/react-dom/src/shared/warnValidStyle.js
+++ b/packages/react-dom/src/shared/warnValidStyle.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import warning from 'shared/warning';
-
 let warnValidStyle = () => {};
 
 if (__DEV__) {
@@ -35,8 +33,7 @@ if (__DEV__) {
     }
 
     warnedStyleNames[name] = true;
-    warning(
-      false,
+    console.error(
       'Unsupported style property %s. Did you mean %s?',
       name,
       // As Andi Smith suggests
@@ -52,8 +49,7 @@ if (__DEV__) {
     }
 
     warnedStyleNames[name] = true;
-    warning(
-      false,
+    console.error(
       'Unsupported vendor-prefixed style property %s. Did you mean %s?',
       name,
       name.charAt(0).toUpperCase() + name.slice(1),
@@ -66,8 +62,7 @@ if (__DEV__) {
     }
 
     warnedStyleValues[value] = true;
-    warning(
-      false,
+    console.error(
       "Style property values shouldn't contain a semicolon. " +
         'Try "%s: %s" instead.',
       name,
@@ -81,8 +76,7 @@ if (__DEV__) {
     }
 
     warnedForNaNValue = true;
-    warning(
-      false,
+    console.error(
       '`NaN` is an invalid value for the `%s` css style property.',
       name,
     );
@@ -94,8 +88,7 @@ if (__DEV__) {
     }
 
     warnedForInfinityValue = true;
-    warning(
-      false,
+    console.error(
       '`Infinity` is an invalid value for the `%s` css style property.',
       name,
     );
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 5f4d96fa9632b..23e99cd15ae47 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type {Thenable} from 'react-reconciler/src/ReactFiberWorkLoop';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -16,13 +15,11 @@ import {
   HostComponent,
   HostText,
 } from 'shared/ReactWorkTags';
-import SyntheticEvent from 'events/SyntheticEvent';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 import invariant from 'shared/invariant';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import * as DOMTopLevelEventTypes from '../events/DOMTopLevelEventTypes';
-import {PLUGIN_EVENT_SYSTEM} from 'events/EventSystemFlags';
+import {PLUGIN_EVENT_SYSTEM} from 'legacy-events/EventSystemFlags';
 import act from './ReactTestUtilsAct';
 
 const {findDOMNode} = ReactDOM;
@@ -44,7 +41,7 @@ const [
   runEventsInBatch,
   /* eslint-disable no-unused-vars */
   flushPassiveEffects,
-  ReactActingRendererSigil,
+  IsThisRendererActing,
   /* eslint-enable no-unused-vars */
 ] = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
 
@@ -153,12 +150,6 @@ function validateClassInstance(inst, methodName) {
   );
 }
 
-// a plain dom element, lazily initialized, used by act() when flushing effects
-let actContainerElement = null;
-
-// a warning for when you try to use TestUtils.act in a non-browser environment
-let didWarnAboutActInNodejs = false;
-
 /**
  * Utilities for making it easy to test React components.
  *
@@ -367,14 +358,15 @@ const ReactTestUtils = {
    * @return {object} the ReactTestUtils object (for chaining)
    */
   mockComponent: function(module, mockTagName) {
-    if (!hasWarnedAboutDeprecatedMockComponent) {
-      hasWarnedAboutDeprecatedMockComponent = true;
-      lowPriorityWarning(
-        false,
-        'ReactTestUtils.mockComponent() is deprecated. ' +
-          'Use shallow rendering or jest.mock() instead.\n\n' +
-          'See https://fb.me/test-utils-mock-component for more information.',
-      );
+    if (__DEV__) {
+      if (!hasWarnedAboutDeprecatedMockComponent) {
+        hasWarnedAboutDeprecatedMockComponent = true;
+        console.warn(
+          'ReactTestUtils.mockComponent() is deprecated. ' +
+            'Use shallow rendering or jest.mock() instead.\n\n' +
+            'See https://fb.me/test-utils-mock-component for more information.',
+        );
+      }
     }
 
     mockTagName = mockTagName || module.mockTagName || 'div';
@@ -395,25 +387,7 @@ const ReactTestUtils = {
   Simulate: null,
   SimulateNative: {},
 
-  act(callback: () => Thenable) {
-    if (actContainerElement === null) {
-      if (__DEV__) {
-        // warn if we're trying to use this in something like node (without jsdom)
-        if (didWarnAboutActInNodejs === false) {
-          didWarnAboutActInNodejs = true;
-          warningWithoutStack(
-            typeof document !== 'undefined' && document !== null,
-            'It looks like you called ReactTestUtils.act(...) in a non-browser environment. ' +
-              "If you're using TestRenderer for your tests, you should call " +
-              'ReactTestRenderer.act(...) instead of ReactTestUtils.act(...).',
-          );
-        }
-      }
-      // now make the stub element
-      actContainerElement = document.createElement('div');
-    }
-    return act(callback);
-  },
+  act,
 };
 
 /**
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsAct.js b/packages/react-dom/src/test-utils/ReactTestUtilsAct.js
index e6dc6e38807f0..7aa5b916820de 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtilsAct.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtilsAct.js
@@ -9,10 +9,8 @@
 
 import type {Thenable} from 'react-reconciler/src/ReactFiberWorkLoop';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
 import ReactDOM from 'react-dom';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {warnAboutMissingMockScheduler} from 'shared/ReactFeatureFlags';
 import enqueueTask from 'shared/enqueueTask';
 import * as Scheduler from 'scheduler';
 
@@ -33,35 +31,27 @@ const [
   runEventsInBatch,
   /* eslint-enable no-unused-vars */
   flushPassiveEffects,
-  ReactActingRendererSigil,
+  IsThisRendererActing,
 ] = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
 
 const batchedUpdates = ReactDOM.unstable_batchedUpdates;
 
-const {ReactCurrentActingRendererSigil} = ReactSharedInternals;
+const {IsSomeRendererActing} = ReactSharedInternals;
 
 // this implementation should be exactly the same in
 // ReactTestUtilsAct.js, ReactTestRendererAct.js, createReactNoop.js
 
-let hasWarnedAboutMissingMockScheduler = false;
+const isSchedulerMocked =
+  typeof Scheduler.unstable_flushAllWithoutAsserting === 'function';
 const flushWork =
-  Scheduler.unstable_flushWithoutYielding ||
+  Scheduler.unstable_flushAllWithoutAsserting ||
   function() {
-    if (warnAboutMissingMockScheduler === true) {
-      if (hasWarnedAboutMissingMockScheduler === false) {
-        warningWithoutStack(
-          null,
-          'Starting from React v17, the "scheduler" module will need to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. To fix this, add the following ' +
-            "to the top of your tests, or in your framework's global config file -\n\n" +
-            'As an example, for jest - \n' +
-            "jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://fb.me/react-mock-scheduler',
-        );
-        hasWarnedAboutMissingMockScheduler = true;
-      }
+    let didFlushWork = false;
+    while (flushPassiveEffects()) {
+      didFlushWork = true;
     }
-    while (flushPassiveEffects()) {}
+
+    return didFlushWork;
   };
 
 function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
@@ -83,24 +73,36 @@ function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
 // so we can tell if any async act() calls try to run in parallel.
 
 let actingUpdatesScopeDepth = 0;
+let didWarnAboutUsingActInProd = false;
 
 function act(callback: () => Thenable) {
+  if (!__DEV__) {
+    if (didWarnAboutUsingActInProd === false) {
+      didWarnAboutUsingActInProd = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.error(
+        'act(...) is not supported in production builds of React, and might not behave as expected.',
+      );
+    }
+  }
   let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  let previousActingUpdatesSigil;
+  let previousIsSomeRendererActing;
+  let previousIsThisRendererActing;
   actingUpdatesScopeDepth++;
-  if (__DEV__) {
-    previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-    ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
-  }
+
+  previousIsSomeRendererActing = IsSomeRendererActing.current;
+  previousIsThisRendererActing = IsThisRendererActing.current;
+  IsSomeRendererActing.current = true;
+  IsThisRendererActing.current = true;
 
   function onDone() {
     actingUpdatesScopeDepth--;
+    IsSomeRendererActing.current = previousIsSomeRendererActing;
+    IsThisRendererActing.current = previousIsThisRendererActing;
     if (__DEV__) {
-      ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
       if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
         // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-        warningWithoutStack(
-          null,
+        console.error(
           'You seem to have overlapping act() calls, this is not supported. ' +
             'Be sure to await previous act() calls before making a new one. ',
         );
@@ -108,7 +110,15 @@ function act(callback: () => Thenable) {
     }
   }
 
-  const result = batchedUpdates(callback);
+  let result;
+  try {
+    result = batchedUpdates(callback);
+  } catch (error) {
+    // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
+    onDone();
+    throw error;
+  }
+
   if (
     result !== null &&
     typeof result === 'object' &&
@@ -124,8 +134,7 @@ function act(callback: () => Thenable) {
           .then(() => {})
           .then(() => {
             if (called === false) {
-              warningWithoutStack(
-                null,
+              console.error(
                 'You called act(async () => ...) without await. ' +
                   'This could lead to unexpected testing behaviour, interleaving multiple act ' +
                   'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -143,7 +152,11 @@ function act(callback: () => Thenable) {
         called = true;
         result.then(
           () => {
-            if (actingUpdatesScopeDepth > 1) {
+            if (
+              actingUpdatesScopeDepth > 1 ||
+              (isSchedulerMocked === true &&
+                previousIsSomeRendererActing === true)
+            ) {
               onDone();
               resolve();
               return;
@@ -168,17 +181,21 @@ function act(callback: () => Thenable) {
     };
   } else {
     if (__DEV__) {
-      warningWithoutStack(
-        result === undefined,
-        'The callback passed to act(...) function ' +
-          'must return undefined, or a Promise. You returned %s',
-        result,
-      );
+      if (result !== undefined) {
+        console.error(
+          'The callback passed to act(...) function ' +
+            'must return undefined, or a Promise. You returned %s',
+          result,
+        );
+      }
     }
 
     // flush effects until none remain, and cleanup
     try {
-      if (actingUpdatesScopeDepth === 1) {
+      if (
+        actingUpdatesScopeDepth === 1 &&
+        (isSchedulerMocked === false || previousIsSomeRendererActing === false)
+      ) {
         // we're about to exit the act() scope,
         // now's the time to flush effects
         flushWork();
@@ -193,8 +210,7 @@ function act(callback: () => Thenable) {
     return {
       then(resolve: () => void) {
         if (__DEV__) {
-          warningWithoutStack(
-            false,
+          console.error(
             'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
           );
         }
diff --git a/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js b/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js
index d53daa4eda107..26b8f728cd804 100644
--- a/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js
+++ b/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js
@@ -6,9 +6,9 @@
  */
 
 import ReactDOM from 'react-dom';
-import {setComponentTree} from 'events/EventPluginUtils';
-import ResponderEventPlugin from 'events/ResponderEventPlugin';
-import ResponderTouchHistoryStore from 'events/ResponderTouchHistoryStore';
+import {setComponentTree} from 'legacy-events/EventPluginUtils';
+import ResponderEventPlugin from 'legacy-events/ResponderEventPlugin';
+import ResponderTouchHistoryStore from 'legacy-events/ResponderTouchHistoryStore';
 
 // Inject react-dom's ComponentTree into this module.
 // Keep in sync with ReactDOM.js, ReactTestUtils.js, and ReactTestUtilsAct.js:
diff --git a/packages/react-events/README.md b/packages/react-events/README.md
deleted file mode 100644
index d7da96a7b7446..0000000000000
--- a/packages/react-events/README.md
+++ /dev/null
@@ -1,172 +0,0 @@
-# `react-events`
-
-*This package is experimental. It is intended for use with the experimental React
-events API that is not available in open source builds.*
-
-Event components do not render a host node. They listen to native browser events
-dispatched on the host node of their child and transform those events into
-high-level events for applications.
-
-The core API is documented below. Documentation for individual Event Components
-can be found [here](./docs).
-
-## EventComponent
-
-An Event Component is defined using `React.unstable_createEventComponent`:
-
-```js
-const EventComponent = React.unstable_createEventComponent(
-  responder: EventResponder,
-  displayName: string
-);
-```
-
-## EventResponder
-
-An Event Responder is defined using an object. Each responder can define DOM
-events to listen to, handle the synthetic responder events, dispatch custom
-events, and implement a state machine.
-
-```js
-// types
-type ResponderEventType =
-  | string
-  | {name: string, passive?: boolean};
-
-type ResponderEvent = {|
-  nativeEvent: any,
-  target: Element | Document,
-  type: string,
-  passive: boolean,
-  passiveSupported: boolean,
-|};
-
-type CustomEvent = {
-  type: string,
-  target: Element,
-  ...
-}
-```
-
-### createInitialState?: (props: null | Object) => Object
-
-The initial state of that the Event Component is created with.
-
-### onEvent?: (event: ResponderEvent, context: ResponderContext, props, state)
-
-Called during the bubble phase of the `targetEventTypes` dispatched on DOM
-elements within the Event Component.
-
-### onEventCapture?: (event: ResponderEvent, context: ResponderContext, props, state)
-
-Called during the capture phase of the `targetEventTypes` dispatched on DOM
-elements within the Event Component.
-
-### onMount?: (context: ResponderContext, props, state)
-
-Called after an Event Component in mounted.
-
-### onOwnershipChange?: (context: ResponderContext, props, state)
-
-Called when ownership is granted or terminated (either globally or for the responder) for an Event Component instance.
-
-### onRootEvent?: (event: ResponderEvent, context: ResponderContext, props, state)
-
-Called when any of the `rootEventTypes` are dispatched on the root of the app.
-
-### onUnmount?: (context: ResponderContext, props, state)
-
-Called before an Event Component in unmounted.
-
-### rootEventTypes?: Array<ResponderEventType>
-
-Defines the DOM events to listen to on the root of the app.
-
-### stopLocalPropagation: boolean
-
-Defines whether or not synthetic events propagate to other Event Components *of
-the same type*. This has no effect on propagation of the source DOM events or
-the synthetic events dispatched to Event Components of different types.
-
-### targetEventTypes?: Array<ResponderEventType>
-
-Defines the DOM events to listen to within the Event Component subtree.
-
-
-## ResponderContext
-
-The Event Responder Context is exposed via the `context` argument for certain methods
-on the `EventResponder` object.
-
-### addRootEventTypes(eventTypes: Array<ResponderEventType>)
-
-This can be used to dynamically listen to events on the root of the app only
-when it is necessary to do so.
-
-### clearTimeout(id: Symbol): void
-
-Clear a timeout defined using `context.setTimeout`.
-
-### dispatchEvent(event: CustomEvent, listener, { discrete: boolean })
-
-Dispatches a custom synthetic event. The `type` and `target` are required
-fields, but any other fields can be defined on the `event` that will be passed
-to the `listener`. For example:
-
-```js
-const event = { type: 'press', target, pointerType, x, y };
-context.dispatchEvent(event, props.onPress, { discrete: true });
-```
-
-### getFocusableElementsInScope(): Array<Element>
-
-Returns every DOM element that can be focused within the scope of the Event
-Component instance.
-
-### hasOwnership(): boolean
-
-Returns `true` if the instance has taken ownership of the responder.
-
-### isPositionWithinTouchHitTarget(x: number, y: number): boolean
-
-Returns `true` if the global coordinates lie within the TouchHitTarget.
-
-### isTargetWithinElement(target: Element, element: Element): boolean
-
-Returns `true` if `target` is a child of `element`.
-
-### isTargetWithinEventComponent(target: Element): boolean
-
-Returns `true` is the target element is within the subtree of the Event Component instance.
-
-### isTargetWithinEventResponderScope(target: Element): boolean
-
-Returns `true` is the target element is within the current Event Component instance's responder. If the target element
-is within the scope of the same responder, but owned by another Event Component instance, this will return `false`.
-
-### releaseOwnership(): boolean
-
-Returns `true` if the instance released ownership of the Event Component instance.
-
-### removeRootEventTypes(eventTypes: Array<ResponderEventType>)
-
-Remove the root event types added with `addRootEventTypes`.
-
-### requestGlobalOwnership(): boolean
-
-The current Event Component instance can request global ownership of the event system. When an Event Component instance
-has global ownership, only that instance and its responder are active. To release ownership to other event responders,
-either `releaseOwnership()` must be called or the Event Component instance that had global ownership must be
-unmounted. Calling `requestGlobalOwnership` also returns `true`/`false` if the request was successful.
-
-### requestResponderOwnership(): boolean
-
-The current Event Component instance can request responder ownership within the event system. When an Event Component
-instance has responder ownership, all other Event Component instances that have the same responder as the Event Component
-instance will no longer be active. To release ownership to other event responders, either `releaseOwnership()` must be
-called or the Event Component instance that had global ownership must be unmounted. Calling `requestResponderOwnership`
-also returns `true`/`false` if the request was successful.
-
-### setTimeout(func: () => void, delay: number): Symbol
-
-This can be used to dispatch async events, e.g., those that fire after a delay.
diff --git a/packages/react-events/docs/FocusScope.md b/packages/react-events/docs/FocusScope.md
deleted file mode 100644
index 996a4e3de5e47..0000000000000
--- a/packages/react-events/docs/FocusScope.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# FocusScope
-
-The `FocusScope` module can be used to manage focus within its subtree.
-
-```js
-// Example
-const Modal = () => (
-  <FocusScope
-    autoFocus={true}     
-    contain={true}
-    restoreFocus={true}
-  >
-    <h1>Focus contained within modal</h1>
-    <input placeholder="Focusable input" />
-    <div role="button" tabIndex={0}>Focusable element</div>
-    <input placeholder="Non-focusable input" tabIndex={-1} />
-    <Press onPress={onPressClose}>
-      <div role="button" tabIndex={0}>Close</div>
-    </Press>
-  </FocusScope>
-);
-```
-
-## Props
-
-### autoFocus: boolean = false
-
-Automatically moves focus to the first focusable element within scope.
-
-### contain: boolean = false
-
-Contain focus within the subtree of the `FocusScope` instance.
-
-### restoreFocus: boolean = false
-
-Automatically restores focus to element that was last focused before focus moved
-within the scope.
diff --git a/packages/react-events/docs/Hover.md b/packages/react-events/docs/Hover.md
deleted file mode 100644
index 1f68edf11bb28..0000000000000
--- a/packages/react-events/docs/Hover.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Hover
-
-The `Hover` module responds to hover events on the element it wraps. Hover
-events are only dispatched for `mouse` and `pen` pointer types. Hover begins
-when the pointer enters the element's bounds and ends when the pointer leaves.
-
-Hover events do not propagate between `Hover` event responders.
-
-```js
-// Example
-const Link = (props) => (
-  const [ hovered, setHovered ] = useState(false);
-  return (
-    <Hover onHoverChange={setHovered}>
-      <a
-        {...props}
-        href={props.href}
-        style={{
-          ...props.style,
-          textDecoration: hovered ? 'underline': 'none'
-        }}
-      />
-    </Hover>
-  );
-);
-```
-
-## Types
-
-```js
-type HoverEvent = {
-  pointerType: 'mouse' | 'pen',
-  target: Element,
-  type: 'hoverstart' | 'hoverend' | 'hovermove' | 'hoverchange'
-}
-```
-
-## Props
-
-### delayHoverEnd: number
-
-The duration of the delay between when hover ends and when `onHoverEnd` is
-called.
-
-### delayHoverStart: number
-
-The duration of the delay between when hover starts and when `onHoverStart` is
-called.
-
-### disabled: boolean
-
-Disables all `Hover` events.
-
-### onHoverChange: boolean => void
-
-Called when the element changes hover state (i.e., after `onHoverStart` and
-`onHoverEnd`).
-
-### onHoverEnd: (e: HoverEvent) => void
-
-Called once the element is no longer hovered. It will be cancelled if the
-pointer leaves the element before the `delayHoverStart` threshold is exceeded.
-
-### onHoverMove: (e: HoverEvent) => void
-
-Called when the pointer moves within the hit bounds of the element. `onHoverMove` is
-called immediately and doesn't wait for delayed `onHoverStart`.
-
-### onHoverStart: (e: HoverEvent) => void
-
-Called once the element is hovered. It will not be called if the pointer leaves
-the element before the `delayHoverStart` threshold is exceeded. And it will not
-be called more than once before `onHoverEnd` is called.
-
-### preventDefault: boolean = true
-
-Whether to `preventDefault()` native events.
diff --git a/packages/react-events/docs/Press.md b/packages/react-events/docs/Press.md
deleted file mode 100644
index cc7881342ca3e..0000000000000
--- a/packages/react-events/docs/Press.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# Press
-
-The `Press` module responds to press events on the element it wraps. Press
-events are dispatched for `mouse`, `pen`, `touch`, and `keyboard` pointer types.
-Press events are only dispatched for keyboards when pressing the Enter or
-Spacebar keys. If neither `onPress` nor `onLongPress` are called, this signifies
-that the press ended outside of the element hit bounds (i.e., the user aborted
-the press).
-
-Press events do not propagate between `Press` event responders.
-
-```js
-// Example
-const Button = (props) => (
-  const [ pressed, setPressed ] = useState(false);
-  return (
-    <Press
-      onPress={props.onPress}
-      onPressChange={setPressed}
-      onLongPress={props.onLongPress}
-    >
-      <div
-        {...props}
-        role="button"
-        tabIndex={0}
-        style={
-          ...buttonStyles,
-          ...(pressed && pressedStyles)
-        }}
-      />
-    </Press>
-  );
-);
-```
-
-## Types
-
-```js
-type PressEvent = {
-  pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard',
-  target: Element,
-  type: 'press' | 'pressstart' | 'pressend' | 'presschange' | 'pressmove' | 'longpress' | 'longpresschange'
-}
-
-type PressOffset = {
-  top?: number,
-  right?: number,
-  bottom?: number,
-  right?: number
-};
-```
-
-## Props
-
-### delayLongPress: number = 500ms
-
-The duration of a press before `onLongPress` and `onLongPressChange` are called.
-
-### delayPressEnd: number
-
-The duration of the delay between when the press ends and when `onPressEnd` is
-called.
-
-### delayPressStart: number
-
-The duration of a delay between when the press starts and when `onPressStart` is
-called. This delay is cut short (and `onPressStart` is called) if the press is
-released before the threshold is exceeded.
-
-### disabled: boolean = false
-
-Disables all `Press` events.
-
-### onLongPress: (e: PressEvent) => void
-
-Called once the element has been pressed for the length of `delayLongPress`. If
-the press point moves more than 10px `onLongPress` is cancelled.
-
-### onLongPressChange: boolean => void
-
-Called when the element changes long-press state.
-
-### onLongPressShouldCancelPress: () => boolean
-
-Determines whether calling `onPress` should be cancelled if `onLongPress` or
-`onLongPressChange` have already been called. Default is `false`.
-
-### onPress: (e: PressEvent) => void
-
-Called immediately after a press is released, unless either 1) the press is
-released outside the hit bounds of the element (accounting for
-`pressRetentionOffset` and `TouchHitTarget`), or 2) the press was a long press,
-and `onLongPress` or `onLongPressChange` props are provided, and
-`onLongPressCancelsPress()` is `true`.
-
-### onPressChange: boolean => void
-
-Called when the element changes press state (i.e., after `onPressStart` and
-`onPressEnd`).
-
-### onPressEnd: (e: PressEvent) => void
-
-Called once the element is no longer pressed (because the press was released,
-cancelled, or moved beyond the hit bounds). If the press starts again before the
-`delayPressEnd` threshold is exceeded then the delay is reset to prevent
-`onPressEnd` being called during a press.
-
-### onPressMove: (e: PressEvent) => void
-
-Called when a press moves within the hit bounds of the element. `onPressMove` is
-called immediately and doesn't wait for delayed `onPressStart`. Never called for
-keyboard-initiated press events.  
-
-### onPressStart: (e: PressEvent) => void
-
-Called once the element is pressed down. If the press is released before the
-`delayPressStart` threshold is exceeded then the delay is cut short and
-`onPressStart` is called immediately.
-
-### pressRetentionOffset: PressOffset
-
-Defines how far the pointer (while held down) may move outside the bounds of the
-element before it is deactivated. Once deactivated, the pointer (still held
-down) can be moved back within the bounds of the element to reactivate it.
-Ensure you pass in a constant to reduce memory allocations. Default is `20` for
-each offset.
-
-### preventDefault: boolean = true
-
-Whether to `preventDefault()` native events. Native behavior is prevented by
-default. If an anchor is the child of `Press`, internal and external navigation
-should be performed in `onPress`/`onLongPress`. To rely on native behavior
-instead, set `preventDefault` to `false`, but be aware that native behavior will
-take place immediately after interaction without respect for delays or long
-press.
diff --git a/packages/react-events/npm/drag.js b/packages/react-events/npm/drag.js
deleted file mode 100644
index 4b8838b9658c8..0000000000000
--- a/packages/react-events/npm/drag.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-drag.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-drag.development.js');
-}
diff --git a/packages/react-events/npm/focus-scope.js b/packages/react-events/npm/focus-scope.js
deleted file mode 100644
index 0608f1826aa62..0000000000000
--- a/packages/react-events/npm/focus-scope.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-focus-scope.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-focus-scope.development.js');
-}
diff --git a/packages/react-events/npm/focus.js b/packages/react-events/npm/focus.js
deleted file mode 100644
index 06b656a761ed3..0000000000000
--- a/packages/react-events/npm/focus.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-focus.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-focus.development.js');
-}
diff --git a/packages/react-events/npm/hover.js b/packages/react-events/npm/hover.js
deleted file mode 100644
index 1000d87449067..0000000000000
--- a/packages/react-events/npm/hover.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-hover.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-hover.development.js');
-}
diff --git a/packages/react-events/npm/index.js b/packages/react-events/npm/index.js
deleted file mode 100644
index 00bc7ad72acc6..0000000000000
--- a/packages/react-events/npm/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events.development.js');
-}
diff --git a/packages/react-events/npm/press.js b/packages/react-events/npm/press.js
deleted file mode 100644
index deaba326bba07..0000000000000
--- a/packages/react-events/npm/press.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-press.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-press.development.js');
-}
diff --git a/packages/react-events/npm/swipe.js b/packages/react-events/npm/swipe.js
deleted file mode 100644
index aa2b1f2fe13f9..0000000000000
--- a/packages/react-events/npm/swipe.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-events-swipe.production.min.js');
-} else {
-  module.exports = require('./cjs/react-events-swipe.development.js');
-}
diff --git a/packages/react-events/press.js b/packages/react-events/press.js
deleted file mode 100644
index 2add5ba8ed9d5..0000000000000
--- a/packages/react-events/press.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-'use strict';
-
-const Press = require('./src/Press');
-
-module.exports = Press.default || Press;
diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js
deleted file mode 100644
index f4521c8f64929..0000000000000
--- a/packages/react-events/src/Focus.js
+++ /dev/null
@@ -1,332 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-
-import React from 'react';
-
-type FocusProps = {
-  disabled: boolean,
-  onBlur: (e: FocusEvent) => void,
-  onFocus: (e: FocusEvent) => void,
-  onFocusChange: boolean => void,
-  onFocusVisibleChange: boolean => void,
-};
-
-type FocusState = {
-  focusTarget: null | Element | Document,
-  isFocused: boolean,
-  isLocalFocusVisible: boolean,
-  pointerType: PointerType,
-};
-
-type PointerType = '' | 'mouse' | 'keyboard' | 'pen' | 'touch';
-type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
-
-type FocusEvent = {|
-  target: Element | Document,
-  type: FocusEventType,
-  pointerType: PointerType,
-  timeStamp: number,
-|};
-
-const targetEventTypes = [
-  {name: 'focus', passive: true},
-  {name: 'blur', passive: true},
-];
-
-const rootEventTypes = [
-  'keydown',
-  'keypress',
-  'keyup',
-  'pointermove',
-  'pointerdown',
-  'pointerup',
-];
-
-// If PointerEvents is not supported (e.g., Safari), also listen to touch and mouse events.
-if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
-  rootEventTypes.push(
-    'mousemove',
-    'mousedown',
-    'mouseup',
-    'touchmove',
-    'touchstart',
-    'touchend',
-  );
-}
-
-function createFocusEvent(
-  context: ReactResponderContext,
-  type: FocusEventType,
-  target: Element | Document,
-  pointerType: PointerType,
-): FocusEvent {
-  return {
-    target,
-    type,
-    pointerType,
-    timeStamp: context.getTimeStamp(),
-  };
-}
-
-function dispatchFocusInEvents(
-  context: ReactResponderContext,
-  props: FocusProps,
-  state: FocusState,
-) {
-  const pointerType = state.pointerType;
-  const target = ((state.focusTarget: any): Element | Document);
-  if (props.onFocus) {
-    const syntheticEvent = createFocusEvent(
-      context,
-      'focus',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, props.onFocus, true);
-  }
-  if (props.onFocusChange) {
-    const listener = () => {
-      props.onFocusChange(true);
-    };
-    const syntheticEvent = createFocusEvent(
-      context,
-      'focuschange',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, listener, true);
-  }
-  if (props.onFocusVisibleChange && state.isLocalFocusVisible) {
-    const listener = () => {
-      props.onFocusVisibleChange(true);
-    };
-    const syntheticEvent = createFocusEvent(
-      context,
-      'focusvisiblechange',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, listener, true);
-  }
-}
-
-function dispatchFocusOutEvents(
-  context: ReactResponderContext,
-  props: FocusProps,
-  state: FocusState,
-) {
-  const pointerType = state.pointerType;
-  const target = ((state.focusTarget: any): Element | Document);
-  if (props.onBlur) {
-    const syntheticEvent = createFocusEvent(
-      context,
-      'blur',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, props.onBlur, true);
-  }
-  if (props.onFocusChange) {
-    const listener = () => {
-      props.onFocusChange(false);
-    };
-    const syntheticEvent = createFocusEvent(
-      context,
-      'focuschange',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, listener, true);
-  }
-  dispatchFocusVisibleOutEvent(context, props, state);
-}
-
-function dispatchFocusVisibleOutEvent(
-  context: ReactResponderContext,
-  props: FocusProps,
-  state: FocusState,
-) {
-  const pointerType = state.pointerType;
-  const target = ((state.focusTarget: any): Element | Document);
-  if (props.onFocusVisibleChange && state.isLocalFocusVisible) {
-    const listener = () => {
-      props.onFocusVisibleChange(false);
-    };
-    const syntheticEvent = createFocusEvent(
-      context,
-      'focusvisiblechange',
-      target,
-      pointerType,
-    );
-    context.dispatchEvent(syntheticEvent, listener, true);
-    state.isLocalFocusVisible = false;
-  }
-}
-
-function unmountResponder(
-  context: ReactResponderContext,
-  props: FocusProps,
-  state: FocusState,
-): void {
-  if (state.isFocused) {
-    dispatchFocusOutEvents(context, props, state);
-  }
-}
-
-function handleRootPointerEvent(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
-  props: FocusProps,
-  state: FocusState,
-): void {
-  const {type, target} = event;
-  // Ignore a Safari quirks where 'mousemove' is dispatched on the 'html'
-  // element when the window blurs.
-  if (type === 'mousemove' && target.nodeName === 'HTML') {
-    return;
-  }
-
-  isGlobalFocusVisible = false;
-
-  // Focus should stop being visible if a pointer is used on the element
-  // after it was focused using a keyboard.
-  if (
-    state.focusTarget === context.getEventCurrentTarget(event) &&
-    (type === 'mousedown' || type === 'touchstart' || type === 'pointerdown')
-  ) {
-    dispatchFocusVisibleOutEvent(context, props, state);
-  }
-}
-
-let isGlobalFocusVisible = true;
-
-const FocusResponder = {
-  targetEventTypes,
-  rootEventTypes,
-  createInitialState(): FocusState {
-    return {
-      focusTarget: null,
-      isFocused: false,
-      isLocalFocusVisible: false,
-      pointerType: '',
-    };
-  },
-  allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
-  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: FocusProps,
-    state: FocusState,
-  ): void {
-    const {type, target} = event;
-
-    if (props.disabled) {
-      if (state.isFocused) {
-        dispatchFocusOutEvents(context, props, state);
-        state.isFocused = false;
-        state.focusTarget = null;
-      }
-      return;
-    }
-
-    switch (type) {
-      case 'focus': {
-        if (!state.isFocused) {
-          // Limit focus events to the direct child of the event component.
-          // Browser focus is not expected to bubble.
-          state.focusTarget = context.getEventCurrentTarget(event);
-          if (state.focusTarget === target) {
-            state.isFocused = true;
-            state.isLocalFocusVisible = isGlobalFocusVisible;
-            dispatchFocusInEvents(context, props, state);
-          }
-        }
-        break;
-      }
-      case 'blur': {
-        if (state.isFocused) {
-          dispatchFocusOutEvents(context, props, state);
-          state.isFocused = false;
-          state.focusTarget = null;
-        }
-        break;
-      }
-    }
-  },
-  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: FocusProps,
-    state: FocusState,
-  ): void {
-    const {type} = event;
-
-    switch (type) {
-      case 'mousemove':
-      case 'mousedown':
-      case 'mouseup': {
-        state.pointerType = 'mouse';
-        handleRootPointerEvent(event, context, props, state);
-        break;
-      }
-      case 'pointermove':
-      case 'pointerdown':
-      case 'pointerup': {
-        // $FlowFixMe: Flow doesn't know about PointerEvents
-        const nativeEvent = ((event.nativeEvent: any): PointerEvent);
-        state.pointerType = nativeEvent.pointerType;
-        handleRootPointerEvent(event, context, props, state);
-        break;
-      }
-      case 'touchmove':
-      case 'touchstart':
-      case 'touchend': {
-        state.pointerType = 'touch';
-        handleRootPointerEvent(event, context, props, state);
-        break;
-      }
-
-      case 'keydown':
-      case 'keypress':
-      case 'keyup': {
-        const nativeEvent = event.nativeEvent;
-        if (
-          nativeEvent.key === 'Tab' &&
-          !(nativeEvent.metaKey || nativeEvent.altKey || nativeEvent.ctrlKey)
-        ) {
-          state.pointerType = 'keyboard';
-          isGlobalFocusVisible = true;
-        }
-        break;
-      }
-    }
-  },
-  onUnmount(
-    context: ReactResponderContext,
-    props: FocusProps,
-    state: FocusState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-  onOwnershipChange(
-    context: ReactResponderContext,
-    props: FocusProps,
-    state: FocusState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-};
-
-export default React.unstable_createEventComponent(FocusResponder, 'Focus');
diff --git a/packages/react-events/src/FocusScope.js b/packages/react-events/src/FocusScope.js
deleted file mode 100644
index 7108c6e612cff..0000000000000
--- a/packages/react-events/src/FocusScope.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-
-import React from 'react';
-
-type FocusScopeProps = {
-  autoFocus: Boolean,
-  contain: Boolean,
-  restoreFocus: Boolean,
-};
-
-type FocusScopeState = {
-  nodeToRestore: null | HTMLElement,
-  currentFocusedNode: null | HTMLElement,
-};
-
-const targetEventTypes = [{name: 'keydown', passive: false}];
-const rootEventTypes = [{name: 'focus', passive: true}];
-
-function focusElement(element: ?HTMLElement) {
-  if (element != null) {
-    try {
-      element.focus();
-    } catch (err) {}
-  }
-}
-
-function getFirstFocusableElement(
-  context: ReactResponderContext,
-  state: FocusScopeState,
-): ?HTMLElement {
-  const elements = context.getFocusableElementsInScope();
-  if (elements.length > 0) {
-    return elements[0];
-  }
-}
-
-const FocusScopeResponder = {
-  targetEventTypes,
-  rootEventTypes,
-  createInitialState(): FocusScopeState {
-    return {
-      nodeToRestore: null,
-      currentFocusedNode: null,
-    };
-  },
-  allowMultipleHostChildren: true,
-  stopLocalPropagation: false,
-  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: FocusScopeProps,
-    state: FocusScopeState,
-  ) {
-    const {type, nativeEvent} = event;
-    const hasOwnership =
-      context.hasOwnership() || context.requestResponderOwnership();
-
-    if (!hasOwnership) {
-      return;
-    }
-    if (type === 'keydown' && nativeEvent.key === 'Tab') {
-      const focusedElement = context.getActiveDocument().activeElement;
-      if (
-        focusedElement !== null &&
-        context.isTargetWithinEventComponent(focusedElement)
-      ) {
-        const {altkey, ctrlKey, metaKey, shiftKey} = (nativeEvent: any);
-        // Skip if any of these keys are being pressed
-        if (altkey || ctrlKey || metaKey) {
-          return;
-        }
-        const elements = context.getFocusableElementsInScope();
-        const position = elements.indexOf(focusedElement);
-        const lastPosition = elements.length - 1;
-        let nextElement = null;
-
-        if (shiftKey) {
-          if (position === 0) {
-            if (props.contain) {
-              nextElement = elements[lastPosition];
-            } else {
-              // Out of bounds
-              context.releaseOwnership();
-              return;
-            }
-          } else {
-            nextElement = elements[position - 1];
-          }
-        } else {
-          if (position === lastPosition) {
-            if (props.contain) {
-              nextElement = elements[0];
-            } else {
-              // Out of bounds
-              context.releaseOwnership();
-              return;
-            }
-          } else {
-            nextElement = elements[position + 1];
-          }
-        }
-        // If this element is possibly inside the scope of another
-        // FocusScope responder or is out of bounds, then we release ownership.
-        if (nextElement !== null) {
-          if (!context.isTargetWithinEventResponderScope(nextElement)) {
-            context.releaseOwnership();
-          }
-          focusElement(nextElement);
-          state.currentFocusedNode = nextElement;
-          ((nativeEvent: any): KeyboardEvent).preventDefault();
-        }
-      }
-    }
-  },
-  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: FocusScopeProps,
-    state: FocusScopeState,
-  ) {
-    const {target} = event;
-
-    // Handle global focus containment
-    if (props.contain) {
-      if (!context.isTargetWithinEventComponent(target)) {
-        const currentFocusedNode = state.currentFocusedNode;
-        if (currentFocusedNode !== null) {
-          focusElement(currentFocusedNode);
-        } else if (props.autoFocus) {
-          const firstElement = getFirstFocusableElement(context, state);
-          focusElement(firstElement);
-        }
-      }
-    }
-  },
-  onMount(
-    context: ReactResponderContext,
-    props: FocusScopeProps,
-    state: FocusScopeState,
-  ): void {
-    if (props.restoreFocus) {
-      state.nodeToRestore = context.getActiveDocument().activeElement;
-    }
-    if (props.autoFocus) {
-      const firstElement = getFirstFocusableElement(context, state);
-      focusElement(firstElement);
-    }
-  },
-  onUnmount(
-    context: ReactResponderContext,
-    props: FocusScopeProps,
-    state: FocusScopeState,
-  ): void {
-    if (
-      props.restoreFocus &&
-      state.nodeToRestore !== null &&
-      context.hasOwnership()
-    ) {
-      focusElement(state.nodeToRestore);
-    }
-  },
-  onOwnershipChange(
-    context: ReactResponderContext,
-    props: FocusScopeProps,
-    state: FocusScopeState,
-  ): void {
-    if (!context.hasOwnership()) {
-      state.currentFocusedNode = null;
-    }
-  },
-};
-
-export default React.unstable_createEventComponent(
-  FocusScopeResponder,
-  'FocusScope',
-);
diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js
deleted file mode 100644
index 2b92c4342572f..0000000000000
--- a/packages/react-events/src/Hover.js
+++ /dev/null
@@ -1,369 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-
-import React from 'react';
-import {isEventPositionWithinTouchHitTarget} from './utils';
-
-type HoverProps = {
-  disabled: boolean,
-  delayHoverEnd: number,
-  delayHoverStart: number,
-  onHoverChange: boolean => void,
-  onHoverEnd: (e: HoverEvent) => void,
-  onHoverMove: (e: HoverEvent) => void,
-  onHoverStart: (e: HoverEvent) => void,
-  preventDefault: boolean,
-};
-
-type HoverState = {
-  hoverTarget: null | Element | Document,
-  isActiveHovered: boolean,
-  isHovered: boolean,
-  isOverTouchHitTarget: boolean,
-  isTouched: boolean,
-  hoverStartTimeout: null | Symbol,
-  hoverEndTimeout: null | Symbol,
-  ignoreEmulatedMouseEvents: boolean,
-};
-
-type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
-
-type HoverEvent = {|
-  target: Element | Document,
-  type: HoverEventType,
-  timeStamp: number,
-|};
-
-const DEFAULT_HOVER_END_DELAY_MS = 0;
-const DEFAULT_HOVER_START_DELAY_MS = 0;
-
-const targetEventTypes = [
-  'pointerover',
-  'pointermove',
-  'pointerout',
-  'pointercancel',
-];
-
-// If PointerEvents is not supported (e.g., Safari), also listen to touch and mouse events.
-if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
-  targetEventTypes.push('touchstart', 'mouseover', 'mousemove', 'mouseout');
-}
-
-function createHoverEvent(
-  context: ReactResponderContext,
-  type: HoverEventType,
-  target: Element | Document,
-): HoverEvent {
-  return {
-    target,
-    type,
-    timeStamp: context.getTimeStamp(),
-  };
-}
-
-function dispatchHoverChangeEvent(
-  context: ReactResponderContext,
-  props: HoverProps,
-  state: HoverState,
-): void {
-  const bool = state.isActiveHovered;
-  const listener = () => {
-    props.onHoverChange(bool);
-  };
-  const syntheticEvent = createHoverEvent(
-    context,
-    'hoverchange',
-    ((state.hoverTarget: any): Element | Document),
-  );
-  context.dispatchEvent(syntheticEvent, listener, true);
-}
-
-function dispatchHoverStartEvents(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
-  props: HoverProps,
-  state: HoverState,
-): void {
-  const target = state.hoverTarget;
-  if (event !== null) {
-    const {nativeEvent} = event;
-    if (
-      context.isTargetWithinEventResponderScope(
-        (nativeEvent: any).relatedTarget,
-      )
-    ) {
-      return;
-    }
-  }
-
-  state.isHovered = true;
-
-  if (state.hoverEndTimeout !== null) {
-    context.clearTimeout(state.hoverEndTimeout);
-    state.hoverEndTimeout = null;
-  }
-
-  const activate = () => {
-    state.isActiveHovered = true;
-
-    if (props.onHoverStart) {
-      const syntheticEvent = createHoverEvent(
-        context,
-        'hoverstart',
-        ((target: any): Element | Document),
-      );
-      context.dispatchEvent(syntheticEvent, props.onHoverStart, true);
-    }
-    if (props.onHoverChange) {
-      dispatchHoverChangeEvent(context, props, state);
-    }
-  };
-
-  if (!state.isActiveHovered) {
-    const delayHoverStart = calculateDelayMS(
-      props.delayHoverStart,
-      0,
-      DEFAULT_HOVER_START_DELAY_MS,
-    );
-    if (delayHoverStart > 0) {
-      state.hoverStartTimeout = context.setTimeout(() => {
-        state.hoverStartTimeout = null;
-        activate();
-      }, delayHoverStart);
-    } else {
-      activate();
-    }
-  }
-}
-
-function dispatchHoverEndEvents(
-  event: null | ReactResponderEvent,
-  context: ReactResponderContext,
-  props: HoverProps,
-  state: HoverState,
-) {
-  const target = state.hoverTarget;
-  if (event !== null) {
-    const {nativeEvent} = event;
-    if (
-      context.isTargetWithinEventResponderScope(
-        (nativeEvent: any).relatedTarget,
-      )
-    ) {
-      return;
-    }
-  }
-
-  state.isHovered = false;
-
-  if (state.hoverStartTimeout !== null) {
-    context.clearTimeout(state.hoverStartTimeout);
-    state.hoverStartTimeout = null;
-  }
-
-  const deactivate = () => {
-    state.isActiveHovered = false;
-
-    if (props.onHoverEnd) {
-      const syntheticEvent = createHoverEvent(
-        context,
-        'hoverend',
-        ((target: any): Element | Document),
-      );
-      context.dispatchEvent(syntheticEvent, props.onHoverEnd, true);
-    }
-    if (props.onHoverChange) {
-      dispatchHoverChangeEvent(context, props, state);
-    }
-
-    state.isOverTouchHitTarget = false;
-    state.hoverTarget = null;
-    state.ignoreEmulatedMouseEvents = false;
-    state.isTouched = false;
-  };
-
-  if (state.isActiveHovered) {
-    const delayHoverEnd = calculateDelayMS(
-      props.delayHoverEnd,
-      0,
-      DEFAULT_HOVER_END_DELAY_MS,
-    );
-    if (delayHoverEnd > 0) {
-      state.hoverEndTimeout = context.setTimeout(() => {
-        deactivate();
-      }, delayHoverEnd);
-    } else {
-      deactivate();
-    }
-  }
-}
-
-function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
-  const maybeNumber = delay == null ? null : delay;
-  return Math.max(min, maybeNumber != null ? maybeNumber : fallback);
-}
-
-function unmountResponder(
-  context: ReactResponderContext,
-  props: HoverProps,
-  state: HoverState,
-): void {
-  if (state.isHovered) {
-    dispatchHoverEndEvents(null, context, props, state);
-  }
-}
-
-function isEmulatedMouseEvent(event, state) {
-  const {type} = event;
-  return (
-    state.ignoreEmulatedMouseEvents &&
-    (type === 'mousemove' || type === 'mouseover' || type === 'mouseout')
-  );
-}
-
-const HoverResponder = {
-  targetEventTypes,
-  createInitialState() {
-    return {
-      isActiveHovered: false,
-      isHovered: false,
-      isOverTouchHitTarget: false,
-      isTouched: false,
-      hoverStartTimeout: null,
-      hoverEndTimeout: null,
-      ignoreEmulatedMouseEvents: false,
-    };
-  },
-  allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
-  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: HoverProps,
-    state: HoverState,
-  ): void {
-    const {type} = event;
-
-    if (props.disabled) {
-      if (state.isHovered) {
-        dispatchHoverEndEvents(event, context, props, state);
-        state.ignoreEmulatedMouseEvents = false;
-      }
-      if (state.isTouched) {
-        state.isTouched = false;
-      }
-      return;
-    }
-    const pointerType = context.getEventPointerType(event);
-
-    switch (type) {
-      // START
-      case 'pointerover':
-      case 'mouseover':
-      case 'touchstart': {
-        if (!state.isHovered) {
-          // Prevent hover events for touch
-          if (state.isTouched || pointerType === 'touch') {
-            state.isTouched = true;
-            return;
-          }
-
-          // Prevent hover events for emulated events
-          if (isEmulatedMouseEvent(event, state)) {
-            return;
-          }
-
-          if (isEventPositionWithinTouchHitTarget(event, context)) {
-            state.isOverTouchHitTarget = true;
-            return;
-          }
-          state.hoverTarget = context.getEventCurrentTarget(event);
-          state.ignoreEmulatedMouseEvents = true;
-          dispatchHoverStartEvents(event, context, props, state);
-        }
-        return;
-      }
-
-      // MOVE
-      case 'pointermove':
-      case 'mousemove': {
-        if (state.isHovered && !isEmulatedMouseEvent(event, state)) {
-          if (state.isHovered) {
-            if (state.isOverTouchHitTarget) {
-              // If we were moving over the TouchHitTarget and have now moved
-              // over the Responder target
-              if (!isEventPositionWithinTouchHitTarget(event, context)) {
-                dispatchHoverStartEvents(event, context, props, state);
-                state.isOverTouchHitTarget = false;
-              }
-            } else {
-              // If we were moving over the Responder target and have now moved
-              // over the TouchHitTarget
-              if (isEventPositionWithinTouchHitTarget(event, context)) {
-                dispatchHoverEndEvents(event, context, props, state);
-                state.isOverTouchHitTarget = true;
-              } else {
-                if (props.onHoverMove && state.hoverTarget !== null) {
-                  const syntheticEvent = createHoverEvent(
-                    context,
-                    'hovermove',
-                    state.hoverTarget,
-                  );
-                  context.dispatchEvent(
-                    syntheticEvent,
-                    props.onHoverMove,
-                    true,
-                  );
-                }
-              }
-            }
-          }
-        }
-        return;
-      }
-
-      // END
-      case 'pointerout':
-      case 'pointercancel':
-      case 'mouseout':
-      case 'touchcancel':
-      case 'touchend': {
-        if (state.isHovered) {
-          dispatchHoverEndEvents(event, context, props, state);
-          state.ignoreEmulatedMouseEvents = false;
-        }
-        if (state.isTouched) {
-          state.isTouched = false;
-        }
-        return;
-      }
-    }
-  },
-  onUnmount(
-    context: ReactResponderContext,
-    props: HoverProps,
-    state: HoverState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-  onOwnershipChange(
-    context: ReactResponderContext,
-    props: HoverProps,
-    state: HoverState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-};
-
-export default React.unstable_createEventComponent(HoverResponder, 'Hover');
diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js
deleted file mode 100644
index 1a3e0318a4757..0000000000000
--- a/packages/react-events/src/Press.js
+++ /dev/null
@@ -1,946 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-
-import React from 'react';
-import {isEventPositionWithinTouchHitTarget} from './utils';
-
-type PressProps = {
-  disabled: boolean,
-  delayLongPress: number,
-  delayPressEnd: number,
-  delayPressStart: number,
-  onContextMenu: (e: PressEvent) => void,
-  onLongPress: (e: PressEvent) => void,
-  onLongPressChange: boolean => void,
-  onLongPressShouldCancelPress: () => boolean,
-  onPress: (e: PressEvent) => void,
-  onPressChange: boolean => void,
-  onPressEnd: (e: PressEvent) => void,
-  onPressMove: (e: PressEvent) => void,
-  onPressStart: (e: PressEvent) => void,
-  pressRetentionOffset: {
-    top: number,
-    right: number,
-    bottom: number,
-    left: number,
-  },
-  preventDefault: boolean,
-};
-
-type PointerType = '' | 'mouse' | 'keyboard' | 'pen' | 'touch';
-
-type PressState = {
-  activationPosition: null | $ReadOnly<{|
-    pageX: number,
-    pageY: number,
-  |}>,
-  addedRootEvents: boolean,
-  isActivePressed: boolean,
-  isActivePressStart: boolean,
-  isLongPressed: boolean,
-  isPressed: boolean,
-  isPressWithinResponderRegion: boolean,
-  longPressTimeout: null | Symbol,
-  pointerType: PointerType,
-  pressTarget: null | Element,
-  pressEndTimeout: null | Symbol,
-  pressStartTimeout: null | Symbol,
-  responderRegionOnActivation: null | $ReadOnly<{|
-    bottom: number,
-    left: number,
-    right: number,
-    top: number,
-  |}>,
-  responderRegionOnDeactivation: null | $ReadOnly<{|
-    bottom: number,
-    left: number,
-    right: number,
-    top: number,
-  |}>,
-  ignoreEmulatedMouseEvents: boolean,
-  allowPressReentry: boolean,
-};
-
-type PressEventType =
-  | 'press'
-  | 'pressmove'
-  | 'pressstart'
-  | 'pressend'
-  | 'presschange'
-  | 'longpress'
-  | 'longpresschange'
-  | 'contextmenu';
-
-type PressEvent = {|
-  target: Element | Document,
-  type: PressEventType,
-  pointerType: PointerType,
-  timeStamp: number,
-  clientX: null | number,
-  clientY: null | number,
-  pageX: null | number,
-  pageY: null | number,
-  screenX: null | number,
-  screenY: null | number,
-  x: null | number,
-  y: null | number,
-  altKey: boolean,
-  ctrlKey: boolean,
-  metaKey: boolean,
-  shiftKey: boolean,
-|};
-
-const isMac =
-  typeof window !== 'undefined' && window.navigator != null
-    ? /^Mac/.test(window.navigator.platform)
-    : false;
-const DEFAULT_PRESS_END_DELAY_MS = 0;
-const DEFAULT_PRESS_START_DELAY_MS = 0;
-const DEFAULT_LONG_PRESS_DELAY_MS = 500;
-const DEFAULT_PRESS_RETENTION_OFFSET = {
-  bottom: 20,
-  top: 20,
-  left: 20,
-  right: 20,
-};
-
-const targetEventTypes = [
-  {name: 'click', passive: false},
-  {name: 'keydown', passive: false},
-  {name: 'keypress', passive: false},
-  {name: 'contextmenu', passive: false},
-  // We need to preventDefault on pointerdown for mouse/pen events
-  // that are in hit target area but not the element area.
-  {name: 'pointerdown', passive: false},
-];
-const rootEventTypes = [
-  'keyup',
-  'pointerup',
-  'pointermove',
-  'scroll',
-  'pointercancel',
-];
-
-// If PointerEvents is not supported (e.g., Safari), also listen to touch and mouse events.
-if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
-  targetEventTypes.push('touchstart', 'mousedown');
-  rootEventTypes.push(
-    {name: 'mouseup', passive: false},
-    'mousemove',
-    'touchmove',
-    'touchend',
-    'touchcancel',
-    // Used as a 'cancel' signal for mouse interactions
-    'dragstart',
-  );
-}
-
-function createPressEvent(
-  context: ReactResponderContext,
-  type: PressEventType,
-  target: Element | Document,
-  pointerType: PointerType,
-  event: ?ReactResponderEvent,
-): PressEvent {
-  const timeStamp = context.getTimeStamp();
-  let clientX = null;
-  let clientY = null;
-  let pageX = null;
-  let pageY = null;
-  let screenX = null;
-  let screenY = null;
-  let altKey = false;
-  let ctrlKey = false;
-  let metaKey = false;
-  let shiftKey = false;
-
-  if (event) {
-    const nativeEvent = (event.nativeEvent: any);
-    ({altKey, ctrlKey, metaKey, shiftKey} = nativeEvent);
-    // Only check for one property, checking for all of them is costly. We can assume
-    // if clientX exists, so do the rest.
-    let eventObject;
-    if (nativeEvent.clientX !== undefined) {
-      eventObject = (nativeEvent: any);
-    } else if (isTouchEvent(nativeEvent)) {
-      eventObject = getTouchFromPressEvent(nativeEvent);
-    }
-    if (eventObject) {
-      ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
-    }
-  }
-  return {
-    target,
-    type,
-    pointerType,
-    timeStamp,
-    clientX,
-    clientY,
-    pageX,
-    pageY,
-    screenX,
-    screenY,
-    x: clientX,
-    y: clientY,
-    altKey,
-    ctrlKey,
-    metaKey,
-    shiftKey,
-  };
-}
-
-function dispatchEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
-  state: PressState,
-  name: PressEventType,
-  listener: (e: Object) => void,
-  discrete: boolean,
-): void {
-  const target = ((state.pressTarget: any): Element | Document);
-  const pointerType = state.pointerType;
-  const syntheticEvent = createPressEvent(
-    context,
-    name,
-    target,
-    pointerType,
-    event,
-  );
-  context.dispatchEvent(syntheticEvent, listener, discrete);
-}
-
-function dispatchPressChangeEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  const bool = state.isActivePressed;
-  const listener = () => {
-    props.onPressChange(bool);
-  };
-  dispatchEvent(event, context, state, 'presschange', listener, true);
-}
-
-function dispatchLongPressChangeEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  const bool = state.isLongPressed;
-  const listener = () => {
-    props.onLongPressChange(bool);
-  };
-  dispatchEvent(event, context, state, 'longpresschange', listener, true);
-}
-
-function activate(event: ReactResponderEvent, context, props, state) {
-  const nativeEvent: any = event.nativeEvent;
-  const {x, y} = getEventPageCoords(nativeEvent);
-  const wasActivePressed = state.isActivePressed;
-  state.isActivePressed = true;
-  if (x !== null && y !== null) {
-    state.activationPosition = {
-      pageX: x,
-      pageY: y,
-    };
-  }
-
-  if (props.onPressStart) {
-    dispatchEvent(
-      event,
-      context,
-      state,
-      'pressstart',
-      props.onPressStart,
-      true,
-    );
-  }
-  if (!wasActivePressed && props.onPressChange) {
-    dispatchPressChangeEvent(event, context, props, state);
-  }
-}
-
-function deactivate(event: ?ReactResponderEvent, context, props, state) {
-  const wasLongPressed = state.isLongPressed;
-  state.isActivePressed = false;
-  state.isLongPressed = false;
-
-  if (props.onPressEnd) {
-    dispatchEvent(event, context, state, 'pressend', props.onPressEnd, true);
-  }
-  if (props.onPressChange) {
-    dispatchPressChangeEvent(event, context, props, state);
-  }
-  if (wasLongPressed && props.onLongPressChange) {
-    dispatchLongPressChangeEvent(event, context, props, state);
-  }
-}
-
-function dispatchPressStartEvents(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  state.isPressed = true;
-
-  if (state.pressEndTimeout !== null) {
-    context.clearTimeout(state.pressEndTimeout);
-    state.pressEndTimeout = null;
-  }
-
-  const dispatch = () => {
-    state.isActivePressStart = true;
-    activate(event, context, props, state);
-
-    if (
-      (props.onLongPress || props.onLongPressChange) &&
-      !state.isLongPressed
-    ) {
-      const delayLongPress = calculateDelayMS(
-        props.delayLongPress,
-        10,
-        DEFAULT_LONG_PRESS_DELAY_MS,
-      );
-      state.longPressTimeout = context.setTimeout(() => {
-        state.isLongPressed = true;
-        state.longPressTimeout = null;
-        if (props.onLongPress) {
-          dispatchEvent(
-            event,
-            context,
-            state,
-            'longpress',
-            props.onLongPress,
-            true,
-          );
-        }
-        if (props.onLongPressChange) {
-          dispatchLongPressChangeEvent(event, context, props, state);
-        }
-      }, delayLongPress);
-    }
-  };
-
-  if (!state.isActivePressStart) {
-    const delayPressStart = calculateDelayMS(
-      props.delayPressStart,
-      0,
-      DEFAULT_PRESS_START_DELAY_MS,
-    );
-    if (delayPressStart > 0) {
-      state.pressStartTimeout = context.setTimeout(() => {
-        state.pressStartTimeout = null;
-        dispatch();
-      }, delayPressStart);
-    } else {
-      dispatch();
-    }
-  }
-}
-
-function dispatchPressEndEvents(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  const wasActivePressStart = state.isActivePressStart;
-  let activationWasForced = false;
-
-  state.isActivePressStart = false;
-  state.isPressed = false;
-
-  if (state.longPressTimeout !== null) {
-    context.clearTimeout(state.longPressTimeout);
-    state.longPressTimeout = null;
-  }
-
-  if (!wasActivePressStart && state.pressStartTimeout !== null) {
-    context.clearTimeout(state.pressStartTimeout);
-    state.pressStartTimeout = null;
-    // don't activate if a press has moved beyond the responder region
-    if (state.isPressWithinResponderRegion && event != null) {
-      // if we haven't yet activated (due to delays), activate now
-      activate(event, context, props, state);
-      activationWasForced = true;
-    }
-  }
-
-  if (state.isActivePressed) {
-    const delayPressEnd = calculateDelayMS(
-      props.delayPressEnd,
-      // if activation and deactivation occur during the same event there's no
-      // time for visual user feedback therefore a small delay is added before
-      // deactivating.
-      activationWasForced ? 10 : 0,
-      DEFAULT_PRESS_END_DELAY_MS,
-    );
-    if (delayPressEnd > 0) {
-      state.pressEndTimeout = context.setTimeout(() => {
-        state.pressEndTimeout = null;
-        deactivate(event, context, props, state);
-      }, delayPressEnd);
-    } else {
-      deactivate(event, context, props, state);
-    }
-  }
-}
-
-function dispatchCancel(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  if (state.isPressed) {
-    state.ignoreEmulatedMouseEvents = false;
-    removeRootEventTypes(context, state);
-    dispatchPressEndEvents(event, context, props, state);
-  } else if (state.allowPressReentry) {
-    removeRootEventTypes(context, state);
-  }
-}
-
-function isValidKeyPress(key: string): boolean {
-  // Accessibility for keyboards. Space and Enter only.
-  // "Spacebar" is for IE 11
-  return key === 'Enter' || key === ' ' || key === 'Spacebar';
-}
-
-function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
-  const maybeNumber = delay == null ? null : delay;
-  return Math.max(min, maybeNumber != null ? maybeNumber : fallback);
-}
-
-function isNodeFixedPositioned(node: Node | null | void): boolean {
-  return (
-    node != null &&
-    (node: any).offsetParent === null &&
-    !isNodeDocumentNode(node.parentNode)
-  );
-}
-
-function isNodeDocumentNode(node: Node | null | void): boolean {
-  return node != null && node.nodeType === Node.DOCUMENT_NODE;
-}
-
-function getAbsoluteBoundingClientRect(
-  target: Element,
-): {left: number, right: number, bottom: number, top: number} {
-  const clientRect = target.getBoundingClientRect();
-  let {left, right, bottom, top} = clientRect;
-  let node = target.parentNode;
-  let offsetX = 0;
-  let offsetY = 0;
-
-  // Traverse through all offset nodes
-  while (node != null) {
-    const parent = node.parentNode;
-    const scrollTop = (node: any).scrollTop;
-    const scrollLeft = (node: any).scrollLeft;
-
-    // We first need to check if it's a scrollable container by
-    // checking if either scrollLeft or scrollTop are not 0.
-    // Then we check if either the current node or its parent
-    // are fixed position, using offsetParent node for a fast-path.
-    // We need to check both as offsetParent accounts for both
-    // itself and the parent; so we need to align with that API.
-    // If these all pass, we can skip traversing the relevant
-    // node and go directly to its parent.
-    if (scrollLeft !== 0 || scrollTop !== 0) {
-      if (isNodeFixedPositioned(parent)) {
-        node = ((parent: any): Node).parentNode;
-        continue;
-      }
-      if (isNodeFixedPositioned(node)) {
-        node = parent;
-        continue;
-      }
-    }
-    offsetX += scrollLeft;
-    offsetY += scrollTop;
-    if (isNodeDocumentNode(parent)) {
-      break;
-    }
-    node = parent;
-  }
-  return {
-    left: left + offsetX,
-    right: right + offsetX,
-    bottom: bottom + offsetY,
-    top: top + offsetY,
-  };
-}
-
-// TODO: account for touch hit slop
-function calculateResponderRegion(
-  context: ReactResponderContext,
-  target: Element,
-  props: PressProps,
-) {
-  const pressRetentionOffset = context.objectAssign(
-    {},
-    DEFAULT_PRESS_RETENTION_OFFSET,
-    props.pressRetentionOffset,
-  );
-
-  const clientRect = getAbsoluteBoundingClientRect(target);
-  let {left, right, bottom, top} = clientRect;
-
-  if (pressRetentionOffset) {
-    if (pressRetentionOffset.bottom != null) {
-      bottom += pressRetentionOffset.bottom;
-    }
-    if (pressRetentionOffset.left != null) {
-      left -= pressRetentionOffset.left;
-    }
-    if (pressRetentionOffset.right != null) {
-      right += pressRetentionOffset.right;
-    }
-    if (pressRetentionOffset.top != null) {
-      top -= pressRetentionOffset.top;
-    }
-  }
-
-  return {
-    bottom,
-    top,
-    left,
-    right,
-  };
-}
-
-function isTouchEvent(nativeEvent: Event): boolean {
-  return Array.isArray((nativeEvent: any).changedTouches);
-}
-
-function getTouchFromPressEvent(nativeEvent: TouchEvent): Touch {
-  const {changedTouches, touches} = nativeEvent;
-  return changedTouches.length > 0
-    ? changedTouches[0]
-    : touches.length > 0
-      ? touches[0]
-      : (nativeEvent: any);
-}
-
-function getEventPageCoords(
-  nativeEvent: Event,
-): {x: null | number, y: null | number} {
-  let eventObject = (nativeEvent: any);
-  if (isTouchEvent(eventObject)) {
-    eventObject = getTouchFromPressEvent(eventObject);
-  }
-  const pageX = eventObject.pageX;
-  const pageY = eventObject.pageY;
-  return {
-    x: pageX != null ? pageX : null,
-    y: pageY != null ? pageY : null,
-  };
-}
-
-function isPressWithinResponderRegion(
-  nativeEvent: $PropertyType<ReactResponderEvent, 'nativeEvent'>,
-  state: PressState,
-): boolean {
-  const {responderRegionOnActivation, responderRegionOnDeactivation} = state;
-  let left, top, right, bottom;
-
-  if (responderRegionOnActivation != null) {
-    left = responderRegionOnActivation.left;
-    top = responderRegionOnActivation.top;
-    right = responderRegionOnActivation.right;
-    bottom = responderRegionOnActivation.bottom;
-
-    if (responderRegionOnDeactivation != null) {
-      left = Math.min(left, responderRegionOnDeactivation.left);
-      top = Math.min(top, responderRegionOnDeactivation.top);
-      right = Math.max(right, responderRegionOnDeactivation.right);
-      bottom = Math.max(bottom, responderRegionOnDeactivation.bottom);
-    }
-  }
-  const {x, y} = getEventPageCoords(((nativeEvent: any): Event));
-
-  return (
-    left != null &&
-    right != null &&
-    top != null &&
-    bottom != null &&
-    x !== null &&
-    y !== null &&
-    (x >= left && x <= right && y >= top && y <= bottom)
-  );
-}
-
-function unmountResponder(
-  context: ReactResponderContext,
-  props: PressProps,
-  state: PressState,
-): void {
-  if (state.isPressed) {
-    removeRootEventTypes(context, state);
-    dispatchPressEndEvents(null, context, props, state);
-  }
-}
-
-function addRootEventTypes(
-  context: ReactResponderContext,
-  state: PressState,
-): void {
-  if (!state.addedRootEvents) {
-    state.addedRootEvents = true;
-    context.addRootEventTypes(rootEventTypes);
-  }
-}
-
-function removeRootEventTypes(
-  context: ReactResponderContext,
-  state: PressState,
-): void {
-  if (state.addedRootEvents) {
-    state.addedRootEvents = false;
-    state.allowPressReentry = false;
-    context.removeRootEventTypes(rootEventTypes);
-  }
-}
-
-const PressResponder = {
-  targetEventTypes,
-  createInitialState(): PressState {
-    return {
-      activationPosition: null,
-      addedRootEvents: false,
-      didDispatchEvent: false,
-      isActivePressed: false,
-      isActivePressStart: false,
-      isLongPressed: false,
-      isPressed: false,
-      isPressWithinResponderRegion: true,
-      longPressTimeout: null,
-      pointerType: '',
-      pressEndTimeout: null,
-      pressStartTimeout: null,
-      pressTarget: null,
-      responderRegionOnActivation: null,
-      responderRegionOnDeactivation: null,
-      ignoreEmulatedMouseEvents: false,
-      allowPressReentry: false,
-    };
-  },
-  allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
-  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: PressProps,
-    state: PressState,
-  ): void {
-    const {target, type} = event;
-
-    if (props.disabled) {
-      removeRootEventTypes(context, state);
-      dispatchPressEndEvents(event, context, props, state);
-      state.ignoreEmulatedMouseEvents = false;
-      return;
-    }
-    const nativeEvent: any = event.nativeEvent;
-    const pointerType = context.getEventPointerType(event);
-
-    switch (type) {
-      // START
-      case 'pointerdown':
-      case 'keydown':
-      case 'keypress':
-      case 'mousedown':
-      case 'touchstart': {
-        if (!state.isPressed) {
-          if (type === 'pointerdown' || type === 'touchstart') {
-            state.ignoreEmulatedMouseEvents = true;
-          }
-
-          // Ignore unrelated key events
-          if (pointerType === 'keyboard') {
-            if (!isValidKeyPress(nativeEvent.key)) {
-              return;
-            }
-          }
-
-          // Ignore emulated mouse events
-          if (type === 'mousedown' && state.ignoreEmulatedMouseEvents) {
-            return;
-          }
-          // Ignore mouse/pen pressing on touch hit target area
-          const isMouseType = pointerType === 'mouse';
-          if (
-            (isMouseType || pointerType === 'pen') &&
-            isEventPositionWithinTouchHitTarget(event, context)
-          ) {
-            // We need to prevent the native event to block the focus
-            nativeEvent.preventDefault();
-            return;
-          }
-
-          // We set these here, before the button check so we have this
-          // data around for handling of the context menu
-          state.pointerType = pointerType;
-          state.pressTarget = context.getEventCurrentTarget(event);
-
-          // Ignore any device buttons except left-mouse and touch/pen contact.
-          // Additionally we ignore left-mouse + ctrl-key with Macs as that
-          // acts like right-click and opens the contextmenu.
-          if (
-            nativeEvent.button > 0 ||
-            (isMac && isMouseType && nativeEvent.ctrlKey)
-          ) {
-            return;
-          }
-
-          state.allowPressReentry = true;
-          state.responderRegionOnActivation = calculateResponderRegion(
-            context,
-            state.pressTarget,
-            props,
-          );
-          state.isPressWithinResponderRegion = true;
-          dispatchPressStartEvents(event, context, props, state);
-          addRootEventTypes(context, state);
-        } else {
-          // Prevent spacebar press from scrolling the window
-          if (isValidKeyPress(nativeEvent.key) && nativeEvent.key === ' ') {
-            nativeEvent.preventDefault();
-          }
-        }
-        break;
-      }
-
-      case 'contextmenu': {
-        if (state.isPressed) {
-          dispatchCancel(event, context, props, state);
-          if (props.preventDefault !== false) {
-            // Skip dispatching of onContextMenu below
-            nativeEvent.preventDefault();
-            return;
-          }
-        }
-        if (props.onContextMenu) {
-          dispatchEvent(
-            event,
-            context,
-            state,
-            'contextmenu',
-            props.onContextMenu,
-            true,
-          );
-        }
-        break;
-      }
-
-      case 'click': {
-        if (context.isTargetWithinHostComponent(target, 'a', true)) {
-          const {
-            altKey,
-            ctrlKey,
-            metaKey,
-            shiftKey,
-          } = (nativeEvent: MouseEvent);
-          // Check "open in new window/tab" and "open context menu" key modifiers
-          const preventDefault = props.preventDefault;
-          if (
-            preventDefault !== false &&
-            !shiftKey &&
-            !metaKey &&
-            !ctrlKey &&
-            !altKey
-          ) {
-            nativeEvent.preventDefault();
-          }
-        }
-        break;
-      }
-    }
-  },
-  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: PressProps,
-    state: PressState,
-  ): void {
-    const {target, type} = event;
-
-    const nativeEvent: any = event.nativeEvent;
-    const pointerType = context.getEventPointerType(event);
-
-    switch (type) {
-      // MOVE
-      case 'pointermove':
-      case 'mousemove':
-      case 'touchmove': {
-        if (state.isPressed || state.allowPressReentry) {
-          // Ignore emulated events (pointermove will dispatch touch and mouse events)
-          // Ignore pointermove events during a keyboard press.
-          if (state.pointerType !== pointerType) {
-            return;
-          }
-
-          // Calculate the responder region we use for deactivation, as the
-          // element dimensions may have changed since activation.
-          if (
-            state.pressTarget !== null &&
-            state.responderRegionOnDeactivation == null
-          ) {
-            state.responderRegionOnDeactivation = calculateResponderRegion(
-              context,
-              state.pressTarget,
-              props,
-            );
-          }
-          state.isPressWithinResponderRegion = isPressWithinResponderRegion(
-            nativeEvent,
-            state,
-          );
-
-          if (state.isPressWithinResponderRegion) {
-            if (state.isPressed) {
-              if (props.onPressMove) {
-                dispatchEvent(
-                  event,
-                  context,
-                  state,
-                  'pressmove',
-                  props.onPressMove,
-                  false,
-                );
-              }
-              if (
-                state.activationPosition != null &&
-                state.longPressTimeout != null
-              ) {
-                const deltaX =
-                  state.activationPosition.pageX - nativeEvent.pageX;
-                const deltaY =
-                  state.activationPosition.pageY - nativeEvent.pageY;
-                if (
-                  Math.hypot(deltaX, deltaY) > 10 &&
-                  state.longPressTimeout != null
-                ) {
-                  context.clearTimeout(state.longPressTimeout);
-                }
-              }
-            } else {
-              dispatchPressStartEvents(event, context, props, state);
-            }
-          } else {
-            if (!state.allowPressReentry) {
-              removeRootEventTypes(context, state);
-            }
-            dispatchPressEndEvents(event, context, props, state);
-          }
-        }
-        break;
-      }
-
-      // END
-      case 'pointerup':
-      case 'keyup':
-      case 'mouseup':
-      case 'touchend': {
-        if (state.isPressed) {
-          // Ignore unrelated keyboard events and verify press is within
-          // responder region for non-keyboard events.
-          if (pointerType === 'keyboard') {
-            if (!isValidKeyPress(nativeEvent.key)) {
-              return;
-            }
-            // If the event target isn't within the press target, check if we're still
-            // within the responder region. The region may have changed if the
-            // element's layout was modified after activation.
-          } else if (
-            state.pressTarget != null &&
-            !context.isTargetWithinElement(target, state.pressTarget)
-          ) {
-            // Calculate the responder region we use for deactivation if not
-            // already done during move event.
-            if (state.responderRegionOnDeactivation == null) {
-              state.responderRegionOnDeactivation = calculateResponderRegion(
-                context,
-                state.pressTarget,
-                props,
-              );
-            }
-            state.isPressWithinResponderRegion = isPressWithinResponderRegion(
-              nativeEvent,
-              state,
-            );
-          }
-
-          const wasLongPressed = state.isLongPressed;
-          removeRootEventTypes(context, state);
-          dispatchPressEndEvents(event, context, props, state);
-
-          if (state.pressTarget !== null && props.onPress) {
-            if (state.isPressWithinResponderRegion) {
-              if (
-                !(
-                  wasLongPressed &&
-                  props.onLongPressShouldCancelPress &&
-                  props.onLongPressShouldCancelPress()
-                )
-              ) {
-                dispatchEvent(
-                  event,
-                  context,
-                  state,
-                  'press',
-                  props.onPress,
-                  true,
-                );
-              }
-            }
-          }
-        } else if (type === 'mouseup' && state.ignoreEmulatedMouseEvents) {
-          state.ignoreEmulatedMouseEvents = false;
-        } else if (state.allowPressReentry) {
-          removeRootEventTypes(context, state);
-        }
-        break;
-      }
-
-      // CANCEL
-      case 'pointercancel':
-      case 'scroll':
-      case 'touchcancel':
-      case 'dragstart': {
-        dispatchCancel(event, context, props, state);
-      }
-    }
-  },
-  onUnmount(
-    context: ReactResponderContext,
-    props: PressProps,
-    state: PressState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-  onOwnershipChange(
-    context: ReactResponderContext,
-    props: PressProps,
-    state: PressState,
-  ) {
-    unmountResponder(context, props, state);
-  },
-};
-
-export default React.unstable_createEventComponent(PressResponder, 'Press');
diff --git a/packages/react-events/src/ReactEvents.js b/packages/react-events/src/ReactEvents.js
deleted file mode 100644
index af5c08b0b8e95..0000000000000
--- a/packages/react-events/src/ReactEvents.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import {
-  REACT_EVENT_TARGET_TYPE,
-  REACT_EVENT_TARGET_TOUCH_HIT,
-} from 'shared/ReactSymbols';
-import type {ReactEventTarget} from 'shared/ReactTypes';
-
-export const TouchHitTarget: ReactEventTarget = {
-  $$typeof: REACT_EVENT_TARGET_TYPE,
-  type: REACT_EVENT_TARGET_TOUCH_HIT,
-};
diff --git a/packages/react-events/src/__tests__/Focus-test.internal.js b/packages/react-events/src/__tests__/Focus-test.internal.js
deleted file mode 100644
index 21300f4af8bd4..0000000000000
--- a/packages/react-events/src/__tests__/Focus-test.internal.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-let Focus;
-
-const createFocusEvent = type => {
-  const event = document.createEvent('Event');
-  event.initEvent(type, true, true);
-  return event;
-};
-
-const createKeyboardEvent = (type, data) => {
-  return new KeyboardEvent(type, {
-    bubbles: true,
-    cancelable: true,
-    ...data,
-  });
-};
-
-const createPointerEvent = (type, data) => {
-  const event = document.createEvent('CustomEvent');
-  event.initCustomEvent(type, true, true);
-  if (data != null) {
-    Object.entries(data).forEach(([key, value]) => {
-      event[key] = value;
-    });
-  }
-  return event;
-};
-
-describe('Focus event responder', () => {
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Focus = require('react-events/focus');
-
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    ReactDOM.render(null, container);
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  describe('disabled', () => {
-    let onBlur, onFocus, ref;
-
-    beforeEach(() => {
-      onBlur = jest.fn();
-      onFocus = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Focus disabled={true} onBlur={onBlur} onFocus={onFocus}>
-          <div ref={ref} />
-        </Focus>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('prevents custom events being dispatched', () => {
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onFocus).not.toBeCalled();
-      expect(onBlur).not.toBeCalled();
-    });
-  });
-
-  describe('onBlur', () => {
-    let onBlur, ref;
-
-    beforeEach(() => {
-      onBlur = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Focus onBlur={onBlur}>
-          <div ref={ref} />
-        </Focus>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "blur" event', () => {
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onBlur).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('onFocus', () => {
-    let onFocus, ref, innerRef;
-
-    beforeEach(() => {
-      onFocus = jest.fn();
-      ref = React.createRef();
-      innerRef = React.createRef();
-      const element = (
-        <Focus onFocus={onFocus}>
-          <div ref={ref}>
-            <a ref={innerRef} />
-          </div>
-        </Focus>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "focus" event', () => {
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it('is not called if descendants of target receive focus', () => {
-      const target = innerRef.current;
-      target.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).not.toBeCalled();
-    });
-
-    it('is called with the correct pointerType using pointer events', () => {
-      // Pointer mouse
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerdown', {
-          pointerType: 'mouse',
-        }),
-      );
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(1);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse'}),
-      );
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-
-      // Pointer touch
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerdown', {
-          pointerType: 'touch',
-        }),
-      );
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(2);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-
-      // Pointer pen
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerdown', {
-          pointerType: 'pen',
-        }),
-      );
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(3);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'pen'}),
-      );
-    });
-
-    it('is called with the correct pointerType without pointer events', () => {
-      // Mouse
-      ref.current.dispatchEvent(createPointerEvent('mousedown'));
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(1);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse'}),
-      );
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-
-      // Touch
-      ref.current.dispatchEvent(createPointerEvent('touchstart'));
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(2);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch'}),
-      );
-    });
-
-    it('is called with the correct pointerType using a keyboard', () => {
-      // Keyboard tab
-      ref.current.dispatchEvent(
-        createPointerEvent('keypress', {
-          key: 'Tab',
-        }),
-      );
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocus).toHaveBeenCalledTimes(1);
-      expect(onFocus).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard'}),
-      );
-    });
-  });
-
-  describe('onFocusChange', () => {
-    let onFocusChange, ref;
-
-    beforeEach(() => {
-      onFocusChange = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Focus onFocusChange={onFocusChange}>
-          <div ref={ref} />
-        </Focus>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "blur" and "focus" events', () => {
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocusChange).toHaveBeenCalledTimes(1);
-      expect(onFocusChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onFocusChange).toHaveBeenCalledTimes(2);
-      expect(onFocusChange).toHaveBeenCalledWith(false);
-    });
-  });
-
-  describe('onFocusVisibleChange', () => {
-    let onFocusVisibleChange, ref;
-
-    beforeEach(() => {
-      onFocusVisibleChange = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Focus onFocusVisibleChange={onFocusVisibleChange}>
-          <div ref={ref} />
-        </Focus>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "focus" and "blur" if keyboard navigation is active', () => {
-      // use keyboard first
-      container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
-      expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
-      expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
-    });
-
-    it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
-      // use keyboard first
-      container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
-      expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
-      // then use pointer on the target, focus should no longer be visible
-      ref.current.dispatchEvent(createPointerEvent('pointerdown'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
-      expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
-      // onFocusVisibleChange should not be called again
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
-    });
-
-    it('is not called after "focus" and "blur" events without keyboard', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerdown'));
-      ref.current.dispatchEvent(createFocusEvent('focus'));
-      container.dispatchEvent(createPointerEvent('pointerdown'));
-      ref.current.dispatchEvent(createFocusEvent('blur'));
-      expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  describe('nested Focus components', () => {
-    it('do not propagate events by default', () => {
-      const events = [];
-      const innerRef = React.createRef();
-      const outerRef = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Focus
-          onBlur={createEventHandler('outer: onBlur')}
-          onFocus={createEventHandler('outer: onFocus')}
-          onFocusChange={createEventHandler('outer: onFocusChange')}>
-          <div ref={outerRef}>
-            <Focus
-              onBlur={createEventHandler('inner: onBlur')}
-              onFocus={createEventHandler('inner: onFocus')}
-              onFocusChange={createEventHandler('inner: onFocusChange')}>
-              <div ref={innerRef} />
-            </Focus>
-          </div>
-        </Focus>
-      );
-
-      ReactDOM.render(element, container);
-
-      outerRef.current.dispatchEvent(createFocusEvent('focus'));
-      outerRef.current.dispatchEvent(createFocusEvent('blur'));
-      innerRef.current.dispatchEvent(createFocusEvent('focus'));
-      innerRef.current.dispatchEvent(createFocusEvent('blur'));
-      expect(events).toEqual([
-        'outer: onFocus',
-        'outer: onFocusChange',
-        'outer: onBlur',
-        'outer: onFocusChange',
-        'inner: onFocus',
-        'inner: onFocusChange',
-        'inner: onBlur',
-        'inner: onFocusChange',
-      ]);
-    });
-  });
-
-  it('expect displayName to show up for event component', () => {
-    expect(Focus.displayName).toBe('Focus');
-  });
-});
diff --git a/packages/react-events/src/__tests__/FocusScope-test.internal.js b/packages/react-events/src/__tests__/FocusScope-test.internal.js
deleted file mode 100644
index 3930b25e1fa33..0000000000000
--- a/packages/react-events/src/__tests__/FocusScope-test.internal.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-let FocusScope;
-
-const createTabForward = type => {
-  const event = new KeyboardEvent('keydown', {
-    key: 'Tab',
-    bubbles: true,
-    cancelable: true,
-  });
-  return event;
-};
-
-const createTabBackward = type => {
-  const event = new KeyboardEvent('keydown', {
-    key: 'Tab',
-    shiftKey: true,
-    bubbles: true,
-    cancelable: true,
-  });
-  return event;
-};
-
-describe('FocusScope event responder', () => {
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    FocusScope = require('react-events/focus-scope');
-
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    ReactDOM.render(null, container);
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('should work as expected with autofocus', () => {
-    const inputRef = React.createRef();
-    const input2Ref = React.createRef();
-    const buttonRef = React.createRef();
-    const butto2nRef = React.createRef();
-    const divRef = React.createRef();
-
-    const SimpleFocusScope = () => (
-      <div>
-        <FocusScope autoFocus={true}>
-          <input ref={inputRef} />
-          <button ref={buttonRef} />
-          <div ref={divRef} tabIndex={0} />
-          <input ref={input2Ref} tabIndex={-1} />
-          <button ref={butto2nRef} />
-        </FocusScope>
-      </div>
-    );
-
-    ReactDOM.render(<SimpleFocusScope />, container);
-    expect(document.activeElement).toBe(inputRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(divRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(butto2nRef.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(divRef.current);
-  });
-
-  it('should work as expected with autoFocus and contain', () => {
-    const inputRef = React.createRef();
-    const input2Ref = React.createRef();
-    const buttonRef = React.createRef();
-    const button2Ref = React.createRef();
-
-    const SimpleFocusScope = () => (
-      <div>
-        <FocusScope autoFocus={true} contain={true}>
-          <input ref={inputRef} tabIndex={-1} />
-          <button ref={buttonRef} id={1} />
-          <button ref={button2Ref} id={2} />
-          <input ref={input2Ref} tabIndex={-1} />
-        </FocusScope>
-      </div>
-    );
-
-    ReactDOM.render(<SimpleFocusScope />, container);
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button2Ref.current);
-  });
-
-  it('should work as expected when nested', () => {
-    const inputRef = React.createRef();
-    const input2Ref = React.createRef();
-    const buttonRef = React.createRef();
-    const button2Ref = React.createRef();
-    const button3Ref = React.createRef();
-    const button4Ref = React.createRef();
-
-    const SimpleFocusScope = () => (
-      <div>
-        <FocusScope>
-          <input ref={inputRef} tabIndex={-1} />
-          <button ref={buttonRef} id={1} />
-          <FocusScope>
-            <button ref={button2Ref} id={2} />
-            <button ref={button3Ref} id={3} />
-          </FocusScope>
-          <input ref={input2Ref} tabIndex={-1} />
-          <button ref={button4Ref} id={4} />
-        </FocusScope>
-      </div>
-    );
-
-    ReactDOM.render(<SimpleFocusScope />, container);
-    buttonRef.current.focus();
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button4Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button2Ref.current);
-  });
-
-  it('should work as expected when nested with scope that is contained', () => {
-    const inputRef = React.createRef();
-    const input2Ref = React.createRef();
-    const buttonRef = React.createRef();
-    const button2Ref = React.createRef();
-    const button3Ref = React.createRef();
-    const button4Ref = React.createRef();
-
-    const SimpleFocusScope = () => (
-      <div>
-        <FocusScope>
-          <input ref={inputRef} tabIndex={-1} />
-          <button ref={buttonRef} id={1} />
-          <FocusScope contain={true}>
-            <button ref={button2Ref} id={2} />
-            <button ref={button3Ref} id={3} />
-          </FocusScope>
-          <input ref={input2Ref} tabIndex={-1} />
-          <button ref={button4Ref} id={4} />
-        </FocusScope>
-      </div>
-    );
-
-    ReactDOM.render(<SimpleFocusScope />, container);
-    buttonRef.current.focus();
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button2Ref.current);
-  });
-
-  it('should work as expected with suspense fallbacks', () => {
-    const buttonRef = React.createRef();
-    const button2Ref = React.createRef();
-    const button3Ref = React.createRef();
-    const button4Ref = React.createRef();
-    const button5Ref = React.createRef();
-
-    function SuspendedComponent() {
-      throw new Promise(() => {
-        // Never resolve
-      });
-    }
-
-    function Component() {
-      return (
-        <React.Fragment>
-          <button ref={button5Ref} id={5} />
-          <SuspendedComponent />
-        </React.Fragment>
-      );
-    }
-
-    const SimpleFocusScope = () => (
-      <div>
-        <FocusScope>
-          <button ref={buttonRef} id={1} />
-          <button ref={button2Ref} id={2} />
-          <React.Suspense fallback={<button ref={button3Ref} id={3} />}>
-            <Component />
-          </React.Suspense>
-          <button ref={button4Ref} id={4} />
-        </FocusScope>
-      </div>
-    );
-
-    ReactDOM.render(<SimpleFocusScope />, container);
-    buttonRef.current.focus();
-    expect(document.activeElement).toBe(buttonRef.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button2Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabForward());
-    expect(document.activeElement).toBe(button4Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button3Ref.current);
-    document.activeElement.dispatchEvent(createTabBackward());
-    expect(document.activeElement).toBe(button2Ref.current);
-  });
-});
diff --git a/packages/react-events/src/__tests__/Hover-test.internal.js b/packages/react-events/src/__tests__/Hover-test.internal.js
deleted file mode 100644
index f615286542773..0000000000000
--- a/packages/react-events/src/__tests__/Hover-test.internal.js
+++ /dev/null
@@ -1,467 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-let Hover;
-
-const createPointerEvent = (type, data) => {
-  const event = document.createEvent('CustomEvent');
-  event.initCustomEvent(type, true, true);
-  if (data != null) {
-    Object.entries(data).forEach(([key, value]) => {
-      event[key] = value;
-    });
-  }
-  return event;
-};
-
-describe('Hover event responder', () => {
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Hover = require('react-events/hover');
-
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    ReactDOM.render(null, container);
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  describe('disabled', () => {
-    let onHoverStart, onHoverEnd, ref;
-
-    beforeEach(() => {
-      onHoverStart = jest.fn();
-      onHoverEnd = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Hover
-          disabled={true}
-          onHoverStart={onHoverStart}
-          onHoverEnd={onHoverEnd}>
-          <div ref={ref} />
-        </Hover>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('prevents custom events being dispatched', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      expect(onHoverStart).not.toBeCalled();
-      expect(onHoverEnd).not.toBeCalled();
-    });
-  });
-
-  describe('onHoverStart', () => {
-    let onHoverStart, ref;
-
-    beforeEach(() => {
-      onHoverStart = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Hover onHoverStart={onHoverStart}>
-          <div ref={ref} />
-        </Hover>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerover" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      expect(onHoverStart).toHaveBeenCalledTimes(1);
-    });
-
-    it('is not called if "pointerover" pointerType is touch', () => {
-      const event = createPointerEvent('pointerover', {pointerType: 'touch'});
-      ref.current.dispatchEvent(event);
-      expect(onHoverStart).not.toBeCalled();
-    });
-
-    it('is called if valid "pointerover" follows touch', () => {
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerover', {pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerout', {pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(
-        createPointerEvent('pointerover', {pointerType: 'mouse'}),
-      );
-      expect(onHoverStart).toHaveBeenCalledTimes(1);
-    });
-
-    it('ignores browser emulated "mouseover" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('mouseover'));
-      expect(onHoverStart).toHaveBeenCalledTimes(1);
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mouseover" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('mouseover'));
-      expect(onHoverStart).toHaveBeenCalledTimes(1);
-    });
-    it('is not called after "touchstart"', () => {
-      ref.current.dispatchEvent(createPointerEvent('touchstart'));
-      ref.current.dispatchEvent(createPointerEvent('touchend'));
-      ref.current.dispatchEvent(createPointerEvent('mouseover'));
-      expect(onHoverStart).not.toBeCalled();
-    });
-
-    describe('delayHoverStart', () => {
-      it('can be configured', () => {
-        const element = (
-          <Hover delayHoverStart={2000} onHoverStart={onHoverStart}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.advanceTimersByTime(1999);
-        expect(onHoverStart).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onHoverStart).toHaveBeenCalledTimes(1);
-      });
-
-      it('is reset if "pointerout" is dispatched during a delay', () => {
-        const element = (
-          <Hover delayHoverStart={500} onHoverStart={onHoverStart}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.advanceTimersByTime(499);
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.advanceTimersByTime(1);
-        expect(onHoverStart).not.toBeCalled();
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.runAllTimers();
-        expect(onHoverStart).toHaveBeenCalledTimes(1);
-      });
-
-      it('onHoverStart is called synchronously if delay is 0ms', () => {
-        const element = (
-          <Hover delayHoverStart={0} onHoverStart={onHoverStart}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        expect(onHoverStart).toHaveBeenCalledTimes(1);
-      });
-
-      it('onHoverStart is only called once per active hover', () => {
-        const element = (
-          <Hover
-            delayHoverStart={500}
-            delayHoverEnd={100}
-            onHoverStart={onHoverStart}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.advanceTimersByTime(500);
-        expect(onHoverStart).toHaveBeenCalledTimes(1);
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.advanceTimersByTime(10);
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.runAllTimers();
-        expect(onHoverStart).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
-  describe('onHoverChange', () => {
-    let onHoverChange, ref;
-
-    beforeEach(() => {
-      onHoverChange = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Hover onHoverChange={onHoverChange}>
-          <div ref={ref} />
-        </Hover>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerover" and "pointerout" events', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      expect(onHoverChange).toHaveBeenCalledTimes(1);
-      expect(onHoverChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      expect(onHoverChange).toHaveBeenCalledTimes(2);
-      expect(onHoverChange).toHaveBeenCalledWith(false);
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mouseover" and "mouseout" events', () => {
-      ref.current.dispatchEvent(createPointerEvent('mouseover'));
-      expect(onHoverChange).toHaveBeenCalledTimes(1);
-      expect(onHoverChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createPointerEvent('mouseout'));
-      expect(onHoverChange).toHaveBeenCalledTimes(2);
-      expect(onHoverChange).toHaveBeenCalledWith(false);
-    });
-  });
-
-  describe('onHoverEnd', () => {
-    let onHoverEnd, ref;
-
-    beforeEach(() => {
-      onHoverEnd = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Hover onHoverEnd={onHoverEnd}>
-          <div ref={ref} />
-        </Hover>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerout" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      expect(onHoverEnd).toHaveBeenCalledTimes(1);
-    });
-
-    it('is not called if "pointerover" pointerType is touch', () => {
-      const event = createPointerEvent('pointerover');
-      event.pointerType = 'touch';
-      ref.current.dispatchEvent(event);
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      expect(onHoverEnd).not.toBeCalled();
-    });
-
-    it('ignores browser emulated "mouseout" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      ref.current.dispatchEvent(createPointerEvent('mouseout'));
-      expect(onHoverEnd).toHaveBeenCalledTimes(1);
-    });
-
-    it('is called after "pointercancel" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('pointercancel'));
-      expect(onHoverEnd).toHaveBeenCalledTimes(1);
-    });
-
-    it('is not called again after "pointercancel" event if it follows "pointerout"', () => {
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(createPointerEvent('pointerout'));
-      ref.current.dispatchEvent(createPointerEvent('pointercancel'));
-      expect(onHoverEnd).toHaveBeenCalledTimes(1);
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mouseout" event', () => {
-      ref.current.dispatchEvent(createPointerEvent('mouseover'));
-      ref.current.dispatchEvent(createPointerEvent('mouseout'));
-      expect(onHoverEnd).toHaveBeenCalledTimes(1);
-    });
-    it('is not called after "touchend"', () => {
-      ref.current.dispatchEvent(createPointerEvent('touchstart'));
-      ref.current.dispatchEvent(createPointerEvent('touchend'));
-      ref.current.dispatchEvent(createPointerEvent('mouseout'));
-      expect(onHoverEnd).not.toBeCalled();
-    });
-
-    describe('delayHoverEnd', () => {
-      it('can be configured', () => {
-        const element = (
-          <Hover delayHoverEnd={2000} onHoverEnd={onHoverEnd}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.advanceTimersByTime(1999);
-        expect(onHoverEnd).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onHoverEnd).toHaveBeenCalledTimes(1);
-      });
-
-      it('delayHoverEnd is called synchronously if delay is 0ms', () => {
-        const element = (
-          <Hover delayHoverEnd={0} onHoverEnd={onHoverEnd}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        expect(onHoverEnd).toHaveBeenCalledTimes(1);
-      });
-
-      it('onHoverEnd is only called once per active hover', () => {
-        const element = (
-          <Hover delayHoverEnd={500} onHoverEnd={onHoverEnd}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.advanceTimersByTime(499);
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.advanceTimersByTime(100);
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.runAllTimers();
-        expect(onHoverEnd).toHaveBeenCalledTimes(1);
-      });
-
-      it('onHoverEnd is not called if "pointerover" is dispatched during a delay', () => {
-        const element = (
-          <Hover delayHoverEnd={500} onHoverEnd={onHoverEnd}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.advanceTimersByTime(499);
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        jest.advanceTimersByTime(1);
-        expect(onHoverEnd).not.toBeCalled();
-      });
-
-      it('onHoverEnd is not called if there was no active hover', () => {
-        const element = (
-          <Hover
-            delayHoverStart={500}
-            delayHoverEnd={100}
-            onHoverEnd={onHoverEnd}>
-            <div ref={ref} />
-          </Hover>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createPointerEvent('pointerover'));
-        ref.current.dispatchEvent(createPointerEvent('pointerout'));
-        jest.runAllTimers();
-        expect(onHoverEnd).not.toBeCalled();
-      });
-    });
-  });
-
-  describe('onHoverMove', () => {
-    it('is called after "pointermove"', () => {
-      const onHoverMove = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Hover onHoverMove={onHoverMove}>
-          <div ref={ref} />
-        </Hover>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = () => ({
-        top: 50,
-        left: 50,
-        bottom: 500,
-        right: 500,
-      });
-      ref.current.dispatchEvent(createPointerEvent('pointerover'));
-      ref.current.dispatchEvent(
-        createPointerEvent('pointermove', {pointerType: 'mouse'}),
-      );
-      ref.current.dispatchEvent(createPointerEvent('touchmove'));
-      ref.current.dispatchEvent(createPointerEvent('mousemove'));
-      expect(onHoverMove).toHaveBeenCalledTimes(1);
-      expect(onHoverMove).toHaveBeenCalledWith(
-        expect.objectContaining({type: 'hovermove'}),
-      );
-    });
-  });
-
-  describe('nested Hover components', () => {
-    it('do not propagate events by default', () => {
-      const events = [];
-      const innerRef = React.createRef();
-      const outerRef = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Hover
-          onHoverStart={createEventHandler('outer: onHoverStart')}
-          onHoverEnd={createEventHandler('outer: onHoverEnd')}
-          onHoverChange={createEventHandler('outer: onHoverChange')}>
-          <div ref={outerRef}>
-            <Hover
-              onHoverStart={createEventHandler('inner: onHoverStart')}
-              onHoverEnd={createEventHandler('inner: onHoverEnd')}
-              onHoverChange={createEventHandler('inner: onHoverChange')}>
-              <div ref={innerRef} />
-            </Hover>
-          </div>
-        </Hover>
-      );
-
-      ReactDOM.render(element, container);
-
-      outerRef.current.dispatchEvent(createPointerEvent('pointerover'));
-      outerRef.current.dispatchEvent(
-        createPointerEvent('pointerout', {relatedTarget: innerRef.current}),
-      );
-      innerRef.current.dispatchEvent(createPointerEvent('pointerover'));
-      innerRef.current.dispatchEvent(
-        createPointerEvent('pointerout', {relatedTarget: outerRef.current}),
-      );
-      outerRef.current.dispatchEvent(
-        createPointerEvent('pointerover', {relatedTarget: innerRef.current}),
-      );
-      outerRef.current.dispatchEvent(createPointerEvent('pointerout'));
-      expect(events).toEqual([
-        'outer: onHoverStart',
-        'outer: onHoverChange',
-        'outer: onHoverEnd',
-        'outer: onHoverChange',
-        'inner: onHoverStart',
-        'inner: onHoverChange',
-        'inner: onHoverEnd',
-        'inner: onHoverChange',
-        'outer: onHoverStart',
-        'outer: onHoverChange',
-        'outer: onHoverEnd',
-        'outer: onHoverChange',
-      ]);
-    });
-  });
-
-  it('expect displayName to show up for event component', () => {
-    expect(Hover.displayName).toBe('Hover');
-  });
-});
diff --git a/packages/react-events/src/__tests__/Press-test.internal.js b/packages/react-events/src/__tests__/Press-test.internal.js
deleted file mode 100644
index 16e5292c36c59..0000000000000
--- a/packages/react-events/src/__tests__/Press-test.internal.js
+++ /dev/null
@@ -1,2681 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-let Press;
-let Scheduler;
-
-const DEFAULT_LONG_PRESS_DELAY = 500;
-
-const createEvent = (type, data) => {
-  const event = document.createEvent('CustomEvent');
-  event.initCustomEvent(type, true, true);
-  if (data != null) {
-    Object.entries(data).forEach(([key, value]) => {
-      event[key] = value;
-    });
-  }
-  return event;
-};
-
-const createKeyboardEvent = (type, data) => {
-  return new KeyboardEvent(type, {
-    bubbles: true,
-    cancelable: true,
-    ...data,
-  });
-};
-
-function init() {
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableEventAPI = true;
-  React = require('react');
-  ReactDOM = require('react-dom');
-  Press = require('react-events/press');
-  Scheduler = require('scheduler');
-}
-
-describe('Event responder: Press', () => {
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    init();
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    ReactDOM.render(null, container);
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  describe('disabled', () => {
-    let onPressStart, onPress, onPressEnd, ref;
-
-    beforeEach(() => {
-      onPressStart = jest.fn();
-      onPress = jest.fn();
-      onPressEnd = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press
-          disabled={true}
-          onPressStart={onPressStart}
-          onPress={onPress}
-          onPressEnd={onPressEnd}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('prevents custom events being dispatched', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onPressStart).not.toBeCalled();
-      expect(onPress).not.toBeCalled();
-      expect(onPressEnd).not.toBeCalled();
-    });
-  });
-
-  describe('onPressStart', () => {
-    let onPressStart, ref;
-
-    beforeEach(() => {
-      onPressStart = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press onPressStart={onPressStart}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerdown" event', () => {
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'pen'}),
-      );
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-      expect(onPressStart).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'pen', type: 'pressstart'}),
-      );
-    });
-
-    it('ignores browser emulated events', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-    });
-
-    it('ignores any events not caused by left-click or touch/pen contact', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown', {button: 1}));
-      ref.current.dispatchEvent(createEvent('pointerdown', {button: 5}));
-      ref.current.dispatchEvent(createEvent('mousedown', {button: 2}));
-      expect(onPressStart).toHaveBeenCalledTimes(0);
-    });
-
-    it('is called once after "keydown" events for Enter', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-      expect(onPressStart).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'pressstart'}),
-      );
-    });
-
-    it('is called once after "keydown" events for Spacebar', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: ' '}));
-      ref.current.dispatchEvent(createKeyboardEvent('keypress', {key: ' '}));
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: ' '}));
-      ref.current.dispatchEvent(createKeyboardEvent('keypress', {key: ' '}));
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-      expect(onPressStart).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'pressstart'}),
-      );
-    });
-
-    it('is not called after "keydown" for other keys', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'a'}));
-      expect(onPressStart).not.toBeCalled();
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mousedown" event', () => {
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-      expect(onPressStart).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse', type: 'pressstart'}),
-      );
-    });
-    it('is called after "touchstart" event', () => {
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      expect(onPressStart).toHaveBeenCalledTimes(1);
-      expect(onPressStart).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch', type: 'pressstart'}),
-      );
-    });
-
-    describe('delayPressStart', () => {
-      it('can be configured', () => {
-        const element = (
-          <Press delayPressStart={2000} onPressStart={onPressStart}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(1999);
-        expect(onPressStart).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onPressStart).toHaveBeenCalledTimes(1);
-      });
-
-      it('is cut short if the press is released during a delay', () => {
-        const element = (
-          <Press delayPressStart={2000} onPressStart={onPressStart}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = () => ({
-          top: 50,
-          left: 50,
-          bottom: 500,
-          right: 500,
-        });
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(499);
-        expect(onPressStart).toHaveBeenCalledTimes(0);
-        ref.current.dispatchEvent(
-          createEvent('pointerup', {
-            pageX: 55,
-            pageY: 55,
-          }),
-        );
-        expect(onPressStart).toHaveBeenCalledTimes(1);
-        jest.runAllTimers();
-        expect(onPressStart).toHaveBeenCalledTimes(1);
-      });
-
-      it('onPressStart is called synchronously if delay is 0ms', () => {
-        const element = (
-          <Press delayPressStart={0} onPressStart={onPressStart}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        expect(onPressStart).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('delayPressEnd', () => {
-      it('onPressStart called each time a press is initiated', () => {
-        // This test makes sure that onPressStart is called each time a press
-        // starts, even if a delayPressEnd is delaying the deactivation of the
-        // previous press.
-        const element = (
-          <Press delayPressEnd={2000} onPressStart={onPressStart}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        expect(onPressStart).toHaveBeenCalledTimes(2);
-      });
-    });
-  });
-
-  describe('onPressEnd', () => {
-    let onPressEnd, ref;
-
-    beforeEach(() => {
-      onPressEnd = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press onPressEnd={onPressEnd}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerup" event', () => {
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'pen'}),
-      );
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'pen', type: 'pressend'}),
-      );
-    });
-
-    it('ignores browser emulated events', () => {
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      ref.current.dispatchEvent(createEvent('touchend'));
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      ref.current.dispatchEvent(createEvent('mouseup'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch', type: 'pressend'}),
-      );
-    });
-
-    it('is called after "keyup" event for Enter', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
-      );
-    });
-
-    it('is called after "keyup" event for Spacebar', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: ' '}));
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: ' '}));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
-      );
-    });
-
-    it('is not called after "keyup" event for other keys', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'a'}));
-      expect(onPressEnd).not.toBeCalled();
-    });
-
-    it('is called with keyboard modifiers', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(
-        createKeyboardEvent('keyup', {
-          key: 'Enter',
-          metaKey: true,
-          ctrlKey: true,
-          altKey: true,
-          shiftKey: true,
-        }),
-      );
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({
-          pointerType: 'keyboard',
-          type: 'pressend',
-          metaKey: true,
-          ctrlKey: true,
-          altKey: true,
-          shiftKey: true,
-        }),
-      );
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mouseup" event', () => {
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      ref.current.dispatchEvent(createEvent('mouseup'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse', type: 'pressend'}),
-      );
-    });
-    it('is called after "touchend" event', () => {
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      ref.current.dispatchEvent(createEvent('touchend'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      expect(onPressEnd).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch', type: 'pressend'}),
-      );
-    });
-
-    describe('delayPressEnd', () => {
-      it('can be configured', () => {
-        const element = (
-          <Press delayPressEnd={2000} onPressEnd={onPressEnd}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        jest.advanceTimersByTime(1999);
-        expect(onPressEnd).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onPressEnd).toHaveBeenCalledTimes(1);
-      });
-
-      it('is reset if "pointerdown" is dispatched during a delay', () => {
-        const element = (
-          <Press delayPressEnd={500} onPressEnd={onPressEnd}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        jest.advanceTimersByTime(499);
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(1);
-        expect(onPressEnd).not.toBeCalled();
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        jest.runAllTimers();
-        expect(onPressEnd).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    it('onPressEnd is called synchronously if delay is 0ms', () => {
-      const element = (
-        <Press delayPressEnd={0} onPressEnd={onPressEnd}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('onPressChange', () => {
-    let onPressChange, ref;
-
-    beforeEach(() => {
-      onPressChange = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press onPressChange={onPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called after "pointerdown" and "pointerup" events', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-    });
-
-    it('is called after valid "keydown" and "keyup" events', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-    });
-
-    it('is called after delayed onPressStart', () => {
-      const element = (
-        <Press delayPressStart={500} onPressChange={onPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(499);
-      expect(onPressChange).not.toBeCalled();
-      jest.advanceTimersByTime(1);
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-    });
-
-    it('is called after delayPressStart is cut short', () => {
-      const element = (
-        <Press delayPressStart={500} onPressChange={onPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = () => ({
-        top: 50,
-        left: 50,
-        bottom: 500,
-        right: 500,
-      });
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(100);
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {
-          pageX: 55,
-          pageY: 55,
-        }),
-      );
-      jest.advanceTimersByTime(10);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-    });
-
-    it('is called after delayed onPressEnd', () => {
-      const element = (
-        <Press delayPressEnd={500} onPressChange={onPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      jest.advanceTimersByTime(499);
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      jest.advanceTimersByTime(1);
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-    });
-
-    // No PointerEvent fallbacks
-    it('is called after "mousedown" and "mouseup" events', () => {
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('mouseup'));
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-    });
-    it('is called after "touchstart" and "touchend" events', () => {
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      expect(onPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('touchend'));
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-      expect(onPressChange).toHaveBeenCalledWith(false);
-    });
-  });
-
-  describe('onPress', () => {
-    let onPress, ref;
-
-    beforeEach(() => {
-      onPress = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press onPress={onPress}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 100,
-        right: 100,
-      });
-    });
-
-    it('is called after "pointerup" event', () => {
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'pen'}),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      expect(onPress).toHaveBeenCalledTimes(1);
-      expect(onPress).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'pen', type: 'press'}),
-      );
-    });
-
-    it('is called after valid "keyup" event', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
-      expect(onPress).toHaveBeenCalledTimes(1);
-      expect(onPress).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'press'}),
-      );
-    });
-
-    it('is always called immediately after press is released', () => {
-      const element = (
-        <Press delayPressEnd={500} onPress={onPress}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      expect(onPress).toHaveBeenCalledTimes(1);
-    });
-
-    // No PointerEvent fallbacks
-    // TODO: jsdom missing APIs
-    // it('is called after "touchend" event', () => {
-    // ref.current.dispatchEvent(createEvent('touchstart'));
-    // ref.current.dispatchEvent(createEvent('touchend'));
-    // expect(onPress).toHaveBeenCalledTimes(1);
-    // });
-  });
-
-  describe('onLongPress', () => {
-    let onLongPress, ref;
-
-    beforeEach(() => {
-      onLongPress = jest.fn();
-      ref = React.createRef();
-      const element = (
-        <Press onLongPress={onLongPress}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-    });
-
-    it('is called if "pointerdown" lasts default delay', () => {
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'pen'}),
-      );
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY - 1);
-      expect(onLongPress).not.toBeCalled();
-      jest.advanceTimersByTime(1);
-      expect(onLongPress).toHaveBeenCalledTimes(1);
-      expect(onLongPress).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'pen', type: 'longpress'}),
-      );
-    });
-
-    it('is not called if "pointerup" is dispatched before delay', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY - 1);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      jest.advanceTimersByTime(1);
-      expect(onLongPress).not.toBeCalled();
-    });
-
-    it('is called if valid "keydown" lasts default delay', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY - 1);
-      expect(onLongPress).not.toBeCalled();
-      jest.advanceTimersByTime(1);
-      expect(onLongPress).toHaveBeenCalledTimes(1);
-      expect(onLongPress).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'keyboard', type: 'longpress'}),
-      );
-    });
-
-    it('is not called if valid "keyup" is dispatched before delay', () => {
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY - 1);
-      ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
-      jest.advanceTimersByTime(1);
-      expect(onLongPress).not.toBeCalled();
-    });
-
-    it('is not called when a large enough move occurs before delay', () => {
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 100,
-        right: 100,
-      });
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pageX: 10, pageY: 10}),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {pageX: 50, pageY: 50}),
-      );
-      jest.runAllTimers();
-      expect(onLongPress).not.toBeCalled();
-    });
-
-    describe('delayLongPress', () => {
-      it('can be configured', () => {
-        const element = (
-          <Press delayLongPress={2000} onLongPress={onLongPress}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(1999);
-        expect(onLongPress).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onLongPress).toHaveBeenCalledTimes(1);
-      });
-
-      it('uses 10ms minimum delay length', () => {
-        const element = (
-          <Press delayLongPress={0} onLongPress={onLongPress}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(9);
-        expect(onLongPress).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onLongPress).toHaveBeenCalledTimes(1);
-      });
-
-      it('compounds with "delayPressStart"', () => {
-        const delayPressStart = 100;
-        const element = (
-          <Press delayPressStart={delayPressStart} onLongPress={onLongPress}>
-            <div ref={ref} />
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(
-          delayPressStart + DEFAULT_LONG_PRESS_DELAY - 1,
-        );
-        expect(onLongPress).not.toBeCalled();
-        jest.advanceTimersByTime(1);
-        expect(onLongPress).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
-  describe('onLongPressChange', () => {
-    it('is called when long press state changes', () => {
-      const onLongPressChange = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onLongPressChange={onLongPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-      expect(onLongPressChange).toHaveBeenCalledTimes(1);
-      expect(onLongPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onLongPressChange).toHaveBeenCalledTimes(2);
-      expect(onLongPressChange).toHaveBeenCalledWith(false);
-    });
-
-    it('is called after delayed onPressEnd', () => {
-      const onLongPressChange = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press delayPressEnd={500} onLongPressChange={onLongPressChange}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-      expect(onLongPressChange).toHaveBeenCalledTimes(1);
-      expect(onLongPressChange).toHaveBeenCalledWith(true);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      jest.advanceTimersByTime(499);
-      expect(onLongPressChange).toHaveBeenCalledTimes(1);
-      jest.advanceTimersByTime(1);
-      expect(onLongPressChange).toHaveBeenCalledTimes(2);
-      expect(onLongPressChange).toHaveBeenCalledWith(false);
-    });
-  });
-
-  describe('onLongPressShouldCancelPress', () => {
-    it('if true it cancels "onPress"', () => {
-      const onPress = jest.fn();
-      const onPressChange = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press
-          onLongPress={() => {}}
-          onLongPressShouldCancelPress={() => true}
-          onPressChange={onPressChange}
-          onPress={onPress}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      // NOTE: onPressChange behavior should not be affected
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      expect(onPressChange).toHaveBeenCalledTimes(1);
-      jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      expect(onPress).not.toBeCalled();
-      expect(onPressChange).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('onPressMove', () => {
-    it('is called after "pointermove"', () => {
-      const onPressMove = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPressMove={onPressMove}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 100,
-        right: 100,
-      });
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          pointerType: 'touch',
-          pageX: 10,
-          pageY: 10,
-        }),
-      );
-      expect(onPressMove).toHaveBeenCalledTimes(1);
-      expect(onPressMove).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'touch', type: 'pressmove'}),
-      );
-    });
-
-    it('is not called if "pointermove" occurs during keyboard press', () => {
-      const onPressMove = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPressMove={onPressMove}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 100,
-        right: 100,
-      });
-      ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          pointerType: 'mouse',
-          pageX: 10,
-          pageY: 10,
-        }),
-      );
-      expect(onPressMove).not.toBeCalled();
-    });
-
-    it('ignores browser emulated events', () => {
-      const onPressMove = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPressMove={onPressMove}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 100,
-        right: 100,
-      });
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'touch'}),
-      );
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          pointerType: 'touch',
-          pageX: 10,
-          pageY: 10,
-        }),
-      );
-      ref.current.dispatchEvent(createEvent('touchmove'));
-      ref.current.dispatchEvent(createEvent('mousemove'));
-      expect(onPressMove).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('press with movement (pointer events)', () => {
-    const rectMock = {
-      width: 100,
-      height: 100,
-      top: 50,
-      left: 50,
-      right: 500,
-      bottom: 500,
-    };
-    const pressRectOffset = 20;
-    const getBoundingClientRectMock = () => rectMock;
-    const coordinatesInside = {
-      pageX: rectMock.left - pressRectOffset,
-      pageY: rectMock.top - pressRectOffset,
-    };
-    const coordinatesOutside = {
-      pageX: rectMock.left - pressRectOffset - 1,
-      pageY: rectMock.top - pressRectOffset - 1,
-    };
-
-    describe('within bounds of hit rect', () => {
-      /** ┌──────────────────┐
-       *  │  ┌────────────┐  │
-       *  │  │ VisualRect │  │
-       *  │  └────────────┘  │
-       *  │     HitRect    X │ <= Move to X and release
-       *  └──────────────────┘
-       */
-      it('no delay and "onPress*" events are called immediately', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointermove', coordinatesInside),
-        );
-        ref.current.dispatchEvent(createEvent('pointerup', coordinatesInside));
-        jest.runAllTimers();
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('delay and "onPressMove" is called before "onPress*" events', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            delayPressStart={500}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointermove', coordinatesInside),
-        );
-        jest.advanceTimersByTime(499);
-        expect(events).toEqual(['onPressMove']);
-        events = [];
-
-        jest.advanceTimersByTime(1);
-        expect(events).toEqual(['onPressStart', 'onPressChange']);
-        events = [];
-
-        ref.current.dispatchEvent(createEvent('pointerup', coordinatesInside));
-        expect(events).toEqual(['onPressEnd', 'onPressChange', 'onPress']);
-      });
-
-      it('press retention offset can be configured', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-        const pressRetentionOffset = {top: 40, bottom: 40, left: 40, right: 40};
-
-        const element = (
-          <Press
-            pressRetentionOffset={pressRetentionOffset}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointermove', {
-            pageX: rectMock.left - pressRetentionOffset.left,
-            pageY: rectMock.top - pressRetentionOffset.top,
-          }),
-        );
-        ref.current.dispatchEvent(createEvent('pointerup', coordinatesInside));
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('responder region accounts for decrease in element dimensions', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        // emulate smaller dimensions change on activation
-        ref.current.getBoundingClientRect = () => ({
-          width: 80,
-          height: 80,
-          top: 60,
-          left: 60,
-          right: 490,
-          bottom: 490,
-        });
-        const coordinates = {
-          pageX: rectMock.left,
-          pageY: rectMock.top,
-        };
-        // move to an area within the pre-activation region
-        ref.current.dispatchEvent(createEvent('pointermove', coordinates));
-        ref.current.dispatchEvent(createEvent('pointerup', coordinates));
-        expect(events).toEqual(['onPressStart', 'onPressEnd', 'onPress']);
-      });
-
-      it('responder region accounts for increase in element dimensions', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        // emulate larger dimensions change on activation
-        ref.current.getBoundingClientRect = () => ({
-          width: 200,
-          height: 200,
-          top: 0,
-          left: 0,
-          right: 550,
-          bottom: 550,
-        });
-        const coordinates = {
-          pageX: rectMock.left - 50,
-          pageY: rectMock.top - 50,
-        };
-        // move to an area within the post-activation region
-        ref.current.dispatchEvent(createEvent('pointermove', coordinates));
-        ref.current.dispatchEvent(createEvent('pointerup', coordinates));
-        expect(events).toEqual(['onPressStart', 'onPressEnd', 'onPress']);
-      });
-    });
-
-    describe('the page offset changes', () => {
-      it('"onPress" is called on release', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        // Emulate the <html> element being offset with scroll
-        document.firstElementChild.scrollTop = 1000;
-        const updatedCoordinatesInside = {
-          pageX: coordinatesInside.pageX,
-          pageY: coordinatesInside.pageY + 1000,
-        };
-        ref.current.dispatchEvent(
-          createEvent('pointerdown', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointermove', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointerup', updatedCoordinatesInside),
-        );
-        jest.runAllTimers();
-        document.firstElementChild.scrollTop = 0;
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('"onPress" is called on release inside a fixed container', () => {
-        let events = [];
-        const ref = React.createRef();
-        const fixedContainerRef = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <div ref={fixedContainerRef}>
-            <Press
-              onPress={createEventHandler('onPress')}
-              onPressChange={createEventHandler('onPressChange')}
-              onPressMove={createEventHandler('onPressMove')}
-              onPressStart={createEventHandler('onPressStart')}
-              onPressEnd={createEventHandler('onPressEnd')}>
-              <div ref={ref} />
-            </Press>
-          </div>
-        );
-
-        ReactDOM.render(element, container);
-
-        const fixedDiv = fixedContainerRef.current;
-        Object.defineProperty(fixedDiv, 'offsetParent', {
-          value: null,
-        });
-
-        // The fixed container is not scrolled
-        fixedDiv.scrollTop = 0;
-        fixedDiv.scrollLeft = 0;
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        // Emulate the <html> element being offset with scroll
-        document.firstElementChild.scrollTop = 1000;
-        const updatedCoordinatesInside = {
-          pageX: coordinatesInside.pageX,
-          pageY: coordinatesInside.pageY + 1000,
-        };
-        ref.current.dispatchEvent(
-          createEvent('pointerdown', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointermove', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointerup', updatedCoordinatesInside),
-        );
-        jest.runAllTimers();
-        document.firstElementChild.scrollTop = 0;
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('"onPress" is called on release inside a fixed scrolled container', () => {
-        let events = [];
-        const ref = React.createRef();
-        const fixedContainerRef = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <div ref={fixedContainerRef}>
-            <Press
-              onPress={createEventHandler('onPress')}
-              onPressChange={createEventHandler('onPressChange')}
-              onPressMove={createEventHandler('onPressMove')}
-              onPressStart={createEventHandler('onPressStart')}
-              onPressEnd={createEventHandler('onPressEnd')}>
-              <div ref={ref} />
-            </Press>
-          </div>
-        );
-
-        ReactDOM.render(element, container);
-
-        const fixedDiv = fixedContainerRef.current;
-        Object.defineProperty(fixedDiv, 'offsetParent', {
-          value: null,
-        });
-
-        // The fixed container is scrolled
-        fixedDiv.scrollTop = 100;
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        // Emulate the <html> element being offset with scroll
-        document.firstElementChild.scrollTop = 1000;
-        const updatedCoordinatesInside = {
-          pageX: coordinatesInside.pageX,
-          pageY: coordinatesInside.pageY + 1100,
-        };
-        ref.current.dispatchEvent(
-          createEvent('pointerdown', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointermove', updatedCoordinatesInside),
-        );
-        container.dispatchEvent(
-          createEvent('pointerup', updatedCoordinatesInside),
-        );
-        jest.runAllTimers();
-        document.firstElementChild.scrollTop = 0;
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-    });
-
-    describe('beyond bounds of hit rect', () => {
-      /** ┌──────────────────┐
-       *  │  ┌────────────┐  │
-       *  │  │ VisualRect │  │
-       *  │  └────────────┘  │
-       *  │     HitRect      │
-       *  └──────────────────┘
-       *                   X   <= Move to X and release
-       */
-
-      it('"onPress" is not called on release', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointermove', coordinatesInside),
-        );
-        container.dispatchEvent(createEvent('pointermove', coordinatesOutside));
-        container.dispatchEvent(createEvent('pointerup', coordinatesOutside));
-        jest.runAllTimers();
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-        ]);
-      });
-
-      it('"onPress*" events are not called after delay expires', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            delayPressStart={500}
-            delayPressEnd={500}
-            onLongPress={createEventHandler('onLongPress')}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointermove', coordinatesInside),
-        );
-        container.dispatchEvent(createEvent('pointermove', coordinatesOutside));
-        jest.runAllTimers();
-        expect(events).toEqual(['onPressMove']);
-        events = [];
-        container.dispatchEvent(createEvent('pointerup', coordinatesOutside));
-        jest.runAllTimers();
-        expect(events).toEqual([]);
-      });
-    });
-
-    it('"onPress" is not called on release with mouse', () => {
-      let events = [];
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          onPress={createEventHandler('onPress')}
-          onPressChange={createEventHandler('onPressChange')}
-          onPressMove={createEventHandler('onPressMove')}
-          onPressStart={createEventHandler('onPressStart')}
-          onPressEnd={createEventHandler('onPressEnd')}>
-          <div ref={ref} />
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = getBoundingClientRectMock;
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {
-          pointerType: 'mouse',
-        }),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesInside,
-          pointerType: 'mouse',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesOutside,
-          pointerType: 'mouse',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointerup', {
-          ...coordinatesOutside,
-          pointerType: 'mouse',
-        }),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onPressMove',
-        'onPressEnd',
-        'onPressChange',
-      ]);
-    });
-
-    it('"onPress" is called on re-entry to hit rect for mouse', () => {
-      let events = [];
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          onPress={createEventHandler('onPress')}
-          onPressChange={createEventHandler('onPressChange')}
-          onPressMove={createEventHandler('onPressMove')}
-          onPressStart={createEventHandler('onPressStart')}
-          onPressEnd={createEventHandler('onPressEnd')}>
-          <div ref={ref} />
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = getBoundingClientRectMock;
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {
-          pointerType: 'mouse',
-        }),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesInside,
-          pointerType: 'mouse',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesOutside,
-          pointerType: 'mouse',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesInside,
-          pointerType: 'mouse',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointerup', {
-          ...coordinatesInside,
-          pointerType: 'mouse',
-        }),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onPressMove',
-        'onPressEnd',
-        'onPressChange',
-        'onPressStart',
-        'onPressChange',
-        'onPressEnd',
-        'onPressChange',
-        'onPress',
-      ]);
-    });
-
-    it('"onPress" is called on re-entry to hit rect for touch', () => {
-      let events = [];
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          onPress={createEventHandler('onPress')}
-          onPressChange={createEventHandler('onPressChange')}
-          onPressMove={createEventHandler('onPressMove')}
-          onPressStart={createEventHandler('onPressStart')}
-          onPressEnd={createEventHandler('onPressEnd')}>
-          <div ref={ref} />
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = getBoundingClientRectMock;
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {
-          pointerType: 'touch',
-        }),
-      );
-      ref.current.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesOutside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointermove', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('pointerup', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onPressMove',
-        'onPressEnd',
-        'onPressChange',
-        'onPressStart',
-        'onPressChange',
-        'onPressEnd',
-        'onPressChange',
-        'onPress',
-      ]);
-    });
-  });
-
-  describe('press with movement (touch events fallback)', () => {
-    const rectMock = {
-      width: 100,
-      height: 100,
-      top: 50,
-      left: 50,
-      right: 500,
-      bottom: 500,
-    };
-    const pressRectOffset = 20;
-    const getBoundingClientRectMock = () => rectMock;
-    const coordinatesInside = {
-      changedTouches: [
-        {
-          pageX: rectMock.left - pressRectOffset,
-          pageY: rectMock.top - pressRectOffset,
-        },
-      ],
-    };
-    const coordinatesOutside = {
-      changedTouches: [
-        {
-          pageX: rectMock.left - pressRectOffset - 1,
-          pageY: rectMock.top - pressRectOffset - 1,
-        },
-      ],
-    };
-
-    describe('within bounds of hit rect', () => {
-      /** ┌──────────────────┐
-       *  │  ┌────────────┐  │
-       *  │  │ VisualRect │  │
-       *  │  └────────────┘  │
-       *  │     HitRect    X │ <= Move to X and release
-       *  └──────────────────┘
-       */
-      it('no delay and "onPress*" events are called immediately', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        ref.current.dispatchEvent(createEvent('touchmove', coordinatesInside));
-        ref.current.dispatchEvent(createEvent('touchend', coordinatesInside));
-        jest.runAllTimers();
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('delay and "onPressMove" is called before "onPress*" events', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            delayPressStart={500}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        ref.current.dispatchEvent(createEvent('touchmove', coordinatesInside));
-        jest.advanceTimersByTime(499);
-        expect(events).toEqual(['onPressMove']);
-        events = [];
-
-        jest.advanceTimersByTime(1);
-        expect(events).toEqual(['onPressStart', 'onPressChange']);
-        events = [];
-
-        ref.current.dispatchEvent(createEvent('touchend', coordinatesInside));
-        expect(events).toEqual(['onPressEnd', 'onPressChange', 'onPress']);
-      });
-
-      it('press retention offset can be configured', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-        const pressRetentionOffset = {top: 40, bottom: 40, left: 40, right: 40};
-
-        const element = (
-          <Press
-            pressRetentionOffset={pressRetentionOffset}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        ref.current.dispatchEvent(
-          createEvent('touchmove', {
-            pageX: rectMock.left - pressRetentionOffset.left,
-            pageY: rectMock.top - pressRetentionOffset.top,
-          }),
-        );
-        ref.current.dispatchEvent(createEvent('touchend', coordinatesInside));
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-          'onPress',
-        ]);
-      });
-
-      it('responder region accounts for decrease in element dimensions', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        // emulate smaller dimensions change on activation
-        ref.current.getBoundingClientRect = () => ({
-          width: 80,
-          height: 80,
-          top: 60,
-          left: 60,
-          right: 490,
-          bottom: 490,
-        });
-        const coordinates = {
-          pageX: rectMock.left,
-          pageY: rectMock.top,
-        };
-        // move to an area within the pre-activation region
-        ref.current.dispatchEvent(createEvent('touchmove', coordinates));
-        ref.current.dispatchEvent(createEvent('touchend', coordinates));
-        expect(events).toEqual(['onPressStart', 'onPressEnd', 'onPress']);
-      });
-
-      it('responder region accounts for increase in element dimensions', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        // emulate larger dimensions change on activation
-        ref.current.getBoundingClientRect = () => ({
-          width: 200,
-          height: 200,
-          top: 0,
-          left: 0,
-          right: 550,
-          bottom: 550,
-        });
-        const coordinates = {
-          pageX: rectMock.left - 50,
-          pageY: rectMock.top - 50,
-        };
-        // move to an area within the post-activation region
-        ref.current.dispatchEvent(createEvent('touchmove', coordinates));
-        ref.current.dispatchEvent(createEvent('touchend', coordinates));
-        expect(events).toEqual(['onPressStart', 'onPressEnd', 'onPress']);
-      });
-    });
-
-    describe('beyond bounds of hit rect', () => {
-      /** ┌──────────────────┐
-       *  │  ┌────────────┐  │
-       *  │  │ VisualRect │  │
-       *  │  └────────────┘  │
-       *  │     HitRect      │
-       *  └──────────────────┘
-       *                   X   <= Move to X and release
-       */
-
-      it('"onPress" is not called on release', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        ref.current.dispatchEvent(createEvent('touchmove', coordinatesInside));
-        container.dispatchEvent(createEvent('touchmove', coordinatesOutside));
-        container.dispatchEvent(createEvent('touchend', coordinatesOutside));
-        jest.runAllTimers();
-
-        expect(events).toEqual([
-          'onPressStart',
-          'onPressChange',
-          'onPressMove',
-          'onPressEnd',
-          'onPressChange',
-        ]);
-      });
-
-      it('"onPress*" events are not called after delay expires', () => {
-        let events = [];
-        const ref = React.createRef();
-        const createEventHandler = msg => () => {
-          events.push(msg);
-        };
-
-        const element = (
-          <Press
-            delayPressStart={500}
-            delayPressEnd={500}
-            onLongPress={createEventHandler('onLongPress')}
-            onPress={createEventHandler('onPress')}
-            onPressChange={createEventHandler('onPressChange')}
-            onPressMove={createEventHandler('onPressMove')}
-            onPressStart={createEventHandler('onPressStart')}
-            onPressEnd={createEventHandler('onPressEnd')}>
-            <div ref={ref} />
-          </Press>
-        );
-
-        ReactDOM.render(element, container);
-
-        ref.current.getBoundingClientRect = getBoundingClientRectMock;
-        ref.current.dispatchEvent(createEvent('touchstart'));
-        ref.current.dispatchEvent(createEvent('touchmove', coordinatesInside));
-        container.dispatchEvent(createEvent('touchmove', coordinatesOutside));
-        jest.runAllTimers();
-        expect(events).toEqual(['onPressMove']);
-        events = [];
-        container.dispatchEvent(createEvent('touchend', coordinatesOutside));
-        jest.runAllTimers();
-        expect(events).toEqual([]);
-      });
-    });
-
-    it('"onPress" is called on re-entry to hit rect for touch', () => {
-      let events = [];
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          onPress={createEventHandler('onPress')}
-          onPressChange={createEventHandler('onPressChange')}
-          onPressMove={createEventHandler('onPressMove')}
-          onPressStart={createEventHandler('onPressStart')}
-          onPressEnd={createEventHandler('onPressEnd')}>
-          <div ref={ref} />
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-
-      ref.current.getBoundingClientRect = getBoundingClientRectMock;
-      ref.current.dispatchEvent(
-        createEvent('touchstart', {
-          pointerType: 'touch',
-        }),
-      );
-      ref.current.dispatchEvent(
-        createEvent('touchmove', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('touchmove', {
-          ...coordinatesOutside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('touchmove', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      container.dispatchEvent(
-        createEvent('touchend', {
-          ...coordinatesInside,
-          pointerType: 'touch',
-        }),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onPressMove',
-        'onPressEnd',
-        'onPressChange',
-        'onPressStart',
-        'onPressChange',
-        'onPressEnd',
-        'onPressChange',
-        'onPress',
-      ]);
-    });
-  });
-
-  describe('delayed and multiple events', () => {
-    it('dispatches in the correct order', () => {
-      let events;
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          delayPressStart={250}
-          delayPressEnd={250}
-          onLongPress={createEventHandler('onLongPress')}
-          onLongPressChange={createEventHandler('onLongPressChange')}
-          onPress={createEventHandler('onPress')}
-          onPressChange={createEventHandler('onPressChange')}
-          onPressStart={createEventHandler('onPressStart')}
-          onPressEnd={createEventHandler('onPressEnd')}>
-          <div ref={ref} />
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-      });
-
-      // 1
-      events = [];
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onPress',
-        'onPressStart',
-        'onPress',
-        'onPressEnd',
-        'onPressChange',
-      ]);
-
-      // 2
-      events = [];
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      jest.advanceTimersByTime(250);
-      jest.advanceTimersByTime(500);
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      jest.runAllTimers();
-
-      expect(events).toEqual([
-        'onPressStart',
-        'onPressChange',
-        'onLongPress',
-        'onLongPressChange',
-        'onPress',
-        'onPressEnd',
-        'onPressChange',
-        'onLongPressChange',
-      ]);
-    });
-  });
-
-  describe('nested responders', () => {
-    it('dispatch events in the correct order', () => {
-      const events = [];
-      const ref = React.createRef();
-      const createEventHandler = msg => () => {
-        events.push(msg);
-      };
-
-      const element = (
-        <Press
-          onPress={createEventHandler('outer: onPress')}
-          onPressChange={createEventHandler('outer: onPressChange')}
-          onPressStart={createEventHandler('outer: onPressStart')}
-          onPressEnd={createEventHandler('outer: onPressEnd')}>
-          <Press
-            onPress={createEventHandler('inner: onPress')}
-            onPressChange={createEventHandler('inner: onPressChange')}
-            onPressStart={createEventHandler('inner: onPressStart')}
-            onPressEnd={createEventHandler('inner: onPressEnd')}
-            stopPropagation={false}>
-            <div
-              ref={ref}
-              onPointerDown={createEventHandler('pointerdown')}
-              onPointerUp={createEventHandler('pointerup')}
-              onKeyDown={createEventHandler('keydown')}
-              onKeyUp={createEventHandler('keyup')}
-            />
-          </Press>
-        </Press>
-      );
-
-      ReactDOM.render(element, container);
-      ref.current.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-      });
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(
-        createEvent('pointerup', {pageX: 10, pageY: 10}),
-      );
-      expect(events).toEqual([
-        'inner: onPressStart',
-        'inner: onPressChange',
-        'pointerdown',
-        'inner: onPressEnd',
-        'inner: onPressChange',
-        'inner: onPress',
-        'pointerup',
-      ]);
-    });
-
-    describe('correctly get propagation stopped and do not bubble', () => {
-      it('for onPress', () => {
-        const ref = React.createRef();
-        const fn = jest.fn();
-        const element = (
-          <Press onPress={fn}>
-            <Press onPress={fn}>
-              <div ref={ref} />
-            </Press>
-          </Press>
-        );
-        ReactDOM.render(element, container);
-        ref.current.getBoundingClientRect = () => ({
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-        });
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        ref.current.dispatchEvent(
-          createEvent('pointerup', {pageX: 10, pageY: 10}),
-        );
-        expect(fn).toHaveBeenCalledTimes(1);
-      });
-
-      it('for onLongPress', () => {
-        const ref = React.createRef();
-        const fn = jest.fn();
-        const element = (
-          <Press onLongPress={fn}>
-            <Press onLongPress={fn}>
-              <div ref={ref} />
-            </Press>
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        expect(fn).toHaveBeenCalledTimes(1);
-      });
-
-      it('for onPressStart/onPressEnd', () => {
-        const ref = React.createRef();
-        const fn = jest.fn();
-        const fn2 = jest.fn();
-        const element = (
-          <Press onPressStart={fn} onPressEnd={fn2}>
-            <Press onPressStart={fn} onPressEnd={fn2}>
-              <div ref={ref} />
-            </Press>
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        expect(fn).toHaveBeenCalledTimes(1);
-        expect(fn2).toHaveBeenCalledTimes(0);
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        expect(fn).toHaveBeenCalledTimes(1);
-        expect(fn2).toHaveBeenCalledTimes(1);
-      });
-
-      it('for onPressChange', () => {
-        const ref = React.createRef();
-        const fn = jest.fn();
-        const element = (
-          <Press onPressChange={fn}>
-            <Press onPressChange={fn}>
-              <div ref={ref} />
-            </Press>
-          </Press>
-        );
-        ReactDOM.render(element, container);
-
-        ref.current.dispatchEvent(createEvent('pointerdown'));
-        expect(fn).toHaveBeenCalledTimes(1);
-        ref.current.dispatchEvent(createEvent('pointerup'));
-        expect(fn).toHaveBeenCalledTimes(2);
-      });
-    });
-  });
-
-  describe('link components', () => {
-    it('prevents native behaviour by default', () => {
-      const onPress = jest.fn();
-      const preventDefault = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPress={onPress}>
-          <a href="#" ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      ref.current.dispatchEvent(createEvent('click', {preventDefault}));
-      expect(preventDefault).toBeCalled();
-    });
-
-    it('deeply prevents native behaviour by default', () => {
-      const onPress = jest.fn();
-      const preventDefault = jest.fn();
-      const buttonRef = React.createRef();
-      const element = (
-        <a href="#">
-          <Press onPress={onPress}>
-            <button ref={buttonRef} />
-          </Press>
-        </a>
-      );
-      ReactDOM.render(element, container);
-
-      buttonRef.current.dispatchEvent(createEvent('pointerdown'));
-      buttonRef.current.dispatchEvent(createEvent('pointerup'));
-      buttonRef.current.dispatchEvent(createEvent('click', {preventDefault}));
-      expect(preventDefault).toBeCalled();
-    });
-
-    it('prevents native behaviour by default with nested elements', () => {
-      const onPress = jest.fn();
-      const preventDefault = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPress={onPress}>
-          <a href="#">
-            <div ref={ref} />
-          </a>
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      ref.current.dispatchEvent(createEvent('click', {preventDefault}));
-      expect(preventDefault).toBeCalled();
-    });
-
-    it('uses native behaviour for interactions with modifier keys', () => {
-      const onPress = jest.fn();
-      const preventDefault = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPress={onPress}>
-          <a href="#" ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ['metaKey', 'ctrlKey', 'shiftKey'].forEach(modifierKey => {
-        ref.current.dispatchEvent(
-          createEvent('pointerdown', {[modifierKey]: true}),
-        );
-        ref.current.dispatchEvent(
-          createEvent('pointerup', {[modifierKey]: true}),
-        );
-        ref.current.dispatchEvent(
-          createEvent('click', {[modifierKey]: true, preventDefault}),
-        );
-        expect(preventDefault).not.toBeCalled();
-      });
-    });
-
-    it('uses native behaviour if preventDefault is false', () => {
-      const onPress = jest.fn();
-      const preventDefault = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onPress={onPress} preventDefault={false}>
-          <a href="#" ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointerup'));
-      ref.current.dispatchEvent(createEvent('click', {preventDefault}));
-      expect(preventDefault).not.toBeCalled();
-    });
-  });
-
-  describe('responder cancellation', () => {
-    it('ends on "pointercancel", "touchcancel", "scroll", and "dragstart"', () => {
-      const onLongPress = jest.fn();
-      const onPressEnd = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onLongPress={onLongPress} onPressEnd={onPressEnd}>
-          <a href="#" ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('scroll'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      jest.runAllTimers();
-      expect(onLongPress).not.toBeCalled();
-
-      onLongPress.mockReset();
-      onPressEnd.mockReset();
-
-      // When pointer events are supported
-      ref.current.dispatchEvent(createEvent('pointerdown'));
-      ref.current.dispatchEvent(createEvent('pointercancel'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      jest.runAllTimers();
-      expect(onLongPress).not.toBeCalled();
-
-      onLongPress.mockReset();
-      onPressEnd.mockReset();
-
-      // Touch fallback
-      ref.current.dispatchEvent(createEvent('touchstart'));
-      ref.current.dispatchEvent(createEvent('touchcancel'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      jest.runAllTimers();
-      expect(onLongPress).not.toBeCalled();
-
-      onLongPress.mockReset();
-      onPressEnd.mockReset();
-
-      // Mouse fallback
-      ref.current.dispatchEvent(createEvent('mousedown'));
-      ref.current.dispatchEvent(createEvent('dragstart'));
-      expect(onPressEnd).toHaveBeenCalledTimes(1);
-      jest.runAllTimers();
-      expect(onLongPress).not.toBeCalled();
-    });
-  });
-
-  it('expect displayName to show up for event component', () => {
-    expect(Press.displayName).toBe('Press');
-  });
-
-  it('should not trigger an invariant in addRootEventTypes()', () => {
-    const ref = React.createRef();
-    const element = (
-      <Press>
-        <button ref={ref} />
-      </Press>
-    );
-    ReactDOM.render(element, container);
-
-    ref.current.dispatchEvent(createEvent('pointerdown'));
-    jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-    ref.current.dispatchEvent(createEvent('pointermove'));
-    ref.current.dispatchEvent(createEvent('pointerup'));
-    ref.current.dispatchEvent(createEvent('pointerdown'));
-  });
-
-  it('should correctly pass through event properties', () => {
-    const timeStamps = [];
-    const ref = React.createRef();
-    const eventLog = [];
-    const logEvent = event => {
-      const propertiesWeCareAbout = {
-        pageX: event.pageX,
-        pageY: event.pageY,
-        screenX: event.screenX,
-        screenY: event.screenY,
-        clientX: event.clientX,
-        clientY: event.clientY,
-        pointerType: event.pointerType,
-        target: event.target,
-        timeStamp: event.timeStamp,
-        type: event.type,
-      };
-      timeStamps.push(event.timeStamp);
-      eventLog.push(propertiesWeCareAbout);
-    };
-    const element = (
-      <Press
-        onPressStart={logEvent}
-        onPressEnd={logEvent}
-        onPressMove={logEvent}
-        onLongPress={logEvent}
-        onPress={logEvent}>
-        <button ref={ref} />
-      </Press>
-    );
-    ReactDOM.render(element, container);
-
-    ref.current.dispatchEvent(
-      createEvent('pointerdown', {
-        pointerType: 'mouse',
-        pageX: 15,
-        pageY: 16,
-        screenX: 20,
-        screenY: 21,
-        clientX: 30,
-        clientY: 31,
-      }),
-    );
-    jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);
-    ref.current.dispatchEvent(
-      createEvent('pointermove', {
-        pointerType: 'mouse',
-        pageX: 16,
-        pageY: 17,
-        screenX: 21,
-        screenY: 22,
-        clientX: 31,
-        clientY: 32,
-      }),
-    );
-    ref.current.dispatchEvent(
-      createEvent('pointerup', {
-        pointerType: 'mouse',
-        pageX: 17,
-        pageY: 18,
-        screenX: 22,
-        screenY: 23,
-        clientX: 32,
-        clientY: 33,
-      }),
-    );
-    ref.current.dispatchEvent(
-      createEvent('pointerdown', {
-        pointerType: 'mouse',
-        pageX: 18,
-        pageY: 19,
-        screenX: 23,
-        screenY: 24,
-        clientX: 33,
-        clientY: 34,
-      }),
-    );
-    expect(typeof timeStamps[0] === 'number').toBe(true);
-    expect(eventLog).toEqual([
-      {
-        pointerType: 'mouse',
-        pageX: 15,
-        pageY: 16,
-        screenX: 20,
-        screenY: 21,
-        clientX: 30,
-        clientY: 31,
-        target: ref.current,
-        timeStamp: timeStamps[0],
-        type: 'pressstart',
-      },
-      {
-        pointerType: 'mouse',
-        pageX: 15,
-        pageY: 16,
-        screenX: 20,
-        screenY: 21,
-        clientX: 30,
-        clientY: 31,
-        target: ref.current,
-        timeStamp: timeStamps[0] + DEFAULT_LONG_PRESS_DELAY,
-        type: 'longpress',
-      },
-      {
-        pointerType: 'mouse',
-        pageX: 16,
-        pageY: 17,
-        screenX: 21,
-        screenY: 22,
-        clientX: 31,
-        clientY: 32,
-        target: ref.current,
-        timeStamp: timeStamps[2],
-        type: 'pressmove',
-      },
-      {
-        pointerType: 'mouse',
-        pageX: 17,
-        pageY: 18,
-        screenX: 22,
-        screenY: 23,
-        clientX: 32,
-        clientY: 33,
-        target: ref.current,
-        timeStamp: timeStamps[3],
-        type: 'pressend',
-      },
-      {
-        pointerType: 'mouse',
-        pageX: 17,
-        pageY: 18,
-        screenX: 22,
-        screenY: 23,
-        clientX: 32,
-        clientY: 33,
-        target: ref.current,
-        timeStamp: timeStamps[3],
-        type: 'press',
-      },
-      {
-        pointerType: 'mouse',
-        pageX: 18,
-        pageY: 19,
-        screenX: 23,
-        screenY: 24,
-        clientX: 33,
-        clientY: 34,
-        target: ref.current,
-        timeStamp: timeStamps[5],
-        type: 'pressstart',
-      },
-    ]);
-  });
-
-  function dispatchEventWithTimeStamp(elem, name, timeStamp) {
-    const event = createEvent(name);
-    Object.defineProperty(event, 'timeStamp', {
-      value: timeStamp,
-    });
-    elem.dispatchEvent(event);
-  }
-
-  it('should properly only flush sync once when the event systems are mixed', () => {
-    const ref = React.createRef();
-    let renderCounts = 0;
-
-    function MyComponent() {
-      const [, updateCounter] = React.useState(0);
-      renderCounts++;
-
-      function handlePress() {
-        updateCounter(count => count + 1);
-      }
-
-      return (
-        <div>
-          <Press onPress={handlePress}>
-            <button
-              ref={ref}
-              onClick={() => {
-                updateCounter(count => count + 1);
-              }}>
-              Press me
-            </button>
-          </Press>
-        </div>
-      );
-    }
-
-    const newContainer = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(newContainer);
-    document.body.appendChild(newContainer);
-    root.render(<MyComponent />);
-    Scheduler.flushAll();
-
-    dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);
-    dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);
-    dispatchEventWithTimeStamp(ref.current, 'click', 100);
-
-    if (__DEV__) {
-      expect(renderCounts).toBe(2);
-    } else {
-      expect(renderCounts).toBe(1);
-    }
-    Scheduler.flushAll();
-    if (__DEV__) {
-      expect(renderCounts).toBe(4);
-    } else {
-      expect(renderCounts).toBe(2);
-    }
-
-    dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);
-    dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);
-    // Ensure the timeStamp logic works
-    dispatchEventWithTimeStamp(ref.current, 'click', 101);
-
-    if (__DEV__) {
-      expect(renderCounts).toBe(6);
-    } else {
-      expect(renderCounts).toBe(3);
-    }
-
-    Scheduler.flushAll();
-    document.body.removeChild(newContainer);
-  });
-
-  it('should properly flush sync when the event systems are mixed with unstable_flushDiscreteUpdates', () => {
-    const ref = React.createRef();
-    let renderCounts = 0;
-
-    function MyComponent() {
-      const [, updateCounter] = React.useState(0);
-      renderCounts++;
-
-      function handlePress() {
-        updateCounter(count => count + 1);
-      }
-
-      return (
-        <div>
-          <Press onPress={handlePress}>
-            <button
-              ref={ref}
-              onClick={() => {
-                // This should flush synchronously
-                ReactDOM.unstable_flushDiscreteUpdates();
-                updateCounter(count => count + 1);
-              }}>
-              Press me
-            </button>
-          </Press>
-        </div>
-      );
-    }
-
-    const newContainer = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(newContainer);
-    document.body.appendChild(newContainer);
-    root.render(<MyComponent />);
-    Scheduler.flushAll();
-
-    dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);
-    dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);
-    dispatchEventWithTimeStamp(ref.current, 'click', 100);
-
-    if (__DEV__) {
-      expect(renderCounts).toBe(4);
-    } else {
-      expect(renderCounts).toBe(2);
-    }
-    Scheduler.flushAll();
-    if (__DEV__) {
-      expect(renderCounts).toBe(6);
-    } else {
-      expect(renderCounts).toBe(3);
-    }
-
-    dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);
-    dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);
-    // Ensure the timeStamp logic works
-    dispatchEventWithTimeStamp(ref.current, 'click', 101);
-
-    if (__DEV__) {
-      expect(renderCounts).toBe(8);
-    } else {
-      expect(renderCounts).toBe(4);
-    }
-
-    Scheduler.flushAll();
-    document.body.removeChild(newContainer);
-  });
-
-  describe('onContextMenu', () => {
-    it('is called after a right mouse click', () => {
-      const onContextMenu = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onContextMenu={onContextMenu}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'mouse', button: 2}),
-      );
-      ref.current.dispatchEvent(createEvent('contextmenu'));
-      expect(onContextMenu).toHaveBeenCalledTimes(1);
-      expect(onContextMenu).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse', type: 'contextmenu'}),
-      );
-    });
-
-    it('is called after a left mouse click + ctrl key on Mac', () => {
-      jest.resetModules();
-      const platformGetter = jest.spyOn(global.navigator, 'platform', 'get');
-      platformGetter.mockReturnValue('MacIntel');
-      init();
-
-      const onContextMenu = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onContextMenu={onContextMenu}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {
-          pointerType: 'mouse',
-          button: 0,
-          ctrlKey: true,
-        }),
-      );
-      ref.current.dispatchEvent(createEvent('contextmenu'));
-      expect(onContextMenu).toHaveBeenCalledTimes(1);
-      expect(onContextMenu).toHaveBeenCalledWith(
-        expect.objectContaining({pointerType: 'mouse', type: 'contextmenu'}),
-      );
-      platformGetter.mockClear();
-    });
-
-    it('is not called after a left mouse click + ctrl key on Windows', () => {
-      jest.resetModules();
-      const platformGetter = jest.spyOn(global.navigator, 'platform', 'get');
-      platformGetter.mockReturnValue('Win32');
-      init();
-
-      const onContextMenu = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onContextMenu={onContextMenu}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {
-          pointerType: 'mouse',
-          button: 0,
-          ctrlKey: true,
-        }),
-      );
-      ref.current.dispatchEvent(createEvent('contextmenu'));
-      expect(onContextMenu).toHaveBeenCalledTimes(0);
-      platformGetter.mockClear();
-    });
-
-    it('is not called after a right mouse click occurs during an active press', () => {
-      const onContextMenu = jest.fn();
-      const ref = React.createRef();
-      const element = (
-        <Press onContextMenu={onContextMenu}>
-          <div ref={ref} />
-        </Press>
-      );
-      ReactDOM.render(element, container);
-
-      ref.current.dispatchEvent(
-        createEvent('pointerdown', {pointerType: 'mouse', button: 0}),
-      );
-      ref.current.dispatchEvent(createEvent('contextmenu'));
-      expect(onContextMenu).toHaveBeenCalledTimes(0);
-    });
-  });
-});
diff --git a/packages/react-events/src/__tests__/TouchHitTarget-test.internal.js b/packages/react-events/src/__tests__/TouchHitTarget-test.internal.js
deleted file mode 100644
index fdaaf13fe046e..0000000000000
--- a/packages/react-events/src/__tests__/TouchHitTarget-test.internal.js
+++ /dev/null
@@ -1,649 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactNoop;
-let Scheduler;
-let ReactFeatureFlags;
-let EventComponent;
-let ReactTestRenderer;
-let ReactDOM;
-let ReactDOMServer;
-let ReactSymbols;
-let ReactEvents;
-let TouchHitTarget;
-
-const noOpResponder = {
-  targetEventTypes: [],
-  onEvent() {},
-};
-
-function createReactEventComponent() {
-  return {
-    $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,
-    props: null,
-    responder: noOpResponder,
-  };
-}
-
-function init() {
-  jest.resetModules();
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableEventAPI = true;
-  React = require('react');
-  Scheduler = require('scheduler');
-  ReactSymbols = require('shared/ReactSymbols');
-  ReactEvents = require('react-events');
-}
-
-function initNoopRenderer() {
-  init();
-  ReactNoop = require('react-noop-renderer');
-}
-
-function initTestRenderer() {
-  init();
-  ReactTestRenderer = require('react-test-renderer');
-}
-
-function initReactDOM() {
-  init();
-  ReactDOM = require('react-dom');
-}
-
-function initReactDOMServer() {
-  init();
-  ReactDOMServer = require('react-dom/server');
-}
-
-describe('TouchHitTarget', () => {
-  describe('NoopRenderer', () => {
-    beforeEach(() => {
-      initNoopRenderer();
-      EventComponent = createReactEventComponent();
-      TouchHitTarget = ReactEvents.TouchHitTarget;
-    });
-
-    it('should not warn when a TouchHitTarget is used correctly', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<div />);
-    });
-
-    it('should warn when a TouchHitTarget has children', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>
-              <span>Child 1</span>
-            </TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      const Test2 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>Child 1</TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test2 />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      // Should render without warnings
-      const Test3 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Test3 />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<div />);
-    });
-
-    it('should warn when a TouchHitTarget is a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <TouchHitTarget />
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-    });
-  });
-
-  describe('TestRenderer', () => {
-    beforeEach(() => {
-      initTestRenderer();
-      EventComponent = createReactEventComponent();
-      TouchHitTarget = ReactEvents.TouchHitTarget;
-    });
-
-    it('should not warn when a TouchHitTarget is used correctly', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<div />);
-    });
-
-    it('should warn when a TouchHitTarget has children', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>
-              <span>Child 1</span>
-            </TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      const Test2 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>Child 1</TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      expect(() => {
-        root.update(<Test2 />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      // Should render without warnings
-      const Test3 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      root.update(<Test3 />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<div />);
-    });
-
-    it('should warn when a TouchHitTarget is a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <TouchHitTarget />
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-    });
-  });
-
-  describe('ReactDOM', () => {
-    beforeEach(() => {
-      initReactDOM();
-      EventComponent = createReactEventComponent();
-      TouchHitTarget = ReactEvents.TouchHitTarget;
-    });
-
-    it('should not warn when a TouchHitTarget is used correctly', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div></div>');
-    });
-
-    it('should warn when a TouchHitTarget has children', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>
-              <span>Child 1</span>
-            </TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      expect(() => {
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      const Test2 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget>Child 1</TouchHitTarget>
-          </div>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactDOM.render(<Test2 />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-
-      // Should render without warnings
-      const Test3 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      ReactDOM.render(<Test3 />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div></div>');
-    });
-
-    it('should warn when a TouchHitTarget is a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <TouchHitTarget />
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      expect(() => {
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-    });
-
-    it('should render a conditional TouchHitTarget correctly (false -> true)', () => {
-      let cond = false;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            {cond ? null : (
-              <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-            )}
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: -10px; right: -10px; top: -10px;"></div></div>',
-      );
-
-      cond = true;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"></div>',
-      );
-    });
-
-    it('should render a conditional TouchHitTarget correctly (true -> false)', () => {
-      let cond = true;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            {cond ? null : (
-              <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-            )}
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"></div>',
-      );
-
-      cond = false;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: -10px; right: -10px; top: -10px;"></div></div>',
-      );
-    });
-
-    it('should render a conditional TouchHitTarget hit slop correctly (false -> true)', () => {
-      let cond = false;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            {cond ? (
-              <TouchHitTarget />
-            ) : (
-              <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-            )}
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: -10px; right: -10px; top: -10px;"></div></div>',
-      );
-
-      cond = true;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"></div>',
-      );
-    });
-
-    it('should render a conditional TouchHitTarget hit slop correctly (true -> false)', () => {
-      let cond = true;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <span>Random span 1</span>
-            {cond ? (
-              <TouchHitTarget />
-            ) : (
-              <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-            )}
-            <span>Random span 2</span>
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span><span>Random span 2</span></div>',
-      );
-
-      cond = false;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
-          '<div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: -10px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
-      );
-    });
-
-    it('should update TouchHitTarget hit slop values correctly (false -> true)', () => {
-      let cond = false;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <span>Random span 1</span>
-            {cond ? (
-              <TouchHitTarget top={10} left={null} right={10} bottom={10} />
-            ) : (
-              <TouchHitTarget
-                top={undefined}
-                left={20}
-                right={null}
-                bottom={0}
-              />
-            )}
-            <span>Random span 2</span>
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
-          '<div style="position: absolute; z-index: -1; bottom: 0px; ' +
-          'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
-      );
-
-      cond = true;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
-          '<div style="position: absolute; z-index: -1; bottom: 0px; ' +
-          'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
-      );
-    });
-
-    it('should update TouchHitTarget hit slop values correctly (true -> false)', () => {
-      let cond = true;
-
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <span>Random span 1</span>
-            {cond ? (
-              <TouchHitTarget top={10} left={null} right={10} bottom={10} />
-            ) : (
-              <TouchHitTarget
-                top={undefined}
-                left={20}
-                right={null}
-                bottom={0}
-              />
-            )}
-            <span>Random span 2</span>
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
-          '<div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: 0px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
-      );
-
-      cond = false;
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0;"><span>Random span 1</span><div style="position: absolute; ' +
-          'z-index: -1; bottom: -10px; left: 0px; right: -10px; top: -10px;">' +
-          '</div><span>Random span 2</span></div>',
-      );
-    });
-
-    it('should hydrate TouchHitTarget hit slop elements correcty', () => {
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      container.innerHTML = '<div style="position:relative;z-index:0"></div>';
-      ReactDOM.hydrate(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position:relative;z-index:0"></div>',
-      );
-
-      const Test2 = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-          </div>
-        </EventComponent>
-      );
-
-      const container2 = document.createElement('div');
-      container2.innerHTML =
-        '<div style="position:relative;z-index:0"><div style="position:absolute;pointer-events:none;z-index:-1;' +
-        'bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
-      ReactDOM.hydrate(<Test2 />, container2);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container2.innerHTML).toBe(
-        '<div style="position:relative;z-index:0"><div style="position: absolute; z-index: -1; ' +
-          'bottom: -10px; left: -10px; right: -10px; top: -10px;"></div></div>',
-      );
-    });
-
-    it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {
-      const Test = () => (
-        <EventComponent>
-          <div style={{position: 'relative', zIndex: 0}}>
-            <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      container.innerHTML =
-        '<div style="position: relative; z-index: 0"></div>';
-      expect(() => {
-        ReactDOM.hydrate(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: Expected server HTML to contain a matching <div> in <div>.',
-        {withoutStack: true},
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe(
-        '<div style="position: relative; z-index: 0"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
-          'left: -10px; right: -10px; top: -10px;"></div></div>',
-      );
-    });
-  });
-
-  describe('ReactDOMServer', () => {
-    beforeEach(() => {
-      initReactDOMServer();
-      EventComponent = createReactEventComponent();
-      TouchHitTarget = ReactEvents.TouchHitTarget;
-    });
-
-    it('should not warn when a TouchHitTarget is used correctly', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe('<div></div>');
-    });
-
-    it('should render a TouchHitTarget with hit slop values', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-          </div>
-        </EventComponent>
-      );
-
-      let output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
-          'bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
-      );
-
-      const Test2 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget top={null} left={undefined} right={0} bottom={10} />
-          </div>
-        </EventComponent>
-      );
-
-      output = ReactDOMServer.renderToString(<Test2 />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
-          'bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
-      );
-
-      const Test3 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget top={1} left={2} right={3} bottom={4} />
-          </div>
-        </EventComponent>
-      );
-
-      output = ReactDOMServer.renderToString(<Test3 />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
-          'bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
-      );
-    });
-  });
-});
diff --git a/packages/react-events/src/utils.js b/packages/react-events/src/utils.js
deleted file mode 100644
index 15848aafca984..0000000000000
--- a/packages/react-events/src/utils.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-
-export function isEventPositionWithinTouchHitTarget(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
-) {
-  const nativeEvent: any = event.nativeEvent;
-  return context.isPositionWithinTouchHitTarget(
-    // x and y can be doubles, so ensure they are integers
-    parseInt(nativeEvent.x, 10),
-    parseInt(nativeEvent.y, 10),
-  );
-}
diff --git a/packages/react-events/swipe.js b/packages/react-events/swipe.js
deleted file mode 100644
index 3c2ad195ef4b2..0000000000000
--- a/packages/react-events/swipe.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-'use strict';
-
-const Swipe = require('./src/Swipe');
-
-module.exports = Swipe.default || Swipe;
diff --git a/packages/react-flight-dom-webpack/README.md b/packages/react-flight-dom-webpack/README.md
new file mode 100644
index 0000000000000..9f69d87392d4b
--- /dev/null
+++ b/packages/react-flight-dom-webpack/README.md
@@ -0,0 +1,5 @@
+# react-flight-dom-webpack
+
+Experimental React Flight bindings for DOM using Webpack.
+
+**Use it at your own risk.**
diff --git a/packages/react-flight-dom-webpack/index.js b/packages/react-flight-dom-webpack/index.js
new file mode 100644
index 0000000000000..5b82a9d829acf
--- /dev/null
+++ b/packages/react-flight-dom-webpack/index.js
@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactFlightDOMClient = require('./src/ReactFlightDOMClient');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest
+module.exports = ReactFlightDOMClient.default || ReactFlightDOMClient;
diff --git a/packages/react-flight-dom-webpack/npm/index.js b/packages/react-flight-dom-webpack/npm/index.js
new file mode 100644
index 0000000000000..98d1e3a5dd3d2
--- /dev/null
+++ b/packages/react-flight-dom-webpack/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-flight-dom-webpack.production.min.js');
+} else {
+  module.exports = require('./cjs/react-flight-dom-webpack.development.js');
+}
diff --git a/packages/react-flight-dom-webpack/npm/server.browser.js b/packages/react-flight-dom-webpack/npm/server.browser.js
new file mode 100644
index 0000000000000..2498fb4b51314
--- /dev/null
+++ b/packages/react-flight-dom-webpack/npm/server.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-flight-dom-webpack-server.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-flight-dom-webpack-server.browser.development.js');
+}
diff --git a/packages/react-flight-dom-webpack/npm/server.js b/packages/react-flight-dom-webpack/npm/server.js
new file mode 100644
index 0000000000000..02f1553990a22
--- /dev/null
+++ b/packages/react-flight-dom-webpack/npm/server.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server.node');
diff --git a/packages/react-flight-dom-webpack/npm/server.node.js b/packages/react-flight-dom-webpack/npm/server.node.js
new file mode 100644
index 0000000000000..1ec3340524f26
--- /dev/null
+++ b/packages/react-flight-dom-webpack/npm/server.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-flight-dom-webpack-server.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-flight-dom-webpack-server.node.development.js');
+}
diff --git a/packages/react-flight-dom-webpack/package.json b/packages/react-flight-dom-webpack/package.json
new file mode 100644
index 0000000000000..8f48fae57f51c
--- /dev/null
+++ b/packages/react-flight-dom-webpack/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "react-flight-dom-webpack",
+  "description": "React Flight bindings for DOM using Webpack.",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "server.js",
+    "server.browser.js",
+    "server.node.js",
+    "cjs/",
+    "umd/"
+  ],
+  "browser": {
+    "./server.js": "./server.browser.js"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-flight-dom-webpack"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "webpack": "^4.41.2"
+  },
+  "dependencies": {
+    "loose-envify": "^1.1.0",
+    "object-assign": "^4.1.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  }
+}
diff --git a/packages/react-flight-dom-webpack/server.browser.js b/packages/react-flight-dom-webpack/server.browser.js
new file mode 100644
index 0000000000000..b6d542749d0c4
--- /dev/null
+++ b/packages/react-flight-dom-webpack/server.browser.js
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactFlightDOMServerBrowser = require('./src/ReactFlightDOMServerBrowser');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest
+module.exports =
+  ReactFlightDOMServerBrowser.default || ReactFlightDOMServerBrowser;
diff --git a/packages/react-flight-dom-webpack/server.js b/packages/react-flight-dom-webpack/server.js
new file mode 100644
index 0000000000000..03006336ba4fe
--- /dev/null
+++ b/packages/react-flight-dom-webpack/server.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./server.node');
diff --git a/packages/react-flight-dom-webpack/server.node.js b/packages/react-flight-dom-webpack/server.node.js
new file mode 100644
index 0000000000000..1cbf1781b0f86
--- /dev/null
+++ b/packages/react-flight-dom-webpack/server.node.js
@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactFlightDOMServerNode = require('./src/ReactFlightDOMServerNode');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest
+module.exports = ReactFlightDOMServerNode.default || ReactFlightDOMServerNode;
diff --git a/packages/react-flight-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-flight-dom-webpack/src/ReactFlightDOMClient.js
new file mode 100644
index 0000000000000..e9c44f25021e5
--- /dev/null
+++ b/packages/react-flight-dom-webpack/src/ReactFlightDOMClient.js
@@ -0,0 +1,86 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {ReactModelRoot} from 'react-flight/src/ReactFlightClient';
+
+import {
+  createResponse,
+  getModelRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  complete,
+} from 'react-flight/inline.dom';
+
+function startReadingFromStream(response, stream: ReadableStream): void {
+  let reader = stream.getReader();
+  function progress({done, value}) {
+    if (done) {
+      complete(response);
+      return;
+    }
+    let buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, buffer);
+    return reader.read().then(progress, error);
+  }
+  function error(e) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress, error);
+}
+
+function readFromReadableStream<T>(stream: ReadableStream): ReactModelRoot<T> {
+  let response = createResponse(stream);
+  startReadingFromStream(response, stream);
+  return getModelRoot(response);
+}
+
+function readFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+): ReactModelRoot<T> {
+  let response = createResponse(promiseForResponse);
+  promiseForResponse.then(
+    function(r) {
+      startReadingFromStream(response, (r.body: any));
+    },
+    function(e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getModelRoot(response);
+}
+
+function readFromXHR<T>(request: XMLHttpRequest): ReactModelRoot<T> {
+  let response = createResponse(request);
+  let processedLength = 0;
+  function progress(e: ProgressEvent): void {
+    let chunk = request.responseText;
+    processStringChunk(response, chunk, processedLength);
+    processedLength = chunk.length;
+  }
+  function load(e: ProgressEvent): void {
+    progress(e);
+    complete(response);
+  }
+  function error(e: ProgressEvent): void {
+    reportGlobalError(response, new TypeError('Network error'));
+  }
+  request.addEventListener('progress', progress);
+  request.addEventListener('load', load);
+  request.addEventListener('error', error);
+  request.addEventListener('abort', error);
+  request.addEventListener('timeout', error);
+  return getModelRoot(response);
+}
+
+export default {
+  readFromXHR,
+  readFromFetch,
+  readFromReadableStream,
+};
diff --git a/packages/react-flight-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-flight-dom-webpack/src/ReactFlightDOMServerBrowser.js
new file mode 100644
index 0000000000000..2aaf9ed3c0c4d
--- /dev/null
+++ b/packages/react-flight-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {ReactModel} from 'react-server/flight.inline-typed';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/flight.inline.dom-browser';
+
+function renderToReadableStream(model: ReactModel): ReadableStream {
+  let request;
+  return new ReadableStream({
+    start(controller) {
+      request = createRequest(model, controller);
+      startWork(request);
+    },
+    pull(controller) {
+      startFlowing(request);
+    },
+    cancel(reason) {},
+  });
+}
+
+export default {
+  renderToReadableStream,
+};
diff --git a/packages/react-flight-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-flight-dom-webpack/src/ReactFlightDOMServerNode.js
new file mode 100644
index 0000000000000..9e6fa042647ea
--- /dev/null
+++ b/packages/react-flight-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {ReactModel} from 'react-server/flight.inline-typed';
+import type {Writable} from 'stream';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/flight.inline.dom';
+
+function createDrainHandler(destination, request) {
+  return () => startFlowing(request);
+}
+
+function pipeToNodeWritable(model: ReactModel, destination: Writable): void {
+  let request = createRequest(model, destination);
+  destination.on('drain', createDrainHandler(destination, request));
+  startWork(request);
+}
+
+export default {
+  pipeToNodeWritable,
+};
diff --git a/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js
new file mode 100644
index 0000000000000..c34e20ec8358b
--- /dev/null
+++ b/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -0,0 +1,355 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextDecoder = require('util').TextDecoder;
+
+// Don't wait before processing work on the server.
+// TODO: we can replace this with FlightServer.act().
+global.setImmediate = cb => cb();
+
+let act;
+let Stream;
+let React;
+let ReactDOM;
+let ReactFlightDOMServer;
+let ReactFlightDOMClient;
+
+describe('ReactFlightDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('react-dom/test-utils').act;
+    Stream = require('stream');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactFlightDOMServer = require('react-flight-dom-webpack/server');
+    ReactFlightDOMClient = require('react-flight-dom-webpack');
+  });
+
+  function getTestStream() {
+    let writable = new Stream.PassThrough();
+    let readable = new ReadableStream({
+      start(controller) {
+        writable.on('data', chunk => {
+          controller.enqueue(chunk);
+        });
+        writable.on('end', () => {
+          controller.close();
+        });
+      },
+    });
+    return {
+      writable,
+      readable,
+    };
+  }
+
+  async function waitForSuspense(fn) {
+    while (true) {
+      try {
+        return fn();
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          await promise;
+        } else {
+          throw promise;
+        }
+      }
+    }
+  }
+
+  it('should resolve HTML using Node streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      let model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    let {writable, readable} = getTestStream();
+    ReactFlightDOMServer.pipeToNodeWritable(<App />, writable);
+    let result = ReactFlightDOMClient.readFromReadableStream(readable);
+    await waitForSuspense(() => {
+      expect(result.model).toEqual({
+        html: '<div><span>hello</span><span>world</span></div>',
+      });
+    });
+  });
+
+  it.experimental('should resolve the root', async () => {
+    let {Suspense} = React;
+
+    // Model
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+    function RootModel() {
+      return {
+        html: <HTML />,
+      };
+    }
+
+    // View
+    function Message({result}) {
+      return <p dangerouslySetInnerHTML={{__html: result.model.html}} />;
+    }
+    function App({result}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message result={result} />
+        </Suspense>
+      );
+    }
+
+    let {writable, readable} = getTestStream();
+    ReactFlightDOMServer.pipeToNodeWritable(<RootModel />, writable);
+    let result = ReactFlightDOMClient.readFromReadableStream(readable);
+
+    let container = document.createElement('div');
+    let root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<App result={result} />);
+    });
+    expect(container.innerHTML).toBe(
+      '<p><div><span>hello</span><span>world</span></div></p>',
+    );
+  });
+
+  it.experimental('should not get confused by $', async () => {
+    let {Suspense} = React;
+
+    // Model
+    function RootModel() {
+      return {text: '$1'};
+    }
+
+    // View
+    function Message({result}) {
+      return <p>{result.model.text}</p>;
+    }
+    function App({result}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message result={result} />
+        </Suspense>
+      );
+    }
+
+    let {writable, readable} = getTestStream();
+    ReactFlightDOMServer.pipeToNodeWritable(<RootModel />, writable);
+    let result = ReactFlightDOMClient.readFromReadableStream(readable);
+
+    let container = document.createElement('div');
+    let root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<App result={result} />);
+    });
+    expect(container.innerHTML).toBe('<p>$1</p>');
+  });
+
+  it.experimental('should progressively reveal chunks', async () => {
+    let {Suspense} = React;
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback(this.state.error);
+        }
+        return this.props.children;
+      }
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+    function makeDelayedText() {
+      let error, _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          error = e;
+          promise = null;
+          reject(e);
+        };
+      });
+      function DelayedText({children}) {
+        if (promise) {
+          throw promise;
+        }
+        if (error) {
+          throw error;
+        }
+        return <Text>{children}</Text>;
+      }
+      return [DelayedText, _resolve, _reject];
+    }
+
+    const [FriendsModel, resolveFriendsModel] = makeDelayedText();
+    const [NameModel, resolveNameModel] = makeDelayedText();
+    const [PostsModel, resolvePostsModel] = makeDelayedText();
+    const [PhotosModel, resolvePhotosModel] = makeDelayedText();
+    const [GamesModel, , rejectGamesModel] = makeDelayedText();
+    function ProfileMore() {
+      return {
+        avatar: <Text>:avatar:</Text>,
+        friends: <FriendsModel>:friends:</FriendsModel>,
+        posts: <PostsModel>:posts:</PostsModel>,
+        games: <GamesModel>:games:</GamesModel>,
+      };
+    }
+    function ProfileModel() {
+      return {
+        photos: <PhotosModel>:photos:</PhotosModel>,
+        name: <NameModel>:name:</NameModel>,
+        more: <ProfileMore />,
+      };
+    }
+
+    // View
+    function ProfileDetails({result}) {
+      return (
+        <div>
+          {result.model.name}
+          {result.model.more.avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({result}) {
+      return (
+        <div>
+          {result.model.photos}
+          {result.model.more.friends}
+        </div>
+      );
+    }
+    function ProfilePosts({result}) {
+      return <div>{result.model.more.posts}</div>;
+    }
+    function ProfileGames({result}) {
+      return <div>{result.model.more.games}</div>;
+    }
+    function ProfilePage({result}) {
+      return (
+        <>
+          <Suspense fallback={<p>(loading)</p>}>
+            <ProfileDetails result={result} />
+            <Suspense fallback={<p>(loading sidebar)</p>}>
+              <ProfileSidebar result={result} />
+            </Suspense>
+            <Suspense fallback={<p>(loading posts)</p>}>
+              <ProfilePosts result={result} />
+            </Suspense>
+            <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+              <Suspense fallback={<p>(loading games)</p>}>
+                <ProfileGames result={result} />
+              </Suspense>
+            </ErrorBoundary>
+          </Suspense>
+        </>
+      );
+    }
+
+    let {writable, readable} = getTestStream();
+    ReactFlightDOMServer.pipeToNodeWritable(<ProfileModel />, writable);
+    let result = ReactFlightDOMClient.readFromReadableStream(readable);
+
+    let container = document.createElement('div');
+    let root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<ProfilePage result={result} />);
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // This isn't enough to show anything.
+    await act(async () => {
+      resolveFriendsModel();
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await act(async () => {
+      resolveNameModel();
+    });
+    // Advance time enough to trigger a nested fallback.
+    jest.advanceTimersByTime(500);
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>(loading games)</p>',
+    );
+
+    // Let's *fail* loading games.
+    await act(async () => {
+      rejectGamesModel(new Error('Game over'));
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // We can now show the sidebar.
+    await act(async () => {
+      resolvePhotosModel();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // Show everything.
+    await act(async () => {
+      resolvePostsModel();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+  });
+});
diff --git a/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
new file mode 100644
index 0000000000000..98a0f7f1da646
--- /dev/null
+++ b/packages/react-flight-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -0,0 +1,72 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let React;
+let ReactFlightDOMServer;
+let ReactFlightDOMClient;
+
+describe('ReactFlightDOMBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactFlightDOMServer = require('react-flight-dom-webpack/server.browser');
+    ReactFlightDOMClient = require('react-flight-dom-webpack');
+  });
+
+  async function waitForSuspense(fn) {
+    while (true) {
+      try {
+        return fn();
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          await promise;
+        } else {
+          throw promise;
+        }
+      }
+    }
+  }
+
+  it('should resolve HTML using W3C streams', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>world</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      let model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    let stream = ReactFlightDOMServer.renderToReadableStream(<App />);
+    let result = ReactFlightDOMClient.readFromReadableStream(stream);
+    await waitForSuspense(() => {
+      expect(result.model).toEqual({
+        html: '<div><span>hello</span><span>world</span></div>',
+      });
+    });
+  });
+});
diff --git a/packages/react-flight/README.md b/packages/react-flight/README.md
new file mode 100644
index 0000000000000..3f4c4b5a81860
--- /dev/null
+++ b/packages/react-flight/README.md
@@ -0,0 +1,7 @@
+# react-flight
+
+This is an experimental package for consuming custom React streaming models.
+
+**Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.**
+
+**Use it at your own risk.**
diff --git a/packages/react-flight/index.js b/packages/react-flight/index.js
new file mode 100644
index 0000000000000..7abd9455bd0aa
--- /dev/null
+++ b/packages/react-flight/index.js
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+// This entry point is intentionally not typed. It exists only for third-party
+// renderers. The renderers we ship (such as React DOM) instead import a named
+// "inline" entry point (for example, `react-server/inline.dom`). It uses
+// the same code, but the Flow configuration redirects the host config to its
+// real implementation so we can check it against exact intended host types.
+//
+// Only one renderer (the one you passed to `yarn flow <renderer>`) is fully
+// type-checked at any given time. The Flow config maps the
+// `react-server/inline.<renderer>` import (which is *not* Flow typed) to
+// `react-server/inline-typed` (which *is*) for the current renderer.
+// On CI, we run Flow checks for each renderer separately.
+
+'use strict';
+
+const ReactFlightClient = require('./src/ReactFlightClient');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest.
+module.exports = ReactFlightClient.default || ReactFlightClient;
diff --git a/packages/react-flight/inline-typed.js b/packages/react-flight/inline-typed.js
new file mode 100644
index 0000000000000..70a74cb38eb4f
--- /dev/null
+++ b/packages/react-flight/inline-typed.js
@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// This file must have the Flow annotation.
+//
+// This is the Flow-typed entry point for the renderer. It should not be
+// imported directly in code. Instead, our Flow configuration uses this entry
+// point for the currently checked renderer (the one you passed to `yarn flow`).
+//
+// For example, if you run `yarn flow dom`, `react-server/inline.dom` points
+// to this module (and thus will be considered Flow-typed). But other renderers
+// (e.g. `react-test-renderer`) will see stream as untyped during the check.
+//
+// We can't make all entry points typed at the same time because different
+// renderers have different host config types. So we check them one by one.
+// We run Flow on all renderers on CI.
+
+export * from './src/ReactFlightClient';
diff --git a/packages/react-events/focus-scope.js b/packages/react-flight/inline.dom-browser.js
similarity index 53%
rename from packages/react-events/focus-scope.js
rename to packages/react-flight/inline.dom-browser.js
index 2ff785ef79266..c42c00289e3a2 100644
--- a/packages/react-events/focus-scope.js
+++ b/packages/react-flight/inline.dom-browser.js
@@ -3,12 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
-'use strict';
-
-const FocusScope = require('./src/FocusScope');
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
 
-module.exports = FocusScope.default || FocusScope;
+export * from './src/ReactFlightClient';
diff --git a/packages/react-events/focus.js b/packages/react-flight/inline.dom.js
similarity index 53%
rename from packages/react-events/focus.js
rename to packages/react-flight/inline.dom.js
index 0b9288a790fef..c42c00289e3a2 100644
--- a/packages/react-events/focus.js
+++ b/packages/react-flight/inline.dom.js
@@ -3,12 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
-'use strict';
-
-const Focus = require('./src/Focus');
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
 
-module.exports = Focus.default || Focus;
+export * from './src/ReactFlightClient';
diff --git a/packages/react-flight/npm/index.js b/packages/react-flight/npm/index.js
new file mode 100644
index 0000000000000..1c9cdd060304a
--- /dev/null
+++ b/packages/react-flight/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-flight.production.min.js');
+} else {
+  module.exports = require('./cjs/react-flight.development.js');
+}
diff --git a/packages/react-flight/package.json b/packages/react-flight/package.json
new file mode 100644
index 0000000000000..e6eabd3c4b02e
--- /dev/null
+++ b/packages/react-flight/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "react-flight",
+  "description": "React package for consuming streaming models.",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-flight"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
+  "dependencies": {
+    "loose-envify": "^1.1.0",
+    "object-assign": "^4.1.1",
+    "prop-types": "^15.6.2"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  }
+}
diff --git a/packages/react-flight/src/ReactFlightClient.js b/packages/react-flight/src/ReactFlightClient.js
new file mode 100644
index 0000000000000..3adab738369df
--- /dev/null
+++ b/packages/react-flight/src/ReactFlightClient.js
@@ -0,0 +1,297 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Source, StringDecoder} from './ReactFlightClientHostConfig';
+
+import {
+  supportsBinaryStreams,
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from './ReactFlightClientHostConfig';
+
+export type ReactModelRoot<T> = {|
+  model: T,
+|};
+
+type JSONValue =
+  | number
+  | null
+  | boolean
+  | string
+  | {[key: string]: JSONValue, ...};
+
+const PENDING = 0;
+const RESOLVED = 1;
+const ERRORED = 2;
+
+type PendingChunk = {|
+  status: 0,
+  value: Promise<void>,
+  resolve: () => void,
+|};
+type ResolvedChunk = {|
+  status: 1,
+  value: mixed,
+  resolve: null,
+|};
+type ErroredChunk = {|
+  status: 2,
+  value: Error,
+  resolve: null,
+|};
+type Chunk = PendingChunk | ResolvedChunk | ErroredChunk;
+
+type OpaqueResponseWithoutDecoder = {
+  source: Source,
+  partialRow: string,
+  modelRoot: ReactModelRoot<any>,
+  chunks: Map<number, Chunk>,
+  fromJSON: (key: string, value: JSONValue) => any,
+  ...
+};
+
+type OpaqueResponse = OpaqueResponseWithoutDecoder & {
+  stringDecoder: StringDecoder,
+  ...
+};
+
+export function createResponse(source: Source): OpaqueResponse {
+  let modelRoot: ReactModelRoot<any> = ({}: any);
+  let rootChunk: Chunk = createPendingChunk();
+  definePendingProperty(modelRoot, 'model', rootChunk);
+  let chunks: Map<number, Chunk> = new Map();
+  chunks.set(0, rootChunk);
+
+  let response: OpaqueResponse = (({
+    source,
+    partialRow: '',
+    modelRoot,
+    chunks: chunks,
+    fromJSON: function(key, value) {
+      return parseFromJSON(response, this, key, value);
+    },
+  }: OpaqueResponseWithoutDecoder): any);
+  if (supportsBinaryStreams) {
+    response.stringDecoder = createStringDecoder();
+  }
+  return response;
+}
+
+function createPendingChunk(): PendingChunk {
+  let resolve: () => void = (null: any);
+  let promise = new Promise(r => (resolve = r));
+  return {
+    status: PENDING,
+    value: promise,
+    resolve: resolve,
+  };
+}
+
+function createErrorChunk(error: Error): ErroredChunk {
+  return {
+    status: ERRORED,
+    value: error,
+    resolve: null,
+  };
+}
+
+function triggerErrorOnChunk(chunk: Chunk, error: Error): void {
+  if (chunk.status !== PENDING) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+  let resolve = chunk.resolve;
+  let erroredChunk: ErroredChunk = (chunk: any);
+  erroredChunk.status = ERRORED;
+  erroredChunk.value = error;
+  erroredChunk.resolve = null;
+  resolve();
+}
+
+function createResolvedChunk(value: mixed): ResolvedChunk {
+  return {
+    status: RESOLVED,
+    value: value,
+    resolve: null,
+  };
+}
+
+function resolveChunk(chunk: Chunk, value: mixed): void {
+  if (chunk.status !== PENDING) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+  let resolve = chunk.resolve;
+  let resolvedChunk: ResolvedChunk = (chunk: any);
+  resolvedChunk.status = RESOLVED;
+  resolvedChunk.value = value;
+  resolvedChunk.resolve = null;
+  resolve();
+}
+
+// Report that any missing chunks in the model is now going to throw this
+// error upon read. Also notify any pending promises.
+export function reportGlobalError(
+  response: OpaqueResponse,
+  error: Error,
+): void {
+  response.chunks.forEach(chunk => {
+    // If this chunk was already resolved or errored, it won't
+    // trigger an error but if it wasn't then we need to
+    // because we won't be getting any new data to resolve it.
+    triggerErrorOnChunk(chunk, error);
+  });
+}
+
+function definePendingProperty(
+  object: Object,
+  key: string,
+  chunk: Chunk,
+): void {
+  Object.defineProperty(object, key, {
+    configurable: false,
+    enumerable: true,
+    get() {
+      if (chunk.status === RESOLVED) {
+        return chunk.value;
+      } else {
+        throw chunk.value;
+      }
+    },
+  });
+}
+
+function parseFromJSON(
+  response: OpaqueResponse,
+  targetObj: Object,
+  key: string,
+  value: JSONValue,
+): any {
+  if (typeof value === 'string' && value[0] === '$') {
+    if (value[1] === '$') {
+      // This was an escaped string value.
+      return value.substring(1);
+    } else {
+      let id = parseInt(value.substring(1), 16);
+      let chunks = response.chunks;
+      let chunk = chunks.get(id);
+      if (!chunk) {
+        chunk = createPendingChunk();
+        chunks.set(id, chunk);
+      } else if (chunk.status === RESOLVED) {
+        return chunk.value;
+      }
+      definePendingProperty(targetObj, key, chunk);
+      return undefined;
+    }
+  }
+  return value;
+}
+
+function resolveJSONRow(
+  response: OpaqueResponse,
+  id: number,
+  json: string,
+): void {
+  let model = JSON.parse(json, response.fromJSON);
+  let chunks = response.chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    chunks.set(id, createResolvedChunk(model));
+  } else {
+    resolveChunk(chunk, model);
+  }
+}
+
+function processFullRow(response: OpaqueResponse, row: string): void {
+  if (row === '') {
+    return;
+  }
+  let tag = row[0];
+  switch (tag) {
+    case 'J': {
+      let colon = row.indexOf(':', 1);
+      let id = parseInt(row.substring(1, colon), 16);
+      let json = row.substring(colon + 1);
+      resolveJSONRow(response, id, json);
+      return;
+    }
+    case 'E': {
+      let colon = row.indexOf(':', 1);
+      let id = parseInt(row.substring(1, colon), 16);
+      let json = row.substring(colon + 1);
+      let errorInfo = JSON.parse(json);
+      let error = new Error(errorInfo.message);
+      error.stack = errorInfo.stack;
+      let chunks = response.chunks;
+      let chunk = chunks.get(id);
+      if (!chunk) {
+        chunks.set(id, createErrorChunk(error));
+      } else {
+        triggerErrorOnChunk(chunk, error);
+      }
+      return;
+    }
+    default: {
+      // Assume this is the root model.
+      resolveJSONRow(response, 0, row);
+      return;
+    }
+  }
+}
+
+export function processStringChunk(
+  response: OpaqueResponse,
+  chunk: string,
+  offset: number,
+): void {
+  let linebreak = chunk.indexOf('\n', offset);
+  while (linebreak > -1) {
+    let fullrow = response.partialRow + chunk.substring(offset, linebreak);
+    processFullRow(response, fullrow);
+    response.partialRow = '';
+    offset = linebreak + 1;
+    linebreak = chunk.indexOf('\n', offset);
+  }
+  response.partialRow += chunk.substring(offset);
+}
+
+export function processBinaryChunk(
+  response: OpaqueResponse,
+  chunk: Uint8Array,
+): void {
+  if (!supportsBinaryStreams) {
+    throw new Error("This environment don't support binary chunks.");
+  }
+  let stringDecoder = response.stringDecoder;
+  let linebreak = chunk.indexOf(10); // newline
+  while (linebreak > -1) {
+    let fullrow =
+      response.partialRow +
+      readFinalStringChunk(stringDecoder, chunk.subarray(0, linebreak));
+    processFullRow(response, fullrow);
+    response.partialRow = '';
+    chunk = chunk.subarray(linebreak + 1);
+    linebreak = chunk.indexOf(10); // newline
+  }
+  response.partialRow += readPartialStringChunk(stringDecoder, chunk);
+}
+
+export function complete(response: OpaqueResponse): void {
+  // In case there are any remaining unresolved chunks, they won't
+  // be resolved now. So we need to issue an error to those.
+  // Ideally we should be able to early bail out if we kept a
+  // ref count of pending chunks.
+  reportGlobalError(response, new Error('Connection closed.'));
+}
+
+export function getModelRoot<T>(response: OpaqueResponse): ReactModelRoot<T> {
+  return response.modelRoot;
+}
diff --git a/packages/react-stream/src/ReactFizzFormatConfig.js b/packages/react-flight/src/ReactFlightClientHostConfig.js
similarity index 91%
rename from packages/react-stream/src/ReactFizzFormatConfig.js
rename to packages/react-flight/src/ReactFlightClientHostConfig.js
index 6b4d9f24fcdc7..49c9752540528 100644
--- a/packages/react-stream/src/ReactFizzFormatConfig.js
+++ b/packages/react-flight/src/ReactFlightClientHostConfig.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 import invariant from 'shared/invariant';
 
diff --git a/packages/react-flight/src/ReactFlightHostConfigBrowser.js b/packages/react-flight/src/ReactFlightHostConfigBrowser.js
new file mode 100644
index 0000000000000..a3ba45faee0e3
--- /dev/null
+++ b/packages/react-flight/src/ReactFlightHostConfigBrowser.js
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type Source = Promise<Response> | ReadableStream | XMLHttpRequest;
+
+export type StringDecoder = TextDecoder;
+
+export const supportsBinaryStreams = true;
+
+export function createStringDecoder(): StringDecoder {
+  return new TextDecoder();
+}
+
+const decoderOptions = {stream: true};
+
+export function readPartialStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  return decoder.decode(buffer, decoderOptions);
+}
+
+export function readFinalStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  return decoder.decode(buffer);
+}
diff --git a/packages/react-flight/src/__tests__/ReactFlight-test.js b/packages/react-flight/src/__tests__/ReactFlight-test.js
new file mode 100644
index 0000000000000..480e448fecc7c
--- /dev/null
+++ b/packages/react-flight/src/__tests__/ReactFlight-test.js
@@ -0,0 +1,42 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactNoopFlightServer;
+let ReactNoopFlightClient;
+
+describe('ReactFlight', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+  });
+
+  it('can resolve a model', () => {
+    function Bar({text}) {
+      return text.toUpperCase();
+    }
+    function Foo() {
+      return {
+        bar: [<Bar text="a" />, <Bar text="b" />],
+      };
+    }
+    let transport = ReactNoopFlightServer.render({
+      foo: <Foo />,
+    });
+    let root = ReactNoopFlightClient.read(transport);
+    let model = root.model;
+    expect(model).toEqual({foo: {bar: ['A', 'B']}});
+  });
+});
diff --git a/packages/react-flight/src/forks/ReactFlightClientHostConfig.custom.js b/packages/react-flight/src/forks/ReactFlightClientHostConfig.custom.js
new file mode 100644
index 0000000000000..ea0037f25ff84
--- /dev/null
+++ b/packages/react-flight/src/forks/ReactFlightClientHostConfig.custom.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// This is a host config that's used for the `react-server` package on npm.
+// It is only used by third-party renderers.
+//
+// Its API lets you pass the host config as an argument.
+// However, inside the `react-server` we treat host config as a module.
+// This file is a shim between two worlds.
+//
+// It works because the `react-server` bundle is wrapped in something like:
+//
+// module.exports = function ($$$config) {
+//   /* renderer code */
+// }
+//
+// So `$$$config` looks like a global variable, but it's
+// really an argument to a top-level wrapping function.
+
+declare var $$$hostConfig: any;
+export opaque type Source = mixed; // eslint-disable-line no-undef
+export opaque type StringDecoder = mixed; // eslint-disable-line no-undef
+
+export const supportsBinaryStreams = $$$hostConfig.supportsBinaryStreams;
+export const createStringDecoder = $$$hostConfig.createStringDecoder;
+export const readPartialStringChunk = $$$hostConfig.readPartialStringChunk;
+export const readFinalStringChunk = $$$hostConfig.readFinalStringChunk;
diff --git a/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js b/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js
new file mode 100644
index 0000000000000..aeb1f1f690af9
--- /dev/null
+++ b/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom-browser.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export * from 'react-flight/src/ReactFlightHostConfigBrowser';
diff --git a/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js b/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js
new file mode 100644
index 0000000000000..aeb1f1f690af9
--- /dev/null
+++ b/packages/react-flight/src/forks/ReactFlightClientHostConfig.dom.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export * from 'react-flight/src/ReactFlightHostConfigBrowser';
diff --git a/packages/react-fresh/npm/babel.js b/packages/react-fresh/npm/babel.js
deleted file mode 100644
index 164511887cd1e..0000000000000
--- a/packages/react-fresh/npm/babel.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-fresh-babel.production.min.js');
-} else {
-  module.exports = require('./cjs/react-fresh-babel.development.js');
-}
diff --git a/packages/react-fresh/npm/runtime.js b/packages/react-fresh/npm/runtime.js
deleted file mode 100644
index 835eea42e345b..0000000000000
--- a/packages/react-fresh/npm/runtime.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-fresh-runtime.production.min.js');
-} else {
-  module.exports = require('./cjs/react-fresh-runtime.development.js');
-}
diff --git a/packages/react-fresh/src/ReactFreshRuntime.js b/packages/react-fresh/src/ReactFreshRuntime.js
deleted file mode 100644
index da9bd3c4d8265..0000000000000
--- a/packages/react-fresh/src/ReactFreshRuntime.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {
-  Family,
-  HotUpdate,
-} from 'react-reconciler/src/ReactFiberHotReloading';
-
-import {REACT_MEMO_TYPE, REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';
-
-type Signature = {|
-  key: string,
-  getCustomHooks: () => Array<Function>,
-|};
-
-// We never remove these associations.
-// It's OK to reference families, but use WeakMap/Set for types.
-const allFamiliesByID: Map<string, Family> = new Map();
-const allTypes: WeakSet<any> = new WeakSet();
-const allSignaturesByType: WeakMap<any, Signature> = new WeakMap();
-// This WeakMap is read by React, so we only put families
-// that have actually been edited here. This keeps checks fast.
-const familiesByType: WeakMap<any, Family> = new WeakMap();
-
-// This is cleared on every prepareUpdate() call.
-// It is an array of [Family, NextType] tuples.
-let pendingUpdates: Array<[Family, any]> = [];
-
-function haveEqualSignatures(prevType, nextType) {
-  const prevSignature = allSignaturesByType.get(prevType);
-  const nextSignature = allSignaturesByType.get(nextType);
-
-  if (prevSignature === undefined && nextSignature === undefined) {
-    return true;
-  }
-  if (prevSignature === undefined || nextSignature === undefined) {
-    return false;
-  }
-  if (prevSignature.key !== nextSignature.key) {
-    return false;
-  }
-
-  // TODO: we might need to calculate previous signature earlier in practice,
-  // such as during the first time a component is resolved. We'll revisit this.
-  const prevCustomHooks = prevSignature.getCustomHooks();
-  const nextCustomHooks = nextSignature.getCustomHooks();
-  if (prevCustomHooks.length !== nextCustomHooks.length) {
-    return false;
-  }
-
-  for (let i = 0; i < nextCustomHooks.length; i++) {
-    if (!haveEqualSignatures(prevCustomHooks[i], nextCustomHooks[i])) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function prepareUpdate(): HotUpdate {
-  const staleFamilies = new Set();
-  const updatedFamilies = new Set();
-
-  const updates = pendingUpdates;
-  pendingUpdates = [];
-  updates.forEach(([family, nextType]) => {
-    // Now that we got a real edit, we can create associations
-    // that will be read by the React reconciler.
-    const prevType = family.current;
-    familiesByType.set(prevType, family);
-    familiesByType.set(nextType, family);
-    family.current = nextType;
-
-    // Determine whether this should be a re-render or a re-mount.
-    if (haveEqualSignatures(prevType, nextType)) {
-      updatedFamilies.add(family);
-    } else {
-      staleFamilies.add(family);
-    }
-  });
-
-  return {
-    familiesByType,
-    updatedFamilies,
-    staleFamilies,
-  };
-}
-
-export function register(type: any, id: string): void {
-  if (type === null) {
-    return;
-  }
-  if (typeof type !== 'function' && typeof type !== 'object') {
-    return;
-  }
-
-  // This can happen in an edge case, e.g. if we register
-  // return value of a HOC but it returns a cached component.
-  // Ignore anything but the first registration for each type.
-  if (allTypes.has(type)) {
-    return;
-  }
-  allTypes.add(type);
-
-  // Create family or remember to update it.
-  // None of this bookkeeping affects reconciliation
-  // until the first prepareUpdate() call above.
-  let family = allFamiliesByID.get(id);
-  if (family === undefined) {
-    family = {current: type};
-    allFamiliesByID.set(id, family);
-  } else {
-    pendingUpdates.push([family, type]);
-  }
-
-  // Visit inner types because we might not have registered them.
-  if (typeof type === 'object' && type !== null) {
-    switch (type.$$typeof) {
-      case REACT_FORWARD_REF_TYPE:
-        register(type.render, id + '$render');
-        break;
-      case REACT_MEMO_TYPE:
-        register(type.type, id + '$type');
-        break;
-    }
-  }
-}
-
-export function setSignature(
-  type: any,
-  key: string,
-  getCustomHooks?: () => Array<Function>,
-): void {
-  allSignaturesByType.set(type, {
-    key,
-    getCustomHooks: getCustomHooks || (() => []),
-  });
-}
diff --git a/packages/react-fresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-fresh/src/__tests__/ReactFreshIntegration-test.js
deleted file mode 100644
index e50818e923621..0000000000000
--- a/packages/react-fresh/src/__tests__/ReactFreshIntegration-test.js
+++ /dev/null
@@ -1,694 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-/* eslint-disable no-for-of-loops/no-for-of-loops */
-
-'use strict';
-
-let React;
-let ReactDOM;
-let ReactFreshRuntime;
-let act;
-
-let babel = require('babel-core');
-let freshPlugin = require('react-fresh/babel');
-
-describe('ReactFreshIntegration', () => {
-  let container;
-  let lastRoot;
-  let scheduleHotUpdate;
-
-  beforeEach(() => {
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
-      supportsFiber: true,
-      inject: injected => {
-        scheduleHotUpdate = injected.scheduleHotUpdate;
-      },
-      onCommitFiberRoot: (id, root) => {
-        lastRoot = root;
-      },
-      onCommitFiberUnmount: () => {},
-    };
-
-    jest.resetModules();
-    React = require('react');
-    ReactDOM = require('react-dom');
-    ReactFreshRuntime = require('react-fresh/runtime');
-    act = require('react-dom/test-utils').act;
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  function execute(source) {
-    const compiled = babel.transform(source, {
-      babelrc: false,
-      presets: ['react'],
-      plugins: [freshPlugin, 'transform-es2015-modules-commonjs'],
-    }).code;
-    const exportsObj = {};
-    // eslint-disable-next-line no-new-func
-    new Function('React', 'exports', '__register__', '__signature__', compiled)(
-      React,
-      exportsObj,
-      __register__,
-      __signature__,
-    );
-    return exportsObj.default;
-  }
-
-  function render(source) {
-    const Component = execute(source);
-    act(() => {
-      ReactDOM.render(<Component />, container);
-    });
-  }
-
-  function patch(source) {
-    execute(source);
-    const hotUpdate = ReactFreshRuntime.prepareUpdate();
-    act(() => {
-      scheduleHotUpdate(lastRoot, hotUpdate);
-    });
-  }
-
-  function __register__(type, id) {
-    ReactFreshRuntime.register(type, id);
-  }
-
-  function __signature__(type, key, getCustomHooks) {
-    ReactFreshRuntime.setSignature(type, key, getCustomHooks);
-    return type;
-  }
-
-  it('reloads function declarations', () => {
-    if (__DEV__) {
-      render(`
-        function Parent() {
-          return <Child prop="A" />;
-        };
-
-        function Child({prop}) {
-          return <h1>{prop}1</h1>;
-        };
-
-        export default Parent;
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-      patch(`
-        function Parent() {
-          return <Child prop="B" />;
-        };
-
-        function Child({prop}) {
-          return <h1>{prop}2</h1>;
-        };
-
-        export default Parent;
-      `);
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B2');
-    }
-  });
-
-  it('reloads arrow functions', () => {
-    if (__DEV__) {
-      render(`
-        const Parent = () => {
-          return <Child prop="A" />;
-        };
-
-        const Child = ({prop}) => {
-          return <h1>{prop}1</h1>;
-        };
-
-        export default Parent;
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-      patch(`
-        const Parent = () => {
-          return <Child prop="B" />;
-        };
-
-        const Child = ({prop}) => {
-          return <h1>{prop}2</h1>;
-        };
-
-        export default Parent;
-      `);
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B2');
-    }
-  });
-
-  it('reloads a combination of memo and forwardRef', () => {
-    if (__DEV__) {
-      render(`
-        const {memo} = React;
-
-        const Parent = memo(React.forwardRef(function (props, ref) {
-          return <Child prop="A" ref={ref} />;
-        }));
-
-        const Child = React.memo(({prop}) => {
-          return <h1>{prop}1</h1>;
-        });
-
-        export default React.memo(Parent);
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-      patch(`
-        const {memo} = React;
-
-        const Parent = memo(React.forwardRef(function (props, ref) {
-          return <Child prop="B" ref={ref} />;
-        }));
-
-        const Child = React.memo(({prop}) => {
-          return <h1>{prop}2</h1>;
-        });
-
-        export default React.memo(Parent);
-      `);
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B2');
-    }
-  });
-
-  it('reloads default export with named memo', () => {
-    if (__DEV__) {
-      render(`
-        const {memo} = React;
-
-        const Child = React.memo(({prop}) => {
-          return <h1>{prop}1</h1>;
-        });
-
-        export default memo(React.forwardRef(function Parent(props, ref) {
-          return <Child prop="A" ref={ref} />;
-        }));
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-      patch(`
-        const {memo} = React;
-
-        const Child = React.memo(({prop}) => {
-          return <h1>{prop}2</h1>;
-        });
-
-        export default memo(React.forwardRef(function Parent(props, ref) {
-          return <Child prop="B" ref={ref} />;
-        }));
-      `);
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B2');
-    }
-  });
-
-  it('reloads HOCs if they return functions', () => {
-    if (__DEV__) {
-      render(`
-        function hoc(letter) {
-          return function() {
-            return <h1>{letter}1</h1>;
-          }
-        }
-
-        export default function Parent() {
-          return <Child />;
-        }
-
-        const Child = hoc('A');
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-      patch(`
-        function hoc(letter) {
-          return function() {
-            return <h1>{letter}2</h1>;
-          }
-        }
-
-        export default function Parent() {
-          return React.createElement(Child);
-        }
-
-        const Child = hoc('B');
-      `);
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B2');
-    }
-  });
-
-  it('resets state when renaming a state variable', () => {
-    if (__DEV__) {
-      render(`
-        const {useState} = React;
-
-        export default function App() {
-          const [foo, setFoo] = useState(1);
-          return <h1>A{foo}</h1>;
-        }
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-
-      patch(`
-        const {useState} = React;
-
-        export default function App() {
-          const [foo, setFoo] = useState('ignored');
-          return <h1>B{foo}</h1>;
-        }
-      `);
-      // Same state variable name, so state is preserved.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B1');
-
-      patch(`
-        const {useState} = React;
-
-        export default function App() {
-          const [bar, setBar] = useState(2);
-          return <h1>C{bar}</h1>;
-        }
-      `);
-      // Different state variable name, so state is reset.
-      expect(container.firstChild).not.toBe(el);
-      const newEl = container.firstChild;
-      expect(newEl.textContent).toBe('C2');
-    }
-  });
-
-  it('resets state when renaming a state variable in a HOC', () => {
-    if (__DEV__) {
-      render(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [foo, setFoo] = useState(1);
-            return <Wrapped value={foo} />;
-          };
-        }
-
-        export default hoc(({ value }) => {
-          return <h1>A{value}</h1>;
-        });
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-
-      patch(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [foo, setFoo] = useState('ignored');
-            return <Wrapped value={foo} />;
-          };
-        }
-
-        export default hoc(({ value }) => {
-          return <h1>B{value}</h1>;
-        });
-      `);
-      // Same state variable name, so state is preserved.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B1');
-
-      patch(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [bar, setBar] = useState(2);
-            return <Wrapped value={bar} />;
-          };
-        }
-
-        export default hoc(({ value }) => {
-          return <h1>C{value}</h1>;
-        });
-      `);
-      // Different state variable name, so state is reset.
-      expect(container.firstChild).not.toBe(el);
-      const newEl = container.firstChild;
-      expect(newEl.textContent).toBe('C2');
-    }
-  });
-
-  it('resets state when renaming a state variable in a HOC with indirection', () => {
-    if (__DEV__) {
-      render(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [foo, setFoo] = useState(1);
-            return <Wrapped value={foo} />;
-          };
-        }
-
-        function Indirection({ value }) {
-          return <h1>A{value}</h1>;
-        }
-
-        export default hoc(Indirection);
-      `);
-      const el = container.firstChild;
-      expect(el.textContent).toBe('A1');
-
-      patch(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [foo, setFoo] = useState('ignored');
-            return <Wrapped value={foo} />;
-          };
-        }
-
-        function Indirection({ value }) {
-          return <h1>B{value}</h1>;
-        }
-
-        export default hoc(Indirection);
-      `);
-      // Same state variable name, so state is preserved.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('B1');
-
-      patch(`
-        const {useState} = React;
-
-        function hoc(Wrapped) {
-          return function Generated() {
-            const [bar, setBar] = useState(2);
-            return <Wrapped value={bar} />;
-          };
-        }
-
-        function Indirection({ value }) {
-          return <h1>C{value}</h1>;
-        }
-
-        export default hoc(Indirection);
-      `);
-      // Different state variable name, so state is reset.
-      expect(container.firstChild).not.toBe(el);
-      const newEl = container.firstChild;
-      expect(newEl.textContent).toBe('C2');
-    }
-  });
-
-  it('resets effects while preserving state', () => {
-    if (__DEV__) {
-      render(`
-        const {useState} = React;
-
-        export default function App() {
-          const [value, setValue] = useState(0);
-          return <h1>A{value}</h1>;
-        }
-      `);
-      let el = container.firstChild;
-      expect(el.textContent).toBe('A0');
-
-      // Add an effect.
-      patch(`
-        const {useState} = React;
-
-        export default function App() {
-          const [value, setValue] = useState(0);
-          React.useEffect(() => {
-            const id = setInterval(() => {
-              setValue(v => v + 1);
-            }, 1000);
-            return () => clearInterval(id);
-          }, []);
-          return <h1>B{value}</h1>;
-        }
-      `);
-      // We added an effect, thereby changing Hook order.
-      // This causes a remount.
-      expect(container.firstChild).not.toBe(el);
-      el = container.firstChild;
-      expect(el.textContent).toBe('B0');
-
-      act(() => {
-        jest.advanceTimersByTime(1000);
-      });
-      expect(el.textContent).toBe('B1');
-
-      patch(`
-        const {useState} = React;
-
-        export default function App() {
-          const [value, setValue] = useState(0);
-          React.useEffect(() => {
-            const id = setInterval(() => {
-              setValue(v => v + 10);
-            }, 1000);
-            return () => clearInterval(id);
-          }, []);
-          return <h1>C{value}</h1>;
-        }
-      `);
-      // Same Hooks are called, so state is preserved.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('C1');
-
-      // Effects are always reset, so timer was reinstalled.
-      // The new version increments by 10 rather than 1.
-      act(() => {
-        jest.advanceTimersByTime(1000);
-      });
-      expect(el.textContent).toBe('C11');
-
-      patch(`
-        const {useState} = React;
-
-        export default function App() {
-          const [value, setValue] = useState(0);
-          return <h1>D{value}</h1>;
-        }
-      `);
-      // Removing the effect changes the signature
-      // and causes the component to remount.
-      expect(container.firstChild).not.toBe(el);
-      el = container.firstChild;
-      expect(el.textContent).toBe('D0');
-    }
-  });
-
-  it('does not get confused when custom hooks are reordered', () => {
-    if (__DEV__) {
-      render(`
-        function useFancyState(initialState) {
-          return React.useState(initialState);
-        }
-
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>A{x}{y}</h1>;
-        };
-
-        export default App;
-      `);
-      let el = container.firstChild;
-      expect(el.textContent).toBe('AXY');
-
-      patch(`
-        function useFancyState(initialState) {
-          return React.useState(initialState);
-        }
-
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>B{x}{y}</h1>;
-        };
-
-        export default App;
-      `);
-      // Same state variables, so no remount.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('BXY');
-
-      patch(`
-        function useFancyState(initialState) {
-          return React.useState(initialState);
-        }
-
-        const App = () => {
-          const [y, setY] = useFancyState('Y');
-          const [x, setX] = useFancyState('X');
-          return <h1>B{x}{y}</h1>;
-        };
-
-        export default App;
-      `);
-      // Hooks were re-ordered. This causes a remount.
-      // Therefore, Hook calls don't accidentally share state.
-      expect(container.firstChild).not.toBe(el);
-      el = container.firstChild;
-      expect(el.textContent).toBe('BXY');
-    }
-  });
-
-  it('remounts component if custom hook it uses changes order', () => {
-    if (__DEV__) {
-      render(`
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>A{x}{y}</h1>;
-        };
-
-        const useFancyState = (initialState) => {
-          const result = useIndirection(initialState);
-          return result;
-        };
-
-        function useIndirection(initialState) {
-          return React.useState(initialState);
-        }
-
-        export default App;
-      `);
-      let el = container.firstChild;
-      expect(el.textContent).toBe('AXY');
-
-      patch(`
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>B{x}{y}</h1>;
-        };
-
-        const useFancyState = (initialState) => {
-          const result = useIndirection();
-          return result;
-        };
-
-        function useIndirection(initialState) {
-          return React.useState(initialState);
-        }
-
-        export default App;
-      `);
-      // We didn't change anything except the header text.
-      // So we don't expect a remount.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('BXY');
-
-      patch(`
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>C{x}{y}</h1>;
-        };
-
-        const useFancyState = (initialState) => {
-          const result = useIndirection(initialState);
-          return result;
-        };
-
-        function useIndirection(initialState) {
-          React.useEffect(() => {});
-          return React.useState(initialState);
-        }
-
-        export default App;
-      `);
-      // The useIndirection Hook added an affect,
-      // so we had to remount the component.
-      expect(container.firstChild).not.toBe(el);
-      el = container.firstChild;
-      expect(el.textContent).toBe('CXY');
-
-      patch(`
-        const App = () => {
-          const [x, setX] = useFancyState('X');
-          const [y, setY] = useFancyState('Y');
-          return <h1>D{x}{y}</h1>;
-        };
-
-        const useFancyState = (initialState) => {
-          const result = useIndirection();
-          return result;
-        };
-
-        function useIndirection(initialState) {
-          React.useEffect(() => {});
-          return React.useState(initialState);
-        }
-
-        export default App;
-      `);
-      // We didn't change anything except the header text.
-      // So we don't expect a remount.
-      expect(container.firstChild).toBe(el);
-      expect(el.textContent).toBe('DXY');
-    }
-  });
-
-  it('does not lose the inferred arrow names', () => {
-    if (__DEV__) {
-      render(`
-        const Parent = () => {
-          return <Child/>;
-        };
-
-        const Child = () => {
-          useMyThing();
-          return <h1>{Parent.name} {Child.name} {useMyThing.name}</h1>;
-        };
-
-        const useMyThing = () => {
-          React.useState();
-        };
-
-        export default Parent;
-      `);
-      expect(container.textContent).toBe('Parent Child useMyThing');
-    }
-  });
-
-  it('does not lose the inferred function names', () => {
-    if (__DEV__) {
-      render(`
-        var Parent = function() {
-          return <Child/>;
-        };
-
-        var Child = function() {
-          useMyThing();
-          return <h1>{Parent.name} {Child.name} {useMyThing.name}</h1>;
-        };
-
-        var useMyThing = function() {
-          React.useState();
-        };
-
-        export default Parent;
-      `);
-      expect(container.textContent).toBe('Parent Child useMyThing');
-    }
-  });
-});
diff --git a/packages/react-interactions/README.md b/packages/react-interactions/README.md
new file mode 100644
index 0000000000000..2326ed26c5acc
--- /dev/null
+++ b/packages/react-interactions/README.md
@@ -0,0 +1,4 @@
+# `react-interactions`
+
+This package is experimental. It is intended for use with the experimental React
+flags for internal testing.
\ No newline at end of file
diff --git a/packages/react-interactions/events/README.md b/packages/react-interactions/events/README.md
new file mode 100644
index 0000000000000..6f49251a3f0b6
--- /dev/null
+++ b/packages/react-interactions/events/README.md
@@ -0,0 +1,105 @@
+# `react-interactions/events`
+
+*This package is experimental. It is intended for use with the experimental React
+events API that is not available in open source builds.*
+
+Event Responders attach to a host node. They listen to native browser events
+dispatched on the host node of their child and transform those events into
+high-level events for applications.
+
+The core API is documented below. Documentation for individual Event Responders
+can be found [here](./docs).
+
+## Event Responder Interface
+
+Note: React Responders require the internal React flag `enableDeprecatedFlareAPI`.
+
+An Event Responder Interface is defined using an object. Each responder can define DOM
+events to listen to, handle the synthetic responder events, dispatch custom
+events, and implement a state machine.
+
+```js
+// types
+type ResponderEventType = string;
+
+type ResponderEvent = {|
+  nativeEvent: any,
+  target: Element | Document,
+  pointerType: string,
+  type: string,
+  passive: boolean,
+|};
+
+type CustomEvent = {
+  type: string,
+  target: Element,
+  ...
+}
+```
+
+### getInitialState?: (props: null | Object) => Object
+
+The initial state of that the Event Responder is created with.
+
+### onEvent?: (event: ResponderEvent, context: ResponderContext, props, state)
+
+Called during the bubble phase of the `targetEventTypes` dispatched on DOM
+elements within the Event Responder.
+
+### onMount?: (context: ResponderContext, props, state)
+
+Called after an Event Responder in mounted.
+
+### onRootEvent?: (event: ResponderEvent, context: ResponderContext, props, state)
+
+Called when any of the `rootEventTypes` are dispatched on the root of the app.
+
+### onUnmount?: (context: ResponderContext, props, state)
+
+Called before an Event Responder in unmounted.
+
+### rootEventTypes?: Array<ResponderEventType>
+
+Defines the DOM events to listen to on the root of the app.
+
+### targetEventTypes?: Array<ResponderEventType>
+
+Defines the DOM events to listen to within the Event Responder subtree.
+
+## ResponderContext
+
+The Event Responder Context is exposed via the `context` argument for certain methods
+on the `EventResponder` object.
+
+### addRootEventTypes(eventTypes: Array<ResponderEventType>)
+
+This can be used to dynamically listen to events on the root of the app only
+when it is necessary to do so.
+
+### dispatchEvent(propName: string, event: CustomEvent, { discrete: boolean })
+
+Dispatches a custom synthetic event. The `type` and `target` are required
+fields if the event is an object, but any other fields can be defined on the `event` that will be passed
+to the `listener`. You can also pass a value that is not an object, but a `boolean`. For example:
+
+```js
+const event = { type: 'press', target, pointerType, x, y };
+context.dispatchEvent('onPress', event, DiscreteEvent);
+```
+
+### isTargetWithinNode(target: Element, element: Element): boolean
+
+Returns `true` if `target` is a child of `element`.
+
+### isTargetWithinResponder(target: Element): boolean
+
+Returns `true` is the target element is within the subtree of the Event Responder.
+
+### isTargetWithinResponderScope(target: Element): boolean
+
+Returns `true` is the target element is within the current Event Responder's scope. If the target element
+is within the scope of the same responder, but owned by another Event Responder instance, this will return `false`.
+
+### removeRootEventTypes(eventTypes: Array<ResponderEventType>)
+
+Remove the root event types added with `addRootEventTypes`.
diff --git a/packages/react-interactions/events/context-menu.js b/packages/react-interactions/events/context-menu.js
new file mode 100644
index 0000000000000..3844d285ffc2e
--- /dev/null
+++ b/packages/react-interactions/events/context-menu.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/ContextMenu');
diff --git a/packages/react-interactions/events/docs/ContextMenu.md b/packages/react-interactions/events/docs/ContextMenu.md
new file mode 100644
index 0000000000000..99e8f1a14099b
--- /dev/null
+++ b/packages/react-interactions/events/docs/ContextMenu.md
@@ -0,0 +1,54 @@
+# ContextMenu
+
+The `useContextMenu` hooks responds to context-menu events.
+
+```js
+// Example
+const Button = (props) => {
+  const contextmenu = useContextMenu({
+    disabled,
+    onContextMenu,
+    preventDefault
+  });
+
+  return (
+    <div DEPRECATED_flareListeners={contextmenu}>
+      {props.children}
+    </div>
+  );
+};
+```
+
+## Types
+
+```js
+type ContextMenuEvent = {
+  altKey: boolean,
+  buttons: 0 | 1 | 2,
+  ctrlKey: boolean,
+  metaKey: boolean,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
+  shiftKey: boolean,
+  target: Element,
+  timeStamp: number,
+  type: 'contextmenu',
+  x: number,
+  y: number,
+}
+```
+
+## Props
+
+### disabled: boolean = false
+
+Disables the responder.
+
+### onContextMenu: (e: ContextMenuEvent) => void
+
+Called when the user performs a gesture to display a context menu.
+
+### preventDefault: boolean = true
+
+Prevents the native behavior (i.e., context menu).
diff --git a/packages/react-events/docs/Focus.md b/packages/react-interactions/events/docs/Focus.md
similarity index 58%
rename from packages/react-events/docs/Focus.md
rename to packages/react-interactions/events/docs/Focus.md
index 1fef78e370ff4..4d9f7e8b1cce8 100644
--- a/packages/react-events/docs/Focus.md
+++ b/packages/react-interactions/events/docs/Focus.md
@@ -1,29 +1,29 @@
 # Focus
 
-The `Focus` module responds to focus and blur events on its child. Focus events
+The `useFocus` hook responds to focus and blur events on its child. Focus events
 are dispatched for all input types, with the exception of `onFocusVisibleChange`
 which is only dispatched when focusing with a keyboard.
 
-Focus events do not propagate between `Focus` event responders.
+Focus events do not propagate between `useFocus` event responders.
 
 ```js
 // Example
 const Button = (props) => {
-  const [ focusVisible, setFocusVisible ] = useState(false);
+  const [ isFocusVisible, setFocusVisible ] = useState(false);
+  const focus = useFocus({
+    onBlur={props.onBlur}
+    onFocus={props.onFocus}
+    onFocusVisibleChange={setFocusVisible}
+  });
 
   return (
-    <Focus
-      onBlur={props.onBlur}
-      onFocus={props.onFocus}
-      onFocusVisibleChange={setFocusVisible}
+    <button
+      children={props.children}
+      DEPRECATED_flareListeners={focus}
+      style={{
+        ...(isFocusVisible && focusVisibleStyles)
+      }}
     >
-      <button
-        children={props.children}
-        style={{
-          ...(focusVisible && focusVisibleStyles)
-        }}
-      >
-    </Focus>
   );
 };
 ```
@@ -33,6 +33,8 @@ const Button = (props) => {
 ```js
 type FocusEvent = {
   target: Element,
+  pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard',
+  timeStamp: number,
   type: 'blur' | 'focus' | 'focuschange' | 'focusvisiblechange'
 }
 ```
@@ -41,7 +43,7 @@ type FocusEvent = {
 
 ### disabled: boolean = false
 
-Disables all `Focus` events.
+Disables the responder.
 
 ### onBlur: (e: FocusEvent) => void
 
diff --git a/packages/react-interactions/events/docs/FocusWithin.md b/packages/react-interactions/events/docs/FocusWithin.md
new file mode 100644
index 0000000000000..1901db8568c0a
--- /dev/null
+++ b/packages/react-interactions/events/docs/FocusWithin.md
@@ -0,0 +1,48 @@
+# FocusWithin
+
+The `useFocusWithin` hooks responds to focus and blur events on its child. Focus events
+are dispatched for all input types, with the exception of `onFocusVisibleChange`
+which is only dispatched when focusing with a keyboard.
+
+Focus events do not propagate between `useFocusWithin` event responders.
+
+```js
+// Example
+const Button = (props) => {
+  const [ isFocusWithin, updateFocusWithin ] = useState(false);
+  const [ isFocusWithinVisible, updateFocusWithinVisible ] = useState(false);
+  const focusWithin = useFocusWithin({
+    onFocusWithinChange={updateFocusWithin}
+    onFocusWithinVisibleChange={updateFocusWithinVisible}
+  });
+
+  return (
+    <button
+      children={props.children}
+      DEPRECATED_flareListeners={focusWithin}
+      style={{
+        ...(isFocusWithin && focusWithinStyles),
+        ...(isFocusWithinVisible && focusWithinVisibleStyles)
+      }}
+    >
+  );
+};
+```
+
+## Props
+
+### disabled: boolean = false
+
+Disables the responder.
+
+### onFocusWithinChange: boolean => void
+
+Called once the element or a descendant receives focus, and once focus moves
+outside of the element.
+
+### onFocusWithinVisibleChange: boolean => void
+
+Called once the element or a descendant is focused following keyboard
+navigation, and once focus moves outside of the element. This can be used to
+display focus styles only when the keyboard is being used to focus within the
+element's subtree.
diff --git a/packages/react-interactions/events/docs/Hover.md b/packages/react-interactions/events/docs/Hover.md
new file mode 100644
index 0000000000000..a82586c769b9f
--- /dev/null
+++ b/packages/react-interactions/events/docs/Hover.md
@@ -0,0 +1,75 @@
+# Hover
+
+The `useHover` hook responds to hover events on the element it wraps. Hover
+events are only dispatched for `mouse` and `pen` pointer types. Hover begins
+when the pointer enters the element's bounds and ends when the pointer leaves.
+
+Hover events do not propagate between `useHover` event responders.
+
+```js
+// Example
+const Link = (props) => (
+  const [ isHovered, setHovered ] = useState(false);
+  const hover = useHover({
+    onHoverChange: setHovered
+  });
+
+  return (
+    <a
+      {...props}
+      href={props.href}
+      DEPRECATED_flareListeners={hover}
+      style={{
+        ...props.style,
+        textDecoration: isHovered ? 'underline': 'none'
+      }}
+    />
+  );
+);
+```
+
+## Types
+
+```js
+type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
+
+type HoverEvent = {|
+  clientX: number,
+  clientY: number,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
+  target: Element,
+  timeStamp: number,
+  type: HoverEventType,
+  x: number,
+  y: number,
+|};
+```
+
+## Props
+
+### disabled: boolean
+
+Disables the responder.
+
+### onHoverChange: boolean => void
+
+Called when the element changes hover state (i.e., after `onHoverStart` and
+`onHoverEnd`).
+
+### onHoverEnd: (e: HoverEvent) => void
+
+Called once the element is no longer hovered.
+
+### onHoverMove: (e: HoverEvent) => void
+
+Called when the pointer moves within the hit bounds of the element.
+
+### onHoverStart: (e: HoverEvent) => void
+
+Called once the element is hovered.
+
+### preventDefault: boolean = true
+
+Whether to `preventDefault()` native events.
diff --git a/packages/react-interactions/events/docs/Press.md b/packages/react-interactions/events/docs/Press.md
new file mode 100644
index 0000000000000..63aaa14ecbc38
--- /dev/null
+++ b/packages/react-interactions/events/docs/Press.md
@@ -0,0 +1,121 @@
+# Press
+
+The `usePress` hook responds to press events on the element it wraps. Press
+events are dispatched for `mouse`, `pen`, `touch`, `trackpad`, and `keyboard`
+pointer types. Press events are only dispatched for keyboards when pressing the
+Enter or Spacebar keys. If `onPress` is not called, this signifies that the
+press ended outside of the element hit bounds (i.e., the user aborted the
+press).
+
+Press events do not propagate between `usePress` event responders.
+
+```js
+// Example
+const Button = (props) => (
+  const [ isPressed, setPressed ] = useState(false);
+  const press = usePress({
+    onPress={props.onPress}
+    onPressChange={setPressed}
+  });
+
+  return (
+    <div
+      {...props}
+      DEPRECATED_flareListeners={press}
+      role="button"
+      tabIndex={0}
+      style={
+        ...buttonStyles,
+        ...(isPressed && pressedStyles)
+      }}
+    />
+  );
+);
+```
+
+## Types
+
+```js
+type PressEvent = {
+  altKey: boolean,
+  buttons: 0 | 1 | 4,
+  ctrlKey: boolean,
+  defaultPrevented: boolean,
+  metaKey: boolean,
+  pageX: number,
+  pageY: number,
+  pointerType:
+    | 'mouse'
+    | 'touch'
+    | 'pen'
+    | 'trackpad'
+    | 'keyboard',
+  screenX: number,
+  screenY: number,
+  shiftKey: boolean,
+  target: Element,
+  timeStamp: number,
+  type:
+    | 'press'
+    | 'pressstart'
+    | 'pressend'
+    | 'presschange'
+    | 'pressmove'
+    | 'contextmenu',
+  x: number,
+  y: number
+}
+
+type PressOffset = {
+  top?: number,
+  right?: number,
+  bottom?: number,
+  right?: number
+};
+```
+
+## Props
+
+### disabled: boolean = false
+
+Disables the responder.
+
+### onPress: (e: PressEvent) => void
+
+Called immediately after a press is released, unless the press is released
+outside the hit bounds of the element (accounting for `pressRetentionOffset`.
+
+### onPressChange: boolean => void
+
+Called when the element changes press state (i.e., after `onPressStart` and
+`onPressEnd`).
+
+### onPressEnd: (e: PressEvent) => void
+
+Called once the element is no longer pressed (because the press was released,
+cancelled, or moved beyond the hit bounds).
+
+### onPressMove: (e: PressEvent) => void
+
+Called when a press moves within the hit bounds of the element. Never called for
+keyboard-initiated press events.  
+
+### onPressStart: (e: PressEvent) => void
+
+Called once the element is pressed down.
+
+### pressRetentionOffset: PressOffset
+
+Defines how far the pointer (while held down) may move outside the bounds of the
+element before it is deactivated. Once deactivated, the pointer (still held
+down) can be moved back within the bounds of the element to reactivate it.
+Ensure you pass in a constant to reduce memory allocations. Default is `20` for
+each offset.
+
+### preventDefault: boolean = true
+
+Whether to `preventDefault()` native events. Native behavior is prevented by
+default. If an anchor is the child of `Press`, internal and external navigation
+should be performed in `onPress`. To rely on native behavior instead, set
+`preventDefault` to `false`, but be aware that native behavior will take place
+immediately after interaction.
diff --git a/packages/react-interactions/events/drag.js b/packages/react-interactions/events/drag.js
new file mode 100644
index 0000000000000..937f4a7f034d0
--- /dev/null
+++ b/packages/react-interactions/events/drag.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Drag');
diff --git a/packages/react-interactions/events/focus.js b/packages/react-interactions/events/focus.js
new file mode 100644
index 0000000000000..bf20a55d0efed
--- /dev/null
+++ b/packages/react-interactions/events/focus.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Focus');
diff --git a/packages/react-interactions/events/hover.js b/packages/react-interactions/events/hover.js
new file mode 100644
index 0000000000000..377f71510bb34
--- /dev/null
+++ b/packages/react-interactions/events/hover.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Hover');
diff --git a/packages/react-interactions/events/input.js b/packages/react-interactions/events/input.js
new file mode 100644
index 0000000000000..39e7ad3b15eb6
--- /dev/null
+++ b/packages/react-interactions/events/input.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Input');
diff --git a/packages/react-interactions/events/keyboard.js b/packages/react-interactions/events/keyboard.js
new file mode 100644
index 0000000000000..ffb65d759ec37
--- /dev/null
+++ b/packages/react-interactions/events/keyboard.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Keyboard');
diff --git a/packages/react-interactions/events/press-legacy.js b/packages/react-interactions/events/press-legacy.js
new file mode 100644
index 0000000000000..4b2d60e7f81d0
--- /dev/null
+++ b/packages/react-interactions/events/press-legacy.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/PressLegacy');
diff --git a/packages/react-interactions/events/press.js b/packages/react-interactions/events/press.js
new file mode 100644
index 0000000000000..c7eee75eeab13
--- /dev/null
+++ b/packages/react-interactions/events/press.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Press');
diff --git a/packages/react-interactions/events/scroll.js b/packages/react-interactions/events/scroll.js
new file mode 100644
index 0000000000000..7cbb619ce05fe
--- /dev/null
+++ b/packages/react-interactions/events/scroll.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Scroll');
diff --git a/packages/react-interactions/events/src/dom/ContextMenu.js b/packages/react-interactions/events/src/dom/ContextMenu.js
new file mode 100644
index 0000000000000..1861eef1a624a
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/ContextMenu.js
@@ -0,0 +1,125 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+import React from 'react';
+import {DiscreteEvent} from 'shared/ReactTypes';
+
+type ContextMenuProps = {|
+  disabled: boolean,
+  onContextMenu: (e: ContextMenuEvent) => void,
+  preventDefault: boolean,
+|};
+
+type ContextMenuState = {pointerType: PointerType, ...};
+
+type ContextMenuEvent = {|
+  altKey: boolean,
+  buttons: 0 | 1 | 2,
+  ctrlKey: boolean,
+  metaKey: boolean,
+  pageX: null | number,
+  pageY: null | number,
+  pointerType: PointerType,
+  shiftKey: boolean,
+  target: Element | Document,
+  timeStamp: number,
+  type: 'contextmenu',
+  x: null | number,
+  y: null | number,
+|};
+
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent != null;
+
+function dispatchContextMenuEvent(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: ContextMenuProps,
+  state: ContextMenuState,
+): void {
+  const nativeEvent: any = event.nativeEvent;
+  const target = event.target;
+  const timeStamp = context.getTimeStamp();
+  const pointerType = state.pointerType;
+
+  const gestureState = {
+    altKey: nativeEvent.altKey,
+    buttons: nativeEvent.buttons != null ? nativeEvent.buttons : 0,
+    ctrlKey: nativeEvent.ctrlKey,
+    metaKey: nativeEvent.metaKey,
+    pageX: nativeEvent.pageX,
+    pageY: nativeEvent.pageY,
+    pointerType,
+    shiftKey: nativeEvent.shiftKey,
+    target,
+    timeStamp,
+    type: 'contextmenu',
+    x: nativeEvent.clientX,
+    y: nativeEvent.clientY,
+  };
+
+  context.dispatchEvent(gestureState, props.onContextMenu, DiscreteEvent);
+}
+
+const contextMenuImpl = {
+  targetEventTypes: hasPointerEvents
+    ? ['contextmenu_active', 'pointerdown']
+    : ['contextmenu_active', 'touchstart', 'mousedown'],
+  getInitialState(): ContextMenuState {
+    return {
+      pointerType: '',
+    };
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: ContextMenuProps,
+    state: ContextMenuState,
+  ): void {
+    const nativeEvent: any = event.nativeEvent;
+    const pointerType = event.pointerType;
+    const type = event.type;
+
+    if (props.disabled) {
+      return;
+    }
+
+    if (type === 'contextmenu') {
+      const onContextMenu = props.onContextMenu;
+      const preventDefault = props.preventDefault;
+      if (preventDefault !== false && !nativeEvent.defaultPrevented) {
+        nativeEvent.preventDefault();
+      }
+      if (typeof onContextMenu === 'function') {
+        dispatchContextMenuEvent(event, context, props, state);
+      }
+      state.pointerType = '';
+    } else {
+      state.pointerType = pointerType;
+    }
+  },
+};
+
+export const ContextMenuResponder = React.DEPRECATED_createResponder(
+  'ContextMenu',
+  contextMenuImpl,
+);
+
+export function useContextMenu(
+  props: ContextMenuProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(ContextMenuResponder, props);
+}
diff --git a/packages/react-events/src/Drag.js b/packages/react-interactions/events/src/dom/Drag.js
similarity index 62%
rename from packages/react-events/src/Drag.js
rename to packages/react-interactions/events/src/dom/Drag.js
index fb13c54da1818..82779eac5ef19 100644
--- a/packages/react-events/src/Drag.js
+++ b/packages/react-interactions/events/src/dom/Drag.js
@@ -8,20 +8,31 @@
  */
 
 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+import type {
+  EventPriority,
+  ReactEventResponderListener,
 } from 'shared/ReactTypes';
 
 import React from 'react';
+import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
 
 const targetEventTypes = ['pointerdown'];
-const rootEventTypes = [
-  'pointerup',
-  'pointercancel',
-  {name: 'pointermove', passive: false},
-];
+const rootEventTypes = ['pointerup', 'pointercancel', 'pointermove_active'];
+
+type DragProps = {
+  disabled: boolean,
+  shouldClaimOwnership: () => boolean,
+  onDragStart: (e: DragEvent) => void,
+  onDragMove: (e: DragEvent) => void,
+  onDragEnd: (e: DragEvent) => void,
+  onDragChange: boolean => void,
+  ...
+};
 
-type DragState = {
+type DragState = {|
   dragTarget: null | Element | Document,
   isPointerDown: boolean,
   isDragging: boolean,
@@ -29,21 +40,25 @@ type DragState = {
   startY: number,
   x: number,
   y: number,
-};
+|};
 
 // In the case we don't have PointerEvents (Safari), we listen to touch events
 // too
 if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
   targetEventTypes.push('touchstart', 'mousedown');
-  rootEventTypes.push('mouseup', 'mousemove', 'touchend', 'touchcancel', {
-    name: 'touchmove',
-    passive: false,
-  });
+  rootEventTypes.push(
+    'mouseup',
+    'mousemove',
+    'touchend',
+    'touchcancel',
+    'touchmove_active',
+  );
 }
 
 type EventData = {
   diffX: number,
   diffY: number,
+  ...
 };
 type DragEventType = 'dragstart' | 'dragend' | 'dragchange' | 'dragmove';
 
@@ -56,7 +71,7 @@ type DragEvent = {|
 |};
 
 function createDragEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
   type: DragEventType,
   target: Element | Document,
   eventData?: EventData,
@@ -69,22 +84,26 @@ function createDragEvent(
   };
 }
 
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
 function dispatchDragEvent(
-  context: ReactResponderContext,
-  name: DragEventType,
+  context: ReactDOMResponderContext,
   listener: DragEvent => void,
+  name: DragEventType,
   state: DragState,
-  discrete: boolean,
+  eventPriority: EventPriority,
   eventData?: EventData,
 ): void {
   const target = ((state.dragTarget: any): Element | Document);
   const syntheticEvent = createDragEvent(context, name, target, eventData);
-  context.dispatchEvent(syntheticEvent, listener, discrete);
+  context.dispatchEvent(syntheticEvent, listener, eventPriority);
 }
 
-const DragResponder = {
+const dragResponderImpl = {
   targetEventTypes,
-  createInitialState(): DragState {
+  getInitialState(): DragState {
     return {
       dragTarget: null,
       isPointerDown: false,
@@ -95,12 +114,10 @@ const DragResponder = {
       y: 0,
     };
   },
-  allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
   onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: Object,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: DragProps,
     state: DragState,
   ): void {
     const {target, type, nativeEvent} = event;
@@ -110,9 +127,6 @@ const DragResponder = {
       case 'mousedown':
       case 'pointerdown': {
         if (!state.isDragging) {
-          if (props.onShouldClaimOwnership) {
-            context.releaseOwnership();
-          }
           const obj =
             type === 'touchstart'
               ? (nativeEvent: any).changedTouches[0]
@@ -123,17 +137,17 @@ const DragResponder = {
           state.y = y;
           state.dragTarget = target;
           state.isPointerDown = true;
+          const onDragStart = props.onDragStart;
 
-          if (props.onDragStart) {
+          if (isFunction(onDragStart)) {
             dispatchDragEvent(
               context,
+              onDragStart,
               'dragstart',
-              props.onDragStart,
               state,
-              true,
+              DiscreteEvent,
             );
           }
-
           context.addRootEventTypes(rootEventTypes);
         }
         break;
@@ -141,9 +155,9 @@ const DragResponder = {
     }
   },
   onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: Object,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: DragProps,
     state: DragState,
   ): void {
     const {type, nativeEvent} = event;
@@ -164,46 +178,28 @@ const DragResponder = {
           const y = (obj: any).screenY;
           state.x = x;
           state.y = y;
-          if (!state.isDragging && x !== state.startX && y !== state.startY) {
-            let shouldEnableDragging = true;
-
-            if (
-              props.onShouldClaimOwnership &&
-              props.onShouldClaimOwnership()
-            ) {
-              shouldEnableDragging = context.requestGlobalOwnership();
-            }
-            if (shouldEnableDragging) {
-              state.isDragging = true;
-              if (props.onDragChange) {
-                const dragChangeEventListener = () => {
-                  props.onDragChange(true);
-                };
-                dispatchDragEvent(
-                  context,
-                  'dragchange',
-                  dragChangeEventListener,
-                  state,
-                  true,
-                );
-              }
-            } else {
-              state.dragTarget = null;
-              state.isPointerDown = false;
-              context.removeRootEventTypes(rootEventTypes);
+          if (x === state.startX && y === state.startY) {
+            return;
+          }
+          if (!state.isDragging) {
+            state.isDragging = true;
+            const onDragChange = props.onDragChange;
+            if (isFunction(onDragChange)) {
+              context.dispatchEvent(true, onDragChange, UserBlockingEvent);
             }
           } else {
-            if (props.onDragMove) {
+            const onDragMove = props.onDragMove;
+            if (isFunction(onDragMove)) {
               const eventData = {
                 diffX: x - state.startX,
                 diffY: y - state.startY,
               };
               dispatchDragEvent(
                 context,
+                onDragMove,
                 'dragmove',
-                props.onDragMove,
                 state,
-                false,
+                UserBlockingEvent,
                 eventData,
               );
             }
@@ -218,24 +214,20 @@ const DragResponder = {
       case 'mouseup':
       case 'pointerup': {
         if (state.isDragging) {
-          if (props.onShouldClaimOwnership) {
-            context.releaseOwnership();
-          }
-          if (props.onDragEnd) {
-            dispatchDragEvent(context, 'dragend', props.onDragEnd, state, true);
-          }
-          if (props.onDragChange) {
-            const dragChangeEventListener = () => {
-              props.onDragChange(false);
-            };
+          const onDragEnd = props.onDragEnd;
+          if (isFunction(onDragEnd)) {
             dispatchDragEvent(
               context,
-              'dragchange',
-              dragChangeEventListener,
+              onDragEnd,
+              'dragend',
               state,
-              true,
+              DiscreteEvent,
             );
           }
+          const onDragChange = props.onDragChange;
+          if (isFunction(onDragChange)) {
+            context.dispatchEvent(false, onDragChange, UserBlockingEvent);
+          }
           state.isDragging = false;
         }
         if (state.isPointerDown) {
@@ -249,4 +241,13 @@ const DragResponder = {
   },
 };
 
-export default React.unstable_createEventComponent(DragResponder, 'Drag');
+export const DragResponder = React.DEPRECATED_createResponder(
+  'Drag',
+  dragResponderImpl,
+);
+
+export function useDrag(
+  props: DragProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(DragResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js
new file mode 100644
index 0000000000000..b8572e5880ffa
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Focus.js
@@ -0,0 +1,685 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+import React from 'react';
+import {DiscreteEvent} from 'shared/ReactTypes';
+
+/**
+ * Types
+ */
+
+type FocusEvent = {|
+  isTargetAttached: boolean,
+  target: Element | Document,
+  type: FocusEventType | FocusWithinEventType,
+  pointerType: PointerType,
+  timeStamp: number,
+  continuePropagation: () => void,
+|};
+
+type FocusState = {
+  detachedTarget: null | Element | Document,
+  focusTarget: null | Element | Document,
+  isFocused: boolean,
+  isFocusVisible: boolean,
+  pointerType: PointerType,
+  ...
+};
+
+type FocusProps = {
+  disabled: boolean,
+  onBlur: (e: FocusEvent) => void,
+  onFocus: (e: FocusEvent) => void,
+  onFocusChange: boolean => void,
+  onFocusVisibleChange: boolean => void,
+  ...
+};
+
+type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
+
+type FocusWithinProps = {
+  disabled?: boolean,
+  onFocusWithin?: (e: FocusEvent) => void,
+  onBeforeBlurWithin?: (e: FocusEvent) => void,
+  onBlurWithin?: (e: FocusEvent) => void,
+  onFocusWithinChange?: boolean => void,
+  onFocusWithinVisibleChange?: boolean => void,
+  ...
+};
+
+type FocusWithinEventType =
+  | 'focuswithinvisiblechange'
+  | 'focuswithinchange'
+  | 'blurwithin'
+  | 'focuswithin'
+  | 'beforeblurwithin';
+
+/**
+ * Shared between Focus and FocusWithin
+ */
+
+let isGlobalFocusVisible = true;
+let hasTrackedGlobalFocusVisible = false;
+let globalFocusVisiblePointerType = '';
+let isEmulatingMouseEvents = false;
+
+const isMac =
+  typeof window !== 'undefined' && window.navigator != null
+    ? /^Mac/.test(window.navigator.platform)
+    : false;
+
+export let passiveBrowserEventsSupported = false;
+
+const canUseDOM: boolean = !!(
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+);
+
+// Check if browser support events with passive listeners
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+if (canUseDOM) {
+  try {
+    const options = {};
+    // $FlowFixMe: Ignore Flow complaining about needing a value
+    Object.defineProperty(options, 'passive', {
+      get: function() {
+        passiveBrowserEventsSupported = true;
+      },
+    });
+    window.addEventListener('test', options, options);
+    window.removeEventListener('test', options, options);
+  } catch (e) {
+    passiveBrowserEventsSupported = false;
+  }
+}
+
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent != null;
+
+const focusVisibleEvents = hasPointerEvents
+  ? ['keydown', 'keyup', 'pointermove', 'pointerdown', 'pointerup']
+  : ['keydown', 'keyup', 'mousedown', 'touchmove', 'touchstart', 'touchend'];
+
+const targetEventTypes = ['focus', 'blur', 'beforeblur', ...focusVisibleEvents];
+
+// Used only for the blur "detachedTarget" logic
+const rootEventTypes = ['blur'];
+
+function addWindowEventListener(types, callback, options) {
+  types.forEach(type => {
+    window.addEventListener(type, callback, options);
+  });
+}
+
+function trackGlobalFocusVisible() {
+  if (!hasTrackedGlobalFocusVisible) {
+    hasTrackedGlobalFocusVisible = true;
+    addWindowEventListener(
+      focusVisibleEvents,
+      handleGlobalFocusVisibleEvent,
+      passiveBrowserEventsSupported ? {capture: true, passive: true} : true,
+    );
+  }
+}
+
+function handleGlobalFocusVisibleEvent(
+  nativeEvent: MouseEvent | TouchEvent | KeyboardEvent,
+): void {
+  const {type} = nativeEvent;
+
+  switch (type) {
+    case 'pointermove':
+    case 'pointerdown':
+    case 'pointerup': {
+      isGlobalFocusVisible = false;
+      globalFocusVisiblePointerType = (nativeEvent: any).pointerType;
+      break;
+    }
+
+    case 'keydown':
+    case 'keyup': {
+      const {metaKey, altKey, ctrlKey} = nativeEvent;
+      const validKey = !(metaKey || (!isMac && altKey) || ctrlKey);
+
+      if (validKey) {
+        globalFocusVisiblePointerType = 'keyboard';
+        isGlobalFocusVisible = true;
+      }
+      break;
+    }
+
+    // fallbacks for no PointerEvent support
+    case 'touchmove':
+    case 'touchstart':
+    case 'touchend': {
+      isEmulatingMouseEvents = true;
+      isGlobalFocusVisible = false;
+      globalFocusVisiblePointerType = 'touch';
+      break;
+    }
+    case 'mousedown': {
+      if (!isEmulatingMouseEvents) {
+        isGlobalFocusVisible = false;
+        globalFocusVisiblePointerType = 'mouse';
+      } else {
+        isEmulatingMouseEvents = false;
+      }
+      break;
+    }
+  }
+}
+
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
+function createFocusEvent(
+  context: ReactDOMResponderContext,
+  type: FocusEventType | FocusWithinEventType,
+  target: Element | Document,
+  pointerType: PointerType,
+  isTargetAttached: boolean,
+): FocusEvent {
+  return {
+    isTargetAttached,
+    target,
+    type,
+    pointerType,
+    timeStamp: context.getTimeStamp(),
+    // We don't use stopPropagation, as the default behavior
+    // is to not propagate. Plus, there might be confusion
+    // using stopPropagation as we don't actually stop
+    // native propagation from working, but instead only
+    // allow propagation to the others keyboard responders.
+    continuePropagation() {
+      context.continuePropagation();
+    },
+  };
+}
+
+function handleFocusVisibleTargetEvent(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  state: FocusState,
+  callback: boolean => void,
+): void {
+  const {type} = event;
+  isGlobalFocusVisible = false;
+
+  // Focus should stop being visible if a pointer is used on the element
+  // after it was focused using a keyboard.
+  const focusTarget = state.focusTarget;
+  if (
+    focusTarget !== null &&
+    (type === 'mousedown' || type === 'touchstart' || type === 'pointerdown')
+  ) {
+    callback(false);
+  }
+}
+
+function handleFocusVisibleTargetEvents(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  state: FocusState,
+  callback: boolean => void,
+): void {
+  const {type} = event;
+  state.pointerType = globalFocusVisiblePointerType;
+
+  switch (type) {
+    case 'pointermove':
+    case 'pointerdown':
+    case 'pointerup': {
+      handleFocusVisibleTargetEvent(event, context, state, callback);
+      break;
+    }
+
+    case 'keydown':
+    case 'keyup': {
+      const nativeEvent = event.nativeEvent;
+      const focusTarget = state.focusTarget;
+      const {metaKey, altKey, ctrlKey} = (nativeEvent: any);
+      const validKey = !(metaKey || (!isMac && altKey) || ctrlKey);
+
+      if (validKey) {
+        if (focusTarget !== null) {
+          callback(true);
+        }
+      }
+      break;
+    }
+
+    // fallbacks for no PointerEvent support
+    case 'touchmove':
+    case 'touchstart':
+    case 'touchend': {
+      handleFocusVisibleTargetEvent(event, context, state, callback);
+      break;
+    }
+    case 'mousedown': {
+      if (!isEmulatingMouseEvents) {
+        handleFocusVisibleTargetEvent(event, context, state, callback);
+      }
+      break;
+    }
+  }
+}
+
+/**
+ * Focus Responder
+ */
+
+function dispatchFocusEvents(
+  context: ReactDOMResponderContext,
+  props: FocusProps,
+  state: FocusState,
+) {
+  const pointerType = state.pointerType;
+  const target = ((state.focusTarget: any): Element | Document);
+  const onFocus = props.onFocus;
+  if (isFunction(onFocus)) {
+    const syntheticEvent = createFocusEvent(
+      context,
+      'focus',
+      target,
+      pointerType,
+      true,
+    );
+    context.dispatchEvent(syntheticEvent, onFocus, DiscreteEvent);
+  }
+  dispatchFocusChange(context, props, true);
+  if (state.isFocusVisible) {
+    dispatchFocusVisibleChangeEvent(context, props, true);
+  }
+}
+
+function dispatchBlurEvents(
+  context: ReactDOMResponderContext,
+  props: FocusProps,
+  state: FocusState,
+) {
+  const pointerType = state.pointerType;
+  const target = ((state.focusTarget: any): Element | Document);
+  const onBlur = props.onBlur;
+  if (isFunction(onBlur)) {
+    const syntheticEvent = createFocusEvent(
+      context,
+      'blur',
+      target,
+      pointerType,
+      true,
+    );
+    context.dispatchEvent(syntheticEvent, onBlur, DiscreteEvent);
+  }
+  dispatchFocusChange(context, props, false);
+  if (state.isFocusVisible) {
+    dispatchFocusVisibleChangeEvent(context, props, false);
+  }
+}
+
+function dispatchFocusWithinEvents(
+  context: ReactDOMResponderContext,
+  event: ReactDOMResponderEvent,
+  props: FocusWithinProps,
+  state: FocusState,
+) {
+  const pointerType = state.pointerType;
+  const target = ((state.focusTarget: any): Element | Document) || event.target;
+  const onFocusWithin = (props.onFocusWithin: any);
+  if (isFunction(onFocusWithin)) {
+    const syntheticEvent = createFocusEvent(
+      context,
+      'focuswithin',
+      target,
+      pointerType,
+      true,
+    );
+    context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
+  }
+}
+
+function dispatchBlurWithinEvents(
+  context: ReactDOMResponderContext,
+  event: ReactDOMResponderEvent,
+  props: FocusWithinProps,
+  state: FocusState,
+) {
+  const pointerType = state.pointerType;
+  const target = ((state.focusTarget: any): Element | Document) || event.target;
+  const onBlurWithin = (props.onBlurWithin: any);
+  const isTargetAttached = state.detachedTarget === null;
+  if (isFunction(onBlurWithin)) {
+    const syntheticEvent = createFocusEvent(
+      context,
+      'blurwithin',
+      target,
+      pointerType,
+      isTargetAttached,
+    );
+    context.dispatchEvent(syntheticEvent, onBlurWithin, DiscreteEvent);
+  }
+}
+
+function dispatchFocusChange(
+  context: ReactDOMResponderContext,
+  props: FocusProps,
+  value: boolean,
+): void {
+  const onFocusChange = props.onFocusChange;
+  if (isFunction(onFocusChange)) {
+    context.dispatchEvent(value, onFocusChange, DiscreteEvent);
+  }
+}
+
+function dispatchFocusVisibleChangeEvent(
+  context: ReactDOMResponderContext,
+  props: FocusProps,
+  value: boolean,
+) {
+  const onFocusVisibleChange = props.onFocusVisibleChange;
+  if (isFunction(onFocusVisibleChange)) {
+    context.dispatchEvent(value, onFocusVisibleChange, DiscreteEvent);
+  }
+}
+
+function unmountFocusResponder(
+  context: ReactDOMResponderContext,
+  props: FocusProps,
+  state: FocusState,
+) {
+  if (state.isFocused) {
+    dispatchBlurEvents(context, props, state);
+  }
+}
+
+const focusResponderImpl = {
+  targetEventTypes,
+  targetPortalPropagation: true,
+  getInitialState(): FocusState {
+    return {
+      detachedTarget: null,
+      focusTarget: null,
+      isFocused: false,
+      isFocusVisible: false,
+      pointerType: '',
+    };
+  },
+  onMount() {
+    trackGlobalFocusVisible();
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: FocusProps,
+    state: FocusState,
+  ): void {
+    const {type, target} = event;
+
+    if (props.disabled) {
+      if (state.isFocused) {
+        dispatchBlurEvents(context, props, state);
+        state.isFocused = false;
+        state.focusTarget = null;
+      }
+      return;
+    }
+
+    switch (type) {
+      case 'focus': {
+        state.focusTarget = context.getResponderNode();
+        // Limit focus events to the direct child of the event component.
+        // Browser focus is not expected to bubble.
+        if (!state.isFocused && state.focusTarget === target) {
+          state.isFocused = true;
+          state.isFocusVisible = isGlobalFocusVisible;
+          dispatchFocusEvents(context, props, state);
+        }
+        isEmulatingMouseEvents = false;
+        break;
+      }
+      case 'blur': {
+        if (state.isFocused) {
+          dispatchBlurEvents(context, props, state);
+          state.isFocusVisible = isGlobalFocusVisible;
+          state.isFocused = false;
+        }
+        // This covers situations where focus is lost to another document in
+        // the same window (e.g., iframes). Any action that restores focus to
+        // the document (e.g., touch or click) first causes 'focus' to be
+        // dispatched, which means the 'pointerType' we provide is stale
+        // (it reflects the *previous* pointer). We cannot determine the
+        // 'pointerType' in this case, so a blur with no
+        // relatedTarget is used as a signal to reset the 'pointerType'.
+        if (event.nativeEvent.relatedTarget == null) {
+          state.pointerType = '';
+        }
+        isEmulatingMouseEvents = false;
+        break;
+      }
+      default:
+        handleFocusVisibleTargetEvents(
+          event,
+          context,
+          state,
+          isFocusVisible => {
+            if (state.isFocused && state.isFocusVisible !== isFocusVisible) {
+              state.isFocusVisible = isFocusVisible;
+              dispatchFocusVisibleChangeEvent(context, props, isFocusVisible);
+            }
+          },
+        );
+    }
+  },
+  onUnmount(
+    context: ReactDOMResponderContext,
+    props: FocusProps,
+    state: FocusState,
+  ) {
+    unmountFocusResponder(context, props, state);
+  },
+};
+
+export const FocusResponder = React.DEPRECATED_createResponder(
+  'Focus',
+  focusResponderImpl,
+);
+
+export function useFocus(
+  props: FocusProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(FocusResponder, props);
+}
+
+/**
+ * FocusWithin Responder
+ */
+
+function dispatchFocusWithinChangeEvent(
+  context: ReactDOMResponderContext,
+  props: FocusWithinProps,
+  state: FocusState,
+  value: boolean,
+) {
+  const onFocusWithinChange = (props.onFocusWithinChange: any);
+  if (isFunction(onFocusWithinChange)) {
+    context.dispatchEvent(value, onFocusWithinChange, DiscreteEvent);
+  }
+  if (state.isFocusVisible) {
+    dispatchFocusWithinVisibleChangeEvent(context, props, state, value);
+  }
+}
+
+function dispatchFocusWithinVisibleChangeEvent(
+  context: ReactDOMResponderContext,
+  props: FocusWithinProps,
+  state: FocusState,
+  value: boolean,
+) {
+  const onFocusWithinVisibleChange = (props.onFocusWithinVisibleChange: any);
+  if (isFunction(onFocusWithinVisibleChange)) {
+    context.dispatchEvent(value, onFocusWithinVisibleChange, DiscreteEvent);
+  }
+}
+
+function unmountFocusWithinResponder(
+  context: ReactDOMResponderContext,
+  props: FocusWithinProps,
+  state: FocusState,
+) {
+  if (state.isFocused) {
+    dispatchFocusWithinChangeEvent(context, props, state, false);
+  }
+}
+
+const focusWithinResponderImpl = {
+  targetEventTypes,
+  targetPortalPropagation: true,
+  getInitialState(): FocusState {
+    return {
+      detachedTarget: null,
+      focusTarget: null,
+      isFocused: false,
+      isFocusVisible: false,
+      pointerType: '',
+    };
+  },
+  onMount() {
+    trackGlobalFocusVisible();
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: FocusWithinProps,
+    state: FocusState,
+  ): void {
+    const {nativeEvent, type} = event;
+    const relatedTarget = (nativeEvent: any).relatedTarget;
+
+    if (props.disabled) {
+      if (state.isFocused) {
+        dispatchFocusWithinChangeEvent(context, props, state, false);
+        state.isFocused = false;
+        state.focusTarget = null;
+      }
+      return;
+    }
+
+    switch (type) {
+      case 'focus': {
+        state.focusTarget = context.getResponderNode();
+        // Limit focus events to the direct child of the event component.
+        // Browser focus is not expected to bubble.
+        if (!state.isFocused) {
+          state.isFocused = true;
+          state.isFocusVisible = isGlobalFocusVisible;
+          dispatchFocusWithinChangeEvent(context, props, state, true);
+        }
+        if (!state.isFocusVisible && isGlobalFocusVisible) {
+          state.isFocusVisible = isGlobalFocusVisible;
+          dispatchFocusWithinVisibleChangeEvent(context, props, state, true);
+        }
+        dispatchFocusWithinEvents(context, event, props, state);
+        break;
+      }
+      case 'blur': {
+        if (
+          state.isFocused &&
+          !context.isTargetWithinResponder(relatedTarget)
+        ) {
+          dispatchFocusWithinChangeEvent(context, props, state, false);
+          dispatchBlurWithinEvents(context, event, props, state);
+          state.isFocused = false;
+        }
+        break;
+      }
+      case 'beforeblur': {
+        const onBeforeBlurWithin = (props.onBeforeBlurWithin: any);
+        if (isFunction(onBeforeBlurWithin)) {
+          const syntheticEvent = createFocusEvent(
+            context,
+            'beforeblurwithin',
+            event.target,
+            state.pointerType,
+            true,
+          );
+          state.detachedTarget = event.target;
+          context.dispatchEvent(
+            syntheticEvent,
+            onBeforeBlurWithin,
+            DiscreteEvent,
+          );
+          context.addRootEventTypes(rootEventTypes);
+        } else {
+          // We want to propagate to next focusWithin responder
+          // if this responder doesn't handle beforeblur
+          context.continuePropagation();
+        }
+        break;
+      }
+      default:
+        handleFocusVisibleTargetEvents(
+          event,
+          context,
+          state,
+          isFocusVisible => {
+            if (state.isFocused && state.isFocusVisible !== isFocusVisible) {
+              state.isFocusVisible = isFocusVisible;
+              dispatchFocusWithinVisibleChangeEvent(
+                context,
+                props,
+                state,
+                isFocusVisible,
+              );
+            }
+          },
+        );
+    }
+  },
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: FocusWithinProps,
+    state: FocusState,
+  ): void {
+    if (event.type === 'blur') {
+      const detachedTarget = state.detachedTarget;
+      if (detachedTarget !== null && detachedTarget === event.target) {
+        dispatchBlurWithinEvents(context, event, props, state);
+        state.detachedTarget = null;
+        context.removeRootEventTypes(rootEventTypes);
+      }
+    }
+  },
+  onUnmount(
+    context: ReactDOMResponderContext,
+    props: FocusWithinProps,
+    state: FocusState,
+  ) {
+    unmountFocusWithinResponder(context, props, state);
+  },
+};
+
+export const FocusWithinResponder = React.DEPRECATED_createResponder(
+  'FocusWithin',
+  focusWithinResponderImpl,
+);
+
+export function useFocusWithin(
+  props: FocusWithinProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(FocusWithinResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Hover.js b/packages/react-interactions/events/src/dom/Hover.js
new file mode 100644
index 0000000000000..503ee787ec253
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Hover.js
@@ -0,0 +1,390 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+import React from 'react';
+import {UserBlockingEvent} from 'shared/ReactTypes';
+
+type HoverProps = {
+  disabled: boolean,
+  preventDefault: boolean,
+  onHoverChange: boolean => void,
+  onHoverEnd: (e: HoverEvent) => void,
+  onHoverMove: (e: HoverEvent) => void,
+  onHoverStart: (e: HoverEvent) => void,
+  ...
+};
+
+type HoverState = {
+  hoverTarget: null | Element | Document,
+  isActiveHovered: boolean,
+  isHovered: boolean,
+  isTouched?: boolean,
+  ignoreEmulatedMouseEvents?: boolean,
+  ...
+};
+
+type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
+
+type HoverEvent = {|
+  clientX: null | number,
+  clientY: null | number,
+  pageX: null | number,
+  pageY: null | number,
+  pointerType: PointerType,
+  screenX: null | number,
+  screenY: null | number,
+  target: Element | Document,
+  timeStamp: number,
+  type: HoverEventType,
+  x: null | number,
+  y: null | number,
+|};
+
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent != null;
+
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
+function createHoverEvent(
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  type: HoverEventType,
+  target: Element | Document,
+): HoverEvent {
+  let clientX = null;
+  let clientY = null;
+  let pageX = null;
+  let pageY = null;
+  let screenX = null;
+  let screenY = null;
+  let pointerType = '';
+
+  if (event) {
+    const nativeEvent = (event.nativeEvent: any);
+    pointerType = event.pointerType;
+    ({clientX, clientY, pageX, pageY, screenX, screenY} = nativeEvent);
+  }
+
+  return {
+    pointerType,
+    target,
+    type,
+    timeStamp: context.getTimeStamp(),
+    clientX,
+    clientY,
+    pageX,
+    pageY,
+    screenX,
+    screenY,
+    x: clientX,
+    y: clientY,
+  };
+}
+
+function dispatchHoverChangeEvent(
+  event: null | ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: HoverProps,
+  state: HoverState,
+): void {
+  const onHoverChange = props.onHoverChange;
+  if (isFunction(onHoverChange)) {
+    const bool = state.isActiveHovered;
+    context.dispatchEvent(bool, onHoverChange, UserBlockingEvent);
+  }
+}
+
+function dispatchHoverStartEvents(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: HoverProps,
+  state: HoverState,
+): boolean {
+  const target = state.hoverTarget;
+  if (event !== null) {
+    const {nativeEvent} = event;
+    if (
+      context.isTargetWithinResponderScope((nativeEvent: any).relatedTarget)
+    ) {
+      return false;
+    }
+  }
+
+  state.isHovered = true;
+
+  if (!state.isActiveHovered) {
+    state.isActiveHovered = true;
+    const onHoverStart = props.onHoverStart;
+    if (isFunction(onHoverStart)) {
+      const syntheticEvent = createHoverEvent(
+        event,
+        context,
+        'hoverstart',
+        ((target: any): Element | Document),
+      );
+      context.dispatchEvent(syntheticEvent, onHoverStart, UserBlockingEvent);
+    }
+    dispatchHoverChangeEvent(event, context, props, state);
+  }
+  return true;
+}
+
+function dispatchHoverMoveEvent(event, context, props, state) {
+  const target = state.hoverTarget;
+  const onHoverMove = props.onHoverMove;
+  if (isFunction(onHoverMove)) {
+    const syntheticEvent = createHoverEvent(
+      event,
+      context,
+      'hovermove',
+      ((target: any): Element | Document),
+    );
+    context.dispatchEvent(syntheticEvent, onHoverMove, UserBlockingEvent);
+  }
+}
+
+function dispatchHoverEndEvents(
+  event: null | ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: HoverProps,
+  state: HoverState,
+): boolean {
+  const target = state.hoverTarget;
+  if (event !== null) {
+    const {nativeEvent} = event;
+    if (
+      context.isTargetWithinResponderScope((nativeEvent: any).relatedTarget)
+    ) {
+      return false;
+    }
+  }
+
+  state.isHovered = false;
+
+  if (state.isActiveHovered) {
+    state.isActiveHovered = false;
+    const onHoverEnd = props.onHoverEnd;
+    if (isFunction(onHoverEnd)) {
+      const syntheticEvent = createHoverEvent(
+        event,
+        context,
+        'hoverend',
+        ((target: any): Element | Document),
+      );
+      context.dispatchEvent(syntheticEvent, onHoverEnd, UserBlockingEvent);
+    }
+    dispatchHoverChangeEvent(event, context, props, state);
+    state.hoverTarget = null;
+    state.isTouched = false;
+  }
+  return true;
+}
+
+function unmountResponder(
+  context: ReactDOMResponderContext,
+  props: HoverProps,
+  state: HoverState,
+): void {
+  if (state.isHovered) {
+    dispatchHoverEndEvents(null, context, props, state);
+  }
+}
+
+const rootPointerEventTypes = ['pointerout', 'pointermove', 'pointercancel'];
+
+const hoverResponderImpl = {
+  targetEventTypes: ['pointerover'],
+  getInitialState() {
+    return {
+      isActiveHovered: false,
+      isHovered: false,
+    };
+  },
+  allowMultipleHostChildren: false,
+  allowEventHooks: true,
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: HoverProps,
+    state: HoverState,
+  ): void {
+    const {type} = event;
+
+    switch (type) {
+      // MOVE
+      case 'pointermove': {
+        if (state.isHovered && state.hoverTarget !== null) {
+          dispatchHoverMoveEvent(event, context, props, state);
+        }
+        break;
+      }
+
+      // END
+      case 'pointercancel':
+      case 'pointerout': {
+        if (state.isHovered) {
+          if (
+            dispatchHoverEndEvents(event, context, props, state) ||
+            type === 'pointercancel'
+          ) {
+            context.removeRootEventTypes(rootPointerEventTypes);
+          }
+        }
+        break;
+      }
+    }
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: HoverProps,
+    state: HoverState,
+  ): void {
+    const {pointerType, type} = event;
+
+    if (props.disabled) {
+      if (state.isHovered) {
+        context.removeRootEventTypes(rootPointerEventTypes);
+        dispatchHoverEndEvents(event, context, props, state);
+      }
+      return;
+    }
+
+    switch (type) {
+      // START
+      case 'pointerover': {
+        if (!state.isHovered && pointerType !== 'touch') {
+          state.hoverTarget = context.getResponderNode();
+          if (dispatchHoverStartEvents(event, context, props, state)) {
+            context.addRootEventTypes(rootPointerEventTypes);
+          }
+        }
+        break;
+      }
+    }
+  },
+  onUnmount: unmountResponder,
+};
+
+const rootMouseEventTypes = ['mousemove', 'mouseout'];
+
+const hoverResponderFallbackImpl = {
+  targetEventTypes: ['mouseover', 'mousemove', 'touchstart'],
+  getInitialState() {
+    return {
+      isActiveHovered: false,
+      isHovered: false,
+      isTouched: false,
+      ignoreEmulatedMouseEvents: false,
+    };
+  },
+  allowMultipleHostChildren: false,
+  allowEventHooks: true,
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: HoverProps,
+    state: HoverState,
+  ): void {
+    const {type} = event;
+
+    switch (type) {
+      // MOVE
+      case 'mousemove': {
+        if (
+          state.isHovered &&
+          state.hoverTarget !== null &&
+          !state.ignoreEmulatedMouseEvents
+        ) {
+          dispatchHoverMoveEvent(event, context, props, state);
+        }
+        break;
+      }
+
+      // END
+      case 'mouseout': {
+        if (state.isHovered) {
+          if (dispatchHoverEndEvents(event, context, props, state)) {
+            context.removeRootEventTypes(rootMouseEventTypes);
+          }
+        }
+        break;
+      }
+    }
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: HoverProps,
+    state: HoverState,
+  ): void {
+    const {type} = event;
+
+    if (props.disabled) {
+      if (state.isHovered) {
+        context.removeRootEventTypes(rootMouseEventTypes);
+        dispatchHoverEndEvents(event, context, props, state);
+        state.ignoreEmulatedMouseEvents = false;
+      }
+      state.isTouched = false;
+      return;
+    }
+
+    switch (type) {
+      // START
+      case 'mouseover': {
+        if (!state.isHovered && !state.ignoreEmulatedMouseEvents) {
+          state.hoverTarget = context.getResponderNode();
+          if (dispatchHoverStartEvents(event, context, props, state)) {
+            context.addRootEventTypes(rootMouseEventTypes);
+          }
+        }
+        break;
+      }
+
+      // MOVE
+      case 'mousemove': {
+        if (!state.isHovered && type === 'mousemove') {
+          state.ignoreEmulatedMouseEvents = false;
+          state.isTouched = false;
+        }
+        break;
+      }
+
+      case 'touchstart': {
+        if (!state.isHovered) {
+          state.isTouched = true;
+          state.ignoreEmulatedMouseEvents = true;
+        }
+        break;
+      }
+    }
+  },
+  onUnmount: unmountResponder,
+};
+
+export const HoverResponder = React.DEPRECATED_createResponder(
+  'Hover',
+  hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl,
+);
+
+export function useHover(
+  props: HoverProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(HoverResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Input.js b/packages/react-interactions/events/src/dom/Input.js
new file mode 100644
index 0000000000000..ba4c6f5f7d52d
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Input.js
@@ -0,0 +1,224 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+
+import React from 'react';
+import {DiscreteEvent} from 'shared/ReactTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+type InputEventType = 'change' | 'beforechange' | 'valuechange';
+
+type InputResponderProps = {
+  disabled: boolean,
+  onBeforeChange: (e: InputEvent) => void,
+  onChange: (e: InputEvent) => void,
+  onValueChange: (value: string | boolean) => void,
+  ...
+};
+
+type InputEvent = {|
+  data: string,
+  isComposing: boolean,
+  inputType: string,
+  dataTransfer: null | string,
+  target: Element | Document,
+  type: InputEventType,
+  timeStamp: number,
+|};
+
+const targetEventTypes = ['input', 'change', 'beforeinput', 'click'];
+
+const supportedInputTypes = new Set([
+  'color',
+  'date',
+  'datetime',
+  'datetime-local',
+  'email',
+  'month',
+  'number',
+  'password',
+  'range',
+  'search',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week',
+]);
+
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
+function createInputEvent(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  type: InputEventType,
+  target: Document | Element,
+): InputEvent {
+  const {data, dataTransfer, inputType, isComposing} = (event: any).nativeEvent;
+  return {
+    data,
+    dataTransfer,
+    inputType,
+    isComposing,
+    target,
+    timeStamp: context.getTimeStamp(),
+    type,
+  };
+}
+
+function dispatchInputEvent(
+  event: ReactDOMResponderEvent,
+  listener: InputEvent => void,
+  context: ReactDOMResponderContext,
+  type: InputEventType,
+  target: Element | Document,
+): void {
+  const syntheticEvent = createInputEvent(event, context, type, target);
+  context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
+}
+
+function getNodeName(elem: Element | Document): string {
+  return elem.nodeName && elem.nodeName.toLowerCase();
+}
+
+function isTextInputElement(elem: Element | Document): boolean {
+  const nodeName = getNodeName(elem);
+  const type = (elem: any).type;
+  return (
+    nodeName === 'textarea' ||
+    (nodeName === 'input' && (type == null || supportedInputTypes.has(type)))
+  );
+}
+
+function isCheckable(elem: Element | Document): boolean {
+  const nodeName = getNodeName(elem);
+  const type = (elem: any).type;
+  return nodeName === 'input' && (type === 'checkbox' || type === 'radio');
+}
+
+function shouldUseChangeEvent(elem: Element | Document): boolean {
+  const nodeName = getNodeName(elem);
+  return (
+    nodeName === 'select' ||
+    (nodeName === 'input' && (elem: any).type === 'file')
+  );
+}
+
+function dispatchChangeEvent(
+  context: ReactDOMResponderContext,
+  props: InputResponderProps,
+  target: Element | Document,
+): void {
+  const onValueChange = props.onValueChange;
+  if (isFunction(onValueChange)) {
+    const value = getValueFromNode(target);
+    context.dispatchEvent(value, onValueChange, DiscreteEvent);
+  }
+}
+
+function dispatchBothChangeEvents(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: InputResponderProps,
+  target: Document | Element,
+): void {
+  context.enqueueStateRestore(target);
+  const onChange = props.onChange;
+  if (isFunction(onChange)) {
+    dispatchInputEvent(event, onChange, context, 'change', target);
+  }
+  dispatchChangeEvent(context, props, target);
+}
+
+function updateValueIfChanged(elem: Element | Document): boolean {
+  // React's internal value tracker
+  const valueTracker = (elem: any)._valueTracker;
+  if (valueTracker == null) {
+    return true;
+  }
+  const prevValue = valueTracker.getValue();
+  const nextValue = getValueFromNode(elem);
+
+  if (prevValue !== nextValue) {
+    valueTracker.setValue(nextValue);
+    return true;
+  }
+  return false;
+}
+
+function getValueFromNode(node: Element | Document): string {
+  let value = '';
+  if (!node) {
+    return value;
+  }
+
+  if (isCheckable(node)) {
+    value = (node: any).checked ? 'true' : 'false';
+  } else {
+    value = (node: any).value;
+  }
+
+  return value;
+}
+
+const inputResponderImpl = {
+  targetEventTypes,
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: InputResponderProps,
+  ): void {
+    const {type, target} = event;
+
+    if (props.disabled) {
+      return;
+    }
+    const currentTarget = context.getResponderNode();
+    if (target !== currentTarget || currentTarget === null) {
+      return;
+    }
+    switch (type) {
+      default: {
+        if (shouldUseChangeEvent(target) && type === 'change') {
+          dispatchBothChangeEvents(event, context, props, currentTarget);
+        } else if (
+          isTextInputElement(target) &&
+          (type === 'input' || type === 'change') &&
+          updateValueIfChanged(target)
+        ) {
+          dispatchBothChangeEvents(event, context, props, currentTarget);
+        } else if (
+          isCheckable(target) &&
+          type === 'click' &&
+          updateValueIfChanged(target)
+        ) {
+          dispatchBothChangeEvents(event, context, props, currentTarget);
+        }
+        break;
+      }
+    }
+  },
+};
+
+export const InputResponder = React.DEPRECATED_createResponder(
+  'Input',
+  inputResponderImpl,
+);
+
+export function useInput(
+  props: InputResponderProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(InputResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Keyboard.js b/packages/react-interactions/events/src/dom/Keyboard.js
new file mode 100644
index 0000000000000..289fc9067065c
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Keyboard.js
@@ -0,0 +1,241 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+import React from 'react';
+import {DiscreteEvent} from 'shared/ReactTypes';
+import {isVirtualClick} from './shared';
+
+type KeyboardEventType =
+  | 'keyboard:click'
+  | 'keyboard:keydown'
+  | 'keyboard:keyup';
+
+type KeyboardProps = {|
+  disabled?: boolean,
+  onClick?: (e: KeyboardEvent) => void,
+  onKeyDown?: (e: KeyboardEvent) => void,
+  onKeyUp?: (e: KeyboardEvent) => void,
+|};
+
+type KeyboardState = {|
+  isActive: boolean,
+|};
+
+export type KeyboardEvent = {|
+  altKey: boolean,
+  ctrlKey: boolean,
+  defaultPrevented: boolean,
+  isComposing?: boolean,
+  key?: string,
+  metaKey: boolean,
+  pointerType: 'keyboard',
+  shiftKey: boolean,
+  target: Element | Document,
+  type: KeyboardEventType,
+  timeStamp: number,
+  continuePropagation: () => void,
+  preventDefault: () => void,
+|};
+
+const targetEventTypes = ['click_active', 'keydown_active', 'keyup'];
+
+/**
+ * Normalization of deprecated HTML5 `key` values
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+ */
+const normalizeKey = {
+  Esc: 'Escape',
+  Spacebar: ' ',
+  Left: 'ArrowLeft',
+  Up: 'ArrowUp',
+  Right: 'ArrowRight',
+  Down: 'ArrowDown',
+  Del: 'Delete',
+  Win: 'OS',
+  Menu: 'ContextMenu',
+  Apps: 'ContextMenu',
+  Scroll: 'ScrollLock',
+  MozPrintableKey: 'Unidentified',
+};
+
+/**
+ * Translation from legacy `keyCode` to HTML5 `key`
+ * Only special keys supported, all others depend on keyboard layout or browser
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
+ */
+const translateToKey = {
+  '8': 'Backspace',
+  '9': 'Tab',
+  '12': 'Clear',
+  '13': 'Enter',
+  '16': 'Shift',
+  '17': 'Control',
+  '18': 'Alt',
+  '19': 'Pause',
+  '20': 'CapsLock',
+  '27': 'Escape',
+  '32': ' ',
+  '33': 'PageUp',
+  '34': 'PageDown',
+  '35': 'End',
+  '36': 'Home',
+  '37': 'ArrowLeft',
+  '38': 'ArrowUp',
+  '39': 'ArrowRight',
+  '40': 'ArrowDown',
+  '45': 'Insert',
+  '46': 'Delete',
+  '112': 'F1',
+  '113': 'F2',
+  '114': 'F3',
+  '115': 'F4',
+  '116': 'F5',
+  '117': 'F6',
+  '118': 'F7',
+  '119': 'F8',
+  '120': 'F9',
+  '121': 'F10',
+  '122': 'F11',
+  '123': 'F12',
+  '144': 'NumLock',
+  '145': 'ScrollLock',
+  '224': 'Meta',
+};
+
+function getEventKey(nativeEvent: Object): string {
+  const nativeKey = nativeEvent.key;
+  if (nativeKey) {
+    // Normalize inconsistent values reported by browsers due to
+    // implementations of a working draft specification.
+
+    // FireFox implements `key` but returns `MozPrintableKey` for all
+    // printable characters (normalized to `Unidentified`), ignore it.
+    const key = normalizeKey[nativeKey] || nativeKey;
+    if (key !== 'Unidentified') {
+      return key;
+    }
+  }
+  return translateToKey[nativeEvent.keyCode] || 'Unidentified';
+}
+
+function createKeyboardEvent(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  type: KeyboardEventType,
+): KeyboardEvent {
+  const nativeEvent = (event: any).nativeEvent;
+  const {altKey, ctrlKey, metaKey, shiftKey} = nativeEvent;
+  let keyboardEvent = {
+    altKey,
+    ctrlKey,
+    defaultPrevented: nativeEvent.defaultPrevented === true,
+    metaKey,
+    pointerType: 'keyboard',
+    shiftKey,
+    target: event.target,
+    timeStamp: context.getTimeStamp(),
+    type,
+    // We don't use stopPropagation, as the default behavior
+    // is to not propagate. Plus, there might be confusion
+    // using stopPropagation as we don't actually stop
+    // native propagation from working, but instead only
+    // allow propagation to the others keyboard responders.
+    continuePropagation() {
+      context.continuePropagation();
+    },
+    preventDefault() {
+      keyboardEvent.defaultPrevented = true;
+      nativeEvent.preventDefault();
+    },
+  };
+  if (type !== 'keyboard:click') {
+    const key = getEventKey(nativeEvent);
+    const isComposing = nativeEvent.isComposing;
+    keyboardEvent = context.objectAssign({isComposing, key}, keyboardEvent);
+  }
+  return keyboardEvent;
+}
+
+function dispatchKeyboardEvent(
+  event: ReactDOMResponderEvent,
+  listener: KeyboardEvent => void,
+  context: ReactDOMResponderContext,
+  type: KeyboardEventType,
+): void {
+  const syntheticEvent = createKeyboardEvent(event, context, type);
+  context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
+}
+
+const keyboardResponderImpl = {
+  targetEventTypes,
+  targetPortalPropagation: true,
+  getInitialState(): KeyboardState {
+    return {
+      isActive: false,
+    };
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: KeyboardProps,
+    state: KeyboardState,
+  ): void {
+    const {type} = event;
+
+    if (props.disabled) {
+      return;
+    }
+
+    if (type === 'keydown') {
+      state.isActive = true;
+      const onKeyDown = props.onKeyDown;
+      if (onKeyDown != null) {
+        dispatchKeyboardEvent(
+          event,
+          ((onKeyDown: any): (e: KeyboardEvent) => void),
+          context,
+          'keyboard:keydown',
+        );
+      }
+    } else if (type === 'click' && isVirtualClick(event)) {
+      const onClick = props.onClick;
+      if (onClick != null) {
+        dispatchKeyboardEvent(event, onClick, context, 'keyboard:click');
+      }
+    } else if (type === 'keyup') {
+      state.isActive = false;
+      const onKeyUp = props.onKeyUp;
+      if (onKeyUp != null) {
+        dispatchKeyboardEvent(
+          event,
+          ((onKeyUp: any): (e: KeyboardEvent) => void),
+          context,
+          'keyboard:keyup',
+        );
+      }
+    }
+  },
+};
+
+export const KeyboardResponder = React.DEPRECATED_createResponder(
+  'Keyboard',
+  keyboardResponderImpl,
+);
+
+export function useKeyboard(
+  props: KeyboardProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(KeyboardResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Press.js b/packages/react-interactions/events/src/dom/Press.js
new file mode 100644
index 0000000000000..6c5a240eab491
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Press.js
@@ -0,0 +1,227 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {PointerType} from 'shared/ReactDOMTypes';
+
+import React from 'react';
+import {useTap} from 'react-interactions/events/tap';
+import {useKeyboard} from 'react-interactions/events/keyboard';
+
+const emptyObject = {};
+
+type PressProps = $ReadOnly<{|
+  disabled?: boolean,
+  preventDefault?: boolean,
+  onPress?: (e: PressEvent) => void,
+  onPressChange?: boolean => void,
+  onPressEnd?: (e: PressEvent) => void,
+  onPressMove?: (e: PressEvent) => void,
+  onPressStart?: (e: PressEvent) => void,
+|}>;
+
+type PressEventType =
+  | 'pressstart'
+  | 'presschange'
+  | 'pressmove'
+  | 'pressend'
+  | 'press';
+
+type PressEvent = {|
+  altKey: boolean,
+  buttons: null | 1 | 4,
+  ctrlKey: boolean,
+  defaultPrevented: boolean,
+  key: null | string,
+  metaKey: boolean,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
+  shiftKey: boolean,
+  target: null | Element,
+  timeStamp: number,
+  type: PressEventType,
+  x: number,
+  y: number,
+  preventDefault: () => void,
+  stopPropagation: () => void,
+|};
+
+function createGestureState(e: any, type: PressEventType): PressEvent {
+  return {
+    altKey: e.altKey,
+    buttons: e.type === 'tap:auxiliary' ? 4 : 1,
+    ctrlKey: e.ctrlKey,
+    defaultPrevented: e.defaultPrevented,
+    key: e.key,
+    metaKey: e.metaKey,
+    pageX: e.pageX,
+    pageY: e.pageX,
+    pointerType: e.pointerType,
+    shiftKey: e.shiftKey,
+    target: e.target,
+    timeStamp: e.timeStamp,
+    type,
+    x: e.x,
+    y: e.y,
+    preventDefault() {
+      // NO-OP, we should remove this in the future
+      if (__DEV__) {
+        console.error(
+          'preventDefault is not available on event objects created from event responder modules (React Flare). ' +
+            'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.preventDefault() }`',
+        );
+      }
+    },
+    stopPropagation() {
+      // NO-OP, we should remove this in the future
+      if (__DEV__) {
+        console.error(
+          'stopPropagation is not available on event objects created from event responder modules (React Flare). ' +
+            'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
+        );
+      }
+    },
+  };
+}
+
+function isValidKey(e): boolean {
+  const {key, target} = e;
+  const {tagName, isContentEditable} = (target: any);
+  return (
+    (key === 'Enter' || key === ' ' || key === 'Spacebar') &&
+    tagName !== 'INPUT' &&
+    tagName !== 'TEXTAREA' &&
+    isContentEditable !== true
+  );
+}
+
+function handlePreventDefault(preventDefault: ?boolean, e: any): void {
+  const key = e.key;
+  if (
+    preventDefault !== false &&
+    (key === ' ' || key === 'Enter' || key === 'Spacebar')
+  ) {
+    e.preventDefault();
+  }
+}
+
+/**
+ * The lack of built-in composition for gesture responders means we have to
+ * selectively ignore callbacks from useKeyboard or useTap if the other is
+ * active.
+ */
+export function usePress(props: PressProps) {
+  const safeProps = props || emptyObject;
+  const {
+    disabled,
+    preventDefault,
+    onPress,
+    onPressChange,
+    onPressEnd,
+    onPressMove,
+    onPressStart,
+  } = safeProps;
+
+  const activeResponder = React.useRef(null);
+
+  const tap = useTap({
+    disabled: disabled || activeResponder.current === 'keyboard',
+    preventDefault,
+    onAuxiliaryTap(e) {
+      if (onPressStart != null) {
+        onPressStart(createGestureState(e, 'pressstart'));
+      }
+      if (onPressEnd != null) {
+        onPressEnd(createGestureState(e, 'pressend'));
+      }
+      // Here we rely on Tap only calling 'onAuxiliaryTap' with modifiers when
+      // the primary button is pressed
+      if (onPress != null && (e.metaKey || e.shiftKey)) {
+        onPress(createGestureState(e, 'press'));
+      }
+    },
+    onTapStart(e) {
+      if (activeResponder.current == null) {
+        activeResponder.current = 'tap';
+        if (onPressStart != null) {
+          onPressStart(createGestureState(e, 'pressstart'));
+        }
+      }
+    },
+    onTapChange: onPressChange,
+    onTapUpdate(e) {
+      if (activeResponder.current === 'tap') {
+        if (onPressMove != null) {
+          onPressMove(createGestureState(e, 'pressmove'));
+        }
+      }
+    },
+    onTapEnd(e) {
+      if (activeResponder.current === 'tap') {
+        if (onPressEnd != null) {
+          onPressEnd(createGestureState(e, 'pressend'));
+        }
+        if (onPress != null) {
+          onPress(createGestureState(e, 'press'));
+        }
+        activeResponder.current = null;
+      }
+    },
+    onTapCancel(e) {
+      if (activeResponder.current === 'tap') {
+        if (onPressEnd != null) {
+          onPressEnd(createGestureState(e, 'pressend'));
+        }
+        activeResponder.current = null;
+      }
+    },
+  });
+
+  const keyboard = useKeyboard({
+    disabled: disabled || activeResponder.current === 'tap',
+    onClick(e) {
+      if (preventDefault !== false) {
+        e.preventDefault();
+      }
+      if (activeResponder.current == null && onPress != null) {
+        onPress(createGestureState(e, 'press'));
+      }
+    },
+    onKeyDown(e) {
+      if (activeResponder.current == null && isValidKey(e)) {
+        handlePreventDefault(preventDefault, e);
+        activeResponder.current = 'keyboard';
+
+        if (onPressStart != null) {
+          onPressStart(createGestureState(e, 'pressstart'));
+        }
+        if (onPressChange != null) {
+          onPressChange(true);
+        }
+      }
+    },
+    onKeyUp(e) {
+      if (activeResponder.current === 'keyboard' && isValidKey(e)) {
+        handlePreventDefault(preventDefault, e);
+        if (onPressChange != null) {
+          onPressChange(false);
+        }
+        if (onPressEnd != null) {
+          onPressEnd(createGestureState(e, 'pressend'));
+        }
+        if (onPress != null) {
+          onPress(createGestureState(e, 'press'));
+        }
+        activeResponder.current = null;
+      }
+    },
+  });
+
+  return [tap, keyboard];
+}
diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js
new file mode 100644
index 0000000000000..c81bd3de9a5ff
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/PressLegacy.js
@@ -0,0 +1,905 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import type {
+  EventPriority,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
+
+import React from 'react';
+import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
+
+type PressProps = {|
+  disabled: boolean,
+  pressRetentionOffset: {
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+    ...
+  },
+  preventDefault: boolean,
+  onPress: (e: PressEvent) => void,
+  onPressChange: boolean => void,
+  onPressEnd: (e: PressEvent) => void,
+  onPressMove: (e: PressEvent) => void,
+  onPressStart: (e: PressEvent) => void,
+|};
+
+type PressState = {
+  activationPosition: null | $ReadOnly<{|
+    x: number,
+    y: number,
+  |}>,
+  addedRootEvents: boolean,
+  buttons: 0 | 1 | 4,
+  isActivePressed: boolean,
+  isActivePressStart: boolean,
+  isPressed: boolean,
+  isPressWithinResponderRegion: boolean,
+  pointerType: PointerType,
+  pressTarget: null | Element | Document,
+  responderRegionOnActivation: null | $ReadOnly<{|
+    bottom: number,
+    left: number,
+    right: number,
+    top: number,
+  |}>,
+  responderRegionOnDeactivation: null | $ReadOnly<{|
+    bottom: number,
+    left: number,
+    right: number,
+    top: number,
+  |}>,
+  ignoreEmulatedMouseEvents: boolean,
+  activePointerId: null | number,
+  shouldPreventClick: boolean,
+  touchEvent: null | Touch,
+  ...
+};
+
+type PressEventType =
+  | 'press'
+  | 'pressmove'
+  | 'pressstart'
+  | 'pressend'
+  | 'presschange';
+
+type PressEvent = {|
+  altKey: boolean,
+  buttons: 0 | 1 | 4,
+  clientX: null | number,
+  clientY: null | number,
+  ctrlKey: boolean,
+  defaultPrevented: boolean,
+  metaKey: boolean,
+  pageX: null | number,
+  pageY: null | number,
+  pointerType: PointerType,
+  screenX: null | number,
+  screenY: null | number,
+  shiftKey: boolean,
+  target: Element | Document,
+  timeStamp: number,
+  type: PressEventType,
+  x: null | number,
+  y: null | number,
+  preventDefault: () => void,
+  stopPropagation: () => void,
+|};
+
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent !== undefined;
+
+const isMac =
+  typeof window !== 'undefined' && window.navigator != null
+    ? /^Mac/.test(window.navigator.platform)
+    : false;
+
+const DEFAULT_PRESS_RETENTION_OFFSET = {
+  bottom: 20,
+  top: 20,
+  left: 20,
+  right: 20,
+};
+
+const targetEventTypes = hasPointerEvents
+  ? ['keydown_active', 'pointerdown_active', 'click_active']
+  : ['keydown_active', 'touchstart', 'mousedown_active', 'click_active'];
+
+const rootEventTypes = hasPointerEvents
+  ? [
+      'pointerup_active',
+      'pointermove',
+      'pointercancel',
+      'click',
+      'keyup',
+      'scroll',
+    ]
+  : [
+      'click',
+      'keyup',
+      'scroll',
+      'mousemove',
+      'touchmove',
+      'touchcancel',
+      // Used as a 'cancel' signal for mouse interactions
+      'dragstart',
+      'mouseup_active',
+      'touchend',
+    ];
+
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
+function createPressEvent(
+  context: ReactDOMResponderContext,
+  type: PressEventType,
+  target: Element | Document,
+  pointerType: PointerType,
+  event: ?ReactDOMResponderEvent,
+  touchEvent: null | Touch,
+  defaultPrevented: boolean,
+  state: PressState,
+): PressEvent {
+  const timeStamp = context.getTimeStamp();
+  let clientX = null;
+  let clientY = null;
+  let pageX = null;
+  let pageY = null;
+  let screenX = null;
+  let screenY = null;
+  let altKey = false;
+  let ctrlKey = false;
+  let metaKey = false;
+  let shiftKey = false;
+  let nativeEvent;
+
+  if (event) {
+    nativeEvent = (event.nativeEvent: any);
+    ({altKey, ctrlKey, metaKey, shiftKey} = nativeEvent);
+    // Only check for one property, checking for all of them is costly. We can assume
+    // if clientX exists, so do the rest.
+    let eventObject;
+    eventObject = (touchEvent: any) || (nativeEvent: any);
+    if (eventObject) {
+      ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
+    }
+  }
+  const pressEvent = {
+    altKey,
+    buttons: state.buttons,
+    clientX,
+    clientY,
+    ctrlKey,
+    defaultPrevented,
+    metaKey,
+    pageX,
+    pageY,
+    pointerType,
+    screenX,
+    screenY,
+    shiftKey,
+    target,
+    timeStamp,
+    type,
+    x: clientX,
+    y: clientY,
+    preventDefault() {
+      state.shouldPreventClick = true;
+      if (nativeEvent) {
+        pressEvent.defaultPrevented = true;
+        nativeEvent.preventDefault();
+      }
+    },
+    stopPropagation() {
+      // NO-OP, we should remove this in the future
+      if (__DEV__) {
+        console.error(
+          'stopPropagation is not available on event objects created from event responder modules (React Flare). ' +
+            'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
+        );
+      }
+    },
+  };
+  return pressEvent;
+}
+
+function dispatchEvent(
+  event: ?ReactDOMResponderEvent,
+  listener: any => void,
+  context: ReactDOMResponderContext,
+  state: PressState,
+  name: PressEventType,
+  eventPriority: EventPriority,
+): void {
+  const target = ((state.pressTarget: any): Element | Document);
+  const pointerType = state.pointerType;
+  const defaultPrevented =
+    (event != null && event.nativeEvent.defaultPrevented === true) ||
+    (name === 'press' && state.shouldPreventClick);
+  const touchEvent = state.touchEvent;
+  const syntheticEvent = createPressEvent(
+    context,
+    name,
+    target,
+    pointerType,
+    event,
+    touchEvent,
+    defaultPrevented,
+    state,
+  );
+  context.dispatchEvent(syntheticEvent, listener, eventPriority);
+}
+
+function dispatchPressChangeEvent(
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  const onPressChange = props.onPressChange;
+  if (isFunction(onPressChange)) {
+    const bool = state.isActivePressed;
+    context.dispatchEvent(bool, onPressChange, DiscreteEvent);
+  }
+}
+
+function dispatchPressStartEvents(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  state.isPressed = true;
+
+  if (!state.isActivePressStart) {
+    state.isActivePressStart = true;
+    const nativeEvent: any = event.nativeEvent;
+    const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;
+    const wasActivePressed = state.isActivePressed;
+    state.isActivePressed = true;
+    if (x !== undefined && y !== undefined) {
+      state.activationPosition = {x, y};
+    }
+    const onPressStart = props.onPressStart;
+
+    if (isFunction(onPressStart)) {
+      dispatchEvent(
+        event,
+        onPressStart,
+        context,
+        state,
+        'pressstart',
+        DiscreteEvent,
+      );
+    }
+    if (!wasActivePressed) {
+      dispatchPressChangeEvent(context, props, state);
+    }
+  }
+}
+
+function dispatchPressEndEvents(
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  state.isActivePressStart = false;
+  state.isPressed = false;
+
+  if (state.isActivePressed) {
+    state.isActivePressed = false;
+    const onPressEnd = props.onPressEnd;
+
+    if (isFunction(onPressEnd)) {
+      dispatchEvent(
+        event,
+        onPressEnd,
+        context,
+        state,
+        'pressend',
+        DiscreteEvent,
+      );
+    }
+    dispatchPressChangeEvent(context, props, state);
+  }
+
+  state.responderRegionOnDeactivation = null;
+}
+
+function dispatchCancel(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  state.touchEvent = null;
+  if (state.isPressed) {
+    state.ignoreEmulatedMouseEvents = false;
+    dispatchPressEndEvents(event, context, props, state);
+  }
+  removeRootEventTypes(context, state);
+}
+
+function isValidKeyboardEvent(nativeEvent: Object): boolean {
+  const {key, target} = nativeEvent;
+  const {tagName, isContentEditable} = target;
+  // Accessibility for keyboards. Space and Enter only.
+  // "Spacebar" is for IE 11
+  return (
+    (key === 'Enter' || key === ' ' || key === 'Spacebar') &&
+    tagName !== 'INPUT' &&
+    tagName !== 'TEXTAREA' &&
+    isContentEditable !== true
+  );
+}
+
+// TODO: account for touch hit slop
+function calculateResponderRegion(
+  context: ReactDOMResponderContext,
+  target: Element,
+  props: PressProps,
+) {
+  const pressRetentionOffset = context.objectAssign(
+    {},
+    DEFAULT_PRESS_RETENTION_OFFSET,
+    props.pressRetentionOffset,
+  );
+
+  let {left, right, bottom, top} = target.getBoundingClientRect();
+
+  if (pressRetentionOffset) {
+    if (pressRetentionOffset.bottom != null) {
+      bottom += pressRetentionOffset.bottom;
+    }
+    if (pressRetentionOffset.left != null) {
+      left -= pressRetentionOffset.left;
+    }
+    if (pressRetentionOffset.right != null) {
+      right += pressRetentionOffset.right;
+    }
+    if (pressRetentionOffset.top != null) {
+      top -= pressRetentionOffset.top;
+    }
+  }
+
+  return {
+    bottom,
+    top,
+    left,
+    right,
+  };
+}
+
+function getTouchFromPressEvent(nativeEvent: TouchEvent): null | Touch {
+  const targetTouches = nativeEvent.targetTouches;
+  if (targetTouches.length > 0) {
+    return targetTouches[0];
+  }
+  return null;
+}
+
+function unmountResponder(
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  if (state.isPressed) {
+    removeRootEventTypes(context, state);
+    dispatchPressEndEvents(null, context, props, state);
+  }
+}
+
+function addRootEventTypes(
+  context: ReactDOMResponderContext,
+  state: PressState,
+): void {
+  if (!state.addedRootEvents) {
+    state.addedRootEvents = true;
+    context.addRootEventTypes(rootEventTypes);
+  }
+}
+
+function removeRootEventTypes(
+  context: ReactDOMResponderContext,
+  state: PressState,
+): void {
+  if (state.addedRootEvents) {
+    state.addedRootEvents = false;
+    context.removeRootEventTypes(rootEventTypes);
+  }
+}
+
+function getTouchById(
+  nativeEvent: TouchEvent,
+  pointerId: null | number,
+): null | Touch {
+  const changedTouches = nativeEvent.changedTouches;
+  for (let i = 0; i < changedTouches.length; i++) {
+    const touch = changedTouches[i];
+    if (touch.identifier === pointerId) {
+      return touch;
+    }
+  }
+  return null;
+}
+
+function getTouchTarget(context: ReactDOMResponderContext, touchEvent: Touch) {
+  const doc = context.getActiveDocument();
+  return doc.elementFromPoint(touchEvent.clientX, touchEvent.clientY);
+}
+
+function updateIsPressWithinResponderRegion(
+  nativeEventOrTouchEvent: Event | Touch,
+  context: ReactDOMResponderContext,
+  props: PressProps,
+  state: PressState,
+): void {
+  // Calculate the responder region we use for deactivation if not
+  // already done during move event.
+  if (state.responderRegionOnDeactivation == null) {
+    state.responderRegionOnDeactivation = calculateResponderRegion(
+      context,
+      ((state.pressTarget: any): Element),
+      props,
+    );
+  }
+  const {responderRegionOnActivation, responderRegionOnDeactivation} = state;
+  let left, top, right, bottom;
+
+  if (responderRegionOnActivation != null) {
+    left = responderRegionOnActivation.left;
+    top = responderRegionOnActivation.top;
+    right = responderRegionOnActivation.right;
+    bottom = responderRegionOnActivation.bottom;
+
+    if (responderRegionOnDeactivation != null) {
+      left = Math.min(left, responderRegionOnDeactivation.left);
+      top = Math.min(top, responderRegionOnDeactivation.top);
+      right = Math.max(right, responderRegionOnDeactivation.right);
+      bottom = Math.max(bottom, responderRegionOnDeactivation.bottom);
+    }
+  }
+  const {clientX: x, clientY: y} = (nativeEventOrTouchEvent: any);
+
+  state.isPressWithinResponderRegion =
+    left != null &&
+    right != null &&
+    top != null &&
+    bottom != null &&
+    x !== null &&
+    y !== null &&
+    x >= left &&
+    x <= right &&
+    y >= top &&
+    y <= bottom;
+}
+
+// After some investigation work, screen reader virtual
+// clicks (NVDA, Jaws, VoiceOver) do not have co-ords associated with the click
+// event and "detail" is always 0 (where normal clicks are > 0)
+function isScreenReaderVirtualClick(nativeEvent): boolean {
+  // JAWS/NVDA with Firefox.
+  if (nativeEvent.mozInputSource === 0 && nativeEvent.isTrusted) {
+    return true;
+  }
+  // Chrome
+  return (
+    nativeEvent.detail === 0 &&
+    nativeEvent.screenX === 0 &&
+    nativeEvent.screenY === 0 &&
+    nativeEvent.clientX === 0 &&
+    nativeEvent.clientY === 0
+  );
+}
+
+function targetIsDocument(target: null | Node): boolean {
+  // When target is null, it is the root
+  return target === null || target.nodeType === 9;
+}
+
+const pressResponderImpl = {
+  targetEventTypes,
+  getInitialState(): PressState {
+    return {
+      activationPosition: null,
+      addedRootEvents: false,
+      buttons: 0,
+      isActivePressed: false,
+      isActivePressStart: false,
+      isPressed: false,
+      isPressWithinResponderRegion: true,
+      pointerType: '',
+      pressTarget: null,
+      responderRegionOnActivation: null,
+      responderRegionOnDeactivation: null,
+      ignoreEmulatedMouseEvents: false,
+      activePointerId: null,
+      shouldPreventClick: false,
+      touchEvent: null,
+    };
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: PressProps,
+    state: PressState,
+  ): void {
+    const {pointerType, type} = event;
+
+    if (props.disabled) {
+      removeRootEventTypes(context, state);
+      dispatchPressEndEvents(event, context, props, state);
+      state.ignoreEmulatedMouseEvents = false;
+      return;
+    }
+    const nativeEvent: any = event.nativeEvent;
+    const isPressed = state.isPressed;
+
+    switch (type) {
+      // START
+      case 'pointerdown':
+      case 'keydown':
+      case 'mousedown':
+      case 'touchstart': {
+        if (!isPressed) {
+          const isTouchEvent = type === 'touchstart';
+          const isPointerEvent = type === 'pointerdown';
+          const isKeyboardEvent = pointerType === 'keyboard';
+          const isMouseEvent = pointerType === 'mouse';
+
+          // Ignore emulated mouse events
+          if (type === 'mousedown' && state.ignoreEmulatedMouseEvents) {
+            return;
+          }
+
+          state.shouldPreventClick = false;
+          if (isTouchEvent) {
+            state.ignoreEmulatedMouseEvents = true;
+          } else if (isKeyboardEvent) {
+            // Ignore unrelated key events
+            if (isValidKeyboardEvent(nativeEvent)) {
+              const {
+                altKey,
+                ctrlKey,
+                metaKey,
+                shiftKey,
+              } = (nativeEvent: MouseEvent);
+              if (
+                props.preventDefault !== false &&
+                !shiftKey &&
+                !metaKey &&
+                !ctrlKey &&
+                !altKey
+              ) {
+                nativeEvent.preventDefault();
+                state.shouldPreventClick = true;
+              }
+            } else {
+              return;
+            }
+          }
+
+          // We set these here, before the button check so we have this
+          // data around for handling of the context menu
+          state.pointerType = pointerType;
+          const pressTarget = (state.pressTarget = context.getResponderNode());
+          if (isPointerEvent) {
+            state.activePointerId = nativeEvent.pointerId;
+          } else if (isTouchEvent) {
+            const touchEvent = getTouchFromPressEvent(nativeEvent);
+            if (touchEvent === null) {
+              return;
+            }
+            state.touchEvent = touchEvent;
+            state.activePointerId = touchEvent.identifier;
+          }
+
+          // Ignore any device buttons except primary/middle and touch/pen contact.
+          // Additionally we ignore primary-button + ctrl-key with Macs as that
+          // acts like right-click and opens the contextmenu.
+          if (
+            nativeEvent.buttons === 2 ||
+            nativeEvent.buttons > 4 ||
+            (isMac && isMouseEvent && nativeEvent.ctrlKey)
+          ) {
+            return;
+          }
+          // Exclude document targets
+          if (!targetIsDocument(pressTarget)) {
+            state.responderRegionOnActivation = calculateResponderRegion(
+              context,
+              ((pressTarget: any): Element),
+              props,
+            );
+          }
+          state.responderRegionOnDeactivation = null;
+          state.isPressWithinResponderRegion = true;
+          state.buttons = nativeEvent.buttons;
+          if (nativeEvent.button === 1) {
+            state.buttons = 4;
+          }
+          dispatchPressStartEvents(event, context, props, state);
+          addRootEventTypes(context, state);
+        } else {
+          // Prevent spacebar press from scrolling the window
+          if (isValidKeyboardEvent(nativeEvent) && nativeEvent.key === ' ') {
+            nativeEvent.preventDefault();
+          }
+        }
+        break;
+      }
+
+      case 'click': {
+        if (state.shouldPreventClick) {
+          nativeEvent.preventDefault();
+        }
+        const onPress = props.onPress;
+
+        if (isFunction(onPress) && isScreenReaderVirtualClick(nativeEvent)) {
+          state.pointerType = 'keyboard';
+          state.pressTarget = context.getResponderNode();
+          const preventDefault = props.preventDefault;
+
+          if (preventDefault !== false) {
+            nativeEvent.preventDefault();
+          }
+          dispatchEvent(event, onPress, context, state, 'press', DiscreteEvent);
+        }
+        break;
+      }
+    }
+  },
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: PressProps,
+    state: PressState,
+  ): void {
+    let {pointerType, target, type} = event;
+
+    const nativeEvent: any = event.nativeEvent;
+    const isPressed = state.isPressed;
+    const activePointerId = state.activePointerId;
+    const previousPointerType = state.pointerType;
+
+    switch (type) {
+      // MOVE
+      case 'pointermove':
+      case 'mousemove':
+      case 'touchmove': {
+        let touchEvent;
+        // Ignore emulated events (pointermove will dispatch touch and mouse events)
+        // Ignore pointermove events during a keyboard press.
+        if (previousPointerType !== pointerType) {
+          return;
+        }
+        if (
+          type === 'pointermove' &&
+          activePointerId !== nativeEvent.pointerId
+        ) {
+          return;
+        } else if (type === 'touchmove') {
+          touchEvent = getTouchById(nativeEvent, activePointerId);
+          if (touchEvent === null) {
+            return;
+          }
+          state.touchEvent = touchEvent;
+        }
+        const pressTarget = state.pressTarget;
+
+        if (pressTarget !== null && !targetIsDocument(pressTarget)) {
+          if (
+            pointerType === 'mouse' &&
+            context.isTargetWithinNode(target, pressTarget)
+          ) {
+            state.isPressWithinResponderRegion = true;
+          } else {
+            // Calculate the responder region we use for deactivation, as the
+            // element dimensions may have changed since activation.
+            updateIsPressWithinResponderRegion(
+              touchEvent || nativeEvent,
+              context,
+              props,
+              state,
+            );
+          }
+        }
+
+        if (state.isPressWithinResponderRegion) {
+          if (isPressed) {
+            const onPressMove = props.onPressMove;
+
+            if (isFunction(onPressMove)) {
+              dispatchEvent(
+                event,
+                onPressMove,
+                context,
+                state,
+                'pressmove',
+                UserBlockingEvent,
+              );
+            }
+          } else {
+            dispatchPressStartEvents(event, context, props, state);
+          }
+        } else {
+          dispatchPressEndEvents(event, context, props, state);
+        }
+        break;
+      }
+
+      // END
+      case 'pointerup':
+      case 'keyup':
+      case 'mouseup':
+      case 'touchend': {
+        if (isPressed) {
+          const buttons = state.buttons;
+          let isKeyboardEvent = false;
+          let touchEvent;
+          if (
+            type === 'pointerup' &&
+            activePointerId !== nativeEvent.pointerId
+          ) {
+            return;
+          } else if (type === 'touchend') {
+            touchEvent = getTouchById(nativeEvent, activePointerId);
+            if (touchEvent === null) {
+              return;
+            }
+            state.touchEvent = touchEvent;
+            target = getTouchTarget(context, touchEvent);
+          } else if (type === 'keyup') {
+            // Ignore unrelated keyboard events
+            if (!isValidKeyboardEvent(nativeEvent)) {
+              return;
+            }
+            isKeyboardEvent = true;
+            removeRootEventTypes(context, state);
+          } else if (buttons === 4) {
+            // Remove the root events here as no 'click' event is dispatched when this 'button' is pressed.
+            removeRootEventTypes(context, state);
+          }
+
+          // Determine whether to call preventDefault on subsequent native events.
+          if (
+            target !== null &&
+            context.isTargetWithinResponder(target) &&
+            context.isTargetWithinHostComponent(target, 'a')
+          ) {
+            const {
+              altKey,
+              ctrlKey,
+              metaKey,
+              shiftKey,
+            } = (nativeEvent: MouseEvent);
+            // Check "open in new window/tab" and "open context menu" key modifiers
+            const preventDefault = props.preventDefault;
+
+            if (
+              preventDefault !== false &&
+              !shiftKey &&
+              !metaKey &&
+              !ctrlKey &&
+              !altKey
+            ) {
+              state.shouldPreventClick = true;
+            }
+          }
+
+          const pressTarget = state.pressTarget;
+          dispatchPressEndEvents(event, context, props, state);
+          const onPress = props.onPress;
+
+          if (pressTarget !== null && isFunction(onPress)) {
+            if (
+              !isKeyboardEvent &&
+              pressTarget !== null &&
+              target !== null &&
+              !targetIsDocument(pressTarget)
+            ) {
+              if (
+                pointerType === 'mouse' &&
+                context.isTargetWithinNode(target, pressTarget)
+              ) {
+                state.isPressWithinResponderRegion = true;
+              } else {
+                // If the event target isn't within the press target, check if we're still
+                // within the responder region. The region may have changed if the
+                // element's layout was modified after activation.
+                updateIsPressWithinResponderRegion(
+                  touchEvent || nativeEvent,
+                  context,
+                  props,
+                  state,
+                );
+              }
+            }
+
+            if (state.isPressWithinResponderRegion && buttons !== 4) {
+              dispatchEvent(
+                event,
+                onPress,
+                context,
+                state,
+                'press',
+                DiscreteEvent,
+              );
+            }
+          }
+          state.touchEvent = null;
+        } else if (type === 'mouseup') {
+          state.ignoreEmulatedMouseEvents = false;
+        }
+        break;
+      }
+
+      case 'click': {
+        // "keyup" occurs after "click"
+        if (previousPointerType !== 'keyboard') {
+          removeRootEventTypes(context, state);
+        }
+        break;
+      }
+
+      // CANCEL
+      case 'scroll': {
+        // We ignore incoming scroll events when using mouse events
+        if (previousPointerType === 'mouse') {
+          return;
+        }
+        const pressTarget = state.pressTarget;
+        const scrollTarget = nativeEvent.target;
+        const doc = context.getActiveDocument();
+        // If the scroll target is the document or if the press target
+        // is inside the scroll target, then this a scroll that should
+        // trigger a cancel.
+        if (
+          pressTarget !== null &&
+          (scrollTarget === doc ||
+            context.isTargetWithinNode(pressTarget, scrollTarget))
+        ) {
+          dispatchCancel(event, context, props, state);
+        }
+        break;
+      }
+      case 'pointercancel':
+      case 'touchcancel':
+      case 'dragstart': {
+        dispatchCancel(event, context, props, state);
+      }
+    }
+  },
+  onUnmount(
+    context: ReactDOMResponderContext,
+    props: PressProps,
+    state: PressState,
+  ) {
+    unmountResponder(context, props, state);
+  },
+};
+
+export const PressResponder = React.DEPRECATED_createResponder(
+  'Press',
+  pressResponderImpl,
+);
+
+export function usePress(
+  props: PressProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(PressResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Scroll.js b/packages/react-interactions/events/src/dom/Scroll.js
new file mode 100644
index 0000000000000..e1fe82646d0c1
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Scroll.js
@@ -0,0 +1,319 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import {UserBlockingEvent} from 'shared/ReactTypes';
+import type {
+  EventPriority,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
+
+import React from 'react';
+
+type ScrollProps = {
+  disabled: boolean,
+  onScroll: ScrollEvent => void,
+  onScrollDragStart: ScrollEvent => void,
+  onScrollDragEnd: ScrollEvent => void,
+  ...
+};
+
+type ScrollState = {
+  direction: ScrollDirection,
+  pointerType: PointerType,
+  scrollTarget: null | Element | Document,
+  isDragging: boolean,
+  isTouching: boolean,
+  scrollLeft: number,
+  scrollTop: number,
+  ...
+};
+
+type ScrollEventType =
+  | 'scroll'
+  | 'scrolldragstart'
+  | 'scrolldragend'
+  | 'scrollmomentumstart'
+  | 'scrollmomentumend';
+
+type ScrollDirection = '' | 'up' | 'down' | 'left' | 'right';
+
+type ScrollEvent = {|
+  direction: ScrollDirection,
+  target: Element | Document,
+  type: ScrollEventType,
+  pointerType: PointerType,
+  timeStamp: number,
+  clientX: null | number,
+  clientY: null | number,
+  pageX: null | number,
+  pageY: null | number,
+  screenX: null | number,
+  screenY: null | number,
+  x: null | number,
+  y: null | number,
+|};
+
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent !== undefined;
+
+const targetEventTypes = hasPointerEvents
+  ? ['scroll', 'pointerdown', 'keyup', 'wheel']
+  : ['scroll', 'mousedown', 'touchstart', 'keyup', 'wheel'];
+
+const rootEventTypes = hasPointerEvents
+  ? ['pointercancel', 'pointerup']
+  : ['touchcancel', 'touchend'];
+
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
+function createScrollEvent(
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  type: ScrollEventType,
+  target: Element | Document,
+  pointerType: PointerType,
+  direction: ScrollDirection,
+): ScrollEvent {
+  let clientX = null;
+  let clientY = null;
+  let pageX = null;
+  let pageY = null;
+  let screenX = null;
+  let screenY = null;
+
+  if (event) {
+    const nativeEvent = (event.nativeEvent: any);
+    ({clientX, clientY, pageX, pageY, screenX, screenY} = nativeEvent);
+  }
+
+  return {
+    target,
+    type,
+    pointerType,
+    direction,
+    timeStamp: context.getTimeStamp(),
+    clientX,
+    clientY,
+    pageX,
+    pageY,
+    screenX,
+    screenY,
+    x: clientX,
+    y: clientY,
+  };
+}
+
+function dispatchEvent(
+  event: ?ReactDOMResponderEvent,
+  listener: ScrollEvent => void,
+  context: ReactDOMResponderContext,
+  state: ScrollState,
+  name: ScrollEventType,
+  eventPriority: EventPriority,
+): void {
+  const target = ((state.scrollTarget: any): Element | Document);
+  const pointerType = state.pointerType;
+  const direction = state.direction;
+  const syntheticEvent = createScrollEvent(
+    event,
+    context,
+    name,
+    target,
+    pointerType,
+    direction,
+  );
+  context.dispatchEvent(syntheticEvent, listener, eventPriority);
+}
+
+const scrollResponderImpl = {
+  targetEventTypes,
+  getInitialState() {
+    return {
+      direction: '',
+      isTouching: false,
+      pointerType: '',
+      prevScrollTop: 0,
+      prevScrollLeft: 0,
+      scrollTarget: null,
+    };
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: ScrollProps,
+    state: ScrollState,
+  ): void {
+    const {pointerType, target, type} = event;
+
+    if (props.disabled) {
+      if (state.isTouching) {
+        state.isTouching = false;
+        state.scrollTarget = null;
+        state.isDragging = false;
+        state.direction = '';
+        context.removeRootEventTypes(rootEventTypes);
+      }
+      return;
+    }
+
+    switch (type) {
+      case 'scroll': {
+        const prevScrollTarget = state.scrollTarget;
+        let scrollLeft = 0;
+        let scrollTop = 0;
+
+        // Check if target is the document
+        if (target.nodeType === 9) {
+          const bodyNode = ((target: any): Document).body;
+          if (bodyNode !== null) {
+            scrollLeft = bodyNode.offsetLeft;
+            scrollTop = bodyNode.offsetTop;
+          }
+        } else {
+          scrollLeft = ((target: any): Element).scrollLeft;
+          scrollTop = ((target: any): Element).scrollTop;
+        }
+
+        if (prevScrollTarget !== null) {
+          if (scrollTop === state.scrollTop) {
+            if (scrollLeft > state.scrollLeft) {
+              state.direction = 'right';
+            } else {
+              state.direction = 'left';
+            }
+          } else {
+            if (scrollTop > state.scrollTop) {
+              state.direction = 'down';
+            } else {
+              state.direction = 'up';
+            }
+          }
+        } else {
+          state.direction = '';
+        }
+        state.scrollTarget = ((target: any): Element | Document);
+        state.scrollLeft = scrollLeft;
+        state.scrollTop = scrollTop;
+
+        if (state.isTouching && !state.isDragging) {
+          state.isDragging = true;
+          const onScrollDragStart = props.onScrollDragStart;
+
+          if (isFunction(onScrollDragStart)) {
+            dispatchEvent(
+              event,
+              onScrollDragStart,
+              context,
+              state,
+              'scrolldragstart',
+              UserBlockingEvent,
+            );
+          }
+        }
+        const onScroll = props.onScroll;
+
+        if (isFunction(onScroll)) {
+          dispatchEvent(
+            event,
+            onScroll,
+            context,
+            state,
+            'scroll',
+            UserBlockingEvent,
+          );
+        }
+        break;
+      }
+      case 'keyup': {
+        state.pointerType = pointerType;
+        break;
+      }
+      case 'mousedown':
+      case 'wheel': {
+        state.pointerType = 'mouse';
+        break;
+      }
+      case 'pointerdown': {
+        state.pointerType = pointerType;
+        if (pointerType === 'touch' && !state.isTouching) {
+          state.isTouching = true;
+          context.addRootEventTypes(rootEventTypes);
+        }
+        break;
+      }
+      case 'touchstart': {
+        if (!state.isTouching) {
+          state.isTouching = true;
+          state.pointerType = 'touch';
+          context.addRootEventTypes(rootEventTypes);
+        }
+      }
+    }
+  },
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: ScrollProps,
+    state: ScrollState,
+  ) {
+    const {type} = event;
+
+    switch (type) {
+      case 'pointercancel':
+      case 'pointerup':
+      case 'touchcancel':
+      case 'touchend': {
+        if (state.isTouching) {
+          const onScrollDragEnd = props.onScrollDragEnd;
+
+          if (state.isDragging && isFunction(onScrollDragEnd)) {
+            dispatchEvent(
+              event,
+              onScrollDragEnd,
+              context,
+              state,
+              'scrolldragend',
+              UserBlockingEvent,
+            );
+          }
+          state.isTouching = false;
+          state.isDragging = false;
+          state.scrollTarget = null;
+          state.pointerType = '';
+          context.removeRootEventTypes(rootEventTypes);
+        }
+      }
+    }
+  },
+  onUnmount(
+    context: ReactDOMResponderContext,
+    props: ScrollProps,
+    state: ScrollState,
+  ) {
+    // TODO
+  },
+};
+
+export const ScrollResponder = React.DEPRECATED_createResponder(
+  'Scroll',
+  scrollResponderImpl,
+);
+
+export function useScroll(
+  props: ScrollProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(ScrollResponder, props);
+}
diff --git a/packages/react-events/src/Swipe.js b/packages/react-interactions/events/src/dom/Swipe.js
similarity index 58%
rename from packages/react-events/src/Swipe.js
rename to packages/react-interactions/events/src/dom/Swipe.js
index b6404a2d028f6..74f0b3cb768c0 100644
--- a/packages/react-events/src/Swipe.js
+++ b/packages/react-interactions/events/src/dom/Swipe.js
@@ -8,32 +8,47 @@
  */
 
 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+import type {
+  EventPriority,
+  ReactEventResponderListener,
 } from 'shared/ReactTypes';
 
 import React from 'react';
+import {UserBlockingEvent, DiscreteEvent} from 'shared/ReactTypes';
+
+type SwipeProps = {
+  disabled: boolean,
+  shouldClaimOwnership: () => boolean,
+  onSwipeMove: (e: SwipeEvent) => void,
+  onSwipeEnd: (e: SwipeEvent) => void,
+  onSwipeLeft: (e: SwipeEvent) => void,
+  onSwipeRight: (e: SwipeEvent) => void,
+  ...
+};
 
 const targetEventTypes = ['pointerdown'];
-const rootEventTypes = [
-  'pointerup',
-  'pointercancel',
-  {name: 'pointermove', passive: false},
-];
+const rootEventTypes = ['pointerup', 'pointercancel', 'pointermove_active'];
 
 // In the case we don't have PointerEvents (Safari), we listen to touch events
 // too
 if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
   targetEventTypes.push('touchstart', 'mousedown');
-  rootEventTypes.push('mouseup', 'mousemove', 'touchend', 'touchcancel', {
-    name: 'touchmove',
-    passive: false,
-  });
+  rootEventTypes.push(
+    'mouseup',
+    'mousemove',
+    'touchend',
+    'touchcancel',
+    'touchmove_active',
+  );
 }
 
 type EventData = {
   diffX: number,
   diffY: number,
+  ...
 };
 type SwipeEventType = 'swipeleft' | 'swiperight' | 'swipeend' | 'swipemove';
 
@@ -45,31 +60,37 @@ type SwipeEvent = {|
   diffY?: number,
 |};
 
+function isFunction(obj): boolean {
+  return typeof obj === 'function';
+}
+
 function createSwipeEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
   type: SwipeEventType,
   target: Element | Document,
   eventData?: EventData,
 ): SwipeEvent {
-  return {
-    target,
-    type,
-    timeStamp: context.getTimeStamp(),
-    ...eventData,
-  };
+  return context.objectAssign(
+    {
+      target,
+      type,
+      timeStamp: context.getTimeStamp(),
+    },
+    eventData,
+  );
 }
 
 function dispatchSwipeEvent(
-  context: ReactResponderContext,
-  name: SwipeEventType,
+  context: ReactDOMResponderContext,
   listener: SwipeEvent => void,
+  name: SwipeEventType,
   state: SwipeState,
-  discrete: boolean,
+  eventPriority: EventPriority,
   eventData?: EventData,
 ) {
   const target = ((state.swipeTarget: any): Element | Document);
   const syntheticEvent = createSwipeEvent(context, name, target, eventData);
-  context.dispatchEvent(syntheticEvent, listener, discrete);
+  context.dispatchEvent(syntheticEvent, listener, eventPriority);
 }
 
 type SwipeState = {
@@ -82,11 +103,12 @@ type SwipeState = {
   swipeTarget: null | Element | Document,
   x: number,
   y: number,
+  ...
 };
 
-const SwipeResponder = {
+const swipeResponderImpl = {
   targetEventTypes,
-  createInitialState(): SwipeState {
+  getInitialState(): SwipeState {
     return {
       direction: 0,
       isSwiping: false,
@@ -99,12 +121,10 @@ const SwipeResponder = {
       y: 0,
     };
   },
-  allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
   onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: Object,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: SwipeProps,
     state: SwipeState,
   ): void {
     const {target, type, nativeEvent} = event;
@@ -122,31 +142,22 @@ const SwipeResponder = {
           const x = (obj: any).screenX;
           const y = (obj: any).screenY;
 
-          let shouldEnableSwiping = true;
-
-          if (props.onShouldClaimOwnership && props.onShouldClaimOwnership()) {
-            shouldEnableSwiping = context.requestGlobalOwnership();
-          }
-          if (shouldEnableSwiping) {
-            state.isSwiping = true;
-            state.startX = x;
-            state.startY = y;
-            state.x = x;
-            state.y = y;
-            state.swipeTarget = target;
-            context.addRootEventTypes(rootEventTypes);
-          } else {
-            state.touchId = null;
-          }
+          state.isSwiping = true;
+          state.startX = x;
+          state.startY = y;
+          state.x = x;
+          state.y = y;
+          state.swipeTarget = target;
+          context.addRootEventTypes(rootEventTypes);
         }
         break;
       }
     }
   },
   onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: Object,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: SwipeProps,
     state: SwipeState,
   ): void {
     const {type, nativeEvent} = event;
@@ -180,28 +191,30 @@ const SwipeResponder = {
           }
           const x = (obj: any).screenX;
           const y = (obj: any).screenY;
-          if (x < state.x && props.onSwipeLeft) {
+          if (x < state.x) {
             state.direction = 3;
-          } else if (x > state.x && props.onSwipeRight) {
+          } else if (x > state.x) {
             state.direction = 1;
           }
           state.x = x;
           state.y = y;
-          if (props.onSwipeMove) {
-            const eventData = {
-              diffX: x - state.startX,
-              diffY: y - state.startY,
-            };
+          const eventData = {
+            diffX: x - state.startX,
+            diffY: y - state.startY,
+          };
+          const onSwipeMove = props.onSwipeMove;
+
+          if (isFunction(onSwipeMove)) {
             dispatchSwipeEvent(
               context,
+              onSwipeMove,
               'swipemove',
-              props.onSwipeMove,
               state,
-              false,
+              UserBlockingEvent,
               eventData,
             );
-            (nativeEvent: any).preventDefault();
           }
+          (nativeEvent: any).preventDefault();
         }
         break;
       }
@@ -214,37 +227,44 @@ const SwipeResponder = {
           if (state.x === state.startX && state.y === state.startY) {
             return;
           }
-          if (props.onShouldClaimOwnership) {
-            context.releaseOwnership();
-          }
           const direction = state.direction;
           const lastDirection = state.lastDirection;
           if (direction !== lastDirection) {
-            if (props.onSwipeLeft && direction === 3) {
-              dispatchSwipeEvent(
-                context,
-                'swipeleft',
-                props.onSwipeLeft,
-                state,
-                true,
-              );
-            } else if (props.onSwipeRight && direction === 1) {
-              dispatchSwipeEvent(
-                context,
-                'swiperight',
-                props.onSwipeRight,
-                state,
-                true,
-              );
+            if (direction === 3) {
+              const onSwipeLeft = props.onSwipeLeft;
+
+              if (isFunction(onSwipeLeft)) {
+                dispatchSwipeEvent(
+                  context,
+                  onSwipeLeft,
+                  'swipeleft',
+                  state,
+                  DiscreteEvent,
+                );
+              }
+            } else if (direction === 1) {
+              const onSwipeRight = props.onSwipeRight;
+
+              if (isFunction(onSwipeRight)) {
+                dispatchSwipeEvent(
+                  context,
+                  onSwipeRight,
+                  'swiperight',
+                  state,
+                  DiscreteEvent,
+                );
+              }
             }
           }
-          if (props.onSwipeEnd) {
+          const onSwipeEnd = props.onSwipeEnd;
+
+          if (isFunction(onSwipeEnd)) {
             dispatchSwipeEvent(
               context,
+              onSwipeEnd,
               'swipeend',
-              props.onSwipeEnd,
               state,
-              true,
+              DiscreteEvent,
             );
           }
           state.lastDirection = direction;
@@ -259,4 +279,13 @@ const SwipeResponder = {
   },
 };
 
-export default React.unstable_createEventComponent(SwipeResponder, 'Swipe');
+export const SwipeResponder = React.DEPRECATED_createResponder(
+  'Swipe',
+  swipeResponderImpl,
+);
+
+export function useSwipe(
+  props: SwipeProps,
+): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(SwipeResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/Tap.js b/packages/react-interactions/events/src/dom/Tap.js
new file mode 100644
index 0000000000000..127483d26dc44
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/Tap.js
@@ -0,0 +1,722 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMResponderContext,
+  ReactDOMResponderEvent,
+  PointerType,
+} from 'shared/ReactDOMTypes';
+import type {ReactEventResponderListener} from 'shared/ReactTypes';
+
+import React from 'react';
+import {
+  buttonsEnum,
+  dispatchDiscreteEvent,
+  dispatchUserBlockingEvent,
+  getTouchById,
+  hasModifierKey,
+  hasPointerEvents,
+} from './shared';
+
+type TapProps = $ReadOnly<{|
+  disabled?: boolean,
+  maximumDistance?: number,
+  preventDefault?: boolean,
+  onAuxiliaryTap?: (e: TapEvent) => void,
+  onTapCancel?: (e: TapEvent) => void,
+  onTapChange?: boolean => void,
+  onTapEnd?: (e: TapEvent) => void,
+  onTapStart?: (e: TapEvent) => void,
+  onTapUpdate?: (e: TapEvent) => void,
+|}>;
+
+type TapGestureState = {|
+  altKey: boolean,
+  ctrlKey: boolean,
+  height: number,
+  metaKey: boolean,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
+  pressure: number,
+  screenX: number,
+  screenY: number,
+  shiftKey: boolean,
+  tangentialPressure: number,
+  target: null | Element,
+  tiltX: number,
+  tiltY: number,
+  timeStamp: number,
+  twist: number,
+  width: number,
+  x: number,
+  y: number,
+|};
+
+type TapState = {|
+  activePointerId: null | number,
+  buttons: 0 | 1 | 4,
+  gestureState: TapGestureState,
+  ignoreEmulatedEvents: boolean,
+  initialPosition: {|x: number, y: number|},
+  isActive: boolean,
+  isAuxiliaryActive: boolean,
+  pointerType: PointerType,
+  responderTarget: null | Element,
+  rootEvents: null | Array<string>,
+  shouldPreventDefault: boolean,
+|};
+
+type TapEventType =
+  | 'tap:auxiliary'
+  | 'tap:cancel'
+  | 'tap:change'
+  | 'tap:end'
+  | 'tap:start'
+  | 'tap:update';
+
+type TapEvent = {|
+  ...TapGestureState,
+  defaultPrevented: boolean,
+  type: TapEventType,
+|};
+
+/**
+ * Native event dependencies
+ */
+
+const targetEventTypes = hasPointerEvents
+  ? ['pointerdown']
+  : ['mousedown', 'touchstart'];
+
+const rootEventTypes = hasPointerEvents
+  ? [
+      'click_active',
+      'contextmenu',
+      'pointerup',
+      'pointermove',
+      'pointercancel',
+      'scroll',
+    ]
+  : [
+      'click_active',
+      'contextmenu',
+      'mouseup',
+      'mousemove',
+      'dragstart',
+      'touchend',
+      'touchmove',
+      'touchcancel',
+      'scroll',
+    ];
+
+/**
+ * Responder and gesture state
+ */
+
+function createInitialState(): TapState {
+  return {
+    activePointerId: null,
+    buttons: 0,
+    ignoreEmulatedEvents: false,
+    isActive: false,
+    isAuxiliaryActive: false,
+    initialPosition: {x: 0, y: 0},
+    pointerType: '',
+    responderTarget: null,
+    rootEvents: null,
+    shouldPreventDefault: true,
+    gestureState: {
+      altKey: false,
+      ctrlKey: false,
+      height: 1,
+      metaKey: false,
+      pageX: 0,
+      pageY: 0,
+      pointerType: '',
+      pressure: 0,
+      screenX: 0,
+      screenY: 0,
+      shiftKey: false,
+      tangentialPressure: 0,
+      target: null,
+      tiltX: 0,
+      tiltY: 0,
+      timeStamp: 0,
+      twist: 0,
+      width: 1,
+      x: 0,
+      y: 0,
+    },
+  };
+}
+
+function createPointerEventGestureState(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+  event: ReactDOMResponderEvent,
+): TapGestureState {
+  const timeStamp = context.getTimeStamp();
+  const nativeEvent = (event.nativeEvent: any);
+  const {
+    altKey,
+    ctrlKey,
+    height,
+    metaKey,
+    pageX,
+    pageY,
+    pointerType,
+    pressure,
+    screenX,
+    screenY,
+    shiftKey,
+    tangentialPressure,
+    tiltX,
+    tiltY,
+    twist,
+    width,
+    clientX,
+    clientY,
+  } = nativeEvent;
+
+  return {
+    altKey,
+    ctrlKey,
+    height,
+    metaKey,
+    pageX,
+    pageY,
+    pointerType,
+    pressure,
+    screenX,
+    screenY,
+    shiftKey,
+    tangentialPressure,
+    target: state.responderTarget,
+    tiltX,
+    tiltY,
+    timeStamp,
+    twist,
+    width,
+    x: clientX,
+    y: clientY,
+  };
+}
+
+function createFallbackGestureState(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+  event: ReactDOMResponderEvent,
+): TapGestureState {
+  const timeStamp = context.getTimeStamp();
+  const nativeEvent = (event.nativeEvent: any);
+  const eType = event.type;
+  const {altKey, ctrlKey, metaKey, shiftKey} = nativeEvent;
+  const isCancelType = eType === 'dragstart' || eType === 'touchcancel';
+  const isEndType = eType === 'mouseup' || eType === 'touchend';
+  const isTouchEvent = event.pointerType === 'touch';
+
+  let pointerEvent = nativeEvent;
+  if (!hasPointerEvents && isTouchEvent) {
+    const touch = getTouchById(nativeEvent, state.activePointerId);
+    if (touch != null) {
+      pointerEvent = touch;
+    }
+  }
+
+  const {
+    pageX,
+    pageY,
+    // $FlowExpectedError: missing from 'Touch' typedef
+    radiusX,
+    // $FlowExpectedError: missing from 'Touch' typedef
+    radiusY,
+    // $FlowExpectedError: missing from 'Touch' typedef
+    rotationAngle,
+    screenX,
+    screenY,
+    clientX,
+    clientY,
+  } = pointerEvent;
+
+  return {
+    altKey,
+    ctrlKey,
+    height: !isCancelType && radiusY != null ? radiusY * 2 : 1,
+    metaKey,
+    pageX: isCancelType ? 0 : pageX,
+    pageY: isCancelType ? 0 : pageY,
+    pointerType: event.pointerType,
+    pressure: isEndType || isCancelType ? 0 : isTouchEvent ? 1 : 0.5,
+    screenX: isCancelType ? 0 : screenX,
+    screenY: isCancelType ? 0 : screenY,
+    shiftKey,
+    tangentialPressure: 0,
+    target: state.responderTarget,
+    tiltX: 0,
+    tiltY: 0,
+    timeStamp,
+    twist: rotationAngle != null ? rotationAngle : 0,
+    width: !isCancelType && radiusX != null ? radiusX * 2 : 1,
+    x: isCancelType ? 0 : clientX,
+    y: isCancelType ? 0 : clientY,
+  };
+}
+
+const createGestureState = hasPointerEvents
+  ? createPointerEventGestureState
+  : createFallbackGestureState;
+
+/**
+ * Managing root events
+ */
+
+function addRootEventTypes(
+  rootEvents: Array<string>,
+  context: ReactDOMResponderContext,
+  state: TapState,
+): void {
+  if (!state.rootEvents) {
+    state.rootEvents = rootEvents;
+    context.addRootEventTypes(state.rootEvents);
+  }
+}
+
+function removeRootEventTypes(
+  context: ReactDOMResponderContext,
+  state: TapState,
+): void {
+  if (state.rootEvents != null) {
+    context.removeRootEventTypes(state.rootEvents);
+    state.rootEvents = null;
+  }
+}
+
+/**
+ * Managing pointers
+ */
+
+function getHitTarget(
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
+  state: TapState,
+): null | Element | Document {
+  if (!hasPointerEvents && event.pointerType === 'touch') {
+    const doc = context.getActiveDocument();
+    const nativeEvent: any = event.nativeEvent;
+    const touch = getTouchById(nativeEvent, state.activePointerId);
+    if (touch != null) {
+      return doc.elementFromPoint(touch.clientX, touch.clientY);
+    } else {
+      return null;
+    }
+  }
+  return event.target;
+}
+
+function isActivePointer(
+  event: ReactDOMResponderEvent,
+  state: TapState,
+): boolean {
+  const nativeEvent: any = event.nativeEvent;
+  const activePointerId = state.activePointerId;
+
+  if (hasPointerEvents) {
+    const eventPointerId = nativeEvent.pointerId;
+    if (activePointerId != null && eventPointerId != null) {
+      return (
+        state.pointerType === event.pointerType &&
+        activePointerId === eventPointerId
+      );
+    } else {
+      return true;
+    }
+  } else {
+    if (event.pointerType === 'touch') {
+      const touch = getTouchById(nativeEvent, activePointerId);
+      return touch != null;
+    } else {
+      // accept all events that don't have pointer ids
+      return true;
+    }
+  }
+}
+
+function isAuxiliary(buttons: number, event: ReactDOMResponderEvent): boolean {
+  const nativeEvent: any = event.nativeEvent;
+  const isPrimaryPointer =
+    buttons === buttonsEnum.primary || event.pointerType === 'touch';
+  return (
+    // middle-click
+    buttons === buttonsEnum.auxiliary ||
+    // open-in-new-tab
+    (isPrimaryPointer && nativeEvent.metaKey) ||
+    // open-in-new-window
+    (isPrimaryPointer && nativeEvent.shiftKey)
+  );
+}
+
+function shouldActivate(event: ReactDOMResponderEvent): boolean {
+  const nativeEvent: any = event.nativeEvent;
+  const isPrimaryPointer =
+    nativeEvent.buttons === buttonsEnum.primary ||
+    event.pointerType === 'touch';
+  return isPrimaryPointer && !hasModifierKey(event);
+}
+
+/**
+ * Communicating gesture state back to components
+ */
+
+function dispatchStart(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+): void {
+  const type = 'tap:start';
+  const onTapStart = props.onTapStart;
+  if (onTapStart != null) {
+    const payload = context.objectAssign({}, state.gestureState, {type});
+    dispatchDiscreteEvent(context, payload, onTapStart);
+  }
+  dispatchChange(context, props, state);
+}
+
+function dispatchChange(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+): void {
+  const onTapChange = props.onTapChange;
+  if (onTapChange != null) {
+    const payload = state.isActive;
+    dispatchDiscreteEvent(context, payload, onTapChange);
+  }
+}
+
+function dispatchUpdate(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+) {
+  const type = 'tap:update';
+  const onTapUpdate = props.onTapUpdate;
+  if (onTapUpdate != null) {
+    const payload = context.objectAssign({}, state.gestureState, {type});
+    dispatchUserBlockingEvent(context, payload, onTapUpdate);
+  }
+}
+
+function dispatchEnd(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+): void {
+  const type = 'tap:end';
+  const onTapEnd = props.onTapEnd;
+  dispatchChange(context, props, state);
+  if (onTapEnd != null) {
+    const defaultPrevented = state.shouldPreventDefault === true;
+    const payload = context.objectAssign({}, state.gestureState, {
+      defaultPrevented,
+      type,
+    });
+    dispatchDiscreteEvent(context, payload, onTapEnd);
+  }
+}
+
+function dispatchCancel(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+): void {
+  const type = 'tap:cancel';
+  const onTapCancel = props.onTapCancel;
+  dispatchChange(context, props, state);
+  if (onTapCancel != null) {
+    const payload = context.objectAssign({}, state.gestureState, {type});
+    dispatchDiscreteEvent(context, payload, onTapCancel);
+  }
+}
+
+function dispatchAuxiliaryTap(
+  context: ReactDOMResponderContext,
+  props: TapProps,
+  state: TapState,
+): void {
+  const type = 'tap:auxiliary';
+  const onAuxiliaryTap = props.onAuxiliaryTap;
+  if (onAuxiliaryTap != null) {
+    const payload = context.objectAssign({}, state.gestureState, {
+      defaultPrevented: false,
+      type,
+    });
+    dispatchDiscreteEvent(context, payload, onAuxiliaryTap);
+  }
+}
+
+/**
+ * Responder implementation
+ */
+
+const responderImpl = {
+  targetEventTypes,
+  getInitialState(): TapState {
+    return createInitialState();
+  },
+  onEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: TapProps,
+    state: TapState,
+  ): void {
+    if (props.disabled) {
+      removeRootEventTypes(context, state);
+      if (state.isActive) {
+        state.isActive = false;
+        dispatchCancel(context, props, state);
+      }
+      return;
+    }
+
+    const nativeEvent: any = event.nativeEvent;
+    const eventTarget: Element = nativeEvent.target;
+    const eventType = event.type;
+
+    switch (eventType) {
+      // START
+      case 'pointerdown':
+      case 'mousedown':
+      case 'touchstart': {
+        if (eventType === 'mousedown' && state.ignoreEmulatedEvents) {
+          return;
+        }
+
+        if (!state.isActive) {
+          if (hasPointerEvents) {
+            const pointerId = nativeEvent.pointerId;
+            state.activePointerId = pointerId;
+            // Make mouse and touch pointers consistent.
+            // Flow bug: https://github.com/facebook/flow/issues/8055
+            // $FlowExpectedError
+            eventTarget.releasePointerCapture(pointerId);
+          } else {
+            if (eventType === 'touchstart') {
+              const targetTouches = nativeEvent.targetTouches;
+              if (targetTouches.length === 1) {
+                state.activePointerId = targetTouches[0].identifier;
+              } else {
+                return;
+              }
+            }
+          }
+
+          const activate = shouldActivate(event);
+          const buttons =
+            nativeEvent.button === 1
+              ? buttonsEnum.auxiliary
+              : nativeEvent.buttons;
+          const activateAuxiliary = isAuxiliary(buttons, event);
+
+          if (activate || activateAuxiliary) {
+            state.buttons = buttons;
+            state.pointerType = event.pointerType;
+            state.responderTarget = context.getResponderNode();
+            addRootEventTypes(rootEventTypes, context, state);
+            if (!hasPointerEvents) {
+              if (eventType === 'touchstart') {
+                state.ignoreEmulatedEvents = true;
+              }
+            }
+          }
+
+          if (activateAuxiliary) {
+            state.isAuxiliaryActive = true;
+          } else if (activate) {
+            const gestureState = createGestureState(
+              context,
+              props,
+              state,
+              event,
+            );
+            state.isActive = true;
+            state.shouldPreventDefault = props.preventDefault !== false;
+            state.gestureState = gestureState;
+            state.initialPosition.x = gestureState.x;
+            state.initialPosition.y = gestureState.y;
+            dispatchStart(context, props, state);
+          }
+        } else if (
+          !isActivePointer(event, state) ||
+          (eventType === 'touchstart' && nativeEvent.targetTouches.length > 1)
+        ) {
+          // Cancel the gesture if a second pointer becomes active on the target.
+          state.isActive = false;
+          dispatchCancel(context, props, state);
+        }
+        break;
+      }
+    }
+  },
+  onRootEvent(
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: TapProps,
+    state: TapState,
+  ): void {
+    const nativeEvent: any = event.nativeEvent;
+    const eventType = event.type;
+    const hitTarget = getHitTarget(event, context, state);
+
+    switch (eventType) {
+      // UPDATE
+      case 'pointermove':
+      case 'mousemove':
+      case 'touchmove': {
+        if (!hasPointerEvents) {
+          if (eventType === 'mousemove' && state.ignoreEmulatedEvents) {
+            return;
+          }
+        }
+
+        if (state.isActive && isActivePointer(event, state)) {
+          state.gestureState = createGestureState(context, props, state, event);
+          let shouldUpdate = true;
+
+          if (!context.isTargetWithinResponder(hitTarget)) {
+            shouldUpdate = false;
+          } else if (
+            props.maximumDistance != null &&
+            props.maximumDistance >= 10
+          ) {
+            const maxDistance = props.maximumDistance;
+            const initialPosition = state.initialPosition;
+            const currentPosition = state.gestureState;
+            const moveX = initialPosition.x - currentPosition.x;
+            const moveY = initialPosition.y - currentPosition.y;
+            const moveDistance = Math.sqrt(moveX * moveX + moveY * moveY);
+            if (moveDistance > maxDistance) {
+              shouldUpdate = false;
+            }
+          }
+
+          if (shouldUpdate) {
+            dispatchUpdate(context, props, state);
+          } else {
+            state.isActive = false;
+            dispatchCancel(context, props, state);
+          }
+        }
+        break;
+      }
+
+      // END
+      case 'pointerup':
+      case 'mouseup':
+      case 'touchend': {
+        if (state.isActive && isActivePointer(event, state)) {
+          state.gestureState = createGestureState(context, props, state, event);
+          state.isActive = false;
+          if (isAuxiliary(state.buttons, event)) {
+            dispatchCancel(context, props, state);
+            dispatchAuxiliaryTap(context, props, state);
+            // Remove the root events here as no 'click' event is dispatched
+            removeRootEventTypes(context, state);
+          } else if (
+            !context.isTargetWithinResponder(hitTarget) ||
+            hasModifierKey(event)
+          ) {
+            dispatchCancel(context, props, state);
+          } else {
+            dispatchEnd(context, props, state);
+          }
+        } else if (
+          state.isAuxiliaryActive &&
+          isAuxiliary(state.buttons, event)
+        ) {
+          state.isAuxiliaryActive = false;
+          state.gestureState = createGestureState(context, props, state, event);
+          dispatchAuxiliaryTap(context, props, state);
+          // Remove the root events here as no 'click' event is dispatched
+          removeRootEventTypes(context, state);
+        }
+
+        if (!hasPointerEvents) {
+          if (eventType === 'mouseup') {
+            state.ignoreEmulatedEvents = false;
+          }
+        }
+        break;
+      }
+
+      // CANCEL
+      case 'contextmenu':
+      case 'pointercancel':
+      case 'touchcancel':
+      case 'dragstart': {
+        if (state.isActive && isActivePointer(event, state)) {
+          state.gestureState = createGestureState(context, props, state, event);
+          state.isActive = false;
+          dispatchCancel(context, props, state);
+          removeRootEventTypes(context, state);
+        }
+        break;
+      }
+
+      // CANCEL
+      case 'scroll': {
+        if (
+          state.isActive &&
+          state.responderTarget != null &&
+          // We ignore incoming scroll events when using mouse events
+          state.pointerType !== 'mouse' &&
+          // If the scroll target is the document or if the pointer target
+          // is within the 'scroll' target, then cancel the gesture
+          context.isTargetWithinNode(state.responderTarget, nativeEvent.target)
+        ) {
+          state.gestureState = createGestureState(context, props, state, event);
+          state.isActive = false;
+          dispatchCancel(context, props, state);
+          removeRootEventTypes(context, state);
+        }
+        break;
+      }
+
+      case 'click': {
+        if (state.shouldPreventDefault) {
+          nativeEvent.preventDefault();
+        }
+        removeRootEventTypes(context, state);
+        break;
+      }
+    }
+  },
+  onUnmount(
+    context: ReactDOMResponderContext,
+    props: TapProps,
+    state: TapState,
+  ): void {
+    removeRootEventTypes(context, state);
+    if (state.isActive) {
+      state.isActive = false;
+      dispatchCancel(context, props, state);
+    }
+  },
+};
+
+export const TapResponder = React.DEPRECATED_createResponder(
+  'Tap',
+  responderImpl,
+);
+
+export function useTap(props: TapProps): ReactEventResponderListener<any, any> {
+  return React.DEPRECATED_useResponder(TapResponder, props);
+}
diff --git a/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js
new file mode 100644
index 0000000000000..f57d416459776
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js
@@ -0,0 +1,193 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonsType,
+  createEventTarget,
+  platform,
+  setPointerEvent,
+} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let useContextMenu;
+
+function initializeModules(hasPointerEvents) {
+  setPointerEvent(hasPointerEvents);
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  useContextMenu = require('react-interactions/events/context-menu')
+    .useContextMenu;
+}
+
+const forcePointerEvents = true;
+const table = [[forcePointerEvents], [!forcePointerEvents]];
+
+describe.each(table)('ContextMenu responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('all platforms', () => {
+    it('mouse right-click', () => {
+      const onContextMenu = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({onContextMenu});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu({preventDefault});
+      expect(preventDefault).toHaveBeenCalledTimes(1);
+      expect(onContextMenu).toHaveBeenCalledTimes(1);
+      expect(onContextMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.secondary,
+          pointerType: 'mouse',
+          type: 'contextmenu',
+        }),
+      );
+    });
+
+    it('touch long-press', () => {
+      const onContextMenu = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({onContextMenu});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu({preventDefault}, {pointerType: 'touch'});
+      expect(preventDefault).toHaveBeenCalledTimes(1);
+      expect(onContextMenu).toHaveBeenCalledTimes(1);
+      expect(onContextMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.none,
+          pointerType: 'touch',
+          type: 'contextmenu',
+        }),
+      );
+    });
+
+    it('"disabled" is true', () => {
+      const onContextMenu = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({
+          onContextMenu,
+          disabled: true,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu();
+      expect(onContextMenu).toHaveBeenCalledTimes(0);
+    });
+
+    it('"preventDefault" is false', () => {
+      const preventDefault = jest.fn();
+      const onContextMenu = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({
+          onContextMenu,
+          preventDefault: false,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu({preventDefault});
+      expect(preventDefault).toHaveBeenCalledTimes(0);
+      expect(onContextMenu).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('mac platform', () => {
+    beforeEach(() => {
+      platform.set('mac');
+      jest.resetModules();
+    });
+
+    afterEach(() => {
+      platform.clear();
+    });
+
+    it('mouse modified left-click', () => {
+      const onContextMenu = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({onContextMenu});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu({}, {modified: true});
+      expect(onContextMenu).toHaveBeenCalledTimes(1);
+      expect(onContextMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.primary,
+          pointerType: 'mouse',
+          type: 'contextmenu',
+        }),
+      );
+    });
+  });
+
+  describe('windows platform', () => {
+    beforeEach(() => {
+      platform.set('windows');
+      jest.resetModules();
+    });
+
+    afterEach(() => {
+      platform.clear();
+    });
+
+    it('mouse modified left-click', () => {
+      const onContextMenu = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useContextMenu({onContextMenu});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.contextmenu({}, {modified: true});
+      expect(onContextMenu).toHaveBeenCalledTimes(0);
+    });
+  });
+});
diff --git a/packages/react-events/src/__tests__/Drag-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js
similarity index 81%
rename from packages/react-events/src/__tests__/Drag-test.internal.js
rename to packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js
index e65a56401801a..f330385727988 100644
--- a/packages/react-events/src/__tests__/Drag-test.internal.js
+++ b/packages/react-interactions/events/src/dom/__tests__/Drag-test.internal.js
@@ -12,17 +12,18 @@
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
-let Drag;
+let useDrag;
+
 describe('Drag event responder', () => {
   let container;
 
   beforeEach(() => {
     jest.resetModules();
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
-    Drag = require('react-events/drag');
+    useDrag = require('react-interactions/events/drag').useDrag;
 
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -43,10 +44,13 @@ describe('Drag event responder', () => {
     }
 
     function Component() {
+      const listener = useDrag({
+        onDragChange: handleOnDrag,
+      });
       return (
-        <Drag onDragChange={handleOnDrag}>
-          <div ref={divRef}>Drag me!</div>
-        </Drag>
+        <div ref={divRef} DEPRECATED_flareListeners={listener}>
+          Drag me!
+        </div>
       );
     }
 
@@ -96,10 +100,14 @@ describe('Drag event responder', () => {
     }
 
     function Component() {
+      const listener = useDrag({
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+      });
       return (
-        <Drag onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <div ref={divRef}>Drag me!</div>
-        </Drag>
+        <div ref={divRef} DEPRECATED_flareListeners={listener}>
+          Drag me!
+        </div>
       );
     }
 
@@ -145,17 +153,20 @@ describe('Drag event responder', () => {
     }
 
     function Component() {
+      const listener = useDrag({
+        onDragMove: handleDragMove,
+      });
       return (
-        <Drag onDragMove={handleDragMove}>
-          <div ref={divRef}>Drag me!</div>
-        </Drag>
+        <div ref={divRef} DEPRECATED_flareListeners={listener}>
+          Drag me!
+        </div>
       );
     }
 
     ReactDOM.render(<Component />, container);
 
     const mouseOverEvent = document.createEvent('MouseEvents');
-    mouseOverEvent.initEvent('mousedown', true, true);
+    mouseOverEvent.initEvent('mousedown', true, true, window, 1, 0, 0);
     divRef.current.dispatchEvent(mouseOverEvent);
 
     const mouseMoveEvent = document.createEvent('MouseEvents');
@@ -166,8 +177,8 @@ describe('Drag event responder', () => {
         true,
         window,
         1,
-        index,
-        index,
+        index + 1,
+        index + 1,
         50,
         50,
       );
@@ -178,12 +189,15 @@ describe('Drag event responder', () => {
     mouseUpEvent.initEvent('mouseup', true, true);
     divRef.current.dispatchEvent(mouseUpEvent);
     expect(events).toHaveLength(20);
-    let index = 0;
     expect(events).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          diffX: index,
-          diffY: index++,
+          diffX: 2,
+          diffY: 2,
+        }),
+        expect.objectContaining({
+          diffX: 21,
+          diffY: 21,
         }),
       ]),
     );
diff --git a/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js
new file mode 100644
index 0000000000000..66946f07abcce
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js
@@ -0,0 +1,368 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  createEventTarget,
+  setPointerEvent,
+  platform,
+} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let FocusResponder;
+let useFocus;
+
+function initializeModules(hasPointerEvents) {
+  setPointerEvent(hasPointerEvents);
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  FocusResponder = require('react-interactions/events/focus').FocusResponder;
+  useFocus = require('react-interactions/events/focus').useFocus;
+}
+
+const forcePointerEvents = true;
+const table = [[forcePointerEvents], [!forcePointerEvents]];
+
+describe.each(table)('Focus responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('disabled', () => {
+    let onBlur, onFocus, ref;
+
+    beforeEach(() => {
+      onBlur = jest.fn();
+      onFocus = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useFocus({
+          disabled: true,
+          onBlur,
+          onFocus,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('does not call callbacks', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      target.blur();
+      expect(onFocus).not.toBeCalled();
+      expect(onBlur).not.toBeCalled();
+    });
+  });
+
+  describe('onBlur', () => {
+    let onBlur, ref;
+
+    beforeEach(() => {
+      onBlur = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useFocus({
+          onBlur,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called after "blur" event', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      target.blur();
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onFocus', () => {
+    let onFocus, ref, innerRef;
+
+    const componentInit = () => {
+      onFocus = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      const Component = () => {
+        const listener = useFocus({
+          onFocus,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            <a ref={innerRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+    };
+
+    beforeEach(componentInit);
+
+    it('is called after "focus" event', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('is not called if descendants of target receive focus', () => {
+      const target = createEventTarget(innerRef.current);
+      target.focus();
+      expect(onFocus).not.toBeCalled();
+    });
+
+    it('is called with the correct pointerType: mouse', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup();
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'mouse'}),
+      );
+    });
+
+    it('is called with the correct pointerType: touch', () => {
+      const target = createEventTarget(ref.current);
+      const pointerType = 'touch';
+      target.pointerdown({pointerType});
+      target.pointerup({pointerType});
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'touch'}),
+      );
+    });
+
+    if (hasPointerEvents) {
+      it('is called with the correct pointerType: pen', () => {
+        const target = createEventTarget(ref.current);
+        const pointerType = 'pen';
+        target.pointerdown({pointerType});
+        target.pointerup({pointerType});
+        expect(onFocus).toHaveBeenCalledTimes(1);
+        expect(onFocus).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType: 'pen'}),
+        );
+      });
+    }
+
+    it('is called with the correct pointerType using a keyboard', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'LeftArrow'});
+      target.focus();
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard'}),
+      );
+    });
+
+    it('is called with the correct pointerType using Tab+altKey on Mac', () => {
+      platform.set('mac');
+      jest.resetModules();
+      initializeModules();
+      componentInit();
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', altKey: true});
+      target.focus();
+
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+        }),
+      );
+
+      platform.clear();
+    });
+  });
+
+  describe('onFocusChange', () => {
+    let onFocusChange, ref, innerRef;
+
+    beforeEach(() => {
+      onFocusChange = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      const Component = () => {
+        const listener = useFocus({
+          onFocusChange,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            <div ref={innerRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called after "blur" and "focus" events', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      expect(onFocusChange).toHaveBeenCalledTimes(1);
+      expect(onFocusChange).toHaveBeenCalledWith(true);
+      target.blur();
+      expect(onFocusChange).toHaveBeenCalledTimes(2);
+      expect(onFocusChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is not called after "blur" and "focus" events on descendants', () => {
+      const target = createEventTarget(innerRef.current);
+      target.focus();
+      expect(onFocusChange).toHaveBeenCalledTimes(0);
+      target.blur();
+      expect(onFocusChange).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('onFocusVisibleChange', () => {
+    let onFocusVisibleChange, ref, innerRef;
+
+    beforeEach(() => {
+      onFocusVisibleChange = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      const Component = () => {
+        const listener = useFocus({
+          onFocusVisibleChange,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            <div ref={innerRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called after "focus" and "blur" if keyboard navigation is active', () => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      // use keyboard first
+      containerTarget.keydown({key: 'Tab'});
+      target.focus();
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
+      target.blur({relatedTarget: container});
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      // use keyboard first
+      containerTarget.keydown({key: 'Tab'});
+      target.focus();
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
+      // then use pointer on the target, focus should no longer be visible
+      target.pointerdown();
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
+      // onFocusVisibleChange should not be called again
+      target.blur({relatedTarget: container});
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
+    });
+
+    it('is not called after "focus" and "blur" events without keyboard', () => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      target.pointerdown();
+      target.pointerup();
+      containerTarget.pointerdown();
+      target.blur({relatedTarget: container});
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
+    });
+
+    it('is not called after "blur" and "focus" events on descendants', () => {
+      const innerTarget = createEventTarget(innerRef.current);
+      const containerTarget = createEventTarget(container);
+      containerTarget.keydown({key: 'Tab'});
+      innerTarget.focus();
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
+      innerTarget.blur({relatedTarget: container});
+      expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('nested Focus components', () => {
+    it('propagates events in the correct order', () => {
+      const events = [];
+      const innerRef = React.createRef();
+      const outerRef = React.createRef();
+      const createEventHandler = msg => () => {
+        events.push(msg);
+      };
+
+      const Inner = () => {
+        const listener = useFocus({
+          onBlur: createEventHandler('inner: onBlur'),
+          onFocus: createEventHandler('inner: onFocus'),
+          onFocusChange: createEventHandler('inner: onFocusChange'),
+        });
+        return <div ref={innerRef} DEPRECATED_flareListeners={listener} />;
+      };
+
+      const Outer = () => {
+        const listener = useFocus({
+          onBlur: createEventHandler('outer: onBlur'),
+          onFocus: createEventHandler('outer: onFocus'),
+          onFocusChange: createEventHandler('outer: onFocusChange'),
+        });
+        return (
+          <div ref={outerRef} DEPRECATED_flareListeners={listener}>
+            <Inner />
+          </div>
+        );
+      };
+
+      ReactDOM.render(<Outer />, container);
+
+      const innerTarget = createEventTarget(innerRef.current);
+      const outerTarget = createEventTarget(outerRef.current);
+
+      outerTarget.focus();
+      outerTarget.blur();
+      innerTarget.focus();
+      innerTarget.blur();
+      expect(events).toEqual([
+        'outer: onFocus',
+        'outer: onFocusChange',
+        'outer: onBlur',
+        'outer: onFocusChange',
+        'inner: onFocus',
+        'inner: onFocusChange',
+        'inner: onBlur',
+        'inner: onFocusChange',
+      ]);
+    });
+  });
+
+  it('expect displayName to show up for event component', () => {
+    expect(FocusResponder.displayName).toBe('Focus');
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
new file mode 100644
index 0000000000000..0c2b783b03c0e
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
@@ -0,0 +1,344 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let FocusWithinResponder;
+let useFocusWithin;
+
+const initializeModules = hasPointerEvents => {
+  setPointerEvent(hasPointerEvents);
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  FocusWithinResponder = require('react-interactions/events/focus')
+    .FocusWithinResponder;
+  useFocusWithin = require('react-interactions/events/focus').useFocusWithin;
+};
+
+const forcePointerEvents = true;
+const table = [[forcePointerEvents], [!forcePointerEvents]];
+
+describe.each(table)('FocusWithin responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('disabled', () => {
+    let onFocusWithinChange, onFocusWithinVisibleChange, ref;
+
+    beforeEach(() => {
+      onFocusWithinChange = jest.fn();
+      onFocusWithinVisibleChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useFocusWithin({
+          disabled: true,
+          onFocusWithinChange,
+          onFocusWithinVisibleChange,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      target.blur();
+      expect(onFocusWithinChange).not.toBeCalled();
+      expect(onFocusWithinVisibleChange).not.toBeCalled();
+    });
+  });
+
+  describe('onFocusWithinChange', () => {
+    let onFocusWithinChange, ref, innerRef, innerRef2;
+
+    const Component = ({show}) => {
+      const listener = useFocusWithin({
+        onFocusWithinChange,
+      });
+      return (
+        <div ref={ref} DEPRECATED_flareListeners={listener}>
+          {show && <input ref={innerRef} />}
+          <div ref={innerRef2} />
+        </div>
+      );
+    };
+
+    beforeEach(() => {
+      onFocusWithinChange = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      innerRef2 = React.createRef();
+      ReactDOM.render(<Component show={true} />, container);
+    });
+
+    it('is called after "blur" and "focus" events on focus target', () => {
+      const target = createEventTarget(ref.current);
+      target.focus();
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(true);
+      target.blur({relatedTarget: container});
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is called after "blur" and "focus" events on descendants', () => {
+      const target = createEventTarget(innerRef.current);
+      target.focus();
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(true);
+      target.blur({relatedTarget: container});
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is only called once when focus moves within and outside the subtree', () => {
+      const node = ref.current;
+      const innerNode1 = innerRef.current;
+      const innerNode2 = innerRef.current;
+      const target = createEventTarget(node);
+      const innerTarget1 = createEventTarget(innerNode1);
+      const innerTarget2 = createEventTarget(innerNode2);
+
+      // focus shifts into subtree
+      innerTarget1.focus();
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(true);
+      // focus moves around subtree
+      innerTarget1.blur({relatedTarget: innerNode2});
+      innerTarget2.focus();
+      innerTarget2.blur({relatedTarget: node});
+      target.focus();
+      target.blur({relatedTarget: innerNode1});
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
+      // focus shifts outside subtree
+      innerTarget1.blur({relatedTarget: container});
+      expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('onFocusWithinVisibleChange', () => {
+    let onFocusWithinVisibleChange, ref, innerRef, innerRef2;
+
+    const Component = ({show}) => {
+      const listener = useFocusWithin({
+        onFocusWithinVisibleChange,
+      });
+      return (
+        <div ref={ref} DEPRECATED_flareListeners={listener}>
+          {show && <input ref={innerRef} />}
+          <div ref={innerRef2} />
+        </div>
+      );
+    };
+
+    beforeEach(() => {
+      onFocusWithinVisibleChange = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      innerRef2 = React.createRef();
+      ReactDOM.render(<Component show={true} />, container);
+    });
+
+    it('is called after "focus" and "blur" on focus target if keyboard was used', () => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      // use keyboard first
+      containerTarget.keydown({key: 'Tab'});
+      target.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      target.blur({relatedTarget: container});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is called after "focus" and "blur" on descendants if keyboard was used', () => {
+      const innerTarget = createEventTarget(innerRef.current);
+      const containerTarget = createEventTarget(container);
+      // use keyboard first
+      containerTarget.keydown({key: 'Tab'});
+      innerTarget.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      innerTarget.blur({relatedTarget: container});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
+      const node = ref.current;
+      const innerNode1 = innerRef.current;
+      const innerNode2 = innerRef2.current;
+
+      const target = createEventTarget(node);
+      const innerTarget1 = createEventTarget(innerNode1);
+      const innerTarget2 = createEventTarget(innerNode2);
+      // use keyboard first
+      target.focus();
+      target.keydown({key: 'Tab'});
+      target.blur({relatedTarget: innerNode1});
+      innerTarget1.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      // then use pointer on the next target, focus should no longer be visible
+      innerTarget2.pointerdown();
+      innerTarget1.blur({relatedTarget: innerNode2});
+      innerTarget2.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+      // then use keyboard again
+      innerTarget2.keydown({key: 'Tab', shiftKey: true});
+      innerTarget2.blur({relatedTarget: innerNode1});
+      innerTarget1.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(3);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      // then use pointer on the target, focus should no longer be visible
+      innerTarget1.pointerdown();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+      // onFocusVisibleChange should not be called again
+      innerTarget1.blur({relatedTarget: container});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
+    });
+
+    it('is not called after "focus" and "blur" events without keyboard', () => {
+      const innerTarget = createEventTarget(innerRef.current);
+      innerTarget.pointerdown();
+      innerTarget.pointerup();
+      innerTarget.blur({relatedTarget: container});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
+    });
+
+    it('is only called once when focus moves within and outside the subtree', () => {
+      const node = ref.current;
+      const innerNode1 = innerRef.current;
+      const innerNode2 = innerRef2.current;
+      const target = createEventTarget(node);
+      const innerTarget1 = createEventTarget(innerNode1);
+      const innerTarget2 = createEventTarget(innerNode2);
+
+      // focus shifts into subtree
+      innerTarget1.focus();
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      // focus moves around subtree
+      innerTarget1.blur({relatedTarget: innerNode2});
+      innerTarget2.focus();
+      innerTarget2.blur({relatedTarget: node});
+      target.focus();
+      target.blur({relatedTarget: innerNode1});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
+      // focus shifts outside subtree
+      innerTarget1.blur({relatedTarget: container});
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
+      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('onBeforeBlurWithin', () => {
+    let onBeforeBlurWithin, onBlurWithin, ref, innerRef, innerRef2;
+
+    beforeEach(() => {
+      onBeforeBlurWithin = jest.fn();
+      onBlurWithin = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      innerRef2 = React.createRef();
+    });
+
+    it('is called after a focused element is unmounted', () => {
+      const Component = ({show}) => {
+        const listener = useFocusWithin({
+          onBeforeBlurWithin,
+          onBlurWithin,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            {show && <input ref={innerRef} />}
+            <div ref={innerRef2} />
+          </div>
+        );
+      };
+
+      ReactDOM.render(<Component show={true} />, container);
+
+      const inner = innerRef.current;
+      const target = createEventTarget(inner);
+      target.keydown({key: 'Tab'});
+      target.focus();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onBlurWithin).toHaveBeenCalledTimes(0);
+      ReactDOM.render(<Component show={false} />, container);
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onBlurWithin).toHaveBeenCalledWith(
+        expect.objectContaining({isTargetAttached: false}),
+      );
+    });
+
+    it('is called after a nested focused element is unmounted', () => {
+      const Component = ({show}) => {
+        const listener = useFocusWithin({
+          onBeforeBlurWithin,
+          onBlurWithin,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            {show && (
+              <div>
+                <input ref={innerRef} />
+              </div>
+            )}
+            <div ref={innerRef2} />
+          </div>
+        );
+      };
+
+      ReactDOM.render(<Component show={true} />, container);
+
+      const inner = innerRef.current;
+      const target = createEventTarget(inner);
+      target.keydown({key: 'Tab'});
+      target.focus();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onBlurWithin).toHaveBeenCalledTimes(0);
+      ReactDOM.render(<Component show={false} />, container);
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onBlurWithin).toHaveBeenCalledWith(
+        expect.objectContaining({isTargetAttached: false}),
+      );
+    });
+  });
+
+  it('expect displayName to show up for event component', () => {
+    expect(FocusWithinResponder.displayName).toBe('FocusWithin');
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Hover-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Hover-test.internal.js
new file mode 100644
index 0000000000000..06437852b45c9
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Hover-test.internal.js
@@ -0,0 +1,401 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let HoverResponder;
+let useHover;
+
+function initializeModules(hasPointerEvents) {
+  jest.resetModules();
+  setPointerEvent(hasPointerEvents);
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  HoverResponder = require('react-interactions/events/hover').HoverResponder;
+  useHover = require('react-interactions/events/hover').useHover;
+}
+
+const forcePointerEvents = true;
+const table = [[forcePointerEvents], [!forcePointerEvents]];
+
+describe.each(table)('Hover responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('disabled', () => {
+    let onHoverChange, onHoverStart, onHoverMove, onHoverEnd, ref;
+
+    beforeEach(() => {
+      onHoverChange = jest.fn();
+      onHoverStart = jest.fn();
+      onHoverMove = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useHover({
+          disabled: true,
+          onHoverChange,
+          onHoverStart,
+          onHoverMove,
+          onHoverEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('does not call callbacks', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerenter();
+      target.pointerexit();
+      expect(onHoverChange).not.toBeCalled();
+      expect(onHoverStart).not.toBeCalled();
+      expect(onHoverMove).not.toBeCalled();
+      expect(onHoverEnd).not.toBeCalled();
+    });
+  });
+
+  describe('onHoverStart', () => {
+    let onHoverStart, ref;
+
+    beforeEach(() => {
+      onHoverStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useHover({
+          onHoverStart: onHoverStart,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called for mouse pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerenter();
+      expect(onHoverStart).toHaveBeenCalledTimes(1);
+    });
+
+    it('is not called for touch pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.pointerup({pointerType: 'touch'});
+      expect(onHoverStart).not.toBeCalled();
+    });
+
+    it('is called if a mouse pointer is used after a touch pointer', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.pointerup({pointerType: 'touch'});
+      target.pointerenter();
+      expect(onHoverStart).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onHoverChange', () => {
+    let onHoverChange, ref;
+
+    beforeEach(() => {
+      onHoverChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useHover({
+          onHoverChange,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called for mouse pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerenter();
+      expect(onHoverChange).toHaveBeenCalledTimes(1);
+      expect(onHoverChange).toHaveBeenCalledWith(true);
+      target.pointerexit();
+      expect(onHoverChange).toHaveBeenCalledTimes(2);
+      expect(onHoverChange).toHaveBeenCalledWith(false);
+    });
+
+    it('is not called for touch pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.pointerup({pointerType: 'touch'});
+      expect(onHoverChange).not.toBeCalled();
+    });
+  });
+
+  describe('onHoverEnd', () => {
+    let onHoverEnd, ref;
+
+    beforeEach(() => {
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useHover({
+          onHoverEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('is called for mouse pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerenter();
+      target.pointerexit();
+      expect(onHoverEnd).toHaveBeenCalledTimes(1);
+    });
+
+    if (hasPointerEvents) {
+      it('is called once for cancelled mouse pointers', () => {
+        const target = createEventTarget(ref.current);
+        target.pointerenter();
+        target.pointercancel();
+        expect(onHoverEnd).toHaveBeenCalledTimes(1);
+
+        // only called once if cancel follows exit
+        onHoverEnd.mockReset();
+        target.pointerenter();
+        target.pointerexit();
+        target.pointercancel();
+        expect(onHoverEnd).toHaveBeenCalledTimes(1);
+      });
+    }
+
+    it('is not called for touch pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.pointerup({pointerType: 'touch'});
+      expect(onHoverEnd).not.toBeCalled();
+    });
+
+    it('should correctly work with React Portals', () => {
+      const portalNode = document.createElement('div');
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+
+      function Test() {
+        const listener = useHover({
+          onHoverEnd,
+        });
+        return (
+          <div ref={divRef} DEPRECATED_flareListeners={listener}>
+            {ReactDOM.createPortal(<span ref={spanRef} />, portalNode)}
+          </div>
+        );
+      }
+      ReactDOM.render(<Test />, container);
+      const div = createEventTarget(divRef.current);
+      div.pointerenter();
+      const span = createEventTarget(spanRef.current);
+      span.pointerexit();
+      expect(onHoverEnd).not.toBeCalled();
+      const body = createEventTarget(document.body);
+      body.pointerexit();
+      expect(onHoverEnd).toBeCalled();
+    });
+  });
+
+  describe('onHoverMove', () => {
+    it('is called after the active pointer moves"', () => {
+      const onHoverMove = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useHover({
+          onHoverMove,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerenter();
+      target.pointerhover({x: 0, y: 0});
+      target.pointerhover({x: 1, y: 1});
+      expect(onHoverMove).toHaveBeenCalledTimes(2);
+      expect(onHoverMove).toHaveBeenCalledWith(
+        expect.objectContaining({type: 'hovermove'}),
+      );
+    });
+  });
+
+  describe('nested Hover components', () => {
+    it('not propagate by default', () => {
+      const events = [];
+      const innerRef = React.createRef();
+      const outerRef = React.createRef();
+      const createEventHandler = msg => () => {
+        events.push(msg);
+      };
+
+      const Inner = () => {
+        const listener = useHover({
+          onHoverStart: createEventHandler('inner: onHoverStart'),
+          onHoverEnd: createEventHandler('inner: onHoverEnd'),
+          onHoverChange: createEventHandler('inner: onHoverChange'),
+        });
+        return <div ref={innerRef} DEPRECATED_flareListeners={listener} />;
+      };
+
+      const Outer = () => {
+        const listener = useHover({
+          onHoverStart: createEventHandler('outer: onHoverStart'),
+          onHoverEnd: createEventHandler('outer: onHoverEnd'),
+          onHoverChange: createEventHandler('outer: onHoverChange'),
+        });
+        return (
+          <div ref={outerRef} DEPRECATED_flareListeners={listener}>
+            <Inner />
+          </div>
+        );
+      };
+      ReactDOM.render(<Outer />, container);
+
+      const innerNode = innerRef.current;
+      const outerNode = outerRef.current;
+      const innerTarget = createEventTarget(innerNode);
+      const outerTarget = createEventTarget(outerNode);
+
+      outerTarget.pointerenter({relatedTarget: container});
+      outerTarget.pointerexit({relatedTarget: innerNode});
+      innerTarget.pointerenter({relatedTarget: outerNode});
+      innerTarget.pointerexit({relatedTarget: outerNode});
+      outerTarget.pointerenter({relatedTarget: innerNode});
+      outerTarget.pointerexit({relatedTarget: container});
+
+      expect(events).toEqual([
+        'outer: onHoverStart',
+        'outer: onHoverChange',
+        'outer: onHoverEnd',
+        'outer: onHoverChange',
+        'inner: onHoverStart',
+        'inner: onHoverChange',
+        'inner: onHoverEnd',
+        'inner: onHoverChange',
+        'outer: onHoverStart',
+        'outer: onHoverChange',
+        'outer: onHoverEnd',
+        'outer: onHoverChange',
+      ]);
+    });
+  });
+
+  it('expect displayName to show up for event component', () => {
+    expect(HoverResponder.displayName).toBe('Hover');
+  });
+
+  it('should correctly pass through event properties', () => {
+    const timeStamps = [];
+    const ref = React.createRef();
+    const eventLog = [];
+    const logEvent = event => {
+      const propertiesWeCareAbout = {
+        x: event.x,
+        y: event.y,
+        pageX: event.pageX,
+        pageY: event.pageY,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        pointerType: event.pointerType,
+        target: event.target,
+        timeStamp: event.timeStamp,
+        type: event.type,
+      };
+      timeStamps.push(event.timeStamp);
+      eventLog.push(propertiesWeCareAbout);
+    };
+    const Component = () => {
+      const listener = useHover({
+        onHoverStart: logEvent,
+        onHoverEnd: logEvent,
+        onHoverMove: logEvent,
+      });
+      return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const node = ref.current;
+    const target = createEventTarget(node);
+
+    target.pointerenter({x: 10, y: 10});
+    target.pointerhover({x: 10, y: 10});
+    target.pointerhover({x: 20, y: 20});
+    target.pointerexit({x: 20, y: 20});
+
+    expect(eventLog).toEqual([
+      {
+        x: 10,
+        y: 10,
+        pageX: 10,
+        pageY: 10,
+        clientX: 10,
+        clientY: 10,
+        target: node,
+        timeStamp: timeStamps[0],
+        type: 'hoverstart',
+        pointerType: 'mouse',
+      },
+      {
+        x: 10,
+        y: 10,
+        pageX: 10,
+        pageY: 10,
+        clientX: 10,
+        clientY: 10,
+        target: node,
+        timeStamp: timeStamps[1],
+        type: 'hovermove',
+        pointerType: 'mouse',
+      },
+      {
+        x: 20,
+        y: 20,
+        pageX: 20,
+        pageY: 20,
+        clientX: 20,
+        clientY: 20,
+        target: node,
+        timeStamp: timeStamps[2],
+        type: 'hovermove',
+        pointerType: 'mouse',
+      },
+      {
+        x: 20,
+        y: 20,
+        pageX: 20,
+        pageY: 20,
+        clientX: 20,
+        clientY: 20,
+        target: node,
+        timeStamp: timeStamps[3],
+        type: 'hoverend',
+        pointerType: 'mouse',
+      },
+    ]);
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Input-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Input-test.internal.js
new file mode 100644
index 0000000000000..1046b44376063
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Input-test.internal.js
@@ -0,0 +1,992 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let InputResponder;
+let useInput;
+let Scheduler;
+
+const setUntrackedChecked = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'checked',
+).set;
+
+const setUntrackedValue = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'value',
+).set;
+
+const setUntrackedTextareaValue = Object.getOwnPropertyDescriptor(
+  HTMLTextAreaElement.prototype,
+  'value',
+).set;
+
+const modulesInit = () => {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  Scheduler = require('scheduler');
+  InputResponder = require('react-interactions/events/input').InputResponder;
+  useInput = require('react-interactions/events/input').useInput;
+};
+
+describe('Input event responder', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    modulesInit();
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('disabled', () => {
+    let onChange, onValueChange, ref;
+
+    beforeEach(() => {
+      onChange = jest.fn();
+      onValueChange = jest.fn();
+      ref = React.createRef();
+
+      function Component() {
+        const listener = useInput({
+          disabled: true,
+          onChange,
+          onValueChange,
+        });
+        return <input ref={ref} DEPRECATED_flareListeners={listener} />;
+      }
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(onChange).not.toBeCalled();
+      expect(onValueChange).not.toBeCalled();
+    });
+  });
+
+  // These were taken from the original ChangeEventPlugin-test.
+  // They've been updated and cleaned up for React Flare.
+  describe('onChange', () => {
+    // We try to avoid firing "duplicate" React change events.
+    // However, to tell which events are "duplicates" and should be ignored,
+    // we are tracking the "current" input value, and only respect events
+    // that occur after it changes. In most of these tests, we verify that we
+    // keep track of the "current" value and only fire events when it changes.
+    // See https://github.com/facebook/react/pull/5746.
+
+    it('should consider initial text value to be current', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="text"
+            ref={ref}
+            defaultValue="foo"
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      ref.current.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+    });
+
+    it('should consider initial checkbox checked=true to be current', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="checkbox"
+            ref={ref}
+            defaultChecked={true}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      // Secretly, set `checked` to false, so that dispatching the `click` will
+      // make it `true` again. Thus, at the time of the event, React should not
+      // consider it a change from the initial `true` value.
+      setUntrackedChecked.call(ref.current, false);
+      ref.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+
+      // There should be no React change events because the value stayed the same.
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+    });
+
+    it('should consider initial checkbox checked=false to be current', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="checkbox"
+            ref={ref}
+            defaultChecked={false}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      // Secretly, set `checked` to true, so that dispatching the `click` will
+      // make it `false` again. Thus, at the time of the event, React should not
+      // consider it a change from the initial `false` value.
+      setUntrackedChecked.call(ref.current, true);
+      ref.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      // There should be no React change events because the value stayed the same.
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+    });
+
+    it('should fire change for checkbox input', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="checkbox"
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      ref.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      // Note: unlike with text input events, dispatching `click` actually
+      // toggles the checkbox and updates its `checked` value.
+      expect(ref.current.checked).toBe(true);
+      expect(onChangeCalled).toBe(1);
+      expect(onValueChangeCalled).toBe(1);
+
+      expect(ref.current.checked).toBe(true);
+      ref.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      expect(ref.current.checked).toBe(false);
+      expect(onChangeCalled).toBe(2);
+      expect(onValueChangeCalled).toBe(2);
+    });
+
+    it('should not fire change setting the value programmatically', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="text"
+            defaultValue="foo"
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      // Set it programmatically.
+      ref.current.value = 'bar';
+      // Even if a DOM input event fires, React sees that the real input value now
+      // ('bar') is the same as the "current" one we already recorded.
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(ref.current.value).toBe('bar');
+      // In this case we don't expect to get a React event.
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+
+      // However, we can simulate user typing by calling the underlying setter.
+      setUntrackedValue.call(ref.current, 'foo');
+      // Now, when the event fires, the real input value ('foo') differs from the
+      // "current" one we previously recorded ('bar').
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(ref.current.value).toBe('foo');
+      // In this case React should fire an event for it.
+      expect(onChangeCalled).toBe(1);
+      expect(onValueChangeCalled).toBe(1);
+
+      // Verify again that extra events without real changes are ignored.
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled).toBe(1);
+      expect(onValueChangeCalled).toBe(1);
+    });
+
+    it('should not distinguish equal string and number values', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="text"
+            defaultValue="42"
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      // When we set `value` as a property, React updates the "current" value
+      // that it tracks internally. The "current" value is later used to determine
+      // whether a change event is a duplicate or not.
+      // Even though we set value to a number, we still shouldn't get a change
+      // event because as a string, it's equal to the initial value ('42').
+      ref.current.value = 42;
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      expect(ref.current.value).toBe('42');
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+    });
+
+    // See a similar input test above for a detailed description of why.
+    it('should not fire change when setting checked programmatically', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input
+            type="checkbox"
+            defaultChecked={false}
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      // Set the value, updating the "current" value that React tracks to true.
+      ref.current.checked = true;
+      // Under the hood, uncheck the box so that the click will "check" it again.
+      setUntrackedChecked.call(ref.current, false);
+      ref.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      expect(ref.current.checked).toBe(true);
+      // We don't expect a React event because at the time of the click, the real
+      // checked value (true) was the same as the last recorded "current" value
+      // (also true).
+      expect(onChangeCalled).toBe(0);
+      expect(onValueChangeCalled).toBe(0);
+
+      // However, simulating a normal click should fire a React event because the
+      // real value (false) would have changed from the last tracked value (true).
+      ref.current.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled).toBe(1);
+      expect(onValueChangeCalled).toBe(1);
+    });
+
+    it('should only fire change for checked radio button once', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input type="radio" ref={ref} DEPRECATED_flareListeners={listener} />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      setUntrackedChecked.call(ref.current, true);
+      ref.current.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      ref.current.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled).toBe(1);
+      expect(onValueChangeCalled).toBe(1);
+    });
+
+    it('should track radio button cousins in a group', () => {
+      let onChangeCalled1 = 0;
+      let onValueChangeCalled1 = 0;
+      let onChangeCalled2 = 0;
+      let onValueChangeCalled2 = 0;
+      const ref = React.createRef();
+
+      function onChange1(e) {
+        onChangeCalled1++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange1(e) {
+        onValueChangeCalled1++;
+      }
+
+      function onChange2(e) {
+        onChangeCalled2++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange2(e) {
+        onValueChangeCalled2++;
+      }
+
+      function Radio1() {
+        const listener = useInput({
+          onChange: onChange1,
+          onValueChange: onValueChange1,
+        });
+        return (
+          <input
+            type="radio"
+            name="group"
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+
+      function Radio2() {
+        const listener = useInput({
+          onChange: onChange2,
+          onValueChange: onValueChange2,
+        });
+        return (
+          <input
+            type="radio"
+            name="group"
+            DEPRECATED_flareListeners={listener}
+          />
+        );
+      }
+
+      function Component() {
+        return (
+          <div ref={ref}>
+            <Radio1 />
+            <Radio2 />
+          </div>
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      const option1 = ref.current.childNodes[0];
+      const option2 = ref.current.childNodes[1];
+
+      // Select first option.
+      option1.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled1).toBe(1);
+      expect(onValueChangeCalled1).toBe(1);
+      expect(onChangeCalled2).toBe(0);
+      expect(onValueChangeCalled2).toBe(0);
+
+      // Select second option.
+      option2.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled1).toBe(1);
+      expect(onValueChangeCalled1).toBe(1);
+      expect(onChangeCalled2).toBe(1);
+      expect(onValueChangeCalled2).toBe(1);
+
+      // Select the first option.
+      // It should receive the React change event again.
+      option1.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+      expect(onChangeCalled1).toBe(2);
+      expect(onValueChangeCalled1).toBe(2);
+      expect(onChangeCalled2).toBe(1);
+      expect(onValueChangeCalled2).toBe(1);
+    });
+
+    it('should deduplicate input value change events', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      ['text', 'number', 'range'].forEach(type => {
+        onChangeCalled = 0;
+        onValueChangeCalled = 0;
+        function Component() {
+          const listener = useInput({
+            onChange,
+            onValueChange,
+          });
+          return (
+            <input
+              type={type}
+              name="group"
+              ref={ref}
+              DEPRECATED_flareListeners={listener}
+            />
+          );
+        }
+        ReactDOM.render(<Component />, container);
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(ref.current, '42');
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        expect(onChangeCalled).toBe(1);
+        expect(onValueChangeCalled).toBe(1);
+        ReactDOM.unmountComponentAtNode(container);
+
+        onChangeCalled = 0;
+        onValueChangeCalled = 0;
+        function Component2() {
+          const listener = useInput({
+            onChange,
+            onValueChange,
+          });
+          return (
+            <input type={type} ref={ref} DEPRECATED_flareListeners={listener} />
+          );
+        }
+        ReactDOM.render(<Component2 />, container);
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(ref.current, '42');
+        ref.current.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        expect(onChangeCalled).toBe(1);
+        expect(onValueChangeCalled).toBe(1);
+        ReactDOM.unmountComponentAtNode(container);
+
+        onChangeCalled = 0;
+        onValueChangeCalled = 0;
+        function Component3() {
+          const listener = useInput({
+            onChange,
+            onValueChange,
+          });
+          return (
+            <input type={type} ref={ref} DEPRECATED_flareListeners={listener} />
+          );
+        }
+        ReactDOM.render(<Component3 />, container);
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(ref.current, '42');
+        ref.current.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        expect(onChangeCalled).toBe(1);
+        expect(onValueChangeCalled).toBe(1);
+        ReactDOM.unmountComponentAtNode(container);
+      });
+    });
+
+    it('should listen for both change and input events when supported', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input type="range" ref={ref} DEPRECATED_flareListeners={listener} />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      setUntrackedValue.call(ref.current, 10);
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+
+      setUntrackedValue.call(ref.current, 20);
+      ref.current.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+
+      expect(onChangeCalled).toBe(2);
+      expect(onValueChangeCalled).toBe(2);
+    });
+
+    it('should only fire events when the value changes for range inputs', () => {
+      let onChangeCalled = 0;
+      let onValueChangeCalled = 0;
+      const ref = React.createRef();
+
+      function onChange(e) {
+        onChangeCalled++;
+        expect(e.type).toBe('change');
+      }
+
+      function onValueChange(e) {
+        onValueChangeCalled++;
+      }
+
+      function Component() {
+        const listener = useInput({
+          onChange,
+          onValueChange,
+        });
+        return (
+          <input type="range" ref={ref} DEPRECATED_flareListeners={listener} />
+        );
+      }
+      ReactDOM.render(<Component />, container);
+
+      setUntrackedValue.call(ref.current, '40');
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      ref.current.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+
+      setUntrackedValue.call(ref.current, 'foo');
+      ref.current.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      ref.current.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+
+      expect(onChangeCalled).toBe(2);
+      expect(onValueChangeCalled).toBe(2);
+    });
+
+    it('does not crash for nodes with custom value property', () => {
+      let originalCreateElement;
+      // https://github.com/facebook/react/issues/10196
+      try {
+        originalCreateElement = document.createElement;
+        document.createElement = function() {
+          const node = originalCreateElement.apply(this, arguments);
+          Object.defineProperty(node, 'value', {
+            get() {},
+            set() {},
+          });
+          return node;
+        };
+        const ref = React.createRef();
+        const div = document.createElement('div');
+        // Mount
+        ReactDOM.render(
+          <input type="text" ref={ref} responders={<InputResponder />} />,
+          div,
+        );
+        // Update
+        ReactDOM.render(
+          <input type="text" ref={ref} responders={<InputResponder />} />,
+          div,
+        );
+        // Change
+        ref.current.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        // Unmount
+        ReactDOM.unmountComponentAtNode(div);
+      } finally {
+        document.createElement = originalCreateElement;
+      }
+    });
+
+    describe('concurrent mode', () => {
+      it.experimental('text input', () => {
+        const root = ReactDOM.createRoot(container);
+        let input;
+
+        let ops = [];
+
+        function Component({innerRef, onChange, controlledValue}) {
+          const listener = useInput({
+            onChange,
+          });
+          return (
+            <input
+              type="text"
+              ref={innerRef}
+              value={controlledValue}
+              DEPRECATED_flareListeners={listener}
+            />
+          );
+        }
+
+        class ControlledInput extends React.Component {
+          state = {value: 'initial'};
+          onChange = event => this.setState({value: event.target.value});
+          render() {
+            ops.push(`render: ${this.state.value}`);
+            const controlledValue =
+              this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+            return (
+              <Component
+                onChange={this.onChange}
+                innerRef={el => (input = el)}
+                controlledValue={controlledValue}
+              />
+            );
+          }
+        }
+
+        // Initial mount. Test that this is async.
+        root.render(<ControlledInput />);
+        // Should not have flushed yet.
+        expect(ops).toEqual([]);
+        expect(input).toBe(undefined);
+        // Flush callbacks.
+        Scheduler.unstable_flushAll();
+        expect(ops).toEqual(['render: initial']);
+        expect(input.value).toBe('initial');
+
+        ops = [];
+
+        // Trigger a change event.
+        setUntrackedValue.call(input, 'changed');
+        input.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Change should synchronously flush
+        expect(ops).toEqual(['render: changed']);
+        // Value should be the controlled value, not the original one
+        expect(input.value).toBe('changed [!]');
+      });
+
+      it.experimental('checkbox input', () => {
+        const root = ReactDOM.createRoot(container);
+        let input;
+
+        let ops = [];
+
+        function Component({innerRef, onChange, controlledValue}) {
+          const listener = useInput({
+            onChange,
+          });
+          return (
+            <input
+              type="checkbox"
+              ref={innerRef}
+              checked={controlledValue}
+              DEPRECATED_flareListeners={listener}
+            />
+          );
+        }
+
+        class ControlledInput extends React.Component {
+          state = {checked: false};
+          onChange = event => {
+            this.setState({checked: event.target.checked});
+          };
+          render() {
+            ops.push(`render: ${this.state.checked}`);
+            const controlledValue = this.props.reverse
+              ? !this.state.checked
+              : this.state.checked;
+            return (
+              <Component
+                controlledValue={controlledValue}
+                onChange={this.onChange}
+                innerRef={el => (input = el)}
+              />
+            );
+          }
+        }
+
+        // Initial mount. Test that this is async.
+        root.render(<ControlledInput reverse={false} />);
+        // Should not have flushed yet.
+        expect(ops).toEqual([]);
+        expect(input).toBe(undefined);
+        // Flush callbacks.
+        Scheduler.unstable_flushAll();
+        expect(ops).toEqual(['render: false']);
+        expect(input.checked).toBe(false);
+
+        ops = [];
+
+        // Trigger a change event.
+        input.dispatchEvent(
+          new MouseEvent('click', {bubbles: true, cancelable: true}),
+        );
+        // Change should synchronously flush
+        expect(ops).toEqual(['render: true']);
+        expect(input.checked).toBe(true);
+
+        // Now let's make sure we're using the controlled value.
+        root.render(<ControlledInput reverse={true} />);
+        Scheduler.unstable_flushAll();
+
+        ops = [];
+
+        // Trigger another change event.
+        input.dispatchEvent(
+          new MouseEvent('click', {bubbles: true, cancelable: true}),
+        );
+        // Change should synchronously flush
+        expect(ops).toEqual(['render: true']);
+        expect(input.checked).toBe(false);
+      });
+
+      it.experimental('textarea', () => {
+        const root = ReactDOM.createRoot(container);
+        let textarea;
+
+        let ops = [];
+
+        function Component({innerRef, onChange, controlledValue}) {
+          const listener = useInput({
+            onChange,
+          });
+          return (
+            <textarea
+              type="text"
+              ref={innerRef}
+              value={controlledValue}
+              DEPRECATED_flareListeners={listener}
+            />
+          );
+        }
+
+        class ControlledTextarea extends React.Component {
+          state = {value: 'initial'};
+          onChange = event => this.setState({value: event.target.value});
+          render() {
+            ops.push(`render: ${this.state.value}`);
+            const controlledValue =
+              this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+            return (
+              <Component
+                onChange={this.onChange}
+                innerRef={el => (textarea = el)}
+                controlledValue={controlledValue}
+              />
+            );
+          }
+        }
+
+        // Initial mount. Test that this is async.
+        root.render(<ControlledTextarea />);
+        // Should not have flushed yet.
+        expect(ops).toEqual([]);
+        expect(textarea).toBe(undefined);
+        // Flush callbacks.
+        Scheduler.unstable_flushAll();
+        expect(ops).toEqual(['render: initial']);
+        expect(textarea.value).toBe('initial');
+
+        ops = [];
+
+        // Trigger a change event.
+        setUntrackedTextareaValue.call(textarea, 'changed');
+        textarea.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Change should synchronously flush
+        expect(ops).toEqual(['render: changed']);
+        // Value should be the controlled value, not the original one
+        expect(textarea.value).toBe('changed [!]');
+      });
+    });
+  });
+
+  it('expect displayName to show up for event component', () => {
+    expect(InputResponder.displayName).toBe('Input');
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Keyboard-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Keyboard-test.internal.js
new file mode 100644
index 0000000000000..68a69dfba6c52
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Keyboard-test.internal.js
@@ -0,0 +1,478 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let useKeyboard;
+
+import {createEventTarget} from 'dom-event-testing-library';
+
+function initializeModules(hasPointerEvents) {
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  useKeyboard = require('react-interactions/events/keyboard').useKeyboard;
+}
+
+describe('Keyboard responder', () => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  function renderPropagationTest(propagates) {
+    const onClickInner = jest.fn(e => propagates && e.continuePropagation());
+    const onKeyDownInner = jest.fn(e => propagates && e.continuePropagation());
+    const onKeyUpInner = jest.fn(e => propagates && e.continuePropagation());
+    const onClickOuter = jest.fn();
+    const onKeyDownOuter = jest.fn();
+    const onKeyUpOuter = jest.fn();
+    const ref = React.createRef();
+    const Component = () => {
+      const listenerInner = useKeyboard({
+        onClick: onClickInner,
+        onKeyDown: onKeyDownInner,
+        onKeyUp: onKeyUpInner,
+      });
+      const listenerOuter = useKeyboard({
+        onClick: onClickOuter,
+        onKeyDown: onKeyDownOuter,
+        onKeyUp: onKeyUpOuter,
+      });
+      return (
+        <div DEPRECATED_flareListeners={listenerOuter}>
+          <div ref={ref} DEPRECATED_flareListeners={listenerInner} />
+        </div>
+      );
+    };
+    ReactDOM.render(<Component />, container);
+    return {
+      onClickInner,
+      onKeyDownInner,
+      onKeyUpInner,
+      onClickOuter,
+      onKeyDownOuter,
+      onKeyUpOuter,
+      ref,
+    };
+  }
+
+  test('propagates key event when a continuePropagation() is used', () => {
+    const {
+      onClickInner,
+      onKeyDownInner,
+      onKeyUpInner,
+      onClickOuter,
+      onKeyDownOuter,
+      onKeyUpOuter,
+      ref,
+    } = renderPropagationTest(true);
+    const target = createEventTarget(ref.current);
+    target.keydown();
+    expect(onKeyDownInner).toBeCalled();
+    expect(onKeyDownOuter).toBeCalled();
+    target.keyup();
+    expect(onKeyUpInner).toBeCalled();
+    expect(onKeyUpOuter).toBeCalled();
+    target.virtualclick();
+    expect(onClickInner).toBeCalled();
+    expect(onClickOuter).toBeCalled();
+  });
+
+  test('does not propagate key event by default', () => {
+    const {
+      onClickInner,
+      onKeyDownInner,
+      onKeyUpInner,
+      onClickOuter,
+      onKeyDownOuter,
+      onKeyUpOuter,
+      ref,
+    } = renderPropagationTest(false);
+    const target = createEventTarget(ref.current);
+    target.keydown();
+    expect(onKeyDownInner).toBeCalled();
+    expect(onKeyDownOuter).not.toBeCalled();
+    target.keyup();
+    expect(onKeyUpInner).toBeCalled();
+    expect(onKeyUpOuter).not.toBeCalled();
+    target.virtualclick();
+    expect(onClickInner).toBeCalled();
+    expect(onClickOuter).not.toBeCalled();
+  });
+
+  describe('disabled', () => {
+    let onKeyDown, onKeyUp, ref;
+
+    beforeEach(() => {
+      onKeyDown = jest.fn();
+      onKeyUp = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard({disabled: true, onKeyDown, onKeyUp});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    test('does not call callbacks', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown();
+      target.keyup();
+      expect(onKeyDown).not.toBeCalled();
+      expect(onKeyUp).not.toBeCalled();
+    });
+  });
+
+  describe('onClick', () => {
+    let onClick, ref;
+
+    beforeEach(() => {
+      onClick = jest.fn(e => {
+        e.preventDefault();
+      });
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard({onClick});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    // e.g, "Enter" on link
+    test('click is between key events', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      target.virtualclick();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          defaultPrevented: true,
+          metaKey: false,
+          pointerType: 'keyboard',
+          shiftKey: false,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:click',
+        }),
+      );
+    });
+
+    // e.g., "Spacebar" on button
+    test('click is after key events', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      target.virtualclick();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          defaultPrevented: true,
+          metaKey: false,
+          pointerType: 'keyboard',
+          shiftKey: false,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:click',
+        }),
+      );
+    });
+
+    // e.g, generated by a screen-reader
+    test('click is orphan', () => {
+      const target = createEventTarget(ref.current);
+      target.virtualclick();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          defaultPrevented: true,
+          metaKey: false,
+          pointerType: 'keyboard',
+          shiftKey: false,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:click',
+        }),
+      );
+    });
+  });
+
+  describe('onKeyDown', () => {
+    let onKeyDown, ref;
+
+    beforeEach(() => {
+      onKeyDown = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard({onKeyDown});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    test('key down', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Q'});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          defaultPrevented: false,
+          isComposing: false,
+          key: 'Q',
+          metaKey: false,
+          pointerType: 'keyboard',
+          shiftKey: false,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:keydown',
+        }),
+      );
+    });
+
+    test('modified key down', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({
+        key: 'Q',
+        altKey: true,
+        ctrlKey: true,
+        shiftKey: true,
+        metaKey: true,
+      });
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: true,
+          ctrlKey: true,
+          defaultPrevented: false,
+          isComposing: false,
+          key: 'Q',
+          metaKey: true,
+          pointerType: 'keyboard',
+          shiftKey: true,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:keydown',
+        }),
+      );
+    });
+  });
+
+  describe('onKeyUp', () => {
+    let onKeyUp, ref;
+
+    beforeEach(() => {
+      onKeyUp = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard({onKeyUp});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    test('key up', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Q'});
+      target.keyup({key: 'Q'});
+      expect(onKeyUp).toHaveBeenCalledTimes(1);
+      expect(onKeyUp).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          defaultPrevented: false,
+          isComposing: false,
+          key: 'Q',
+          metaKey: false,
+          pointerType: 'keyboard',
+          shiftKey: false,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:keyup',
+        }),
+      );
+    });
+
+    test('modified key up', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Q'});
+      target.keyup({
+        key: 'Q',
+        altKey: true,
+        ctrlKey: true,
+        shiftKey: true,
+        metaKey: true,
+      });
+      expect(onKeyUp).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: true,
+          ctrlKey: true,
+          defaultPrevented: false,
+          isComposing: false,
+          key: 'Q',
+          metaKey: true,
+          pointerType: 'keyboard',
+          shiftKey: true,
+          target: target.node,
+          timeStamp: expect.any(Number),
+          type: 'keyboard:keyup',
+        }),
+      );
+    });
+  });
+
+  describe('preventDefault for onClick', () => {
+    function render(props) {
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard(props);
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      return ref;
+    }
+
+    test('does not prevent native click by default', () => {
+      const onClick = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = render({onClick});
+
+      const target = createEventTarget(ref.current);
+      target.virtualclick({preventDefault});
+
+      expect(preventDefault).not.toBeCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultPrevented: false,
+        }),
+      );
+    });
+
+    test('prevents native behaviour with preventDefault', () => {
+      const onClick = jest.fn(e => e.preventDefault());
+      const preventDefault = jest.fn();
+      const ref = render({onClick});
+
+      const target = createEventTarget(ref.current);
+      target.virtualclick({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultPrevented: true,
+        }),
+      );
+    });
+  });
+
+  describe('preventDefault for onKeyDown', () => {
+    function render(props) {
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard(props);
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      return ref;
+    }
+
+    test('key config matches', () => {
+      const onKeyDown = jest.fn(e => {
+        if (e.key === 'Tab') {
+          e.preventDefault();
+        }
+      });
+      const preventDefault = jest.fn();
+      const preventDefaultClick = jest.fn();
+      const ref = render({onKeyDown});
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault});
+      target.virtualclick({preventDefault: preventDefaultClick});
+
+      expect(preventDefault).toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultPrevented: true,
+          key: 'Tab',
+          type: 'keyboard:keydown',
+        }),
+      );
+    });
+
+    test('key config matches (modifier keys)', () => {
+      const onKeyDown = jest.fn(e => {
+        if (e.key === 'Tab' && e.shiftKey) {
+          e.preventDefault();
+        }
+      });
+      const preventDefault = jest.fn();
+      const ref = render({onKeyDown});
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, shiftKey: true});
+      expect(preventDefault).toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultPrevented: true,
+          key: 'Tab',
+          shiftKey: true,
+          type: 'keyboard:keydown',
+        }),
+      );
+    });
+
+    test('key config does not match (modifier keys)', () => {
+      const onKeyDown = jest.fn(e => {
+        if (e.key === 'Tab' && e.shiftKey) {
+          e.preventDefault();
+        }
+      });
+      const preventDefault = jest.fn();
+      const ref = render({onKeyDown});
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, shiftKey: false});
+      expect(preventDefault).not.toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultPrevented: false,
+          key: 'Tab',
+          shiftKey: false,
+          type: 'keyboard:keydown',
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/MixedResponders-test-internal.js b/packages/react-interactions/events/src/dom/__tests__/MixedResponders-test-internal.js
new file mode 100644
index 0000000000000..aeb265329ed27
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/MixedResponders-test-internal.js
@@ -0,0 +1,336 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {createEventTarget} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let Scheduler;
+
+describe('mixing responders with the heritage event system', () => {
+  let container;
+
+  beforeEach(() => {
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  it('should properly only flush sync once when the event systems are mixed', () => {
+    const useTap = require('react-interactions/events/tap').useTap;
+    const ref = React.createRef();
+    let renderCounts = 0;
+
+    function MyComponent() {
+      const [, updateCounter] = React.useState(0);
+      renderCounts++;
+
+      function handleTap() {
+        updateCounter(count => count + 1);
+      }
+
+      const listener = useTap({
+        onTapEnd: handleTap,
+      });
+
+      return (
+        <div>
+          <button
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+            onClick={() => {
+              updateCounter(count => count + 1);
+            }}>
+            Press me
+          </button>
+        </div>
+      );
+    }
+
+    const newContainer = document.createElement('div');
+    const root = ReactDOM.createRoot(newContainer);
+    document.body.appendChild(newContainer);
+    root.render(<MyComponent />);
+    Scheduler.unstable_flushAll();
+
+    const target = createEventTarget(ref.current);
+    target.pointerdown({timeStamp: 100});
+    target.pointerup({timeStamp: 100});
+    target.click({timeStamp: 100});
+
+    if (__DEV__) {
+      expect(renderCounts).toBe(2);
+    } else {
+      expect(renderCounts).toBe(1);
+    }
+    Scheduler.unstable_flushAll();
+    if (__DEV__) {
+      expect(renderCounts).toBe(4);
+    } else {
+      expect(renderCounts).toBe(2);
+    }
+
+    target.pointerdown({timeStamp: 100});
+    target.pointerup({timeStamp: 100});
+    // Ensure the timeStamp logic works
+    target.click({timeStamp: 101});
+
+    if (__DEV__) {
+      expect(renderCounts).toBe(6);
+    } else {
+      expect(renderCounts).toBe(3);
+    }
+
+    Scheduler.unstable_flushAll();
+    document.body.removeChild(newContainer);
+  });
+
+  it('should properly flush sync when the event systems are mixed with unstable_flushDiscreteUpdates', () => {
+    const useTap = require('react-interactions/events/tap').useTap;
+    const ref = React.createRef();
+    let renderCounts = 0;
+
+    function MyComponent() {
+      const [, updateCounter] = React.useState(0);
+      renderCounts++;
+
+      function handleTap() {
+        updateCounter(count => count + 1);
+      }
+
+      const listener = useTap({
+        onTapEnd: handleTap,
+      });
+
+      return (
+        <div>
+          <button
+            ref={ref}
+            DEPRECATED_flareListeners={listener}
+            onClick={() => {
+              // This should flush synchronously
+              ReactDOM.unstable_flushDiscreteUpdates();
+              updateCounter(count => count + 1);
+            }}>
+            Press me
+          </button>
+        </div>
+      );
+    }
+
+    const newContainer = document.createElement('div');
+    const root = ReactDOM.createRoot(newContainer);
+    document.body.appendChild(newContainer);
+    root.render(<MyComponent />);
+    Scheduler.unstable_flushAll();
+
+    const target = createEventTarget(ref.current);
+    target.pointerdown({timeStamp: 100});
+    target.pointerup({timeStamp: 100});
+
+    if (__DEV__) {
+      expect(renderCounts).toBe(4);
+    } else {
+      expect(renderCounts).toBe(2);
+    }
+    Scheduler.unstable_flushAll();
+    if (__DEV__) {
+      expect(renderCounts).toBe(6);
+    } else {
+      expect(renderCounts).toBe(3);
+    }
+
+    target.pointerdown({timeStamp: 100});
+    // Ensure the timeStamp logic works
+    target.pointerup({timeStamp: 101});
+
+    if (__DEV__) {
+      expect(renderCounts).toBe(8);
+    } else {
+      expect(renderCounts).toBe(4);
+    }
+
+    Scheduler.unstable_flushAll();
+    document.body.removeChild(newContainer);
+  });
+
+  it(
+    'should only flush before outermost discrete event handler when mixing ' +
+      'event systems',
+    async () => {
+      const {useState} = React;
+      const useTap = require('react-interactions/events/tap').useTap;
+
+      const button = React.createRef();
+
+      const ops = [];
+
+      function MyComponent() {
+        const [pressesCount, updatePressesCount] = useState(0);
+        const [clicksCount, updateClicksCount] = useState(0);
+
+        function handleTap() {
+          // This dispatches a synchronous, discrete event in the legacy event
+          // system. However, because it's nested inside the new event system,
+          // its updates should not flush until the end of the outer handler.
+          const target = createEventTarget(button.current);
+          target.click();
+          // Text context should not have changed
+          ops.push(newContainer.textContent);
+          updatePressesCount(pressesCount + 1);
+        }
+
+        const tap = useTap({
+          onTapEnd: handleTap,
+        });
+
+        return (
+          <div>
+            <button
+              DEPRECATED_flareListeners={tap}
+              ref={button}
+              onClick={() => updateClicksCount(clicksCount + 1)}>
+              Presses: {pressesCount}, Clicks: {clicksCount}
+            </button>
+          </div>
+        );
+      }
+
+      const newContainer = document.createElement('div');
+      document.body.appendChild(newContainer);
+      const root = ReactDOM.createRoot(newContainer);
+
+      root.render(<MyComponent />);
+      Scheduler.unstable_flushAll();
+      expect(newContainer.textContent).toEqual('Presses: 0, Clicks: 0');
+
+      const target = createEventTarget(button.current);
+      target.pointerdown({timeStamp: 100});
+      target.pointerup({timeStamp: 100});
+
+      Scheduler.unstable_flushAll();
+      expect(newContainer.textContent).toEqual('Presses: 1, Clicks: 1');
+
+      expect(ops).toEqual(['Presses: 0, Clicks: 0']);
+    },
+  );
+
+  describe('mixing the Input and Press repsonders', () => {
+    it('is async for non-input events', () => {
+      ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+      const useTap = require('react-interactions/events/tap').useTap;
+      const useInput = require('react-interactions/events/input').useInput;
+      const root = ReactDOM.createRoot(container);
+      let input;
+
+      let ops = [];
+
+      function Component({innerRef, onChange, controlledValue, listeners}) {
+        const inputListener = useInput({onChange});
+        return (
+          <input
+            type="text"
+            ref={innerRef}
+            value={controlledValue}
+            DEPRECATED_flareListeners={[inputListener, listeners]}
+          />
+        );
+      }
+
+      function PressWrapper({innerRef, onTap, onChange, controlledValue}) {
+        const tap = useTap({
+          onTapEnd: onTap,
+        });
+        return (
+          <Component
+            onChange={onChange}
+            innerRef={el => (input = el)}
+            controlledValue={controlledValue}
+            listeners={tap}
+          />
+        );
+      }
+
+      class ControlledInput extends React.Component {
+        state = {value: 'initial'};
+        onChange = event => this.setState({value: event.target.value});
+        reset = () => {
+          this.setState({value: ''});
+        };
+        render() {
+          ops.push(`render: ${this.state.value}`);
+          const controlledValue =
+            this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+          return (
+            <PressWrapper
+              onTap={this.reset}
+              onChange={this.onChange}
+              innerRef={el => (input = el)}
+              controlledValue={controlledValue}
+            />
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledInput />);
+      // Should not have flushed yet.
+      expect(ops).toEqual([]);
+      expect(input).toBe(undefined);
+      // Flush callbacks.
+      Scheduler.unstable_flushAll();
+      expect(ops).toEqual(['render: initial']);
+      expect(input.value).toBe('initial');
+
+      ops = [];
+
+      // Trigger a click event
+      input.dispatchEvent(
+        new MouseEvent('mousedown', {
+          bubbles: true,
+          cancelable: true,
+          buttons: 1,
+        }),
+      );
+      input.dispatchEvent(
+        new MouseEvent('mouseup', {
+          bubbles: true,
+          cancelable: true,
+          buttons: 0,
+        }),
+      );
+      // Nothing should have changed
+      expect(ops).toEqual([]);
+      expect(input.value).toBe('initial');
+
+      // Flush callbacks.
+      Scheduler.unstable_flushAll();
+      // Now the click update has flushed.
+      expect(ops).toEqual(['render: ']);
+      expect(input.value).toBe('');
+    });
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js
new file mode 100644
index 0000000000000..6987280090aae
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js
@@ -0,0 +1,698 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonType,
+  buttonsType,
+  createEventTarget,
+  describeWithPointerEvent,
+  resetActivePointers,
+  setPointerEvent,
+} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let usePress;
+
+function initializeModules(hasPointerEvents) {
+  jest.resetModules();
+  setPointerEvent(hasPointerEvents);
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  usePress = require('react-interactions/events/press').usePress;
+}
+
+const pointerTypesTable = [['mouse'], ['touch']];
+
+describeWithPointerEvent('Press responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+    resetActivePointers();
+  });
+
+  describe('disabled', () => {
+    let onPressStart, onPressChange, onPressMove, onPressEnd, onPress, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      onPressChange = jest.fn();
+      onPressMove = jest.fn();
+      onPressEnd = jest.fn();
+      onPress = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          disabled: true,
+          onPressStart,
+          onPressChange,
+          onPressMove,
+          onPressEnd,
+          onPress,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    test('does not call callbacks for pointers', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup();
+      expect(onPressStart).not.toBeCalled();
+      expect(onPressChange).not.toBeCalled();
+      expect(onPressMove).not.toBeCalled();
+      expect(onPressEnd).not.toBeCalled();
+      expect(onPress).not.toBeCalled();
+    });
+
+    test('does not call callbacks for keyboard', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      expect(onPressStart).not.toBeCalled();
+      expect(onPressChange).not.toBeCalled();
+      expect(onPressMove).not.toBeCalled();
+      expect(onPressEnd).not.toBeCalled();
+      expect(onPress).not.toBeCalled();
+    });
+  });
+
+  describe('onPressStart', () => {
+    let onPressStart, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressStart,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer down: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        expect(onPressStart).toHaveBeenCalledTimes(1);
+        expect(onPressStart).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressstart'}),
+        );
+      },
+    );
+
+    it('is called after middle-button pointer down', () => {
+      const target = createEventTarget(ref.current);
+      const pointerType = 'mouse';
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('is called after virtual middle-button pointer down', () => {
+      const target = createEventTarget(ref.current);
+      const pointerType = 'mouse';
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('ignores any events not caused by primary/middle-click or touch/pen contact', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({buttons: buttonsType.secondary});
+      target.pointerup({buttons: buttonsType.secondary});
+      target.pointerdown({buttons: buttonsType.eraser});
+      target.pointerup({buttons: buttonsType.eraser});
+      expect(onPressStart).toHaveBeenCalledTimes(0);
+    });
+
+    it('is called once after "keydown" events for Enter', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keydown({key: 'Enter'});
+      target.keydown({key: 'Enter'});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressstart'}),
+      );
+    });
+
+    it('is called once after "keydown" events for Spacebar', () => {
+      const target = createEventTarget(ref.current);
+      const preventDefault = jest.fn();
+      target.keydown({key: ' ', preventDefault});
+      expect(preventDefault).toBeCalled();
+      target.keydown({key: ' ', preventDefault});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('is not called after "keydown" for other keys', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'a'});
+      expect(onPressStart).not.toBeCalled();
+    });
+  });
+
+  describe('onPressEnd', () => {
+    let onPressEnd, ref;
+
+    beforeEach(() => {
+      onPressEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        target.pointerup({pointerType});
+        expect(onPressEnd).toHaveBeenCalledTimes(1);
+        expect(onPressEnd).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressend'}),
+        );
+      },
+    );
+
+    it('is called after middle-button pointer up', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressend',
+        }),
+      );
+    });
+
+    it('is called after virtual middle-button pointer up', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressend',
+        }),
+      );
+    });
+
+    it('is called after "keyup" event for Enter', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      // click occurs before keyup
+      target.virtualclick();
+      target.keyup({key: 'Enter'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
+      );
+    });
+
+    it('is called after "keyup" event for Spacebar', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: ' '});
+      target.keyup({key: ' '});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
+      );
+    });
+
+    it('is not called after "keyup" event for other keys', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'a'});
+      expect(onPressEnd).not.toBeCalled();
+    });
+
+    it('is called with keyboard modifiers', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({
+        key: 'Enter',
+        metaKey: true,
+        ctrlKey: true,
+        altKey: true,
+        shiftKey: true,
+      });
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'pressend',
+          metaKey: true,
+          ctrlKey: true,
+          altKey: true,
+          shiftKey: true,
+        }),
+      );
+    });
+  });
+
+  describe('onPressChange', () => {
+    let onPressChange, ref;
+
+    beforeEach(() => {
+      onPressChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressChange,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer down and up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        expect(onPressChange).toHaveBeenCalledTimes(1);
+        expect(onPressChange).toHaveBeenCalledWith(true);
+        target.pointerup({pointerType});
+        expect(onPressChange).toHaveBeenCalledTimes(2);
+        expect(onPressChange).toHaveBeenCalledWith(false);
+      },
+    );
+
+    it('is called after valid "keydown" and "keyup" events', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      expect(onPressChange).toHaveBeenCalledTimes(1);
+      expect(onPressChange).toHaveBeenCalledWith(true);
+      target.keyup({key: 'Enter'});
+      expect(onPressChange).toHaveBeenCalledTimes(2);
+      expect(onPressChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('onPress', () => {
+    let onPress, ref;
+
+    beforeEach(() => {
+      onPress = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPress,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      ref.current.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: 100,
+      });
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        target.pointerup({pointerType, x: 10, y: 10});
+        expect(onPress).toHaveBeenCalledTimes(1);
+        expect(onPress).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'press'}),
+        );
+      },
+    );
+
+    it('is not called after middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('is not called after virtual middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('is called after valid "keyup" event', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'press'}),
+      );
+    });
+
+    it('is not called after invalid "keyup" event', () => {
+      const inputRef = React.createRef();
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <input ref={inputRef} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      const target = createEventTarget(inputRef.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      target.keydown({key: ' '});
+      target.keyup({key: ' '});
+      expect(onPress).not.toBeCalled();
+    });
+
+    it('is called with modifier keys', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({metaKey: true, pointerType: 'mouse'});
+      target.pointerup({metaKey: true, pointerType: 'mouse'});
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'mouse',
+          type: 'press',
+          metaKey: true,
+        }),
+      );
+    });
+
+    it('is called once after virtual screen reader "click" event', () => {
+      const target = createEventTarget(ref.current);
+      const preventDefault = jest.fn();
+      target.virtualclick({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'press',
+        }),
+      );
+    });
+  });
+
+  describe('onPressMove', () => {
+    let onPressMove, ref;
+
+    beforeEach(() => {
+      onPressMove = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressMove,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      ref.current.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: 100,
+      });
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer move: %s',
+      pointerType => {
+        const node = ref.current;
+        const target = createEventTarget(node);
+        target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+        target.pointerdown({pointerType});
+        target.pointermove({pointerType, x: 10, y: 10});
+        target.pointermove({pointerType, x: 20, y: 20});
+        expect(onPressMove).toHaveBeenCalledTimes(2);
+        expect(onPressMove).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressmove'}),
+        );
+      },
+    );
+
+    it('is not called if pointer move occurs during keyboard press', () => {
+      const target = createEventTarget(ref.current);
+      target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+      target.keydown({key: 'Enter'});
+      target.pointermove({
+        buttons: buttonsType.none,
+        pointerType: 'mouse',
+        x: 10,
+        y: 10,
+      });
+      expect(onPressMove).not.toBeCalled();
+    });
+  });
+
+  describe('link components', () => {
+    it('prevents native behavior by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('prevents native behaviour for keyboard events by default', () => {
+      const onPress = jest.fn();
+      const preventDefaultClick = jest.fn();
+      const preventDefaultKeyDown = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter', preventDefault: preventDefaultKeyDown});
+      target.virtualclick({preventDefault: preventDefaultClick});
+      target.keyup({key: 'Enter'});
+      expect(preventDefaultKeyDown).toBeCalled();
+      expect(preventDefaultClick).toBeCalled();
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('deeply prevents native behaviour by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const buttonRef = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return (
+          <a href="#">
+            <button ref={buttonRef} DEPRECATED_flareListeners={listener} />
+          </a>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(buttonRef.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+    });
+
+    it('prevents native behaviour by default with nested elements', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return (
+          <a href="#" DEPRECATED_flareListeners={listener}>
+            <div ref={ref} />
+          </a>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('uses native behaviour for interactions with modifier keys', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      ['metaKey', 'ctrlKey', 'shiftKey'].forEach(modifierKey => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({[modifierKey]: true});
+        target.pointerup({[modifierKey]: true, preventDefault});
+        expect(preventDefault).not.toBeCalled();
+        expect(onPress).toHaveBeenCalledWith(
+          expect.objectContaining({defaultPrevented: false}),
+        );
+      });
+    });
+
+    it('uses native behaviour for pointer events if preventDefault is false', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress, preventDefault: false});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).not.toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: false}),
+      );
+    });
+
+    it('uses native behaviour for keyboard events if preventDefault is false', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress, preventDefault: false});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.virtualclick({preventDefault});
+      target.keyup({key: 'Enter'});
+      expect(preventDefault).not.toBeCalled();
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: false}),
+      );
+    });
+  });
+
+  it('should not trigger an invariant in addRootEventTypes()', () => {
+    const ref = React.createRef();
+
+    const Component = () => {
+      const listener = usePress();
+      return <button ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    target.pointerdown();
+    target.pointermove();
+    target.pointerup();
+    target.pointerdown();
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js
new file mode 100644
index 0000000000000..52969f0e68cff
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js
@@ -0,0 +1,1170 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonType,
+  buttonsType,
+  createEventTarget,
+  resetActivePointers,
+  setPointerEvent,
+} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let PressResponder;
+let usePress;
+
+function initializeModules(hasPointerEvents) {
+  jest.resetModules();
+  setPointerEvent(hasPointerEvents);
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  PressResponder = require('react-interactions/events/press-legacy')
+    .PressResponder;
+  usePress = require('react-interactions/events/press-legacy').usePress;
+}
+
+function removePressMoveStrings(eventString) {
+  if (eventString === 'onPressMove') {
+    return false;
+  }
+  return true;
+}
+
+const forcePointerEvents = true;
+const environmentTable = [[forcePointerEvents], [!forcePointerEvents]];
+
+const pointerTypesTable = [['mouse'], ['touch']];
+
+describe.each(environmentTable)('Press responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+    resetActivePointers();
+  });
+
+  describe('disabled', () => {
+    let onPressStart, onPress, onPressEnd, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      onPress = jest.fn();
+      onPressEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          disabled: true,
+          onPressStart,
+          onPress,
+          onPressEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it('does not call callbacks', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup();
+      expect(onPressStart).not.toBeCalled();
+      expect(onPress).not.toBeCalled();
+      expect(onPressEnd).not.toBeCalled();
+    });
+  });
+
+  describe('onPressStart', () => {
+    let onPressStart, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressStart,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer down: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        expect(onPressStart).toHaveBeenCalledTimes(1);
+        expect(onPressStart).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressstart'}),
+        );
+      },
+    );
+
+    it('is called after middle-button pointer down', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('is not called after pointer move following middle-button press', () => {
+      const node = ref.current;
+      const target = createEventTarget(node);
+      target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      target.pointerhover({x: 110, y: 110});
+      target.pointerhover({x: 50, y: 50});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+    });
+
+    it('ignores any events not caused by primary/middle-click or touch/pen contact', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({buttons: buttonsType.secondary});
+      target.pointerup({buttons: buttonsType.secondary});
+      target.pointerdown({buttons: buttonsType.eraser});
+      target.pointerup({buttons: buttonsType.eraser});
+      expect(onPressStart).toHaveBeenCalledTimes(0);
+    });
+
+    it('is called once after "keydown" events for Enter', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keydown({key: 'Enter'});
+      target.keydown({key: 'Enter'});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressstart'}),
+      );
+    });
+
+    it('is called once after "keydown" events for Spacebar', () => {
+      const target = createEventTarget(ref.current);
+      const preventDefault = jest.fn();
+      target.keydown({key: ' ', preventDefault});
+      expect(preventDefault).toBeCalled();
+      target.keydown({key: ' ', preventDefault});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('is not called after "keydown" for other keys', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'a'});
+      expect(onPressStart).not.toBeCalled();
+    });
+  });
+
+  describe('onPressEnd', () => {
+    let onPressEnd, ref;
+
+    beforeEach(() => {
+      onPressEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        target.pointerup({pointerType});
+        expect(onPressEnd).toHaveBeenCalledTimes(1);
+        expect(onPressEnd).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressend'}),
+        );
+      },
+    );
+
+    it('is called after middle-button pointer up', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressend',
+        }),
+      );
+    });
+
+    it('is called after "keyup" event for Enter', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      // click occurs before keyup
+      target.click();
+      target.keyup({key: 'Enter'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
+      );
+    });
+
+    it('is called after "keyup" event for Spacebar', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: ' '});
+      target.keyup({key: ' '});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'pressend'}),
+      );
+    });
+
+    it('is not called after "keyup" event for other keys', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'a'});
+      expect(onPressEnd).not.toBeCalled();
+    });
+
+    it('is called with keyboard modifiers', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({
+        key: 'Enter',
+        metaKey: true,
+        ctrlKey: true,
+        altKey: true,
+        shiftKey: true,
+      });
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'pressend',
+          metaKey: true,
+          ctrlKey: true,
+          altKey: true,
+          shiftKey: true,
+        }),
+      );
+    });
+  });
+
+  describe('onPressChange', () => {
+    let onPressChange, ref;
+
+    beforeEach(() => {
+      onPressChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressChange,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer down and up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        expect(onPressChange).toHaveBeenCalledTimes(1);
+        expect(onPressChange).toHaveBeenCalledWith(true);
+        target.pointerup({pointerType});
+        expect(onPressChange).toHaveBeenCalledTimes(2);
+        expect(onPressChange).toHaveBeenCalledWith(false);
+      },
+    );
+
+    it('is called after valid "keydown" and "keyup" events', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      expect(onPressChange).toHaveBeenCalledTimes(1);
+      expect(onPressChange).toHaveBeenCalledWith(true);
+      target.keyup({key: 'Enter'});
+      expect(onPressChange).toHaveBeenCalledTimes(2);
+      expect(onPressChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('onPress', () => {
+    let onPress, ref;
+
+    beforeEach(() => {
+      onPress = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPress,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      ref.current.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: 100,
+      });
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer up: %s',
+      pointerType => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({pointerType});
+        target.pointerup({pointerType, x: 10, y: 10});
+        expect(onPress).toHaveBeenCalledTimes(1);
+        expect(onPress).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'press'}),
+        );
+      },
+    );
+
+    it('is not called after middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        buttons: buttonsType.auxiliary,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('is not called after virtual middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('is called after valid "keyup" event', () => {
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType: 'keyboard', type: 'press'}),
+      );
+    });
+
+    it('is not called after invalid "keyup" event', () => {
+      const inputRef = React.createRef();
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <input ref={inputRef} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      const target = createEventTarget(inputRef.current);
+      target.keydown({key: 'Enter'});
+      target.keyup({key: 'Enter'});
+      target.keydown({key: ' '});
+      target.keyup({key: ' '});
+      expect(onPress).not.toBeCalled();
+    });
+
+    it('is called with modifier keys', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({metaKey: true, pointerType: 'mouse'});
+      target.pointerup({metaKey: true, pointerType: 'mouse'});
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'mouse',
+          type: 'press',
+          metaKey: true,
+        }),
+      );
+    });
+
+    it('is called if target rect is not right but the target is (for mouse events)', () => {
+      const buttonRef = React.createRef();
+      const divRef = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return (
+          <div ref={divRef} DEPRECATED_flareListeners={listener}>
+            <button ref={buttonRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(divRef.current);
+      target.setBoundingClientRect({x: 0, y: 0, width: 0, height: 0});
+      const innerTarget = createEventTarget(buttonRef.current);
+      innerTarget.pointerdown({pointerType: 'mouse'});
+      innerTarget.pointerup({pointerType: 'mouse'});
+      expect(onPress).toBeCalled();
+    });
+
+    it('is called once after virtual screen reader "click" event', () => {
+      const target = createEventTarget(ref.current);
+      const preventDefault = jest.fn();
+      target.virtualclick({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'press',
+        }),
+      );
+    });
+  });
+
+  describe('onPressMove', () => {
+    let onPressMove, ref;
+
+    beforeEach(() => {
+      onPressMove = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = usePress({
+          onPressMove,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      ref.current.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: 100,
+      });
+      document.elementFromPoint = () => ref.current;
+    });
+
+    it.each(pointerTypesTable)(
+      'is called after pointer move: %s',
+      pointerType => {
+        const node = ref.current;
+        const target = createEventTarget(node);
+        target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+        target.pointerdown({pointerType});
+        target.pointermove({pointerType, x: 10, y: 10});
+        target.pointermove({pointerType, x: 20, y: 20});
+        expect(onPressMove).toHaveBeenCalledTimes(2);
+        expect(onPressMove).toHaveBeenCalledWith(
+          expect.objectContaining({pointerType, type: 'pressmove'}),
+        );
+      },
+    );
+
+    it('is not called if pointer move occurs during keyboard press', () => {
+      const target = createEventTarget(ref.current);
+      target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+      target.keydown({key: 'Enter'});
+      target.pointermove({
+        buttons: buttonsType.none,
+        pointerType: 'mouse',
+        x: 10,
+        y: 10,
+      });
+      expect(onPressMove).not.toBeCalled();
+    });
+  });
+
+  describe.each(pointerTypesTable)('press with movement: %s', pointerType => {
+    let events, ref, outerRef;
+
+    beforeEach(() => {
+      events = [];
+      ref = React.createRef();
+      outerRef = React.createRef();
+      const createEventHandler = msg => () => {
+        events.push(msg);
+      };
+      const Component = () => {
+        const listener = usePress({
+          onPress: createEventHandler('onPress'),
+          onPressChange: createEventHandler('onPressChange'),
+          onPressMove: createEventHandler('onPressMove'),
+          onPressStart: createEventHandler('onPressStart'),
+          onPressEnd: createEventHandler('onPressEnd'),
+        });
+        return (
+          <div ref={outerRef}>
+            <div ref={ref} DEPRECATED_flareListeners={listener} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    const rectMock = {width: 100, height: 100, x: 50, y: 50};
+    const pressRectOffset = 20;
+    const coordinatesInside = {
+      x: rectMock.x - pressRectOffset,
+      y: rectMock.y - pressRectOffset,
+    };
+    const coordinatesOutside = {
+      x: rectMock.x - pressRectOffset - 1,
+      y: rectMock.y - pressRectOffset - 1,
+    };
+
+    describe('within bounds of hit rect', () => {
+      /** ┌──────────────────┐
+       *  │  ┌────────────┐  │
+       *  │  │ VisualRect │  │
+       *  │  └────────────┘  │
+       *  │     HitRect    X │ <= Move to X and release
+       *  └──────────────────┘
+       */
+      it('"onPress*" events are called immediately', () => {
+        const target = createEventTarget(ref.current);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        target.pointermove({pointerType, ...coordinatesInside});
+        target.pointerup({pointerType, ...coordinatesInside});
+        expect(events).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressMove',
+          'onPressEnd',
+          'onPressChange',
+          'onPress',
+        ]);
+      });
+
+      it('"onPress*" events are correctly called with target change', () => {
+        const target = createEventTarget(ref.current);
+        const outerTarget = createEventTarget(outerRef.current);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        target.pointermove({pointerType, ...coordinatesInside});
+        // TODO: this sequence may differ in the future between PointerEvent and mouse fallback when
+        // use 'setPointerCapture'.
+        if (pointerType === 'touch') {
+          target.pointermove({pointerType, ...coordinatesOutside});
+        } else {
+          outerTarget.pointermove({pointerType, ...coordinatesOutside});
+        }
+        target.pointermove({pointerType, ...coordinatesInside});
+        target.pointerup({pointerType, ...coordinatesInside});
+
+        expect(events.filter(removePressMoveStrings)).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressEnd',
+          'onPressChange',
+          'onPressStart',
+          'onPressChange',
+          'onPressEnd',
+          'onPressChange',
+          'onPress',
+        ]);
+      });
+
+      it('press retention offset can be configured', () => {
+        let localEvents = [];
+        const localRef = React.createRef();
+        const createEventHandler = msg => () => {
+          localEvents.push(msg);
+        };
+        const pressRetentionOffset = {top: 40, bottom: 40, left: 40, right: 40};
+
+        const Component = () => {
+          const listener = usePress({
+            onPress: createEventHandler('onPress'),
+            onPressChange: createEventHandler('onPressChange'),
+            onPressMove: createEventHandler('onPressMove'),
+            onPressStart: createEventHandler('onPressStart'),
+            onPressEnd: createEventHandler('onPressEnd'),
+            pressRetentionOffset,
+          });
+          return <div ref={localRef} DEPRECATED_flareListeners={listener} />;
+        };
+        ReactDOM.render(<Component />, container);
+
+        const target = createEventTarget(localRef.current);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        target.pointermove({
+          pointerType,
+          x: rectMock.x,
+          y: rectMock.y,
+        });
+        target.pointerup({pointerType, ...coordinatesInside});
+        expect(localEvents).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressMove',
+          'onPressEnd',
+          'onPressChange',
+          'onPress',
+        ]);
+      });
+
+      it('responder region accounts for decrease in element dimensions', () => {
+        const target = createEventTarget(ref.current);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        // emulate smaller dimensions change on activation
+        target.setBoundingClientRect({width: 80, height: 80, y: 60, x: 60});
+        const coordinates = {x: rectMock.x, y: rectMock.y};
+        // move to an area within the pre-activation region
+        target.pointermove({pointerType, ...coordinates});
+        target.pointerup({pointerType, ...coordinates});
+        expect(events).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressMove',
+          'onPressEnd',
+          'onPressChange',
+          'onPress',
+        ]);
+      });
+
+      it('responder region accounts for increase in element dimensions', () => {
+        const target = createEventTarget(ref.current);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        // emulate larger dimensions change on activation
+        target.setBoundingClientRect({width: 200, height: 200, y: 0, x: 0});
+        const coordinates = {x: rectMock.x - 50, y: rectMock.y - 50};
+        // move to an area within the post-activation region
+        target.pointermove({pointerType, ...coordinates});
+        target.pointerup({pointerType, ...coordinates});
+        expect(events).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressMove',
+          'onPressEnd',
+          'onPressChange',
+          'onPress',
+        ]);
+      });
+    });
+
+    describe('beyond bounds of hit rect', () => {
+      /** ┌──────────────────┐
+       *  │  ┌────────────┐  │
+       *  │  │ VisualRect │  │
+       *  │  └────────────┘  │
+       *  │     HitRect      │
+       *  └──────────────────┘
+       *                   X   <= Move to X and release
+       */
+      it('"onPress" is not called on release', () => {
+        const target = createEventTarget(ref.current);
+        const targetContainer = createEventTarget(container);
+        target.setBoundingClientRect(rectMock);
+        target.pointerdown({pointerType});
+        target.pointermove({pointerType, ...coordinatesInside});
+        if (pointerType === 'mouse') {
+          // TODO: use setPointerCapture so this is only true for fallback mouse events.
+          targetContainer.pointermove({pointerType, ...coordinatesOutside});
+          targetContainer.pointerup({pointerType, ...coordinatesOutside});
+        } else {
+          target.pointermove({pointerType, ...coordinatesOutside});
+          target.pointerup({pointerType, ...coordinatesOutside});
+        }
+        expect(events.filter(removePressMoveStrings)).toEqual([
+          'onPressStart',
+          'onPressChange',
+          'onPressEnd',
+          'onPressChange',
+        ]);
+      });
+    });
+
+    it('"onPress" is called on re-entry to hit rect', () => {
+      const target = createEventTarget(ref.current);
+      const targetContainer = createEventTarget(container);
+      target.setBoundingClientRect(rectMock);
+      target.pointerdown({pointerType});
+      target.pointermove({pointerType, ...coordinatesInside});
+      if (pointerType === 'mouse') {
+        // TODO: use setPointerCapture so this is only true for fallback mouse events.
+        targetContainer.pointermove({pointerType, ...coordinatesOutside});
+      } else {
+        target.pointermove({pointerType, ...coordinatesOutside});
+      }
+      target.pointermove({pointerType, ...coordinatesInside});
+      target.pointerup({pointerType, ...coordinatesInside});
+
+      expect(events).toEqual([
+        'onPressStart',
+        'onPressChange',
+        'onPressMove',
+        'onPressEnd',
+        'onPressChange',
+        'onPressStart',
+        'onPressChange',
+        'onPressEnd',
+        'onPressChange',
+        'onPress',
+      ]);
+    });
+  });
+
+  describe('nested responders', () => {
+    if (hasPointerEvents) {
+      it('dispatch events in the correct order', () => {
+        const events = [];
+        const ref = React.createRef();
+        const createEventHandler = msg => () => {
+          events.push(msg);
+        };
+
+        const Inner = () => {
+          const listener = usePress({
+            onPress: createEventHandler('inner: onPress'),
+            onPressChange: createEventHandler('inner: onPressChange'),
+            onPressMove: createEventHandler('inner: onPressMove'),
+            onPressStart: createEventHandler('inner: onPressStart'),
+            onPressEnd: createEventHandler('inner: onPressEnd'),
+          });
+          return (
+            <div
+              ref={ref}
+              DEPRECATED_flareListeners={listener}
+              onPointerDown={createEventHandler('pointerdown')}
+              onPointerUp={createEventHandler('pointerup')}
+              onKeyDown={createEventHandler('keydown')}
+              onKeyUp={createEventHandler('keyup')}
+            />
+          );
+        };
+
+        const Outer = () => {
+          const listener = usePress({
+            onPress: createEventHandler('outer: onPress'),
+            onPressChange: createEventHandler('outer: onPressChange'),
+            onPressMove: createEventHandler('outer: onPressMove'),
+            onPressStart: createEventHandler('outer: onPressStart'),
+            onPressEnd: createEventHandler('outer: onPressEnd'),
+          });
+          return (
+            <div DEPRECATED_flareListeners={listener}>
+              <Inner />
+            </div>
+          );
+        };
+        ReactDOM.render(<Outer />, container);
+
+        const target = createEventTarget(ref.current);
+        target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+        target.pointerdown();
+        target.pointerup();
+        expect(events).toEqual([
+          'inner: onPressStart',
+          'inner: onPressChange',
+          'pointerdown',
+          'inner: onPressEnd',
+          'inner: onPressChange',
+          'inner: onPress',
+          'pointerup',
+        ]);
+      });
+    }
+
+    describe('correctly not propagate', () => {
+      it('for onPress', () => {
+        const ref = React.createRef();
+        const onPress = jest.fn();
+
+        const Inner = () => {
+          const listener = usePress({onPress});
+          return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+        };
+
+        const Outer = () => {
+          const listener = usePress({onPress});
+          return (
+            <div DEPRECATED_flareListeners={listener}>
+              <Inner />
+            </div>
+          );
+        };
+        ReactDOM.render(<Outer />, container);
+
+        const target = createEventTarget(ref.current);
+        target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
+        target.pointerdown();
+        target.pointerup();
+        expect(onPress).toHaveBeenCalledTimes(1);
+      });
+
+      it('for onPressStart/onPressEnd', () => {
+        const ref = React.createRef();
+        const onPressStart = jest.fn();
+        const onPressEnd = jest.fn();
+
+        const Inner = () => {
+          const listener = usePress({onPressStart, onPressEnd});
+          return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+        };
+
+        const Outer = () => {
+          const listener = usePress({onPressStart, onPressEnd});
+          return (
+            <div DEPRECATED_flareListeners={listener}>
+              <Inner />
+            </div>
+          );
+        };
+        ReactDOM.render(<Outer />, container);
+
+        const target = createEventTarget(ref.current);
+        target.pointerdown();
+        expect(onPressStart).toHaveBeenCalledTimes(1);
+        expect(onPressEnd).toHaveBeenCalledTimes(0);
+        target.pointerup();
+        expect(onPressStart).toHaveBeenCalledTimes(1);
+        expect(onPressEnd).toHaveBeenCalledTimes(1);
+      });
+
+      it('for onPressChange', () => {
+        const ref = React.createRef();
+        const onPressChange = jest.fn();
+
+        const Inner = () => {
+          const listener = usePress({onPressChange});
+          return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+        };
+
+        const Outer = () => {
+          const listener = usePress({onPressChange});
+          return (
+            <div DEPRECATED_flareListeners={listener}>
+              <Inner />
+            </div>
+          );
+        };
+        ReactDOM.render(<Outer />, container);
+
+        const target = createEventTarget(ref.current);
+        target.pointerdown();
+        expect(onPressChange).toHaveBeenCalledTimes(1);
+        target.pointerup();
+        expect(onPressChange).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+
+  describe('link components', () => {
+    it('prevents native behavior by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('prevents native behaviour for keyboard events by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter', preventDefault});
+      target.keyup({key: 'Enter'});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('deeply prevents native behaviour by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const buttonRef = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return (
+          <a href="#">
+            <button ref={buttonRef} DEPRECATED_flareListeners={listener} />
+          </a>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(buttonRef.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+    });
+
+    it('prevents native behaviour by default with nested elements', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return (
+          <a href="#" DEPRECATED_flareListeners={listener}>
+            <div ref={ref} />
+          </a>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    it('uses native behaviour for interactions with modifier keys', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      ['metaKey', 'ctrlKey', 'shiftKey'].forEach(modifierKey => {
+        const target = createEventTarget(ref.current);
+        target.pointerdown({[modifierKey]: true});
+        target.pointerup({[modifierKey]: true, preventDefault});
+        expect(preventDefault).not.toBeCalled();
+        expect(onPress).toHaveBeenCalledWith(
+          expect.objectContaining({defaultPrevented: false}),
+        );
+      });
+    });
+
+    it('uses native behaviour for pointer events if preventDefault is false', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress, preventDefault: false});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).not.toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: false}),
+      );
+    });
+
+    it('uses native behaviour for keyboard events if preventDefault is false', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPress, preventDefault: false});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Enter'});
+      target.click({preventDefault});
+      target.keyup({key: 'Enter'});
+      expect(preventDefault).not.toBeCalled();
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: false}),
+      );
+    });
+  });
+
+  describe('responder cancellation', () => {
+    it.each(pointerTypesTable)('ends on pointer cancel', pointerType => {
+      const onPressEnd = jest.fn();
+      const ref = React.createRef();
+
+      const Component = () => {
+        const listener = usePress({onPressEnd});
+        return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType});
+      target.pointercancel({pointerType});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('does end on "scroll" to document (not mouse)', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+
+    const Component = () => {
+      const listener = usePress({onPressEnd});
+      return <a href="#" ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    const targetDocument = createEventTarget(document);
+    target.pointerdown({pointerType: 'touch'});
+    targetDocument.scroll();
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does end on "scroll" to a parent container (not mouse)', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+    const containerRef = React.createRef();
+
+    const Component = () => {
+      const listener = usePress({onPressEnd});
+      return (
+        <div ref={containerRef}>
+          <a ref={ref} DEPRECATED_flareListeners={listener} />
+        </div>
+      );
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    const targetContainer = createEventTarget(containerRef.current);
+    target.pointerdown({pointerType: 'touch'});
+    targetContainer.scroll();
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not end on "scroll" to an element outside', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+    const outsideRef = React.createRef();
+
+    const Component = () => {
+      const listener = usePress({onPressEnd});
+      return (
+        <div>
+          <a ref={ref} DEPRECATED_flareListeners={listener} />
+          <span ref={outsideRef} />
+        </div>
+      );
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    const targetOutside = createEventTarget(outsideRef.current);
+    target.pointerdown();
+    targetOutside.scroll();
+    expect(onPressEnd).not.toBeCalled();
+  });
+
+  it('expect displayName to show up for event component', () => {
+    expect(PressResponder.displayName).toBe('Press');
+  });
+
+  it('should not trigger an invariant in addRootEventTypes()', () => {
+    const ref = React.createRef();
+
+    const Component = () => {
+      const listener = usePress();
+      return <button ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    target.pointerdown();
+    target.pointermove();
+    target.pointerup();
+    target.pointerdown();
+  });
+
+  it('event.preventDefault works as expected', () => {
+    const onPress = jest.fn(e => e.preventDefault());
+    const onPressStart = jest.fn(e => e.preventDefault());
+    const onPressEnd = jest.fn(e => e.preventDefault());
+    const preventDefault = jest.fn();
+    const buttonRef = React.createRef();
+
+    const Component = () => {
+      const listener = usePress({onPress, onPressStart, onPressEnd});
+      return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(buttonRef.current);
+    target.pointerdown();
+    target.pointerup({preventDefault});
+    expect(preventDefault).toBeCalled();
+    expect(onPressStart).toBeCalled();
+    expect(onPressEnd).toBeCalled();
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js
new file mode 100644
index 0000000000000..82d5f5619ad2f
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Scroll-test.internal.js
@@ -0,0 +1,201 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let useScroll;
+
+const forcePointerEvents = true;
+const table = [[forcePointerEvents], [!forcePointerEvents]];
+
+const initializeModules = hasPointerEvents => {
+  setPointerEvent(hasPointerEvents);
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  useScroll = require('react-interactions/events/scroll').useScroll;
+};
+
+describe.each(table)('Scroll responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('disabled', () => {
+    let onScroll, ref;
+
+    beforeEach(() => {
+      onScroll = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useScroll({
+          disabled: true,
+          onScroll,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      const target = createEventTarget(ref.current);
+      target.scroll();
+      expect(onScroll).not.toBeCalled();
+    });
+  });
+
+  describe('onScroll', () => {
+    let onScroll, ref;
+
+    beforeEach(() => {
+      onScroll = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useScroll({
+          onScroll,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    describe('is called after "scroll" event', () => {
+      const pointerTypesTable = hasPointerEvents
+        ? [['mouse'], ['touch'], ['pen']]
+        : [['mouse'], ['touch']];
+      it.each(pointerTypesTable)('with pointerType: %s', pointerType => {
+        const node = ref.current;
+        const target = createEventTarget(node);
+        target.pointerdown({pointerType});
+        target.scroll();
+        expect(onScroll).toHaveBeenCalledTimes(1);
+        expect(onScroll).toHaveBeenCalledWith(
+          expect.objectContaining({
+            pointerType,
+            type: 'scroll',
+            direction: '',
+          }),
+        );
+        onScroll.mockReset();
+        node.scrollTop = -1;
+        target.scroll();
+        expect(onScroll).toHaveBeenCalledWith(
+          expect.objectContaining({
+            pointerType,
+            type: 'scroll',
+            direction: 'up',
+          }),
+        );
+        onScroll.mockReset();
+        node.scrollTop = 1;
+        target.scroll();
+        expect(onScroll).toHaveBeenCalledWith(
+          expect.objectContaining({
+            pointerType,
+            type: 'scroll',
+            direction: 'down',
+          }),
+        );
+      });
+
+      it('with pointerType: keyboard', () => {
+        const target = createEventTarget(ref.current);
+        target.keydown({key: 'A'});
+        target.keyup({key: 'A'});
+        target.scroll();
+        expect(onScroll).toHaveBeenCalledTimes(1);
+        expect(onScroll).toHaveBeenCalledWith(
+          expect.objectContaining({
+            pointerType: 'keyboard',
+            type: 'scroll',
+            direction: '',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('onScrollDragStart', () => {
+    let onScrollDragStart, ref;
+
+    beforeEach(() => {
+      onScrollDragStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useScroll({
+          onScrollDragStart,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('works as expected with touch events', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.scroll();
+      expect(onScrollDragStart).toHaveBeenCalledTimes(1);
+      expect(onScrollDragStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'touch',
+          type: 'scrolldragstart',
+          direction: '',
+        }),
+      );
+    });
+  });
+
+  describe('onScrollDragEnd', () => {
+    let onScrollDragEnd, ref;
+
+    beforeEach(() => {
+      onScrollDragEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useScroll({
+          onScrollDragEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    it('works as expected with touch events', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType: 'touch'});
+      target.scroll();
+      target.pointerup({pointerType: 'touch'});
+      expect(onScrollDragEnd).toHaveBeenCalledTimes(1);
+      expect(onScrollDragEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'touch',
+          type: 'scrolldragend',
+          direction: '',
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/__tests__/Tap-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Tap-test.internal.js
new file mode 100644
index 0000000000000..39fd5d06f9beb
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/__tests__/Tap-test.internal.js
@@ -0,0 +1,919 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  buttonType,
+  buttonsType,
+  createEventTarget,
+  describeWithPointerEvent,
+  setPointerEvent,
+  testWithPointerType,
+  resetActivePointers,
+} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let useTap;
+
+function initializeModules(hasPointerEvents) {
+  jest.resetModules();
+  setPointerEvent(hasPointerEvents);
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  useTap = require('react-interactions/events/tap').useTap;
+}
+
+const coordinatesInside = {x: 51, y: 51};
+const coordinatesOutside = {x: 49, y: 49};
+
+function tapAndMoveOutside({
+  hasPointerEvents,
+  pointerType,
+  downTarget,
+  upTarget,
+}) {
+  downTarget.setBoundingClientRect({width: 100, height: 100, x: 50, y: 50});
+  downTarget.pointerdown({pointerType, ...coordinatesInside});
+  downTarget.pointermove({pointerType, ...coordinatesInside});
+  // NOTE: this assumes the PointerEvent implementation calls
+  // 'releasePointerCapture' for touch pointers
+  if (!hasPointerEvents && pointerType === 'touch') {
+    document.elementFromPoint = () => upTarget.node;
+    downTarget.pointermove({pointerType, ...coordinatesOutside});
+  } else {
+    upTarget.pointermove({pointerType, ...coordinatesOutside});
+  }
+}
+
+function tapAndReleaseOutside({
+  hasPointerEvents,
+  pointerType,
+  downTarget,
+  upTarget,
+}) {
+  tapAndMoveOutside({hasPointerEvents, pointerType, downTarget, upTarget});
+  if (!hasPointerEvents && pointerType === 'touch') {
+    downTarget.pointerup({pointerType, ...coordinatesOutside});
+  } else {
+    upTarget.pointerup({pointerType, ...coordinatesOutside});
+  }
+}
+
+describeWithPointerEvent('Tap responder', hasPointerEvents => {
+  let container;
+
+  beforeEach(() => {
+    initializeModules(hasPointerEvents);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.render(null, container);
+    document.body.removeChild(container);
+    container = null;
+    resetActivePointers();
+  });
+
+  test('supports repeated use', () => {
+    const ref = React.createRef();
+    const Component = () => {
+      const listener = useTap();
+      return <button ref={ref} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(ref.current);
+    function interact() {
+      target.pointerdown();
+      target.pointermove();
+      target.pointerup();
+    }
+    expect(() => {
+      interact();
+      interact();
+    }).not.toThrow();
+  });
+
+  describe('disabled', () => {
+    let onTapStart, onTapChange, onTapUpdate, onTapCancel, onTapEnd, ref;
+
+    beforeEach(() => {
+      onTapStart = jest.fn();
+      onTapChange = jest.fn();
+      onTapUpdate = jest.fn();
+      onTapCancel = jest.fn();
+      onTapEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({
+          disabled: true,
+          onTapStart,
+          onTapChange,
+          onTapUpdate,
+          onTapCancel,
+          onTapEnd,
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    test('does not call callbacks', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup();
+      expect(onTapStart).not.toBeCalled();
+      expect(onTapChange).not.toBeCalled();
+      expect(onTapUpdate).not.toBeCalled();
+      expect(onTapCancel).not.toBeCalled();
+      expect(onTapEnd).not.toBeCalled();
+    });
+  });
+
+  describe('maximumDistance', () => {
+    let onTapCancel, onTapUpdate, ref;
+
+    function render(props) {
+      const Component = () => {
+        const listener = useTap(props);
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    }
+
+    beforeEach(() => {
+      onTapCancel = jest.fn();
+      onTapUpdate = jest.fn();
+      ref = React.createRef();
+      render({
+        maximumDistance: 20,
+        onTapCancel,
+        onTapUpdate,
+      });
+    });
+
+    test('ignores values less than 10', () => {
+      render({
+        maximumDistance: 5,
+        onTapCancel,
+        onTapUpdate,
+      });
+      const target = createEventTarget(ref.current);
+      const pointerType = 'mouse';
+      target.pointerdown({pointerType, x: 0, y: 0});
+      target.pointermove({pointerType, x: 10, y: 10});
+      expect(onTapUpdate).toHaveBeenCalledTimes(1);
+      expect(onTapCancel).toHaveBeenCalledTimes(0);
+    });
+
+    testWithPointerType('below threshold', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType, x: 0, y: 0});
+      target.pointermove({pointerType, x: 10, y: 10});
+      expect(onTapUpdate).toHaveBeenCalledTimes(1);
+      expect(onTapCancel).toHaveBeenCalledTimes(0);
+    });
+
+    testWithPointerType('above threshold', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType, x: 0, y: 0});
+      target.pointermove({pointerType, x: 15, y: 14});
+      expect(onTapUpdate).toHaveBeenCalledTimes(0);
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onAuxiliaryTap', () => {
+    let onAuxiliaryTap, ref;
+
+    beforeEach(() => {
+      onAuxiliaryTap = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({onAuxiliaryTap});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    test('auxiliary-button pointer up', () => {
+      const pointerType = 'mouse';
+      const button = buttonType.auxiliary;
+      const buttons = buttonsType.auxiliary;
+      const target = createEventTarget(ref.current);
+      target.pointerdown({button, buttons, pointerType});
+      target.pointerup({button, buttons, pointerType});
+      expect(onAuxiliaryTap).toHaveBeenCalledTimes(1);
+    });
+
+    test('modifier-button pointer up', () => {
+      const pointerType = 'mouse';
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      const target = createEventTarget(ref.current);
+      target.pointerdown({button, buttons, pointerType});
+      target.pointerup({button, buttons, metaKey: true, pointerType});
+      expect(onAuxiliaryTap).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onTapStart', () => {
+    let onTapStart, ref;
+
+    beforeEach(() => {
+      onTapStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({onTapStart});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    testWithPointerType('pointer down', pointerType => {
+      const target = createEventTarget(ref.current);
+      const nativeEvent = {
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+        pageX: 10,
+        pageY: 10,
+        pointerType,
+        x: 10,
+        y: 10,
+      };
+      target.pointerdown(nativeEvent);
+      // 'pointerup' is only for the MouseEvent/TouchEvent fallback
+      // implementation. We also dispatch 'pointerup' so that this test covers
+      // the case where browsers dispatch an emulated mousedown (and mouseup)
+      // event *after* a touch ends.
+      target.pointerup(nativeEvent);
+      expect(onTapStart).toHaveBeenCalledTimes(1);
+      expect(onTapStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          height: pointerType === 'mouse' ? 1 : 23,
+          metaKey: false,
+          pageX: 10,
+          pageY: 10,
+          pointerType,
+          pressure: pointerType === 'touch' ? 1 : 0.5,
+          screenX: 10,
+          screenY: 60,
+          shiftKey: false,
+          tangentialPressure: 0,
+          target: target.node,
+          tiltX: 0,
+          tiltY: 0,
+          timeStamp: expect.any(Number),
+          twist: 0,
+          type: 'tap:start',
+          width: pointerType === 'mouse' ? 1 : 23,
+          x: 10,
+          y: 10,
+        }),
+      );
+    });
+
+    test('second pointer on target', () => {
+      const pointerType = 'touch';
+      const target = createEventTarget(ref.current);
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      target.pointerdown({button, buttons, pointerId: 1, pointerType});
+      expect(onTapStart).toHaveBeenCalledTimes(1);
+      target.pointerdown({button, buttons, pointerId: 2, pointerType});
+      expect(onTapStart).toHaveBeenCalledTimes(1);
+    });
+
+    testWithPointerType('ignored buttons and modifiers', pointerType => {
+      const target = createEventTarget(ref.current);
+      if (pointerType !== 'touch') {
+        // right-click
+        target.pointerdown({
+          button: buttonType.secondary,
+          buttons: buttonsType.secondary,
+          pointerType,
+        });
+        target.pointerup({pointerType});
+        // middle-click
+        target.pointerdown({
+          button: buttonType.auxiliary,
+          buttons: buttonsType.auxiliary,
+          pointerType,
+        });
+        target.pointerup({pointerType});
+        // virtual middle-click with misleading 'buttons' value
+        target.pointerdown({
+          button: buttonType.auxiliary,
+          buttons: 0,
+          pointerType,
+        });
+        target.pointerup({pointerType});
+        // pen eraser
+        target.pointerdown({
+          button: buttonType.eraser,
+          buttons: buttonsType.eraser,
+          pointerType,
+        });
+        target.pointerup({pointerType});
+      }
+      // alt-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+        altKey: true,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      // ctrl-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+        ctrlKey: true,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      // meta-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+        metaKey: true,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      // shift-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+        shiftKey: true,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+
+      expect(onTapStart).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('onTapEnd', () => {
+    let onTapEnd, ref;
+
+    beforeEach(() => {
+      onTapEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({onTapEnd});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    testWithPointerType('pointer up', pointerType => {
+      const target = createEventTarget(ref.current);
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      target.pointerdown({button, buttons, pointerType});
+      target.pointerup({
+        button,
+        buttons,
+        pageX: 10,
+        pageY: 10,
+        pointerType,
+        x: 10,
+        y: 10,
+      });
+      expect(onTapEnd).toHaveBeenCalledTimes(1);
+      expect(onTapEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          height: pointerType === 'mouse' ? 1 : 23,
+          metaKey: false,
+          pageX: 10,
+          pageY: 10,
+          pointerType,
+          pressure: 0,
+          screenX: 10,
+          screenY: 60,
+          shiftKey: false,
+          tangentialPressure: 0,
+          target: target.node,
+          tiltX: 0,
+          tiltY: 0,
+          timeStamp: expect.any(Number),
+          twist: 0,
+          type: 'tap:end',
+          width: pointerType === 'mouse' ? 1 : 23,
+          x: 10,
+          y: 10,
+        }),
+      );
+    });
+
+    testWithPointerType('zero-dimension hit rect', pointerType => {
+      const targetRef = React.createRef();
+      const innerRef = React.createRef();
+
+      const Component = () => {
+        const listener = useTap({onTapEnd});
+        return (
+          <div ref={targetRef} DEPRECATED_flareListeners={listener}>
+            <button ref={innerRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => innerRef.current;
+
+      const target = createEventTarget(targetRef.current);
+      target.setBoundingClientRect({x: 0, y: 0, width: 0, height: 0});
+      const innerTarget = createEventTarget(innerRef.current);
+      innerTarget.pointerdown({pointerType});
+      innerTarget.pointerup({pointerType});
+      expect(onTapEnd).toBeCalled();
+    });
+
+    testWithPointerType('pointer up outside target', pointerType => {
+      const downTarget = createEventTarget(ref.current);
+      const upTarget = createEventTarget(container);
+      tapAndReleaseOutside({
+        hasPointerEvents,
+        downTarget,
+        upTarget,
+        pointerType,
+      });
+      expect(onTapEnd).not.toBeCalled();
+    });
+
+    if (hasPointerEvents) {
+      test('second pointer up off target', () => {
+        const pointerType = 'touch';
+        const target = createEventTarget(ref.current);
+        const offTarget = createEventTarget(container);
+        const button = buttonType.primary;
+        const buttons = buttonsType.primary;
+
+        target.pointerdown({button, buttons, pointerId: 1, pointerType});
+        offTarget.pointerdown({button, buttons, pointerId: 2, pointerType});
+        offTarget.pointerup({
+          button,
+          buttons,
+          pageX: 10,
+          pageY: 10,
+          pointerId: 2,
+          pointerType,
+          x: 10,
+          y: 10,
+        });
+        expect(onTapEnd).toHaveBeenCalledTimes(0);
+      });
+    }
+
+    test('ignored buttons and modifiers', () => {
+      const target = createEventTarget(ref.current);
+      // right-click
+      target.pointerdown({
+        button: buttonType.secondary,
+        buttons: buttonsType.secondary,
+      });
+      target.pointerup({
+        button: buttonType.secondary,
+        buttons: buttonsType.secondary,
+      });
+      // middle-click
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+      });
+      target.pointerup({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+      });
+      // pen eraser
+      target.pointerdown({
+        button: buttonType.eraser,
+        buttons: buttonsType.eraser,
+      });
+      target.pointerup({
+        button: buttonType.eraser,
+        buttons: buttonsType.eraser,
+      });
+      // alt-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+      });
+      target.pointerup({altKey: true, button: buttonType.primary});
+      // ctrl-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+      });
+      target.pointerup({ctrlKey: true, button: buttonType.primary});
+      // meta-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+      });
+      target.pointerup({metaKey: true, button: buttonType.primary});
+      // shift-click
+      target.pointerdown({
+        button: buttonType.primary,
+        buttons: buttonsType.primary,
+      });
+      target.pointerup({shiftKey: true, button: buttonType.primary});
+
+      expect(onTapEnd).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('onTapUpdate', () => {
+    let onTapUpdate, ref;
+    const rect = {x: 0, y: 0, width: 100, height: 100};
+    const coordinates = {x: 10, y: 10};
+
+    beforeEach(() => {
+      onTapUpdate = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({onTapUpdate});
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    testWithPointerType('requires activation', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.setBoundingClientRect(rect);
+      if (pointerType !== 'touch') {
+        target.pointerhover({pointerType, ...coordinates});
+        target.pointermove({pointerType, ...coordinates});
+      }
+      expect(onTapUpdate).not.toBeCalled();
+    });
+
+    testWithPointerType('pointer move', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.setBoundingClientRect(rect);
+      target.pointerdown({pointerType});
+
+      target.pointermove({pointerType, x: 10, y: 10});
+      expect(onTapUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          height: pointerType === 'mouse' ? 1 : 23,
+          metaKey: false,
+          pageX: 10,
+          pageY: 10,
+          pointerType,
+          pressure: pointerType === 'touch' ? 1 : 0.5,
+          screenX: 10,
+          screenY: 60,
+          shiftKey: false,
+          tangentialPressure: 0,
+          target: target.node,
+          tiltX: 0,
+          tiltY: 0,
+          timeStamp: expect.any(Number),
+          twist: 0,
+          type: 'tap:update',
+          width: pointerType === 'mouse' ? 1 : 23,
+          x: 10,
+          y: 10,
+        }),
+      );
+
+      target.pointermove({pointerType, x: 20, y: 20});
+      expect(onTapUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({pointerType, x: 20, y: 20}),
+      );
+
+      expect(onTapUpdate).toHaveBeenCalledTimes(2);
+    });
+
+    testWithPointerType('pointer moves outside target', pointerType => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      target.setBoundingClientRect(rect);
+      target.pointerdown({pointerType});
+      target.pointermove({pointerType, x: 10, y: 10});
+      expect(onTapUpdate).toHaveBeenCalledTimes(1);
+
+      // NOTE: this assumes the PointerEvent implementation calls
+      // 'releasePointerCapture' for touch pointers
+      if (!hasPointerEvents && pointerType === 'touch') {
+        document.elementFromPoint = () => containerTarget.node;
+        target.pointermove({pointerType, x: 101, y: 101});
+      } else {
+        containerTarget.pointermove({pointerType, x: 101, y: 101});
+      }
+
+      // No extra 'onTapUpdate' calls when the pointer is outside the target
+      expect(onTapUpdate).toHaveBeenCalledTimes(1);
+    });
+
+    if (hasPointerEvents) {
+      test('second pointer off target', () => {
+        const pointerType = 'touch';
+        const target = createEventTarget(ref.current);
+        const offTarget = createEventTarget(container);
+        const button = buttonType.primary;
+        const buttons = buttonsType.primary;
+        target.pointerdown({button, buttons, pointerId: 1, pointerType});
+        offTarget.pointerdown({button, buttons, pointerId: 2, pointerType});
+        target.pointermove({pointerId: 1, pointerType, x: 10, y: 10});
+        expect(onTapUpdate).toHaveBeenCalledTimes(1);
+        offTarget.pointermove({pointerId: 2, pointerType, x: 10, y: 10});
+        expect(onTapUpdate).toHaveBeenCalledTimes(1);
+      });
+    }
+  });
+
+  describe('onTapChange', () => {
+    let eventsLog, onTapChange, ref;
+
+    const logger = msg => () => {
+      eventsLog.push(msg);
+    };
+
+    beforeEach(() => {
+      eventsLog = [];
+      onTapChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        const listener = useTap({
+          onTapChange(e) {
+            logger('change')();
+            onTapChange(e);
+          },
+          onTapStart: logger('start'),
+          onTapEnd: logger('end'),
+          onTapCancel: logger('cancel'),
+        });
+        return <div ref={ref} DEPRECATED_flareListeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+      document.elementFromPoint = () => ref.current;
+    });
+
+    testWithPointerType('pointer down/up', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType});
+      expect(onTapChange).toHaveBeenCalledTimes(1);
+      expect(onTapChange).toHaveBeenCalledWith(true);
+      target.pointerup({pointerType, x: 0, y: 0});
+      expect(onTapChange).toHaveBeenCalledTimes(2);
+      expect(onTapChange).toHaveBeenCalledWith(false);
+      expect(eventsLog).toEqual(['start', 'change', 'change', 'end']);
+    });
+
+    testWithPointerType('pointer cancel', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType});
+      expect(onTapChange).toHaveBeenCalledTimes(1);
+      expect(onTapChange).toHaveBeenCalledWith(true);
+      target.pointercancel({pointerType});
+      expect(onTapChange).toHaveBeenCalledTimes(2);
+      expect(onTapChange).toHaveBeenCalledWith(false);
+      expect(eventsLog).toEqual(['start', 'change', 'change', 'cancel']);
+    });
+
+    testWithPointerType('pointer move outside target', pointerType => {
+      const downTarget = createEventTarget(ref.current);
+      const upTarget = createEventTarget(container);
+      tapAndMoveOutside({
+        hasPointerEvents,
+        downTarget,
+        upTarget,
+        pointerType,
+      });
+      expect(onTapChange).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('onTapCancel', () => {
+    let onTapCancel, onTapUpdate, parentRef, ref, siblingRef;
+
+    beforeEach(() => {
+      onTapCancel = jest.fn();
+      onTapUpdate = jest.fn();
+      parentRef = React.createRef();
+      ref = React.createRef();
+      siblingRef = React.createRef();
+      const Component = () => {
+        const listener = useTap({onTapCancel, onTapUpdate});
+        return (
+          <div ref={parentRef}>
+            <div ref={ref} DEPRECATED_flareListeners={listener} />
+            <span ref={siblingRef} />
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+    });
+
+    testWithPointerType('pointer cancel', pointerType => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({pointerType});
+      target.pointercancel({pointerType});
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+      expect(onTapCancel).toHaveBeenCalledWith(
+        expect.objectContaining({
+          altKey: false,
+          ctrlKey: false,
+          height: 1,
+          metaKey: false,
+          pageX: 0,
+          pageY: 0,
+          pointerType,
+          pressure: 0,
+          screenX: 0,
+          screenY: 0,
+          shiftKey: false,
+          tangentialPressure: 0,
+          target: target.node,
+          tiltX: 0,
+          tiltY: 0,
+          timeStamp: expect.any(Number),
+          twist: 0,
+          type: 'tap:cancel',
+          width: 1,
+          x: 0,
+          y: 0,
+        }),
+      );
+      target.pointermove({pointerType, x: 5, y: 5});
+      expect(onTapUpdate).not.toBeCalled();
+    });
+
+    test('second pointer on target', () => {
+      const pointerType = 'touch';
+      const target = createEventTarget(ref.current);
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      target.pointerdown({button, buttons, pointerId: 1, pointerType});
+      target.pointerdown({button, buttons, pointerId: 2, pointerType});
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+
+    if (hasPointerEvents) {
+      test('second pointer off target', () => {
+        const pointerType = 'touch';
+        const target = createEventTarget(ref.current);
+        const offTarget = createEventTarget(container);
+        const button = buttonType.primary;
+        const buttons = buttonsType.primary;
+        target.pointerdown({button, buttons, pointerId: 1, pointerType});
+        offTarget.pointerdown({button, buttons, pointerId: 2, pointerType});
+        expect(onTapCancel).toHaveBeenCalledTimes(0);
+      });
+    }
+
+    testWithPointerType('pointer move outside target', pointerType => {
+      const downTarget = createEventTarget(ref.current);
+      const upTarget = createEventTarget(container);
+      tapAndMoveOutside({
+        hasPointerEvents,
+        downTarget,
+        upTarget,
+        pointerType,
+      });
+      expect(onTapCancel).toBeCalled();
+    });
+
+    test('ignored modifiers', () => {
+      const target = createEventTarget(ref.current);
+      const button = buttonType.primary;
+      const buttons = buttonsType.primary;
+      // alt-click
+      target.pointerdown({button, buttons});
+      target.pointerup({altKey: true, button});
+      // ctrl-click
+      target.pointerdown({button, buttons});
+      target.pointerup({ctrlKey: true, button});
+      // meta-click
+      target.pointerdown({button, buttons});
+      target.pointerup({metaKey: true, button});
+      // shift-click
+      target.pointerdown({buttons});
+      target.pointerup({shiftKey: true, button});
+
+      expect(onTapCancel).toHaveBeenCalledTimes(4);
+    });
+
+    test('long press context menu', () => {
+      const target = createEventTarget(ref.current);
+      target.contextmenu({}, {pointerType: 'touch'});
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+
+    test('parent scroll (non-mouse)', () => {
+      const target = createEventTarget(ref.current);
+      const parentTarget = createEventTarget(parentRef.current);
+      target.pointerdown({pointerType: 'touch'});
+      parentTarget.scroll();
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+
+    test('sibling scroll', () => {
+      const target = createEventTarget(ref.current);
+      const siblingTarget = createEventTarget(siblingRef.current);
+      target.pointerdown();
+      siblingTarget.scroll();
+      expect(onTapCancel).not.toBeCalled();
+    });
+
+    test('document scroll (non-mouse)', () => {
+      const target = createEventTarget(ref.current);
+      const documentTarget = createEventTarget(document);
+      target.pointerdown({pointerType: 'touch'});
+      documentTarget.scroll();
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+
+    // Scroll on an element not managed by React
+    test('root container scroll (non-mouse)', () => {
+      const target = createEventTarget(ref.current);
+      const containerTarget = createEventTarget(container);
+      target.pointerdown({pointerType: 'touch'});
+      containerTarget.scroll();
+      expect(onTapCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('preventDefault', () => {
+    let onTapEnd, ref, innerRef, preventDefault, remount;
+
+    beforeEach(() => {
+      remount = function(shouldPreventDefault) {
+        onTapEnd = jest.fn();
+        preventDefault = jest.fn();
+        ref = React.createRef();
+        innerRef = React.createRef();
+        const Component = () => {
+          const listener = useTap({
+            onTapEnd,
+            preventDefault: shouldPreventDefault,
+          });
+          return (
+            <a href="#" ref={ref} DEPRECATED_flareListeners={listener}>
+              <div ref={innerRef} />
+            </a>
+          );
+        };
+        ReactDOM.render(<Component />, container);
+      };
+      remount();
+    });
+
+    test('prevents native behavior by default', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onTapEnd).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    test('prevents native behaviour by default (inner target)', () => {
+      const innerTarget = createEventTarget(innerRef.current);
+      innerTarget.pointerdown();
+      innerTarget.pointerup({preventDefault});
+      expect(preventDefault).toBeCalled();
+      expect(onTapEnd).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: true}),
+      );
+    });
+
+    test('allows native behaviour if false', () => {
+      remount(false);
+
+      const target = createEventTarget(ref.current);
+      target.pointerdown();
+      target.pointerup({preventDefault});
+      expect(preventDefault).not.toBeCalled();
+      expect(onTapEnd).toHaveBeenCalledWith(
+        expect.objectContaining({defaultPrevented: false}),
+      );
+    });
+  });
+});
diff --git a/packages/react-interactions/events/src/dom/shared/index.js b/packages/react-interactions/events/src/dom/shared/index.js
new file mode 100644
index 0000000000000..e5096e9304500
--- /dev/null
+++ b/packages/react-interactions/events/src/dom/shared/index.js
@@ -0,0 +1,87 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
+import type {
+  ReactDOMResponderContext,
+  ReactDOMResponderEvent,
+} from 'shared/ReactDOMTypes';
+
+export const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent !== undefined;
+
+export const isMac =
+  typeof window !== 'undefined' && window.navigator != null
+    ? /^Mac/.test(window.navigator.platform)
+    : false;
+
+export const buttonsEnum = {
+  none: 0,
+  primary: 1,
+  secondary: 2,
+  auxiliary: 4,
+};
+
+export function dispatchDiscreteEvent(
+  context: ReactDOMResponderContext,
+  payload: ReactDOMResponderEvent,
+  callback: any => void,
+) {
+  context.dispatchEvent(payload, callback, DiscreteEvent);
+}
+
+export function dispatchUserBlockingEvent(
+  context: ReactDOMResponderContext,
+  payload: ReactDOMResponderEvent,
+  callback: any => void,
+) {
+  context.dispatchEvent(payload, callback, UserBlockingEvent);
+}
+
+export function getTouchById(
+  nativeEvent: TouchEvent,
+  pointerId: null | number,
+): null | Touch {
+  if (pointerId != null) {
+    const changedTouches = nativeEvent.changedTouches;
+    for (let i = 0; i < changedTouches.length; i++) {
+      const touch = changedTouches[i];
+      if (touch.identifier === pointerId) {
+        return touch;
+      }
+    }
+    return null;
+  }
+  return null;
+}
+
+export function hasModifierKey(event: ReactDOMResponderEvent): boolean {
+  const nativeEvent: any = event.nativeEvent;
+  const {altKey, ctrlKey, metaKey, shiftKey} = nativeEvent;
+  return (
+    altKey === true || ctrlKey === true || metaKey === true || shiftKey === true
+  );
+}
+
+// Keyboards, Assitive Technologies, and element.click() all produce a "virtual"
+// click event. This is a method of inferring such clicks. Every browser except
+// IE 11 only sets a zero value of "detail" for click events that are "virtual".
+// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
+// the quirk that it produces click events that are of type PointerEvent, and
+// where only the "virtual" click lacks a pointerType field.
+export function isVirtualClick(event: ReactDOMResponderEvent): boolean {
+  const nativeEvent: any = event.nativeEvent;
+  // JAWS/NVDA with Firefox.
+  if (nativeEvent.mozInputSource === 0 && nativeEvent.isTrusted) {
+    return true;
+  }
+  return nativeEvent.detail === 0 && !nativeEvent.pointerType;
+}
diff --git a/packages/react-interactions/events/swipe.js b/packages/react-interactions/events/swipe.js
new file mode 100644
index 0000000000000..a2d7dfdcaba4d
--- /dev/null
+++ b/packages/react-interactions/events/swipe.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Swipe');
diff --git a/packages/react-interactions/events/tap.js b/packages/react-interactions/events/tap.js
new file mode 100644
index 0000000000000..5d3ceede43548
--- /dev/null
+++ b/packages/react-interactions/events/tap.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/Tap');
diff --git a/packages/react-interactions/npm/drag.js b/packages/react-interactions/npm/drag.js
new file mode 100644
index 0000000000000..fa844823e8ad7
--- /dev/null
+++ b/packages/react-interactions/npm/drag.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/drag.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/drag.development.js');
+}
diff --git a/packages/react-interactions/npm/focus.js b/packages/react-interactions/npm/focus.js
new file mode 100644
index 0000000000000..9a3a56e9a26d1
--- /dev/null
+++ b/packages/react-interactions/npm/focus.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/focus.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/focus.development.js');
+}
diff --git a/packages/react-interactions/npm/hover.js b/packages/react-interactions/npm/hover.js
new file mode 100644
index 0000000000000..6ac666f7e0c6e
--- /dev/null
+++ b/packages/react-interactions/npm/hover.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/hover.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/hover.development.js');
+}
diff --git a/packages/react-interactions/npm/input.js b/packages/react-interactions/npm/input.js
new file mode 100644
index 0000000000000..82c5aadf6e29b
--- /dev/null
+++ b/packages/react-interactions/npm/input.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/input.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/input.development.js');
+}
diff --git a/packages/react-interactions/npm/keyboard.js b/packages/react-interactions/npm/keyboard.js
new file mode 100644
index 0000000000000..323da79398e7b
--- /dev/null
+++ b/packages/react-interactions/npm/keyboard.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/keyboard.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/keyboard.development.js');
+}
diff --git a/packages/react-interactions/npm/press-legacy.js b/packages/react-interactions/npm/press-legacy.js
new file mode 100644
index 0000000000000..f98feaa1f1f31
--- /dev/null
+++ b/packages/react-interactions/npm/press-legacy.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/press-legacy.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/press-legacy.development.js');
+}
diff --git a/packages/react-interactions/npm/press.js b/packages/react-interactions/npm/press.js
new file mode 100644
index 0000000000000..9476dfceac6e9
--- /dev/null
+++ b/packages/react-interactions/npm/press.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/press.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/press.development.js');
+}
diff --git a/packages/react-interactions/npm/scroll.js b/packages/react-interactions/npm/scroll.js
new file mode 100644
index 0000000000000..0cb8db03587ae
--- /dev/null
+++ b/packages/react-interactions/npm/scroll.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/scroll.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/scroll.development.js');
+}
diff --git a/packages/react-interactions/npm/swipe.js b/packages/react-interactions/npm/swipe.js
new file mode 100644
index 0000000000000..acd514d10c319
--- /dev/null
+++ b/packages/react-interactions/npm/swipe.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/swipe.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/swipe.development.js');
+}
diff --git a/packages/react-interactions/npm/tap.js b/packages/react-interactions/npm/tap.js
new file mode 100644
index 0000000000000..0a096a2fa6057
--- /dev/null
+++ b/packages/react-interactions/npm/tap.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-interactions-events/tap.production.min.js');
+} else {
+  module.exports = require('./cjs/react-interactions-events/tap.development.js');
+}
diff --git a/packages/react-events/package.json b/packages/react-interactions/package.json
similarity index 69%
rename from packages/react-events/package.json
rename to packages/react-interactions/package.json
index 083eef77ffbb8..fe926f849c1ec 100644
--- a/packages/react-events/package.json
+++ b/packages/react-interactions/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-events",
+  "name": "react-interactions",
   "private": true,
   "description": "React is a JavaScript library for building user interfaces.",
   "keywords": [
@@ -12,13 +12,18 @@
   "files": [
     "LICENSE",
     "README.md",
-    "press.js",
-    "hover.js",
-    "focus.js",
-    "swipe.js",
-    "drag.js",
-    "focus-scope.js",
-    "index.js",
+    "events/README.md",
+    "events/context-menu.js",
+    "events/drag.js",
+    "events/focus.js",
+    "events/hover.js",
+    "events/input.js",
+    "events/keyboard.js",
+    "events/press.js",
+    "events/press-legacy.js",
+    "events/scroll.js",
+    "events/swipe.js",
+    "events/tap.js",
     "build-info.json",
     "cjs/",
     "umd/"
diff --git a/packages/react-is/README.md b/packages/react-is/README.md
index 9adeee1d9aad1..d255977618178 100644
--- a/packages/react-is/README.md
+++ b/packages/react-is/README.md
@@ -26,7 +26,7 @@ class ClassComponent extends React.Component {
   }
 }
 
-const StatelessComponent = () => React.createElement("div");
+const FunctionComponent = () => React.createElement("div");
 
 const ForwardRefComponent = React.forwardRef((props, ref) =>
   React.createElement(Component, { forwardedRef: ref, ...props })
@@ -36,7 +36,7 @@ const Context = React.createContext(false);
 
 ReactIs.isValidElementType("div"); // true
 ReactIs.isValidElementType(ClassComponent); // true
-ReactIs.isValidElementType(StatelessComponent); // true
+ReactIs.isValidElementType(FunctionComponent); // true
 ReactIs.isValidElementType(ForwardRefComponent); // true
 ReactIs.isValidElementType(Context.Provider); // true
 ReactIs.isValidElementType(Context.Consumer); // true
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 6e502546f89e8..16177d8e8b1f0 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "16.8.6",
+  "version": "16.12.0",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
index c618f621d99c7..0ca1ddc91b9f2 100644
--- a/packages/react-is/src/ReactIs.js
+++ b/packages/react-is/src/ReactIs.js
@@ -25,7 +25,6 @@ import {
   REACT_SUSPENSE_TYPE,
 } from 'shared/ReactSymbols';
 import isValidElementType from 'shared/isValidElementType';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
 
 export function typeOf(object: any) {
   if (typeof object === 'object' && object !== null) {
@@ -48,14 +47,14 @@ export function typeOf(object: any) {
             switch ($$typeofType) {
               case REACT_CONTEXT_TYPE:
               case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
               case REACT_PROVIDER_TYPE:
                 return $$typeofType;
               default:
                 return $$typeof;
             }
         }
-      case REACT_LAZY_TYPE:
-      case REACT_MEMO_TYPE:
       case REACT_PORTAL_TYPE:
         return $$typeof;
     }
@@ -88,8 +87,8 @@ export function isAsyncMode(object: any) {
   if (__DEV__) {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
       hasWarnedAboutDeprecatedIsAsyncMode = true;
-      lowPriorityWarning(
-        false,
+      // Using console['warn'] to evade Babel and ESLint
+      console['warn'](
         'The ReactIs.isAsyncMode() alias has been deprecated, ' +
           'and will be removed in React 17+. Update your code to use ' +
           'ReactIs.isConcurrentMode() instead. It has the exact same API.',
diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
index 1c47fd551bb58..c14ecaf51e1ee 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -13,6 +13,8 @@ let React;
 let ReactDOM;
 let ReactIs;
 
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 describe('ReactIs', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -54,9 +56,18 @@ describe('ReactIs', () => {
     expect(ReactIs.isValidElementType(MemoComponent)).toEqual(true);
     expect(ReactIs.isValidElementType(Context.Provider)).toEqual(true);
     expect(ReactIs.isValidElementType(Context.Consumer)).toEqual(true);
-    expect(ReactIs.isValidElementType(React.createFactory('div'))).toEqual(
-      true,
-    );
+    if (!ReactFeatureFlags.disableCreateFactory) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(ReactIs.isValidElementType(factory)).toEqual(true);
+    }
     expect(ReactIs.isValidElementType(React.Fragment)).toEqual(true);
     expect(ReactIs.isValidElementType(React.StrictMode)).toEqual(true);
     expect(ReactIs.isValidElementType(React.Suspense)).toEqual(true);
@@ -71,6 +82,7 @@ describe('ReactIs', () => {
 
   it('should identify context consumers', () => {
     const Context = React.createContext(false);
+    expect(ReactIs.isValidElementType(Context.Consumer)).toBe(true);
     expect(ReactIs.typeOf(<Context.Consumer />)).toBe(ReactIs.ContextConsumer);
     expect(ReactIs.isContextConsumer(<Context.Consumer />)).toBe(true);
     expect(ReactIs.isContextConsumer(<Context.Provider />)).toBe(false);
@@ -79,6 +91,7 @@ describe('ReactIs', () => {
 
   it('should identify context providers', () => {
     const Context = React.createContext(false);
+    expect(ReactIs.isValidElementType(Context.Provider)).toBe(true);
     expect(ReactIs.typeOf(<Context.Provider />)).toBe(ReactIs.ContextProvider);
     expect(ReactIs.isContextProvider(<Context.Provider />)).toBe(true);
     expect(ReactIs.isContextProvider(<Context.Consumer />)).toBe(false);
@@ -106,6 +119,7 @@ describe('ReactIs', () => {
 
   it('should identify ref forwarding component', () => {
     const RefForwardingComponent = React.forwardRef((props, ref) => null);
+    expect(ReactIs.isValidElementType(RefForwardingComponent)).toBe(true);
     expect(ReactIs.typeOf(<RefForwardingComponent />)).toBe(ReactIs.ForwardRef);
     expect(ReactIs.isForwardRef(<RefForwardingComponent />)).toBe(true);
     expect(ReactIs.isForwardRef({type: ReactIs.StrictMode})).toBe(false);
@@ -113,6 +127,7 @@ describe('ReactIs', () => {
   });
 
   it('should identify fragments', () => {
+    expect(ReactIs.isValidElementType(React.Fragment)).toBe(true);
     expect(ReactIs.typeOf(<React.Fragment />)).toBe(ReactIs.Fragment);
     expect(ReactIs.isFragment(<React.Fragment />)).toBe(true);
     expect(ReactIs.isFragment({type: ReactIs.Fragment})).toBe(false);
@@ -124,6 +139,7 @@ describe('ReactIs', () => {
   it('should identify portals', () => {
     const div = document.createElement('div');
     const portal = ReactDOM.createPortal(<div />, div);
+    expect(ReactIs.isValidElementType(portal)).toBe(false);
     expect(ReactIs.typeOf(portal)).toBe(ReactIs.Portal);
     expect(ReactIs.isPortal(portal)).toBe(true);
     expect(ReactIs.isPortal(div)).toBe(false);
@@ -131,21 +147,24 @@ describe('ReactIs', () => {
 
   it('should identify memo', () => {
     const Component = () => React.createElement('div');
-    const memoized = React.memo(Component);
-    expect(ReactIs.typeOf(memoized)).toBe(ReactIs.Memo);
-    expect(ReactIs.isMemo(memoized)).toBe(true);
-    expect(ReactIs.isMemo(Component)).toBe(false);
+    const Memoized = React.memo(Component);
+    expect(ReactIs.isValidElementType(Memoized)).toBe(true);
+    expect(ReactIs.typeOf(<Memoized />)).toBe(ReactIs.Memo);
+    expect(ReactIs.isMemo(<Memoized />)).toBe(true);
+    expect(ReactIs.isMemo(<Component />)).toBe(false);
   });
 
   it('should identify lazy', () => {
     const Component = () => React.createElement('div');
-    const lazyComponent = React.lazy(() => Component);
-    expect(ReactIs.typeOf(lazyComponent)).toBe(ReactIs.Lazy);
-    expect(ReactIs.isLazy(lazyComponent)).toBe(true);
-    expect(ReactIs.isLazy(Component)).toBe(false);
+    const LazyComponent = React.lazy(() => Component);
+    expect(ReactIs.isValidElementType(LazyComponent)).toBe(true);
+    expect(ReactIs.typeOf(<LazyComponent />)).toBe(ReactIs.Lazy);
+    expect(ReactIs.isLazy(<LazyComponent />)).toBe(true);
+    expect(ReactIs.isLazy(<Component />)).toBe(false);
   });
 
   it('should identify strict mode', () => {
+    expect(ReactIs.isValidElementType(React.StrictMode)).toBe(true);
     expect(ReactIs.typeOf(<React.StrictMode />)).toBe(ReactIs.StrictMode);
     expect(ReactIs.isStrictMode(<React.StrictMode />)).toBe(true);
     expect(ReactIs.isStrictMode({type: ReactIs.StrictMode})).toBe(false);
@@ -153,6 +172,7 @@ describe('ReactIs', () => {
   });
 
   it('should identify suspense', () => {
+    expect(ReactIs.isValidElementType(React.Suspense)).toBe(true);
     expect(ReactIs.typeOf(<React.Suspense />)).toBe(ReactIs.Suspense);
     expect(ReactIs.isSuspense(<React.Suspense />)).toBe(true);
     expect(ReactIs.isSuspense({type: ReactIs.Suspense})).toBe(false);
@@ -161,6 +181,7 @@ describe('ReactIs', () => {
   });
 
   it('should identify profile root', () => {
+    expect(ReactIs.isValidElementType(React.Profiler)).toBe(true);
     expect(
       ReactIs.typeOf(<React.Profiler id="foo" onRender={jest.fn()} />),
     ).toBe(ReactIs.Profiler);
diff --git a/packages/react-native-renderer/src/NativeMethodsMixin.js b/packages/react-native-renderer/src/NativeMethodsMixin.js
index a42bf0a0342c1..4c15f4925865e 100644
--- a/packages/react-native-renderer/src/NativeMethodsMixin.js
+++ b/packages/react-native-renderer/src/NativeMethodsMixin.js
@@ -29,9 +29,6 @@ import {
   warnForStyleProps,
 } from './NativeMethodsMixinUtils';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
-
 export default function(
   findNodeHandle: any => ?number,
   findHostInstance: any => any,
@@ -161,7 +158,7 @@ export default function(
     measureLayout: function(
       relativeToNativeNode: number | Object,
       onSuccess: MeasureLayoutOnSuccessCallback,
-      onFail: () => void /* currently unused */,
+      onFail?: () => void /* currently unused */,
     ) {
       let maybeInstance;
 
@@ -180,12 +177,13 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        warningWithoutStack(
-          false,
-          'Warning: measureLayout on components using NativeMethodsMixin ' +
-            'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
-            'measureLayout must be called on a native ref. Consider using forwardRef.',
-        );
+        if (__DEV__) {
+          console.error(
+            'Warning: measureLayout on components using NativeMethodsMixin ' +
+              'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
+              'measureLayout must be called on a native ref. Consider using forwardRef.',
+          );
+        }
         return;
       } else {
         let relativeNode;
@@ -198,10 +196,11 @@ export default function(
         }
 
         if (relativeNode == null) {
-          warningWithoutStack(
-            false,
-            'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
-          );
+          if (__DEV__) {
+            console.error(
+              'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
+            );
+          }
 
           return;
         }
@@ -244,23 +243,12 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        warningWithoutStack(
-          false,
-          'Warning: setNativeProps is not currently supported in Fabric',
-        );
-        return;
-      }
-
-      if (__DEV__) {
-        if (warnAboutDeprecatedSetNativeProps) {
-          warningWithoutStack(
-            false,
-            'Warning: Calling ref.setNativeProps(nativeProps) ' +
-              'is deprecated and will be removed in a future release. ' +
-              'Use the setNativeProps export from the react-native package instead.' +
-              "\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
+        if (__DEV__) {
+          console.error(
+            'Warning: setNativeProps is not currently supported in Fabric',
           );
         }
+        return;
       }
 
       const nativeTag =
diff --git a/packages/react-native-renderer/src/NativeMethodsMixinUtils.js b/packages/react-native-renderer/src/NativeMethodsMixinUtils.js
index 639b39c67db3d..1f6611523fbd0 100644
--- a/packages/react-native-renderer/src/NativeMethodsMixinUtils.js
+++ b/packages/react-native-renderer/src/NativeMethodsMixinUtils.js
@@ -66,17 +66,19 @@ export function throwOnStylesProp(component: any, props: any) {
 }
 
 export function warnForStyleProps(props: any, validAttributes: any) {
-  for (const key in validAttributes.style) {
-    if (!(validAttributes[key] || props[key] === undefined)) {
-      console.error(
-        'You are setting the style `{ ' +
-          key +
-          ': ... }` as a prop. You ' +
-          'should nest it in a style object. ' +
-          'E.g. `{ style: { ' +
-          key +
-          ': ... } }`',
-      );
+  if (__DEV__) {
+    for (const key in validAttributes.style) {
+      if (!(validAttributes[key] || props[key] === undefined)) {
+        console.error(
+          'You are setting the style `{ %s' +
+            ': ... }` as a prop. You ' +
+            'should nest it in a style object. ' +
+            'E.g. `{ style: { %s' +
+            ': ... } }`',
+          key,
+          key,
+        );
+      }
     }
   }
 }
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index f4f499a0b7d34..d9b532e497984 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactFabricType} from './ReactNativeTypes';
+import type {ReactFabricType, HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import './ReactFabricInjection';
@@ -26,9 +26,12 @@ import {
 } from 'react-reconciler/inline.fabric';
 
 import {createPortal} from 'shared/ReactPortal';
-import {setBatchingImplementation} from 'events/ReactGenericBatching';
+import {setBatchingImplementation} from 'legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 
+// Module provided by RN:
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
 import NativeMethodsMixin from './NativeMethodsMixin';
 import ReactNativeComponent from './ReactNativeComponent';
 import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
@@ -37,23 +40,72 @@ import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
 import {LegacyRoot} from 'shared/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentName from 'shared/getComponentName';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
+function findHostInstance_DEPRECATED(
+  componentOrHandle: any,
+): ?React$ElementRef<HostComponent<mixed>> {
+  if (__DEV__) {
+    const owner = ReactCurrentOwner.current;
+    if (owner !== null && owner.stateNode !== null) {
+      if (!owner.stateNode._warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing findNodeHandle inside its render(). ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(owner.type) || 'A component',
+        );
+      }
+
+      owner.stateNode._warnedAboutRefsInRender = true;
+    }
+  }
+  if (componentOrHandle == null) {
+    return null;
+  }
+  if (componentOrHandle._nativeTag) {
+    return componentOrHandle;
+  }
+  if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
+    return componentOrHandle.canonical;
+  }
+  let hostInstance;
+  if (__DEV__) {
+    hostInstance = findHostInstanceWithWarning(
+      componentOrHandle,
+      'findHostInstance_DEPRECATED',
+    );
+  } else {
+    hostInstance = findHostInstance(componentOrHandle);
+  }
+
+  if (hostInstance == null) {
+    return hostInstance;
+  }
+  if ((hostInstance: any).canonical) {
+    // Fabric
+    return (hostInstance: any).canonical;
+  }
+  return hostInstance;
+}
+
 function findNodeHandle(componentOrHandle: any): ?number {
   if (__DEV__) {
     const owner = ReactCurrentOwner.current;
     if (owner !== null && owner.stateNode !== null) {
-      warningWithoutStack(
-        owner.stateNode._warnedAboutRefsInRender,
-        '%s is accessing findNodeHandle inside its render(). ' +
-          'render() should be a pure function of props and state. It should ' +
-          'never access something that requires stale data from the previous ' +
-          'render, such as refs. Move this logic to componentDidMount and ' +
-          'componentDidUpdate instead.',
-        getComponentName(owner.type) || 'A component',
-      );
+      if (!owner.stateNode._warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing findNodeHandle inside its render(). ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(owner.type) || 'A component',
+        );
+      }
 
       owner.stateNode._warnedAboutRefsInRender = true;
     }
@@ -105,15 +157,32 @@ const roots = new Map();
 const ReactFabric: ReactFabricType = {
   NativeComponent: ReactNativeComponent(findNodeHandle, findHostInstance),
 
+  // This is needed for implementation details of TouchableNativeFeedback
+  // Remove this once TouchableNativeFeedback doesn't use cloneElement
+  findHostInstance_DEPRECATED,
   findNodeHandle,
 
-  setNativeProps(handle: any, nativeProps: Object) {
-    warningWithoutStack(
-      false,
-      'Warning: setNativeProps is not currently supported in Fabric',
-    );
+  dispatchCommand(handle: any, command: string, args: Array<any>) {
+    if (handle._nativeTag == null) {
+      if (__DEV__) {
+        console.error(
+          "dispatchCommand was called with a ref that isn't a " +
+            'native component. Use React.forwardRef to get access to the underlying native component',
+        );
+      }
+
+      return;
+    }
 
-    return;
+    if (handle._internalInstanceHandle) {
+      nativeFabricUIManager.dispatchCommand(
+        handle._internalInstanceHandle.stateNode.node,
+        command,
+        args,
+      );
+    } else {
+      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+    }
   },
 
   render(element: React$Element<any>, containerTag: any, callback: ?Function) {
@@ -122,7 +191,7 @@ const ReactFabric: ReactFabricType = {
     if (!root) {
       // TODO (bvaughn): If we decide to keep the wrapper component,
       // We could create a wrapper for containerTag as well to reduce special casing.
-      root = createContainer(containerTag, LegacyRoot, false);
+      root = createContainer(containerTag, LegacyRoot, false, null);
       roots.set(containerTag, root);
     }
     updateContainer(element, root, null, callback);
@@ -130,7 +199,13 @@ const ReactFabric: ReactFabricType = {
     return getPublicRootInstance(root);
   },
 
+  // Deprecated - this function is being renamed to stopSurface, use that instead.
+  // TODO (T47576999): Delete this once it's no longer called from native code.
   unmountComponentAtNode(containerTag: number) {
+    this.stopSurface(containerTag);
+  },
+
+  stopSurface(containerTag: number) {
     const root = roots.get(containerTag);
     if (root) {
       // TODO: Is it safe to reset this now or should I wait since this unmount could be deferred?
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
index 09e8124d0e154..9def0894f8cfa 100644
--- a/packages/react-native-renderer/src/ReactFabricComponentTree.js
+++ b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -7,14 +7,25 @@
 
 import invariant from 'shared/invariant';
 
+import {enableNativeTargetAsInstance} from 'shared/ReactFeatureFlags';
+
 function getInstanceFromInstance(instanceHandle) {
   return instanceHandle;
 }
 
 function getTagFromInstance(inst) {
-  let tag = inst.stateNode.canonical._nativeTag;
-  invariant(tag, 'All native instances should have a tag.');
-  return tag;
+  if (enableNativeTargetAsInstance) {
+    let nativeInstance = inst.stateNode.canonical;
+    invariant(
+      nativeInstance._nativeTag,
+      'All native instances should have a tag.',
+    );
+    return nativeInstance;
+  } else {
+    let tag = inst.stateNode.canonical._nativeTag;
+    invariant(tag, 'All native instances should have a tag.');
+    return tag;
+  }
 }
 
 export {
diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
index eead4ba1d10a2..98c1c3c7184c4 100644
--- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -9,15 +9,17 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 
+import {PLUGIN_EVENT_SYSTEM} from 'legacy-events/EventSystemFlags';
 import {
   getListener,
   runExtractedPluginEventsInBatch,
-} from 'events/EventPluginHub';
-import {registrationNameModules} from 'events/EventPluginRegistry';
-import {batchedUpdates} from 'events/ReactGenericBatching';
+} from 'legacy-events/EventPluginHub';
+import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
+import {batchedUpdates} from 'legacy-events/ReactGenericBatching';
 
-import type {AnyNativeEvent} from 'events/PluginModuleType';
-import type {TopLevelType} from 'events/TopLevelEventTypes';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
+import {enableNativeTargetAsInstance} from 'shared/ReactFeatureFlags';
+import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
 
 export {getListener, registrationNameModules as registrationNames};
 
@@ -27,12 +29,24 @@ export function dispatchEvent(
   nativeEvent: AnyNativeEvent,
 ) {
   const targetFiber = (target: null | Fiber);
+
+  let eventTarget = null;
+  if (enableNativeTargetAsInstance) {
+    if (targetFiber != null) {
+      eventTarget = targetFiber.stateNode.canonical;
+    }
+  } else {
+    eventTarget = nativeEvent.target;
+  }
+
   batchedUpdates(function() {
+    // Heritage plugin event system
     runExtractedPluginEventsInBatch(
       topLevelType,
       targetFiber,
       nativeEvent,
-      nativeEvent.target,
+      eventTarget,
+      PLUGIN_EVENT_SYSTEM,
     );
   });
   // React Native doesn't use ReactControlledComponent but if it did, here's
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 942a6f033e3b9..959860bcf2cbb 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -11,16 +11,14 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
@@ -61,10 +59,9 @@ export type Props = Object;
 export type Instance = {
   node: Node,
   canonical: ReactFabricHostComponent,
+  ...
 };
-export type TextInstance = {
-  node: Node,
-};
+export type TextInstance = {node: Node, ...};
 export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = ReactFabricHostComponent;
 export type Container = number;
@@ -129,18 +126,19 @@ class ReactFabricHostComponent {
   }
 
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ReactFabricHostComponent,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void /* currently unused */,
+    onFail?: () => void /* currently unused */,
   ) {
     if (
       typeof relativeToNativeNode === 'number' ||
       !(relativeToNativeNode instanceof ReactFabricHostComponent)
     ) {
-      warningWithoutStack(
-        false,
-        'Warning: ref.measureLayout must be called with a ref to a native component.',
-      );
+      if (__DEV__) {
+        console.error(
+          'Warning: ref.measureLayout must be called with a ref to a native component.',
+        );
+      }
 
       return;
     }
@@ -154,17 +152,18 @@ class ReactFabricHostComponent {
   }
 
   setNativeProps(nativeProps: Object) {
-    warningWithoutStack(
-      false,
-      'Warning: setNativeProps is not currently supported in Fabric',
-    );
+    if (__DEV__) {
+      console.error(
+        'Warning: setNativeProps is not currently supported in Fabric',
+      );
+    }
 
     return;
   }
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactFabricHostComponent.prototype: NativeMethodsMixinType);
+(ReactFabricHostComponent.prototype: NativeMethods);
 
 export * from 'shared/HostConfigWithNoMutation';
 export * from 'shared/HostConfigWithNoHydration';
@@ -282,21 +281,6 @@ export function getChildHostContext(
   }
 }
 
-export function getChildHostContextForEventComponent(
-  parentHostContext: HostContext,
-) {
-  // TODO: add getChildHostContextForEventComponent implementation
-  return parentHostContext;
-}
-
-export function getChildHostContextForEventTarget(
-  parentHostContext: HostContext,
-  type: Symbol | number,
-) {
-  // TODO: add getChildHostContextForEventTarget implementation
-  return parentHostContext;
-}
-
 export function getPublicInstance(instance: Instance): * {
   return instance.canonical;
 }
@@ -343,6 +327,9 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
 // The Fabric renderer is secondary to the existing React Native renderer.
 export const isPrimaryRenderer = false;
 
+// The Fabric renderer shouldn't trigger missing act() warnings
+export const warnsIfNotActing = false;
+
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
@@ -433,45 +420,50 @@ export function replaceContainerChildren(
   newChildren: ChildSet,
 ): void {}
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+export function DEPRECATED_mountResponderInstance(
+  responder: any,
+  responderInstance: any,
+  props: Object,
+  state: Object,
+  instance: Instance,
 ) {
   throw new Error('Not yet implemented.');
 }
 
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-) {
+export function DEPRECATED_unmountResponderInstance(
+  responderInstance: any,
+): void {
   throw new Error('Not yet implemented.');
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
+export function getFundamentalComponentInstance(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null {
+export function mountFundamentalComponent(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
-): boolean {
+export function shouldUpdateFundamentalComponent(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
-): void {
+export function updateFundamentalComponent(fundamentalInstance: any) {
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountFundamentalComponent(fundamentalInstance: any) {
+  throw new Error('Not yet implemented.');
+}
+
+export function cloneFundamentalInstance(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node: any) {
+  throw new Error('Not yet implemented.');
+}
+
+export function beforeRemoveInstance(instance: any) {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactFabricInjection.js b/packages/react-native-renderer/src/ReactFabricInjection.js
index 11279f4415979..a2502f700a04b 100644
--- a/packages/react-native-renderer/src/ReactFabricInjection.js
+++ b/packages/react-native-renderer/src/ReactFabricInjection.js
@@ -14,9 +14,9 @@ import {
   getInstanceFromNode,
   getNodeFromInstance,
 } from './ReactFabricComponentTree';
-import {setComponentTree} from 'events/EventPluginUtils';
+import {setComponentTree} from 'legacy-events/EventPluginUtils';
 import ReactFabricGlobalResponderHandler from './ReactFabricGlobalResponderHandler';
-import ResponderEventPlugin from 'events/ResponderEventPlugin';
+import ResponderEventPlugin from 'legacy-events/ResponderEventPlugin';
 
 setComponentTree(
   getFiberCurrentPropsFromNode,
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
index 5e6cd4d81533f..5804d83b5dc59 100644
--- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -32,13 +32,17 @@ type NestedNode = Array<NestedNode> | Object;
 let removedKeys = null;
 let removedKeyCount = 0;
 
+const deepDifferOptions = {
+  unsafelyIgnoreFunctions: true,
+};
+
 function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean {
   if (typeof nextProp !== 'object' || nextProp === null) {
     // Scalars have already been checked for equality
     return true;
   } else {
     // For objects and arrays, the default diffing algorithm is a deep compare
-    return deepDiffer(prevProp, nextProp);
+    return deepDiffer(prevProp, nextProp, deepDifferOptions);
   }
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index 56f4fe65c557a..424f0eae25d22 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -7,13 +7,14 @@
  * @flow
  */
 
-import type {AnyNativeEvent} from 'events/PluginModuleType';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
+import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 import {
   accumulateTwoPhaseDispatches,
   accumulateDirectDispatches,
-} from 'events/EventPropagators';
-import type {TopLevelType} from 'events/TopLevelEventTypes';
-import SyntheticEvent from 'events/SyntheticEvent';
+} from 'legacy-events/EventPropagators';
+import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
+import SyntheticEvent from 'legacy-events/SyntheticEvent';
 import invariant from 'shared/invariant';
 
 // Module provided by RN:
@@ -22,11 +23,10 @@ import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate
 const {
   customBubblingEventTypes,
   customDirectEventTypes,
-  eventTypes,
 } = ReactNativeViewConfigRegistry;
 
 const ReactNativeBridgeEventPlugin = {
-  eventTypes: eventTypes,
+  eventTypes: {},
 
   /**
    * @see {EventPluginHub.extractEvents}
@@ -35,7 +35,8 @@ const ReactNativeBridgeEventPlugin = {
     topLevelType: TopLevelType,
     targetInst: null | Object,
     nativeEvent: AnyNativeEvent,
-    nativeEventTarget: Object,
+    nativeEventTarget: null | Object,
+    eventSystemFlags: EventSystemFlags,
   ): ?Object {
     if (targetInst == null) {
       // Probably a node belonging to another renderer's tree.
diff --git a/packages/react-native-renderer/src/ReactNativeComponent.js b/packages/react-native-renderer/src/ReactNativeComponent.js
index b6c3dfb59dee2..795c666474a68 100644
--- a/packages/react-native-renderer/src/ReactNativeComponent.js
+++ b/packages/react-native-renderer/src/ReactNativeComponent.js
@@ -12,7 +12,7 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
 
@@ -26,9 +26,6 @@ import {
 import {create} from './ReactNativeAttributePayload';
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
-
 export default function(
   findNodeHandle: any => ?number,
   findHostInstance: any => any,
@@ -172,7 +169,7 @@ export default function(
     measureLayout(
       relativeToNativeNode: number | Object,
       onSuccess: MeasureLayoutOnSuccessCallback,
-      onFail: () => void /* currently unused */,
+      onFail?: () => void /* currently unused */,
     ): void {
       let maybeInstance;
 
@@ -191,12 +188,13 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        warningWithoutStack(
-          false,
-          'Warning: measureLayout on components using NativeMethodsMixin ' +
-            'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
-            'measureLayout must be called on a native ref. Consider using forwardRef.',
-        );
+        if (__DEV__) {
+          console.error(
+            'Warning: measureLayout on components using NativeMethodsMixin ' +
+              'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
+              'measureLayout must be called on a native ref. Consider using forwardRef.',
+          );
+        }
         return;
       } else {
         let relativeNode;
@@ -209,10 +207,11 @@ export default function(
         }
 
         if (relativeNode == null) {
-          warningWithoutStack(
-            false,
-            'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
-          );
+          if (__DEV__) {
+            console.error(
+              'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
+            );
+          }
 
           return;
         }
@@ -255,23 +254,12 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        warningWithoutStack(
-          false,
-          'Warning: setNativeProps is not currently supported in Fabric',
-        );
-        return;
-      }
-
-      if (__DEV__) {
-        if (warnAboutDeprecatedSetNativeProps) {
-          warningWithoutStack(
-            false,
-            'Warning: Calling ref.setNativeProps(nativeProps) ' +
-              'is deprecated and will be removed in a future release. ' +
-              'Use the setNativeProps export from the react-native package instead.' +
-              "\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
+        if (__DEV__) {
+          console.error(
+            'Warning: setNativeProps is not currently supported in Fabric',
           );
         }
+        return;
       }
 
       const nativeTag =
@@ -295,7 +283,7 @@ export default function(
   }
 
   // eslint-disable-next-line no-unused-expressions
-  (ReactNativeComponent.prototype: NativeMethodsMixinType);
+  (ReactNativeComponent.prototype: NativeMethods);
 
   return ReactNativeComponent;
 }
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
index 9f580d72e74ff..6ba871b7c083b 100644
--- a/packages/react-native-renderer/src/ReactNativeComponentTree.js
+++ b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -7,29 +7,42 @@
 
 import invariant from 'shared/invariant';
 
-const instanceCache = {};
-const instanceProps = {};
+import {enableNativeTargetAsInstance} from 'shared/ReactFeatureFlags';
+
+const instanceCache = new Map();
+const instanceProps = new Map();
 
 export function precacheFiberNode(hostInst, tag) {
-  instanceCache[tag] = hostInst;
+  instanceCache.set(tag, hostInst);
 }
 
 export function uncacheFiberNode(tag) {
-  delete instanceCache[tag];
-  delete instanceProps[tag];
+  instanceCache.delete(tag);
+  instanceProps.delete(tag);
 }
 
 function getInstanceFromTag(tag) {
-  return instanceCache[tag] || null;
+  return instanceCache.get(tag) || null;
 }
 
 function getTagFromInstance(inst) {
-  let tag = inst.stateNode._nativeTag;
-  if (tag === undefined) {
-    tag = inst.stateNode.canonical._nativeTag;
+  if (enableNativeTargetAsInstance) {
+    let nativeInstance = inst.stateNode;
+    let tag = nativeInstance._nativeTag;
+    if (tag === undefined) {
+      nativeInstance = nativeInstance.canonical;
+      tag = nativeInstance._nativeTag;
+    }
+    invariant(tag, 'All native instances should have a tag.');
+    return nativeInstance;
+  } else {
+    let tag = inst.stateNode._nativeTag;
+    if (tag === undefined) {
+      tag = inst.stateNode.canonical._nativeTag;
+    }
+    invariant(tag, 'All native instances should have a tag.');
+    return tag;
   }
-  invariant(tag, 'All native instances should have a tag.');
-  return tag;
 }
 
 export {
@@ -39,9 +52,9 @@ export {
 };
 
 export function getFiberCurrentPropsFromNode(stateNode) {
-  return instanceProps[stateNode._nativeTag] || null;
+  return instanceProps.get(stateNode._nativeTag) || null;
 }
 
 export function updateFiberProps(tag, props) {
-  instanceProps[tag] = props;
+  instanceProps.set(tag, props);
 }
diff --git a/packages/react-native-renderer/src/ReactNativeEventEmitter.js b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
index 912291cd457a6..07c62f83edd6f 100644
--- a/packages/react-native-renderer/src/ReactNativeEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
@@ -7,18 +7,19 @@
  * @flow
  */
 
+import {PLUGIN_EVENT_SYSTEM} from 'legacy-events/EventSystemFlags';
 import {
   getListener,
   runExtractedPluginEventsInBatch,
-} from 'events/EventPluginHub';
-import {registrationNameModules} from 'events/EventPluginRegistry';
-import {batchedUpdates} from 'events/ReactGenericBatching';
-import warningWithoutStack from 'shared/warningWithoutStack';
+} from 'legacy-events/EventPluginHub';
+import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
+import {batchedUpdates} from 'legacy-events/ReactGenericBatching';
+import {enableNativeTargetAsInstance} from 'shared/ReactFeatureFlags';
 
 import {getInstanceFromNode} from './ReactNativeComponentTree';
 
-import type {AnyNativeEvent} from 'events/PluginModuleType';
-import type {TopLevelType} from 'events/TopLevelEventTypes';
+import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
+import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
 
 export {getListener, registrationNameModules as registrationNames};
 
@@ -97,12 +98,23 @@ function _receiveRootNodeIDEvent(
 ) {
   const nativeEvent = nativeEventParam || EMPTY_NATIVE_EVENT;
   const inst = getInstanceFromNode(rootNodeID);
+
+  let target = null;
+  if (enableNativeTargetAsInstance) {
+    if (inst != null) {
+      target = inst.stateNode;
+    }
+  } else {
+    target = nativeEvent.target;
+  }
+
   batchedUpdates(function() {
     runExtractedPluginEventsInBatch(
       topLevelType,
       inst,
       nativeEvent,
-      nativeEvent.target,
+      target,
+      PLUGIN_EVENT_SYSTEM,
     );
   });
   // React Native doesn't use ReactControlledComponent but if it did, here's
@@ -171,8 +183,7 @@ export function receiveTouches(
     if (target !== null && target !== undefined) {
       if (target < 1) {
         if (__DEV__) {
-          warningWithoutStack(
-            false,
+          console.error(
             'A view is reporting that a touch occurred on tag zero.',
           );
         }
diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
index 02d47c84c030f..cad31637b4ea9 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
@@ -11,7 +11,7 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
 import type {Instance} from './ReactNativeHostConfig';
@@ -28,9 +28,6 @@ import {
   warnForStyleProps,
 } from './NativeMethodsMixinUtils';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
-
 /**
  * This component defines the same methods as NativeMethodsMixin but without the
  * findNodeHandle wrapper. This wrapper is unnecessary for HostComponent views
@@ -72,29 +69,25 @@ class ReactNativeFiberHostComponent {
   }
 
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ReactNativeFiberHostComponent,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void /* currently unused */,
+    onFail?: () => void /* currently unused */,
   ) {
-    let relativeNode;
+    let relativeNode: ?number;
 
     if (typeof relativeToNativeNode === 'number') {
       // Already a node handle
       relativeNode = relativeToNativeNode;
     } else if (relativeToNativeNode._nativeTag) {
       relativeNode = relativeToNativeNode._nativeTag;
-    } else if (
-      relativeToNativeNode.canonical &&
-      relativeToNativeNode.canonical._nativeTag
-    ) {
-      relativeNode = relativeToNativeNode.canonical._nativeTag;
     }
 
     if (relativeNode == null) {
-      warningWithoutStack(
-        false,
-        'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
-      );
+      if (__DEV__) {
+        console.error(
+          'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
+        );
+      }
 
       return;
     }
@@ -109,15 +102,6 @@ class ReactNativeFiberHostComponent {
 
   setNativeProps(nativeProps: Object) {
     if (__DEV__) {
-      if (warnAboutDeprecatedSetNativeProps) {
-        warningWithoutStack(
-          false,
-          'Warning: Calling ref.setNativeProps(nativeProps) ' +
-            'is deprecated and will be removed in a future release. ' +
-            'Use the setNativeProps export from the react-native package instead.' +
-            "\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
-        );
-      }
       warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
     }
 
@@ -137,6 +121,6 @@ class ReactNativeFiberHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType);
+(ReactNativeFiberHostComponent.prototype: NativeMethods);
 
 export default ReactNativeFiberHostComponent;
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 80a30a55a69d7..e91c16a4909dc 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -8,7 +8,6 @@
  */
 
 import type {ReactNativeBaseComponentViewConfig} from './ReactNativeTypes';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 
 import invariant from 'shared/invariant';
 
@@ -36,6 +35,7 @@ export type Instance = {
   _children: Array<Instance | number>,
   _nativeTag: number,
   viewConfig: ReactNativeBaseComponentViewConfig<>,
+  ...
 };
 export type TextInstance = number;
 export type HydratableInstance = Instance | TextInstance;
@@ -164,11 +164,10 @@ export function finalizeInitialChildren(
 
   // Map from child objects to native tags.
   // Either way we need to pass a copy of the Array to prevent it from being frozen.
-  const nativeTags = parentInstance._children.map(
-    child =>
-      typeof child === 'number'
-        ? child // Leaf node (eg text)
-        : child._nativeTag,
+  const nativeTags = parentInstance._children.map(child =>
+    typeof child === 'number'
+      ? child // Leaf node (eg text)
+      : child._nativeTag,
   );
 
   UIManager.setChildren(
@@ -205,21 +204,6 @@ export function getChildHostContext(
   }
 }
 
-export function getChildHostContextForEventComponent(
-  parentHostContext: HostContext,
-) {
-  // TODO: add getChildHostContextForEventComponent implementation
-  return parentHostContext;
-}
-
-export function getChildHostContextForEventTarget(
-  parentHostContext: HostContext,
-  type: Symbol | number,
-) {
-  // TODO: add getChildHostContextForEventTarget implementation
-  return parentHostContext;
-}
-
 export function getPublicInstance(instance: Instance): * {
   return instance;
 }
@@ -244,6 +228,7 @@ export function resetAfterCommit(containerInfo: Container): void {
 }
 
 export const isPrimaryRenderer = true;
+export const warnsIfNotActing = true;
 
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
@@ -492,45 +477,46 @@ export function unhideTextInstance(
   throw new Error('Not yet implemented.');
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+export function DEPRECATED_mountResponderInstance(
+  responder: any,
+  responderInstance: any,
+  props: Object,
+  state: Object,
+  instance: Instance,
 ) {
   throw new Error('Not yet implemented.');
 }
 
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-) {
+export function DEPRECATED_unmountResponderInstance(
+  responderInstance: any,
+): void {
   throw new Error('Not yet implemented.');
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
+export function getFundamentalComponentInstance(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null {
+export function mountFundamentalComponent(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
-): boolean {
+export function shouldUpdateFundamentalComponent(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
-): void {
+export function updateFundamentalComponent(fundamentalInstance: any) {
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountFundamentalComponent(fundamentalInstance: any) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node: any) {
+  throw new Error('Not yet implemented.');
+}
+
+export function beforeRemoveInstance(instance: any) {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactNativeInjection.js b/packages/react-native-renderer/src/ReactNativeInjection.js
index 3e775c4572c7a..7c88fa03f6835 100644
--- a/packages/react-native-renderer/src/ReactNativeInjection.js
+++ b/packages/react-native-renderer/src/ReactNativeInjection.js
@@ -14,10 +14,10 @@ import {
   getInstanceFromNode,
   getNodeFromInstance,
 } from './ReactNativeComponentTree';
-import {setComponentTree} from 'events/EventPluginUtils';
+import {setComponentTree} from 'legacy-events/EventPluginUtils';
 import {receiveEvent, receiveTouches} from './ReactNativeEventEmitter';
 import ReactNativeGlobalResponderHandler from './ReactNativeGlobalResponderHandler';
-import ResponderEventPlugin from 'events/ResponderEventPlugin';
+import ResponderEventPlugin from 'legacy-events/ResponderEventPlugin';
 
 // Module provided by RN:
 import {RCTEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
diff --git a/packages/react-native-renderer/src/ReactNativeInjectionShared.js b/packages/react-native-renderer/src/ReactNativeInjectionShared.js
index a8861d3589bf5..9e97891918812 100644
--- a/packages/react-native-renderer/src/ReactNativeInjectionShared.js
+++ b/packages/react-native-renderer/src/ReactNativeInjectionShared.js
@@ -16,8 +16,8 @@
 // Module provided by RN:
 import 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore';
 
-import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
-import ResponderEventPlugin from 'events/ResponderEventPlugin';
+import {injection as EventPluginHubInjection} from 'legacy-events/EventPluginHub';
+import ResponderEventPlugin from 'legacy-events/ResponderEventPlugin';
 
 import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';
 import ReactNativeEventPluginOrder from './ReactNativeEventPluginOrder';
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 7c333f8148fbc..5c5b10fcf1cfa 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNativeType} from './ReactNativeTypes';
+import type {ReactNativeType, HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import './ReactNativeInjection';
@@ -30,7 +30,7 @@ import {createPortal} from 'shared/ReactPortal';
 import {
   setBatchingImplementation,
   batchedUpdates,
-} from 'events/ReactGenericBatching';
+} from 'legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 // Module provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
@@ -39,28 +39,76 @@ import NativeMethodsMixin from './NativeMethodsMixin';
 import ReactNativeComponent from './ReactNativeComponent';
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
-import {setNativeProps} from './ReactNativeRendererSharedExports';
 
 import {LegacyRoot} from 'shared/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentName from 'shared/getComponentName';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
+function findHostInstance_DEPRECATED(
+  componentOrHandle: any,
+): ?React$ElementRef<HostComponent<mixed>> {
+  if (__DEV__) {
+    const owner = ReactCurrentOwner.current;
+    if (owner !== null && owner.stateNode !== null) {
+      if (!owner.stateNode._warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing findNodeHandle inside its render(). ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(owner.type) || 'A component',
+        );
+      }
+
+      owner.stateNode._warnedAboutRefsInRender = true;
+    }
+  }
+  if (componentOrHandle == null) {
+    return null;
+  }
+  if (componentOrHandle._nativeTag) {
+    return componentOrHandle;
+  }
+  if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
+    return componentOrHandle.canonical;
+  }
+  let hostInstance;
+  if (__DEV__) {
+    hostInstance = findHostInstanceWithWarning(
+      componentOrHandle,
+      'findHostInstance_DEPRECATED',
+    );
+  } else {
+    hostInstance = findHostInstance(componentOrHandle);
+  }
+
+  if (hostInstance == null) {
+    return hostInstance;
+  }
+  if ((hostInstance: any).canonical) {
+    // Fabric
+    return (hostInstance: any).canonical;
+  }
+  return hostInstance;
+}
+
 function findNodeHandle(componentOrHandle: any): ?number {
   if (__DEV__) {
     const owner = ReactCurrentOwner.current;
     if (owner !== null && owner.stateNode !== null) {
-      warningWithoutStack(
-        owner.stateNode._warnedAboutRefsInRender,
-        '%s is accessing findNodeHandle inside its render(). ' +
-          'render() should be a pure function of props and state. It should ' +
-          'never access something that requires stale data from the previous ' +
-          'render, such as refs. Move this logic to componentDidMount and ' +
-          'componentDidUpdate instead.',
-        getComponentName(owner.type) || 'A component',
-      );
+      if (!owner.stateNode._warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing findNodeHandle inside its render(). ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(owner.type) || 'A component',
+        );
+      }
 
       owner.stateNode._warnedAboutRefsInRender = true;
     }
@@ -118,9 +166,32 @@ const roots = new Map();
 const ReactNativeRenderer: ReactNativeType = {
   NativeComponent: ReactNativeComponent(findNodeHandle, findHostInstance),
 
+  // This is needed for implementation details of TouchableNativeFeedback
+  // Remove this once TouchableNativeFeedback doesn't use cloneElement
+  findHostInstance_DEPRECATED,
   findNodeHandle,
 
-  setNativeProps,
+  dispatchCommand(handle: any, command: string, args: Array<any>) {
+    if (handle._nativeTag == null) {
+      if (__DEV__) {
+        console.error(
+          "dispatchCommand was called with a ref that isn't a " +
+            'native component. Use React.forwardRef to get access to the underlying native component',
+        );
+      }
+      return;
+    }
+
+    if (handle._internalInstanceHandle) {
+      nativeFabricUIManager.dispatchCommand(
+        handle._internalInstanceHandle.stateNode.node,
+        command,
+        args,
+      );
+    } else {
+      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+    }
+  },
 
   render(element: React$Element<any>, containerTag: any, callback: ?Function) {
     let root = roots.get(containerTag);
@@ -128,7 +199,7 @@ const ReactNativeRenderer: ReactNativeType = {
     if (!root) {
       // TODO (bvaughn): If we decide to keep the wrapper component,
       // We could create a wrapper for containerTag as well to reduce special casing.
-      root = createContainer(containerTag, LegacyRoot, false);
+      root = createContainer(containerTag, LegacyRoot, false, null);
       roots.set(containerTag, root);
     }
     updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRendererSharedExports.js b/packages/react-native-renderer/src/ReactNativeRendererSharedExports.js
deleted file mode 100644
index f79f4d087c1ab..0000000000000
--- a/packages/react-native-renderer/src/ReactNativeRendererSharedExports.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import {create} from './ReactNativeAttributePayload';
-import {warnForStyleProps} from './NativeMethodsMixinUtils';
-
-import warningWithoutStack from 'shared/warningWithoutStack';
-
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
-export function setNativeProps(handle: any, nativeProps: Object): void {
-  if (handle._nativeTag == null) {
-    warningWithoutStack(
-      handle._nativeTag != null,
-      "setNativeProps was called with a ref that isn't a " +
-        'native component. Use React.forwardRef to get access to the underlying native component',
-    );
-    return;
-  }
-
-  if (__DEV__) {
-    warnForStyleProps(nativeProps, handle.viewConfig.validAttributes);
-  }
-
-  const updatePayload = create(nativeProps, handle.viewConfig.validAttributes);
-  // Avoid the overhead of bridge calls if there's no update.
-  // This is an expensive no-op for Android, and causes an unnecessary
-  // view invalidation for certain components (eg RCTTextInput) on iOS.
-  if (updatePayload != null) {
-    UIManager.updateView(
-      handle._nativeTag,
-      handle.viewConfig.uiViewClassName,
-      updatePayload,
-    );
-  }
-}
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 3e777114db2ae..b062d06564090 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -8,7 +8,7 @@
  * @flow
  */
 
-import React from 'react';
+import React, {type ElementRef, type AbstractComponent} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -45,9 +45,8 @@ export type AttributeConfiguration<
   TStyleProps = string,
 > = $ReadOnly<{
   [propName: TProps]: AttributeType,
-  style: $ReadOnly<{
-    [propName: TStyleProps]: AttributeType,
-  }>,
+  style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>,
+  ...
 }>;
 
 export type ReactNativeBaseComponentViewConfig<
@@ -62,18 +61,16 @@ export type ReactNativeBaseComponentViewConfig<
         bubbled: string,
       |}>,
     |}>,
+    ...,
   }>,
-  Commands?: $ReadOnly<{
-    [commandName: string]: number,
-  }>,
+  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
   directEventTypes?: $ReadOnly<{
     [eventName: string]: $ReadOnly<{|
       registrationName: string,
     |}>,
+    ...,
   }>,
-  NativeProps?: $ReadOnly<{
-    [propName: string]: string,
-  }>,
+  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration<TProps, TStyleProps>,
 |}>;
@@ -89,39 +86,50 @@ class ReactNativeComponent<Props> extends React.Component<Props> {
   measure(callback: MeasureOnSuccessCallback): void {}
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {}
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void {}
   setNativeProps(nativeProps: Object): void {}
 }
 
+// This type is only used for FlowTests. It shouldn't be imported directly
+export type _InternalReactNativeComponentClass<Props> = Class<
+  ReactNativeComponent<Props>,
+>;
+
 /**
  * This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync.
  * It can also provide types for ReactNative applications that use NMM or refs.
  */
-export type NativeMethodsMixinType = {
+export type NativeMethods = {
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void,
+    onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: Object): void,
+  ...
 };
 
+export type NativeMethodsMixinType = NativeMethods;
+export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
+
 type SecretInternalsType = {
   NativeMethodsMixin: NativeMethodsMixinType,
   computeComponentStackForErrorReporting(tag: number): string,
   // TODO (bvaughn) Decide which additional types to expose here?
   // And how much information to fill in for the above types.
+  ...
 };
 
 type SecretInternalsFabricType = {
   NativeMethodsMixin: NativeMethodsMixinType,
+  ...
 };
 
 /**
@@ -129,9 +137,12 @@ type SecretInternalsFabricType = {
  * Provide minimal Flow typing for the high-level RN API and call it a day.
  */
 export type ReactNativeType = {
-  NativeComponent: typeof ReactNativeComponent,
+  NativeComponent: _InternalReactNativeComponentClass<{...}>,
+  findHostInstance_DEPRECATED(
+    componentOrHandle: any,
+  ): ?ElementRef<HostComponent<mixed>>,
   findNodeHandle(componentOrHandle: any): ?number,
-  setNativeProps(handle: any, nativeProps: Object): void,
+  dispatchCommand(handle: any, command: string, args: Array<any>): void,
   render(
     element: React$Element<any>,
     containerTag: any,
@@ -139,21 +150,57 @@ export type ReactNativeType = {
   ): any,
   unmountComponentAtNode(containerTag: number): any,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): any,
-  unstable_batchedUpdates: any, // TODO (bvaughn) Add types
-
+  // TODO (bvaughn) Add types
+  unstable_batchedUpdates: any,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
+  ...
 };
 
 export type ReactFabricType = {
-  NativeComponent: typeof ReactNativeComponent,
+  NativeComponent: _InternalReactNativeComponentClass<{...}>,
+  findHostInstance_DEPRECATED(componentOrHandle: any): ?HostComponent<mixed>,
   findNodeHandle(componentOrHandle: any): ?number,
-  setNativeProps(handle: any, nativeProps: Object): void,
+  dispatchCommand(handle: any, command: string, args: Array<any>): void,
   render(
     element: React$Element<any>,
     containerTag: any,
     callback: ?Function,
   ): any,
   unmountComponentAtNode(containerTag: number): any,
-
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsFabricType,
+  ...
+};
+
+export type ReactNativeEventTarget = {
+  node: Object,
+  canonical: {
+    _nativeTag: number,
+    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    currentProps: Object,
+    _internalInstanceHandle: Object,
+    ...
+  },
+  ...
+};
+
+export type ReactFaricEventTouch = {
+  identifier: number,
+  locationX: number,
+  locationY: number,
+  pageX: number,
+  pageY: number,
+  screenX: number,
+  screenY: number,
+  target: number,
+  timestamp: number,
+  force: number,
+  ...
+};
+
+export type ReactFaricEvent = {
+  touches: Array<ReactFaricEventTouch>,
+  changedTouches: Array<ReactFaricEventTouch>,
+  targetTouches: Array<ReactFaricEventTouch>,
+  target: number,
+  ...
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index 84a00eeaa897b..ade2efa5d7cbd 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 'use strict';
 
@@ -120,6 +120,8 @@ const RCTFabricUIManager = {
     roots.set(rootTag, newChildSet);
   }),
 
+  dispatchCommand: jest.fn(),
+
   registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
   measure: jest.fn(function measure(node, callback) {
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactFiberErrorDialog.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactFiberErrorDialog.js
new file mode 100644
index 0000000000000..121a75e18381d
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactFiberErrorDialog.js
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+module.exports = {
+  showErrorDialog: jest.fn(),
+};
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
index 855a43338be51..9d49212e0044e 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -11,15 +11,15 @@ module.exports = {
   get BatchedBridge() {
     return require('./BatchedBridge.js');
   },
-  get ExceptionsManager() {
-    return require('./ExceptionsManager');
-  },
   get Platform() {
     return require('./Platform');
   },
   get RCTEventEmitter() {
     return require('./RCTEventEmitter');
   },
+  get ReactFiberErrorDialog() {
+    return require('./ReactFiberErrorDialog');
+  },
   get ReactNativeViewConfigRegistry() {
     return require('./ReactNativeViewConfigRegistry');
   },
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index 77424ad510513..39813814dae1c 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -7,7 +7,7 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 'use strict';
 
@@ -78,6 +78,12 @@ exports.register = function(name: string, callback: ViewConfigGetter): string {
     'Tried to register two views with the same name %s',
     name,
   );
+  invariant(
+    typeof callback === 'function',
+    'View config getter callback for component `%s` must be a function (received `%s`)',
+    name,
+    callback === null ? 'null' : typeof callback,
+  );
   viewConfigCallbacks.set(name, callback);
   return name;
 };
@@ -94,17 +100,21 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
     if (typeof callback !== 'function') {
       invariant(
         false,
-        'View config not found for name %s.%s',
+        'View config getter callback for component `%s` must be a function (received `%s`).%s',
         name,
+        callback === null ? 'null' : typeof callback,
         typeof name[0] === 'string' && /[a-z]/.test(name[0])
           ? ' Make sure to start component names with a capital letter.'
           : '',
       );
     }
-    viewConfigCallbacks.set(name, null);
     viewConfig = callback();
     processEventTypes(viewConfig);
     viewConfigs.set(name, viewConfig);
+
+    // Clear the callback after the config is set so that
+    // we don't mask any errors during registration.
+    viewConfigCallbacks.set(name, null);
   } else {
     viewConfig = viewConfigs.get(name);
   }
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 43cd100f48a96..6f66e6d588d09 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 'use strict';
 
@@ -88,6 +88,7 @@ const RCTUIManager = {
       viewName: viewName,
     });
   }),
+  dispatchViewManagerCommand: jest.fn(),
   setJSResponder: jest.fn(),
   setChildren: jest.fn(function setChildren(parentTag, reactTags) {
     autoCreateRoot(parentTag);
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
index a4ede524658ce..8bc969ffb6523 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
@@ -3,20 +3,43 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
  */
 
 'use strict';
 
-// TODO: Move deepDiffer into react
+type Options = {|+unsafelyIgnoreFunctions?: boolean|};
 
-const deepDiffer = function(one: any, two: any): boolean {
+/*
+ * @returns {bool} true if different, false if equal
+ */
+const deepDiffer = function(
+  one: any,
+  two: any,
+  maxDepthOrOptions: Options | number = -1,
+  maybeOptions?: Options,
+): boolean {
+  const options =
+    typeof maxDepthOrOptions === 'number' ? maybeOptions : maxDepthOrOptions;
+  const maxDepth =
+    typeof maxDepthOrOptions === 'number' ? maxDepthOrOptions : -1;
+  if (maxDepth === 0) {
+    return true;
+  }
   if (one === two) {
     // Short circuit on identical object references instead of traversing them.
     return false;
   }
   if (typeof one === 'function' && typeof two === 'function') {
-    // We consider all functions equal
-    return false;
+    // We consider all functions equal unless explicitly configured otherwise
+    let unsafelyIgnoreFunctions =
+      options == null ? null : options.unsafelyIgnoreFunctions;
+    if (unsafelyIgnoreFunctions == null) {
+      unsafelyIgnoreFunctions = true;
+    }
+    return !unsafelyIgnoreFunctions;
   }
   if (typeof one !== 'object' || one === null) {
     // Primitives can be directly compared
@@ -37,13 +60,13 @@ const deepDiffer = function(one: any, two: any): boolean {
       return true;
     }
     for (let ii = 0; ii < len; ii++) {
-      if (deepDiffer(one[ii], two[ii])) {
+      if (deepDiffer(one[ii], two[ii], maxDepth - 1, options)) {
         return true;
       }
     }
   } else {
     for (const key in one) {
-      if (deepDiffer(one[key], two[key])) {
+      if (deepDiffer(one[key], two[key], maxDepth - 1, options)) {
         return true;
       }
     }
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 524b4ed150b4c..51dd4ca835313 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -22,6 +22,10 @@ let NativeMethodsMixin;
 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
   'Warning: setNativeProps is not currently supported in Fabric';
 
+const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
+  "Warning: dispatchCommand was called with a ref that isn't a " +
+  'native component. Use React.forwardRef to get access to the underlying native component';
+
 jest.mock('shared/ReactFeatureFlags', () =>
   require('shared/forks/ReactFeatureFlags.native-oss'),
 );
@@ -34,9 +38,8 @@ describe('ReactFabric', () => {
 
     React = require('react');
     StrictMode = React.StrictMode;
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
     ReactFabric = require('react-native-renderer/fabric');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .UIManager;
     createReactClass = require('create-react-class/factory')(
@@ -240,7 +243,7 @@ describe('ReactFabric', () => {
 
       expect(() => {
         viewRef.setNativeProps({});
-      }).toWarnDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
+      }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
         withoutStack: true,
       });
 
@@ -248,42 +251,42 @@ describe('ReactFabric', () => {
 
       expect(() => {
         viewRef.setNativeProps({foo: 'baz'});
-      }).toWarnDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
+      }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
         withoutStack: true,
       });
       expect(UIManager.updateView).not.toBeCalled();
     });
   });
 
-  it('setNativeProps on native refs should no-op', () => {
+  it('should call dispatchCommand for native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
       uiViewClassName: 'RCTView',
     }));
 
-    UIManager.updateView.mockReset();
+    [View].forEach(Component => {
+      nativeFabricUIManager.dispatchCommand.mockClear();
 
-    let viewRef;
-    ReactFabric.render(
-      <View
-        foo="bar"
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+      let viewRef;
+      ReactFabric.render(
+        <Component
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
 
-    expect(UIManager.updateView).not.toBeCalled();
-    expect(() => {
-      ReactFabric.setNativeProps(viewRef, {foo: 'baz'});
-    }).toWarnDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
-      withoutStack: true,
+      expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
+      ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+      expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledTimes(1);
+      expect(
+        nativeFabricUIManager.dispatchCommand,
+      ).toHaveBeenCalledWith(expect.any(Object), 'updateCommand', [10, 20]);
     });
-    expect(UIManager.updateView).not.toBeCalled();
   });
 
-  it('should warn and no-op if calling setNativeProps on non native refs', () => {
+  it('should warn and no-op if calling dispatchCommand on non native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
       uiViewClassName: 'RCTView',
@@ -309,12 +312,11 @@ describe('ReactFabric', () => {
     });
 
     [BasicClass, Subclass, CreateClass].forEach(Component => {
-      UIManager.updateView.mockReset();
+      nativeFabricUIManager.dispatchCommand.mockReset();
 
       let viewRef;
       ReactFabric.render(
         <Component
-          foo="bar"
           ref={ref => {
             viewRef = ref;
           }}
@@ -322,14 +324,14 @@ describe('ReactFabric', () => {
         11,
       );
 
-      expect(UIManager.updateView).not.toBeCalled();
+      expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
       expect(() => {
-        ReactFabric.setNativeProps(viewRef, {foo: 'baz'});
-      }).toWarnDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
+        ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+      }).toErrorDev([DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT], {
         withoutStack: true,
       });
 
-      expect(UIManager.updateView).not.toBeCalled();
+      expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     });
   });
 
@@ -499,7 +501,7 @@ describe('ReactFabric', () => {
 
       expect(() => {
         viewRef.measureLayout(otherRef, successCallback, failureCallback);
-      }).toWarnDev(
+      }).toErrorDev(
         [
           'Warning: measureLayout on components using NativeMethodsMixin ' +
             'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
@@ -546,7 +548,11 @@ describe('ReactFabric', () => {
       render() {
         const chars = this.props.chars.split('');
         return (
-          <View>{chars.map(text => <View key={text} title={text} />)}</View>
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
         );
       }
     }
@@ -582,7 +588,11 @@ describe('ReactFabric', () => {
       render() {
         const chars = this.state.chars.split('');
         return (
-          <View>{chars.map(text => <View key={text} title={text} />)}</View>
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
         );
       }
     }
@@ -777,6 +787,281 @@ describe('ReactFabric', () => {
     expect(touchStart2).toBeCalled();
   });
 
+  it('dispatches event with target as reactTag', () => {
+    ReactFeatureFlags.enableNativeTargetAsInstance = false;
+
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {
+        id: true,
+      },
+      uiViewClassName: 'RCTView',
+      directEventTypes: {
+        topTouchStart: {
+          registrationName: 'onTouchStart',
+        },
+        topTouchEnd: {
+          registrationName: 'onTouchEnd',
+        },
+      },
+    }));
+
+    function getViewById(id) {
+      const [
+        reactTag,
+        ,
+        ,
+        ,
+        instanceHandle,
+      ] = nativeFabricUIManager.createNode.mock.calls.find(
+        args => args[3] && args[3].id === id,
+      );
+
+      return {reactTag, instanceHandle};
+    }
+
+    const ref1 = React.createRef();
+    const ref2 = React.createRef();
+
+    ReactFabric.render(
+      <View id="parent">
+        <View
+          ref={ref1}
+          id="one"
+          onResponderStart={event => {
+            expect(ref1.current).not.toBeNull();
+            expect(ReactFabric.findNodeHandle(ref1.current)).toEqual(
+              event.target,
+            );
+            expect(ReactFabric.findNodeHandle(ref1.current)).toEqual(
+              event.currentTarget,
+            );
+          }}
+          onStartShouldSetResponder={() => true}
+        />
+        <View
+          ref={ref2}
+          id="two"
+          onResponderStart={event => {
+            expect(ref2.current).not.toBeNull();
+            expect(ReactFabric.findNodeHandle(ref2.current)).toEqual(
+              event.target,
+            );
+            expect(ReactFabric.findNodeHandle(ref2.current)).toEqual(
+              event.currentTarget,
+            );
+          }}
+          onStartShouldSetResponder={() => true}
+        />
+      </View>,
+      1,
+    );
+
+    let [
+      dispatchEvent,
+    ] = nativeFabricUIManager.registerEventHandler.mock.calls[0];
+
+    dispatchEvent(getViewById('one').instanceHandle, 'topTouchStart', {
+      target: getViewById('one').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+    dispatchEvent(getViewById('one').instanceHandle, 'topTouchEnd', {
+      target: getViewById('one').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    dispatchEvent(getViewById('two').instanceHandle, 'topTouchStart', {
+      target: getViewById('two').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    dispatchEvent(getViewById('two').instanceHandle, 'topTouchEnd', {
+      target: getViewById('two').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    expect.assertions(6);
+  });
+
+  it('dispatches event with target as instance', () => {
+    ReactFeatureFlags.enableNativeTargetAsInstance = true;
+
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {
+        id: true,
+      },
+      uiViewClassName: 'RCTView',
+      directEventTypes: {
+        topTouchStart: {
+          registrationName: 'onTouchStart',
+        },
+        topTouchEnd: {
+          registrationName: 'onTouchEnd',
+        },
+      },
+    }));
+
+    function getViewById(id) {
+      const [
+        reactTag,
+        ,
+        ,
+        ,
+        instanceHandle,
+      ] = nativeFabricUIManager.createNode.mock.calls.find(
+        args => args[3] && args[3].id === id,
+      );
+
+      return {reactTag, instanceHandle};
+    }
+
+    const ref1 = React.createRef();
+    const ref2 = React.createRef();
+
+    ReactFabric.render(
+      <View id="parent">
+        <View
+          ref={ref1}
+          id="one"
+          onResponderStart={event => {
+            expect(ref1.current).not.toBeNull();
+            // Check for referential equality
+            expect(ref1.current).toBe(event.target);
+            expect(ref1.current).toBe(event.currentTarget);
+          }}
+          onStartShouldSetResponder={() => true}
+        />
+        <View
+          ref={ref2}
+          id="two"
+          onResponderStart={event => {
+            expect(ref2.current).not.toBeNull();
+            // Check for referential equality
+            expect(ref2.current).toBe(event.target);
+            expect(ref2.current).toBe(event.currentTarget);
+          }}
+          onStartShouldSetResponder={() => true}
+        />
+      </View>,
+      1,
+    );
+
+    let [
+      dispatchEvent,
+    ] = nativeFabricUIManager.registerEventHandler.mock.calls[0];
+
+    dispatchEvent(getViewById('one').instanceHandle, 'topTouchStart', {
+      target: getViewById('one').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+    dispatchEvent(getViewById('one').instanceHandle, 'topTouchEnd', {
+      target: getViewById('one').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    dispatchEvent(getViewById('two').instanceHandle, 'topTouchStart', {
+      target: getViewById('two').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    dispatchEvent(getViewById('two').instanceHandle, 'topTouchEnd', {
+      target: getViewById('two').reactTag,
+      identifier: 17,
+      touches: [],
+      changedTouches: [],
+    });
+
+    expect.assertions(6);
+  });
+
+  it('findHostInstance_DEPRECATED should warn if used to find a host component inside StrictMode', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let parent = undefined;
+    let child = undefined;
+
+    class ContainsStrictModeChild extends React.Component {
+      render() {
+        return (
+          <StrictMode>
+            <View ref={n => (child = n)} />
+          </StrictMode>
+        );
+      }
+    }
+
+    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+
+    let match;
+    expect(
+      () => (match = ReactFabric.findHostInstance_DEPRECATED(parent)),
+    ).toErrorDev([
+      'Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. ' +
+        'findHostInstance_DEPRECATED was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in StrictMode (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  it('findHostInstance_DEPRECATED should warn if passed a component that is inside StrictMode', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let parent = undefined;
+    let child = undefined;
+
+    class IsInStrictMode extends React.Component {
+      render() {
+        return <View ref={n => (child = n)} />;
+      }
+    }
+
+    ReactFabric.render(
+      <StrictMode>
+        <IsInStrictMode ref={n => (parent = n)} />
+      </StrictMode>,
+      11,
+    );
+
+    let match;
+    expect(
+      () => (match = ReactFabric.findHostInstance_DEPRECATED(parent)),
+    ).toErrorDev([
+      'Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. ' +
+        'findHostInstance_DEPRECATED was passed an instance of IsInStrictMode which is inside StrictMode. ' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)' +
+        '\n    in StrictMode (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
   it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -799,17 +1084,15 @@ describe('ReactFabric', () => {
     ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
 
     let match;
-    expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
+    expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
       'Warning: findNodeHandle is deprecated in StrictMode. ' +
         'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
         '\n    in StrictMode (at **)' +
-        '\n    in ContainsStrictModeChild (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });
@@ -837,17 +1120,15 @@ describe('ReactFabric', () => {
     );
 
     let match;
-    expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
+    expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
       'Warning: findNodeHandle is deprecated in StrictMode. ' +
         'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
         '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in StrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
index 74e2ab2a47e32..5156b67cc8725 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
@@ -16,7 +16,7 @@ let ReactNative;
 let UIManager;
 let createReactNativeComponentClass;
 
-describe('ReactFabric', () => {
+describe('created with ReactFabric called with ReactNative', () => {
   beforeEach(() => {
     jest.resetModules();
     require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
@@ -34,6 +34,26 @@ describe('ReactFabric', () => {
       .ReactNativeViewConfigRegistry.register;
   });
 
+  it('find Fabric instances with the RN renderer', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactFabric.render(<Component ref={ref} />, 11);
+
+    let instance = ReactNative.findHostInstance_DEPRECATED(ref.current);
+    expect(instance._nativeTag).toBe(2);
+  });
+
   it('find Fabric nodes with the RN renderer', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {title: true},
@@ -54,8 +74,8 @@ describe('ReactFabric', () => {
     expect(handle).toBe(2);
   });
 
-  it('sets native props with setNativeProps on Fabric nodes with the RN renderer', () => {
-    UIManager.updateView.mockReset();
+  it('dispatches commands on Fabric nodes with the RN renderer', () => {
+    nativeFabricUIManager.dispatchCommand.mockClear();
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {title: true},
       uiViewClassName: 'RCTView',
@@ -64,13 +84,91 @@ describe('ReactFabric', () => {
     let ref = React.createRef();
 
     ReactFabric.render(<View title="bar" ref={ref} />, 11);
-    expect(UIManager.updateView).not.toBeCalled();
-    ReactNative.setNativeProps(ref.current, {title: 'baz'});
-    expect(UIManager.updateView).toHaveBeenCalledTimes(1);
-    expect(UIManager.updateView).toHaveBeenCalledWith(
-      expect.any(Number),
-      'RCTView',
-      {title: 'baz'},
+    expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
+    ReactNative.dispatchCommand(ref.current, 'myCommand', [10, 20]);
+    expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledTimes(1);
+    expect(
+      nativeFabricUIManager.dispatchCommand,
+    ).toHaveBeenCalledWith(expect.any(Object), 'myCommand', [10, 20]);
+    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+  });
+});
+
+describe('created with ReactNative called with ReactFabric', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+    ReactFabric = require('react-native-renderer/fabric');
+    jest.resetModules();
+    UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .UIManager;
+    jest.mock('shared/ReactFeatureFlags', () =>
+      require('shared/forks/ReactFeatureFlags.native-oss'),
     );
+    ReactNative = require('react-native-renderer');
+
+    React = require('react');
+    createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .ReactNativeViewConfigRegistry.register;
+  });
+
+  it('find Paper instances with the Fabric renderer', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactNative.render(<Component ref={ref} />, 11);
+
+    let instance = ReactFabric.findHostInstance_DEPRECATED(ref.current);
+    expect(instance._nativeTag).toBe(3);
+  });
+
+  it('find Paper nodes with the Fabric renderer', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactNative.render(<Component ref={ref} />, 11);
+
+    let handle = ReactFabric.findNodeHandle(ref.current);
+    expect(handle).toBe(3);
+  });
+
+  it('dispatches commands on Paper nodes with the Fabric renderer', () => {
+    UIManager.dispatchViewManagerCommand.mockReset();
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let ref = React.createRef();
+
+    ReactNative.render(<View title="bar" ref={ref} />, 11);
+    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+    ReactFabric.dispatchCommand(ref.current, 'myCommand', [10, 20]);
+    expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledTimes(1);
+    expect(
+      UIManager.dispatchViewManagerCommand,
+    ).toHaveBeenCalledWith(expect.any(Number), 'myCommand', [10, 20]);
+
+    expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
   });
 });
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js b/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js
index 49190d11da954..5e15208338860 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js
@@ -231,4 +231,44 @@ describe('ReactNativeAttributePayload', () => {
       ),
     ).toEqual({a: null, c: true});
   });
+
+  it('should skip changed functions', () => {
+    expect(
+      diff(
+        {
+          a: function() {
+            return 1;
+          },
+        },
+        {
+          a: function() {
+            return 9;
+          },
+        },
+        {a: true},
+      ),
+    ).toEqual(null);
+  });
+
+  it('should skip deeply-nested changed functions', () => {
+    expect(
+      diff(
+        {
+          wrapper: {
+            a: function() {
+              return 1;
+            },
+          },
+        },
+        {
+          wrapper: {
+            a: function() {
+              return 9;
+            },
+          },
+        },
+        {wrapper: true},
+      ),
+    ).toEqual(null);
+  });
 });
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js
index 9abf0ee21aecb..96d6803ceaae6 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js
@@ -32,6 +32,18 @@ describe('ReactNativeError', () => {
         .computeComponentStackForErrorReporting;
   });
 
+  it('should throw error if null component registration getter is used', () => {
+    expect(() => {
+      try {
+        createReactNativeComponentClass('View', null);
+      } catch (e) {
+        throw new Error(e.toString());
+      }
+    }).toThrow(
+      'View config getter callback for component `View` must be a function (received `null`)',
+    );
+  });
+
   it('should be able to extract a component stack from a native view', () => {
     const View = createReactNativeComponentClass('View', () => ({
       validAttributes: {foo: true},
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js
index e9de5541a3af0..3c49c62983ed3 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js
@@ -14,6 +14,7 @@ let PropTypes;
 let RCTEventEmitter;
 let React;
 let ReactNative;
+let ReactFeatureFlags;
 let ResponderEventPlugin;
 let UIManager;
 let createReactNativeComponentClass;
@@ -68,13 +69,57 @@ beforeEach(() => {
     .RCTEventEmitter;
   React = require('react');
   ReactNative = require('react-native-renderer');
-  ResponderEventPlugin = require('events/ResponderEventPlugin').default;
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ResponderEventPlugin = require('legacy-events/ResponderEventPlugin').default;
   UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
     .UIManager;
   createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
     .ReactNativeViewConfigRegistry.register;
 });
 
+it('fails to register the same event name with different types', () => {
+  const InvalidEvents = createReactNativeComponentClass('InvalidEvents', () => {
+    if (!__DEV__) {
+      // Simulate a registration error in prod.
+      throw new Error('Event cannot be both direct and bubbling: topChange');
+    }
+
+    // This view config has the same bubbling and direct event name
+    // which will fail to register in developement.
+    return {
+      uiViewClassName: 'InvalidEvents',
+      validAttributes: {
+        onChange: true,
+      },
+      bubblingEventTypes: {
+        topChange: {
+          phasedRegistrationNames: {
+            bubbled: 'onChange',
+            captured: 'onChangeCapture',
+          },
+        },
+      },
+      directEventTypes: {
+        topChange: {
+          registrationName: 'onChange',
+        },
+      },
+    };
+  });
+
+  // The first time this renders,
+  // we attempt to register the view config and fail.
+  expect(() => ReactNative.render(<InvalidEvents />, 1)).toThrow(
+    'Event cannot be both direct and bubbling: topChange',
+  );
+
+  // Continue to re-register the config and
+  // fail so that we don't mask the above failure.
+  expect(() => ReactNative.render(<InvalidEvents />, 1)).toThrow(
+    'Event cannot be both direct and bubbling: topChange',
+  );
+});
+
 it('fails if unknown/unsupported event types are dispatched', () => {
   expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
   const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
@@ -413,3 +458,149 @@ it('handles events without target', () => {
     'two responder end',
   ]);
 });
+
+it('dispatches event with target as reactTag', () => {
+  ReactFeatureFlags.enableNativeTargetAsInstance = false;
+  const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
+
+  const View = fakeRequireNativeComponent('View', {id: true});
+
+  function getViewById(id) {
+    return UIManager.createView.mock.calls.find(
+      args => args[3] && args[3].id === id,
+    )[0];
+  }
+
+  const ref1 = React.createRef();
+  const ref2 = React.createRef();
+
+  ReactNative.render(
+    <View id="parent">
+      <View
+        ref={ref1}
+        id="one"
+        onResponderStart={event => {
+          expect(ref1.current).not.toBeNull();
+          expect(ReactNative.findNodeHandle(ref1.current)).toEqual(
+            event.target,
+          );
+          expect(ReactNative.findNodeHandle(ref1.current)).toEqual(
+            event.currentTarget,
+          );
+        }}
+        onStartShouldSetResponder={() => true}
+      />
+      <View
+        ref={ref2}
+        id="two"
+        onResponderStart={event => {
+          expect(ref2.current).not.toBeNull();
+          expect(ReactNative.findNodeHandle(ref2.current)).toEqual(
+            event.target,
+          );
+          expect(ReactNative.findNodeHandle(ref2.current)).toEqual(
+            event.currentTarget,
+          );
+        }}
+        onStartShouldSetResponder={() => true}
+      />
+    </View>,
+    1,
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  expect.assertions(6);
+});
+
+it('dispatches event with target as instance', () => {
+  ReactFeatureFlags.enableNativeTargetAsInstance = true;
+  const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
+
+  const View = fakeRequireNativeComponent('View', {id: true});
+
+  function getViewById(id) {
+    return UIManager.createView.mock.calls.find(
+      args => args[3] && args[3].id === id,
+    )[0];
+  }
+
+  const ref1 = React.createRef();
+  const ref2 = React.createRef();
+
+  ReactNative.render(
+    <View id="parent">
+      <View
+        ref={ref1}
+        id="one"
+        onResponderStart={event => {
+          expect(ref1.current).not.toBeNull();
+          // Check for referential equality
+          expect(ref1.current).toBe(event.target);
+          expect(ref1.current).toBe(event.currentTarget);
+        }}
+        onStartShouldSetResponder={() => true}
+      />
+      <View
+        ref={ref2}
+        id="two"
+        onResponderStart={event => {
+          expect(ref2.current).not.toBeNull();
+          // Check for referential equality
+          expect(ref2.current).toBe(event.target);
+          expect(ref2.current).toBe(event.currentTarget);
+        }}
+        onStartShouldSetResponder={() => true}
+      />
+    </View>,
+    1,
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  expect.assertions(6);
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
index 8d3f0bb28954b..ac38fcfe2facc 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -11,7 +11,6 @@
 'use strict';
 
 let React;
-let ReactFeatureFlags;
 let StrictMode;
 let ReactNative;
 let createReactClass;
@@ -19,11 +18,9 @@ let createReactNativeComponentClass;
 let UIManager;
 let NativeMethodsMixin;
 
-const SET_NATIVE_PROPS_DEPRECATION_MESSAGE =
-  'Warning: Calling ref.setNativeProps(nativeProps) ' +
-  'is deprecated and will be removed in a future release. ' +
-  'Use the setNativeProps export from the react-native package instead.' +
-  "\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n";
+const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
+  "Warning: dispatchCommand was called with a ref that isn't a " +
+  'native component. Use React.forwardRef to get access to the underlying native component';
 
 describe('ReactNative', () => {
   beforeEach(() => {
@@ -31,8 +28,6 @@ describe('ReactNative', () => {
 
     React = require('react');
     StrictMode = React.StrictMode;
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
     ReactNative = require('react-native-renderer');
     UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .UIManager;
@@ -108,12 +103,46 @@ describe('ReactNative', () => {
     expect(UIManager.updateView).toHaveBeenCalledTimes(4);
   });
 
-  it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
+  it('should call dispatchCommand for native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
       uiViewClassName: 'RCTView',
     }));
 
+    [View].forEach(Component => {
+      UIManager.dispatchViewManagerCommand.mockClear();
+
+      let viewRef;
+      ReactNative.render(
+        <Component
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+
+      expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+      ReactNative.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+      expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledTimes(1);
+      expect(
+        UIManager.dispatchViewManagerCommand,
+      ).toHaveBeenCalledWith(expect.any(Number), 'updateCommand', [10, 20]);
+    });
+  });
+
+  it('should warn and no-op if calling dispatchCommand on non native refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
     class Subclass extends ReactNative.NativeComponent {
       render() {
         return <View />;
@@ -127,86 +156,36 @@ describe('ReactNative', () => {
       },
     });
 
-    [View, Subclass, CreateClass].forEach(Component => {
-      UIManager.updateView.mockReset();
+    [BasicClass, Subclass, CreateClass].forEach(Component => {
+      UIManager.dispatchViewManagerCommand.mockReset();
 
       let viewRef;
       ReactNative.render(
         <Component
-          foo="bar"
           ref={ref => {
             viewRef = ref;
           }}
         />,
         11,
       );
-      expect(UIManager.updateView).not.toBeCalled();
-
-      expect(() => {
-        viewRef.setNativeProps({});
-      }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
-        withoutStack: true,
-      });
-      expect(UIManager.updateView).not.toBeCalled();
 
+      expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
       expect(() => {
-        viewRef.setNativeProps({foo: 'baz'});
-      }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
+        ReactNative.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+      }).toErrorDev([DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT], {
         withoutStack: true,
       });
 
-      expect(UIManager.updateView).toHaveBeenCalledTimes(1);
-      expect(UIManager.updateView).toHaveBeenCalledWith(
-        expect.any(Number),
-        'RCTView',
-        {foo: 'baz'},
-      );
+      expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
     });
   });
 
-  it('should be able to setNativeProps on native refs', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    UIManager.updateView.mockReset();
-
-    let viewRef;
-    ReactNative.render(
-      <View
-        foo="bar"
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
-
-    ReactNative.setNativeProps(viewRef, {});
-    expect(UIManager.updateView).not.toBeCalled();
-
-    ReactNative.setNativeProps(viewRef, {foo: 'baz'});
-    expect(UIManager.updateView).toHaveBeenCalledTimes(1);
-    expect(UIManager.updateView).toHaveBeenCalledWith(
-      expect.any(Number),
-      'RCTView',
-      {foo: 'baz'},
-    );
-  });
-
-  it('should warn and no-op if calling setNativeProps on non native refs', () => {
+  it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
       uiViewClassName: 'RCTView',
     }));
 
-    class BasicClass extends React.Component {
-      render() {
-        return <React.Fragment />;
-      }
-    }
-
     class Subclass extends ReactNative.NativeComponent {
       render() {
         return <View />;
@@ -220,7 +199,7 @@ describe('ReactNative', () => {
       },
     });
 
-    [BasicClass, Subclass, CreateClass].forEach(Component => {
+    [View, Subclass, CreateClass].forEach(Component => {
       UIManager.updateView.mockReset();
 
       let viewRef;
@@ -235,18 +214,17 @@ describe('ReactNative', () => {
       );
 
       expect(UIManager.updateView).not.toBeCalled();
-      expect(() => {
-        ReactNative.setNativeProps(viewRef, {foo: 'baz'});
-      }).toWarnDev(
-        [
-          "Warning: setNativeProps was called with a ref that isn't a " +
-            'native component. Use React.forwardRef to get access ' +
-            'to the underlying native component',
-        ],
-        {withoutStack: true},
-      );
 
+      viewRef.setNativeProps({});
       expect(UIManager.updateView).not.toBeCalled();
+
+      viewRef.setNativeProps({foo: 'baz'});
+      expect(UIManager.updateView).toHaveBeenCalledTimes(1);
+      expect(UIManager.updateView).toHaveBeenCalledWith(
+        expect.any(Number),
+        'RCTView',
+        {foo: 'baz'},
+      );
     });
   });
 
@@ -456,7 +434,11 @@ describe('ReactNative', () => {
       render() {
         const chars = this.props.chars.split('');
         return (
-          <View>{chars.map(text => <View key={text} title={text} />)}</View>
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
         );
       }
     }
@@ -561,6 +543,81 @@ describe('ReactNative', () => {
     );
   });
 
+  it('findHostInstance_DEPRECATED should warn if used to find a host component inside StrictMode', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let parent = undefined;
+    let child = undefined;
+
+    class ContainsStrictModeChild extends React.Component {
+      render() {
+        return (
+          <StrictMode>
+            <View ref={n => (child = n)} />
+          </StrictMode>
+        );
+      }
+    }
+
+    ReactNative.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+
+    let match;
+    expect(
+      () => (match = ReactNative.findHostInstance_DEPRECATED(parent)),
+    ).toErrorDev([
+      'Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. ' +
+        'findHostInstance_DEPRECATED was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in StrictMode (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  it('findHostInstance_DEPRECATED should warn if passed a component that is inside StrictMode', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let parent = undefined;
+    let child = undefined;
+
+    class IsInStrictMode extends React.Component {
+      render() {
+        return <View ref={n => (child = n)} />;
+      }
+    }
+
+    ReactNative.render(
+      <StrictMode>
+        <IsInStrictMode ref={n => (parent = n)} />
+      </StrictMode>,
+      11,
+    );
+
+    let match;
+    expect(
+      () => (match = ReactNative.findHostInstance_DEPRECATED(parent)),
+    ).toErrorDev([
+      'Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. ' +
+        'findHostInstance_DEPRECATED was passed an instance of IsInStrictMode which is inside StrictMode. ' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)' +
+        '\n    in StrictMode (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
   it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -583,17 +640,15 @@ describe('ReactNative', () => {
     ReactNative.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
 
     let match;
-    expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
+    expect(() => (match = ReactNative.findNodeHandle(parent))).toErrorDev([
       'Warning: findNodeHandle is deprecated in StrictMode. ' +
         'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
         '\n    in StrictMode (at **)' +
-        '\n    in ContainsStrictModeChild (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });
@@ -621,17 +676,15 @@ describe('ReactNative', () => {
     );
 
     let match;
-    expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
+    expect(() => (match = ReactNative.findNodeHandle(parent))).toErrorDev([
       'Warning: findNodeHandle is deprecated in StrictMode. ' +
         'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' +
-        'Instead, add a ref directly to the element you want to reference.' +
-        '\n' +
+        'Instead, add a ref directly to the element you want to reference. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
         '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)' +
-        '\n' +
-        '\nLearn more about using refs safely here:' +
-        '\nhttps://fb.me/react-strict-mode-find-node',
+        '\n    in StrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });
diff --git a/packages/react-dom/unstable-fire.js b/packages/react-noop-renderer/flight-client.js
similarity index 69%
rename from packages/react-dom/unstable-fire.js
rename to packages/react-noop-renderer/flight-client.js
index e92fb9f098493..dd5e879335d83 100644
--- a/packages/react-dom/unstable-fire.js
+++ b/packages/react-noop-renderer/flight-client.js
@@ -9,8 +9,8 @@
 
 'use strict';
 
-const ReactFire = require('./src/fire/ReactFire');
+const ReactNoopFlightClient = require('./src/ReactNoopFlightClient');
 
 // TODO: decide on the top-level export form.
 // This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactFire.default || ReactFire;
+module.exports = ReactNoopFlightClient.default || ReactNoopFlightClient;
diff --git a/packages/react-noop-renderer/flight-server.js b/packages/react-noop-renderer/flight-server.js
new file mode 100644
index 0000000000000..2ba00ffe78285
--- /dev/null
+++ b/packages/react-noop-renderer/flight-server.js
@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactNoopFlightServer = require('./src/ReactNoopFlightServer');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest.
+module.exports = ReactNoopFlightServer.default || ReactNoopFlightServer;
diff --git a/packages/react-noop-renderer/npm/flight-client.js b/packages/react-noop-renderer/npm/flight-client.js
new file mode 100644
index 0000000000000..d557e5036036a
--- /dev/null
+++ b/packages/react-noop-renderer/npm/flight-client.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer-flight-client.production.min.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-flight-client.development.js');
+}
diff --git a/packages/react-noop-renderer/npm/flight-server.js b/packages/react-noop-renderer/npm/flight-server.js
new file mode 100644
index 0000000000000..de627385e808f
--- /dev/null
+++ b/packages/react-noop-renderer/npm/flight-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer-flight-server.production.min.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-flight-server.development.js');
+}
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
index 33823aaa4232c..0f95472ae41e5 100644
--- a/packages/react-noop-renderer/package.json
+++ b/packages/react-noop-renderer/package.json
@@ -2,7 +2,7 @@
   "name": "react-noop-renderer",
   "version": "16.0.0",
   "private": true,
-  "description": "React package for testing the Fiber reconciler.",
+  "description": "React package for testing the Fiber, Fizz and Flight reconcilers.",
   "main": "index.js",
   "repository": {
     "type" : "git",
@@ -15,7 +15,8 @@
     "prop-types": "^15.6.2",
     "regenerator-runtime": "^0.11.0",
     "react-reconciler": "*",
-    "react-stream": "*"
+    "react-flight": "*",
+    "react-server": "*"
   },
   "peerDependencies": {
     "react": "^16.0.0"
@@ -27,6 +28,8 @@
     "index.js",
     "persistent.js",
     "server.js",
+    "flight-client.js",
+    "flight-server.js",
     "cjs/"
   ]
 }
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
new file mode 100644
index 0000000000000..3e21dcad320aa
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+/**
+ * This is a renderer of React that doesn't have a render target output.
+ * It is useful to demonstrate the internals of the reconciler in isolation
+ * and for testing semantics of reconciliation separate from the host
+ * environment.
+ */
+
+import type {ReactModelRoot} from 'react-flight/inline-typed';
+
+import ReactFlightClient from 'react-flight';
+
+type Source = Array<string>;
+
+const {
+  createResponse,
+  getModelRoot,
+  processStringChunk,
+  complete,
+} = ReactFlightClient({
+  supportsBinaryStreams: false,
+});
+
+function read<T>(source: Source): ReactModelRoot<T> {
+  let response = createResponse(source);
+  for (let i = 0; i < source.length; i++) {
+    processStringChunk(response, source[i], 0);
+  }
+  complete(response);
+  return getModelRoot(response);
+}
+
+export default {
+  read,
+};
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
new file mode 100644
index 0000000000000..e5d77117dec8e
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -0,0 +1,57 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+/**
+ * This is a renderer of React that doesn't have a render target output.
+ * It is useful to demonstrate the internals of the reconciler in isolation
+ * and for testing semantics of reconciliation separate from the host
+ * environment.
+ */
+
+import type {ReactModel} from 'react-server/flight.inline-typed';
+
+import ReactFlightServer from 'react-server/flight';
+
+type Destination = Array<string>;
+
+const ReactNoopFlightServer = ReactFlightServer({
+  scheduleWork(callback: () => void) {
+    callback();
+  },
+  beginWriting(destination: Destination): void {},
+  writeChunk(destination: Destination, buffer: Uint8Array): void {
+    destination.push(Buffer.from((buffer: any)).toString('utf8'));
+  },
+  completeWriting(destination: Destination): void {},
+  close(destination: Destination): void {},
+  flushBuffered(destination: Destination): void {},
+  convertStringToBuffer(content: string): Uint8Array {
+    return Buffer.from(content, 'utf8');
+  },
+  formatChunkAsString(type: string, props: Object): string {
+    return JSON.stringify({type, props});
+  },
+  formatChunk(type: string, props: Object): Uint8Array {
+    return Buffer.from(JSON.stringify({type, props}), 'utf8');
+  },
+  renderHostChildrenToString(children: React$Element<any>): string {
+    throw new Error('The noop rendered do not support host components');
+  },
+});
+
+function render(model: ReactModel): Destination {
+  let destination: Destination = [];
+  let request = ReactNoopFlightServer.createRequest(model, destination);
+  ReactNoopFlightServer.startWork(request);
+  return destination;
+}
+
+export default {
+  render,
+};
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 2077687b9f9b1..0fe23437ce8de 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -14,7 +14,7 @@
  * environment.
  */
 
-import ReactFizzStreamer from 'react-stream';
+import ReactFizzStreamer from 'react-server';
 
 type Destination = Array<string>;
 
@@ -32,6 +32,9 @@ const ReactNoopServer = ReactFizzStreamer({
   convertStringToBuffer(content: string): Uint8Array {
     return Buffer.from(content, 'utf8');
   },
+  formatChunkAsString(type: string, props: Object): string {
+    return JSON.stringify({type, props});
+  },
   formatChunk(type: string, props: Object): Uint8Array {
     return Buffer.from(JSON.stringify({type, props}), 'utf8');
   },
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 25effd1c2049e..58cc128685d5e 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -22,38 +22,16 @@ import type {RootTag} from 'shared/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {createPortal} from 'shared/ReactPortal';
-import expect from 'expect';
-import {
-  REACT_FRAGMENT_TYPE,
-  REACT_ELEMENT_TYPE,
-  REACT_EVENT_TARGET_TOUCH_HIT,
-} from 'shared/ReactSymbols';
-import warning from 'shared/warning';
+import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import enqueueTask from 'shared/enqueueTask';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {
-  warnAboutMissingMockScheduler,
-  enableEventAPI,
-} from 'shared/ReactFeatureFlags';
-import {ConcurrentRoot, BatchedRoot, LegacyRoot} from 'shared/ReactRootTags';
-
-type EventTargetChildElement = {
-  type: string,
-  props: null | {
-    style?: {
-      position?: string,
-      bottom?: string,
-      left?: string,
-      right?: string,
-      top?: string,
-    },
-  },
-};
+import {ConcurrentRoot, BlockingRoot, LegacyRoot} from 'shared/ReactRootTags';
+
 type Container = {
   rootID: string,
   children: Array<Instance | TextInstance>,
   pendingChildren: Array<Instance | TextInstance>,
+  ...
 };
 type Props = {
   prop: any,
@@ -63,6 +41,7 @@ type Props = {
   left?: null | number,
   right?: null | number,
   top?: null | number,
+  ...
 };
 type Instance = {|
   type: string,
@@ -81,13 +60,10 @@ type TextInstance = {|
 |};
 type HostContext = Object;
 
-const {ReactCurrentActingRendererSigil} = ReactSharedInternals;
+const {IsSomeRendererActing} = ReactSharedInternals;
 
 const NO_CONTEXT = {};
 const UPPERCASE_CONTEXT = {};
-const EVENT_COMPONENT_CONTEXT = {};
-const EVENT_TARGET_CONTEXT = {};
-const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};
 const UPDATE_SIGNAL = {};
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
@@ -284,36 +260,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return NO_CONTEXT;
     },
 
-    getChildHostContextForEventComponent(parentHostContext: HostContext) {
-      if (__DEV__ && enableEventAPI) {
-        warning(
-          parentHostContext !== EVENT_TARGET_CONTEXT &&
-            parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,
-          'validateDOMNesting: React event targets must not have event components as children.',
-        );
-        return EVENT_COMPONENT_CONTEXT;
-      }
-      return parentHostContext;
-    },
-
-    getChildHostContextForEventTarget(
-      parentHostContext: HostContext,
-      type: Symbol | number,
-    ) {
-      if (__DEV__ && enableEventAPI) {
-        if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-          warning(
-            parentHostContext !== EVENT_COMPONENT_CONTEXT,
-            'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-              'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-          );
-          return EVENT_TOUCH_HIT_TARGET_CONTEXT;
-        }
-        return EVENT_TARGET_CONTEXT;
-      }
-      return parentHostContext;
-    },
-
     getPublicInstance(instance) {
       return instance;
     },
@@ -371,7 +317,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       type: string,
       oldProps: Props,
       newProps: Props,
-    ): null | {} {
+    ): null | {...} {
       if (type === 'errorInCompletePhase') {
         throw new Error('Error in host config.');
       }
@@ -397,14 +343,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       hostContext: Object,
       internalInstanceHandle: Object,
     ): TextInstance {
-      if (__DEV__ && enableEventAPI) {
-        warning(
-          hostContext !== EVENT_COMPONENT_CONTEXT,
-          'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-            'Wrap the child text "%s" in an element.',
-          text,
-        );
-      }
       if (hostContext === UPPERCASE_CONTEXT) {
         text = text.toUpperCase();
       }
@@ -434,65 +372,70 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     now: Scheduler.unstable_now,
 
     isPrimaryRenderer: true,
+    warnsIfNotActing: true,
     supportsHydration: false,
 
-    mountEventComponent(): void {
+    DEPRECATED_mountResponderInstance(): void {
       // NO-OP
     },
 
-    updateEventComponent(): void {
+    DEPRECATED_unmountResponderInstance(): void {
       // NO-OP
     },
 
-    unmountEventComponent(): void {
-      // NO-OP
+    getFundamentalComponentInstance(fundamentalInstance): Instance {
+      const {impl, props, state} = fundamentalInstance;
+      return impl.getInstance(null, props, state);
     },
 
-    getEventTargetChildElement(
-      type: Symbol | number,
-      props: Props,
-    ): null | EventTargetChildElement {
-      if (enableEventAPI) {
-        if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-          const {bottom, left, right, top} = props;
+    mountFundamentalComponent(fundamentalInstance): void {
+      const {impl, instance, props, state} = fundamentalInstance;
+      const onMount = impl.onUpdate;
+      if (onMount !== undefined) {
+        onMount(null, instance, props, state);
+      }
+    },
 
-          if (!bottom && !left && !right && !top) {
-            return null;
-          }
-          return {
-            type: 'div',
-            props: {
-              style: {
-                position: 'absolute',
-                zIndex: -1,
-                bottom: bottom ? `-${bottom}px` : '0px',
-                left: left ? `-${left}px` : '0px',
-                right: right ? `-${right}px` : '0px',
-                top: top ? `-${top}px` : '0px',
-              },
-            },
-          };
-        }
+    shouldUpdateFundamentalComponent(fundamentalInstance): boolean {
+      const {impl, instance, prevProps, props, state} = fundamentalInstance;
+      const shouldUpdate = impl.shouldUpdate;
+      if (shouldUpdate !== undefined) {
+        return shouldUpdate(null, instance, prevProps, props, state);
       }
-      return null;
+      return true;
     },
 
-    handleEventTarget(
-      type: Symbol | number,
-      props: Props,
-      rootContainerInstance: Container,
-      internalInstanceHandle: Object,
-    ): boolean {
-      return false;
+    updateFundamentalComponent(fundamentalInstance): void {
+      const {impl, instance, prevProps, props, state} = fundamentalInstance;
+      const onUpdate = impl.onUpdate;
+      if (onUpdate !== undefined) {
+        onUpdate(null, instance, prevProps, props, state);
+      }
     },
 
-    commitEventTarget(
-      type: Symbol | number,
-      props: Props,
-      instance: Instance,
-      parentInstance: Instance,
-    ): void {
-      // NO-OP
+    unmountFundamentalComponent(fundamentalInstance): void {
+      const {impl, instance, props, state} = fundamentalInstance;
+      const onUnmount = impl.onUnmount;
+      if (onUnmount !== undefined) {
+        onUnmount(null, instance, props, state);
+      }
+    },
+
+    cloneFundamentalInstance(fundamentalInstance): Instance {
+      const instance = fundamentalInstance.instance;
+      return {
+        children: [],
+        text: instance.text,
+        type: instance.type,
+        prop: instance.prop,
+        id: instance.id,
+        context: instance.context,
+        hidden: instance.hidden,
+      };
+    },
+
+    getInstanceFromNode() {
+      throw new Error('Not yet implemented.');
     },
   };
 
@@ -653,31 +596,23 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   const {
     flushPassiveEffects,
     batchedUpdates,
-    ReactActingRendererSigil,
+    IsThisRendererActing,
   } = NoopRenderer;
 
   // this act() implementation should be exactly the same in
   // ReactTestUtilsAct.js, ReactTestRendererAct.js, createReactNoop.js
 
-  let hasWarnedAboutMissingMockScheduler = false;
+  const isSchedulerMocked =
+    typeof Scheduler.unstable_flushAllWithoutAsserting === 'function';
   const flushWork =
-    Scheduler.unstable_flushWithoutYielding ||
+    Scheduler.unstable_flushAllWithoutAsserting ||
     function() {
-      if (warnAboutMissingMockScheduler === true) {
-        if (hasWarnedAboutMissingMockScheduler === false) {
-          warningWithoutStack(
-            null,
-            'Starting from React v17, the "scheduler" module will need to be mocked ' +
-              'to guarantee consistent behaviour across tests and browsers. To fix this, add the following ' +
-              "to the top of your tests, or in your framework's global config file -\n\n" +
-              'As an example, for jest - \n' +
-              "jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));\n\n" +
-              'For more info, visit https://fb.me/react-mock-scheduler',
-          );
-          hasWarnedAboutMissingMockScheduler = true;
-        }
+      let didFlushWork = false;
+      while (flushPassiveEffects()) {
+        didFlushWork = true;
       }
-      while (flushPassiveEffects()) {}
+
+      return didFlushWork;
     };
 
   function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
@@ -699,24 +634,36 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   // so we can tell if any async act() calls try to run in parallel.
 
   let actingUpdatesScopeDepth = 0;
+  let didWarnAboutUsingActInProd = false;
 
   function act(callback: () => Thenable) {
+    if (!__DEV__) {
+      if (didWarnAboutUsingActInProd === false) {
+        didWarnAboutUsingActInProd = true;
+        // eslint-disable-next-line react-internal/no-production-logging
+        console.error(
+          'act(...) is not supported in production builds of React, and might not behave as expected.',
+        );
+      }
+    }
     let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-    let previousActingUpdatesSigil;
+    let previousIsSomeRendererActing;
+    let previousIsThisRendererActing;
     actingUpdatesScopeDepth++;
-    if (__DEV__) {
-      previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-      ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
-    }
+
+    previousIsSomeRendererActing = IsSomeRendererActing.current;
+    previousIsThisRendererActing = IsThisRendererActing.current;
+    IsSomeRendererActing.current = true;
+    IsThisRendererActing.current = true;
 
     function onDone() {
       actingUpdatesScopeDepth--;
+      IsSomeRendererActing.current = previousIsSomeRendererActing;
+      IsThisRendererActing.current = previousIsThisRendererActing;
       if (__DEV__) {
-        ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
         if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
           // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-          warningWithoutStack(
-            null,
+          console.error(
             'You seem to have overlapping act() calls, this is not supported. ' +
               'Be sure to await previous act() calls before making a new one. ',
           );
@@ -724,7 +671,15 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     }
 
-    const result = batchedUpdates(callback);
+    let result;
+    try {
+      result = batchedUpdates(callback);
+    } catch (error) {
+      // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
+      onDone();
+      throw error;
+    }
+
     if (
       result !== null &&
       typeof result === 'object' &&
@@ -740,8 +695,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             .then(() => {})
             .then(() => {
               if (called === false) {
-                warningWithoutStack(
-                  null,
+                console.error(
                   'You called act(async () => ...) without await. ' +
                     'This could lead to unexpected testing behaviour, interleaving multiple act ' +
                     'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -759,7 +713,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           called = true;
           result.then(
             () => {
-              if (actingUpdatesScopeDepth > 1) {
+              if (
+                actingUpdatesScopeDepth > 1 ||
+                (isSchedulerMocked === true &&
+                  previousIsSomeRendererActing === true)
+              ) {
                 onDone();
                 resolve();
                 return;
@@ -784,17 +742,22 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     } else {
       if (__DEV__) {
-        warningWithoutStack(
-          result === undefined,
-          'The callback passed to act(...) function ' +
-            'must return undefined, or a Promise. You returned %s',
-          result,
-        );
+        if (result !== undefined) {
+          console.error(
+            'The callback passed to act(...) function ' +
+              'must return undefined, or a Promise. You returned %s',
+            result,
+          );
+        }
       }
 
       // flush effects until none remain, and cleanup
       try {
-        if (actingUpdatesScopeDepth === 1) {
+        if (
+          actingUpdatesScopeDepth === 1 &&
+          (isSchedulerMocked === false ||
+            previousIsSomeRendererActing === false)
+        ) {
           // we're about to exit the act() scope,
           // now's the time to flush effects
           flushWork();
@@ -809,8 +772,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return {
         then(resolve: () => void) {
           if (__DEV__) {
-            warningWithoutStack(
-              false,
+            console.error(
               'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
             );
           }
@@ -949,7 +911,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false);
+        root = NoopRenderer.createContainer(container, tag, false, null);
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -966,6 +928,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         container,
         ConcurrentRoot,
         false,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -981,7 +944,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     },
 
-    createSyncRoot() {
+    createBlockingRoot() {
       const container = {
         rootID: '' + idCounter++,
         pendingChildren: [],
@@ -989,8 +952,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
       const fiberRoot = NoopRenderer.createContainer(
         container,
-        BatchedRoot,
+        BlockingRoot,
         false,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -1099,7 +1063,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       hostUpdateCounter = 0;
       hostCloneCounter = 0;
       try {
-        Scheduler.flushAll();
+        Scheduler.unstable_flushAll();
         return useMutation
           ? {
               hostDiffCounter,
@@ -1116,7 +1080,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    expire: Scheduler.advanceTime,
+    expire: Scheduler.unstable_advanceTime,
 
     flushExpired(): Array<mixed> {
       return Scheduler.unstable_flushExpired();
@@ -1145,6 +1109,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const root = roots.get(rootID);
       const rootContainer = rootContainers.get(rootID);
       if (!root || !rootContainer) {
+        // eslint-disable-next-line react-internal/no-production-logging
         console.log('Nothing rendered yet.');
         return;
       }
@@ -1178,20 +1143,33 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
       function logUpdateQueue(updateQueue: UpdateQueue<mixed>, depth) {
         log('  '.repeat(depth + 1) + 'QUEUED UPDATES');
-        const firstUpdate = updateQueue.firstUpdate;
-        if (!firstUpdate) {
+        const last = updateQueue.baseQueue;
+        if (last === null) {
           return;
         }
+        const first = last.next;
+        let update = first;
+        if (update !== null) {
+          do {
+            log(
+              '  '.repeat(depth + 1) + '~',
+              '[' + update.expirationTime + ']',
+            );
+          } while (update !== null && update !== first);
+        }
 
-        log(
-          '  '.repeat(depth + 1) + '~',
-          '[' + firstUpdate.expirationTime + ']',
-        );
-        while (firstUpdate.next) {
-          log(
-            '  '.repeat(depth + 1) + '~',
-            '[' + firstUpdate.expirationTime + ']',
-          );
+        const lastPending = updateQueue.shared.pending;
+        if (lastPending !== null) {
+          const firstPending = lastPending.next;
+          let pendingUpdate = firstPending;
+          if (pendingUpdate !== null) {
+            do {
+              log(
+                '  '.repeat(depth + 1) + '~',
+                '[' + pendingUpdate.expirationTime + ']',
+              );
+            } while (pendingUpdate !== null && pendingUpdate !== firstPending);
+          }
         }
       }
 
@@ -1234,34 +1212,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       log('FIBERS:');
       logFiber(root.current, 0);
 
+      // eslint-disable-next-line react-internal/no-production-logging
       console.log(...bufferedLog);
     },
 
-    flushWithoutCommitting(
-      expectedFlush: Array<mixed>,
-      rootID: string = DEFAULT_ROOT_ID,
-    ) {
-      const root: any = roots.get(rootID);
-      const expiration = NoopRenderer.computeUniqueAsyncExpiration();
-      const batch = {
-        _defer: true,
-        _expirationTime: expiration,
-        _onComplete: () => {
-          root.firstBatch = null;
-        },
-        _next: null,
-      };
-      root.firstBatch = batch;
-      Scheduler.unstable_flushWithoutYielding();
-      const actual = Scheduler.unstable_clearYields();
-      expect(actual).toEqual(expectedFlush);
-      return (expectedCommit: Array<mixed>) => {
-        batch._defer = false;
-        NoopRenderer.flushRoot(root, expiration);
-        expect(Scheduler.unstable_clearYields()).toEqual(expectedCommit);
-      };
-    },
-
     getRoot(rootID: string = DEFAULT_ROOT_ID) {
       return roots.get(rootID);
     },
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 45f28cf73fe4f..268177443ec22 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.20.4",
+  "version": "0.24.0",
   "keywords": [
     "react"
   ],
@@ -33,7 +33,7 @@
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.2",
-    "scheduler": "^0.14.0"
+    "scheduler": "^0.18.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
index 90a78ceaca325..726a22c976d56 100644
--- a/packages/react-reconciler/src/ReactCapturedValue.js
+++ b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -11,13 +11,13 @@ import type {Fiber} from './ReactFiber';
 
 import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
 
-export type CapturedValue<T> = {
+export type CapturedValue<T> = {|
   value: T,
   source: Fiber | null,
   stack: string | null,
-};
+|};
 
-export type CapturedError = {
+export type CapturedError = {|
   componentName: ?string,
   componentStack: string,
   error: mixed,
@@ -25,7 +25,7 @@ export type CapturedError = {
   errorBoundaryFound: boolean,
   errorBoundaryName: string | null,
   willRetry: boolean,
-};
+|};
 
 export function createCapturedValue<T>(
   value: T,
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
index 3d9def376b36c..f5203c7e0db39 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -19,6 +19,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_PORTAL_TYPE,
+  REACT_CHUNK_TYPE,
 } from 'shared/ReactSymbols';
 import {
   FunctionComponent,
@@ -26,13 +27,14 @@ import {
   HostText,
   HostPortal,
   Fragment,
+  Chunk,
 } from 'shared/ReactWorkTags';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
-import warningWithoutStack from 'shared/warningWithoutStack';
+import {warnAboutStringRefs, enableChunksAPI} from 'shared/ReactFeatureFlags';
 
 import {
   createWorkInProgress,
+  resetWorkInProgress,
   createFiberFromElement,
   createFiberFromFragment,
   createFiberFromText,
@@ -48,7 +50,7 @@ import {StrictMode} from './ReactTypeOfMode';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
-let didWarnAboutStringRefInStrictMode;
+let didWarnAboutStringRefs;
 let ownerHasKeyUseWarning;
 let ownerHasFunctionTypeWarning;
 let warnForMissingKey = (child: mixed) => {};
@@ -56,7 +58,7 @@ let warnForMissingKey = (child: mixed) => {};
 if (__DEV__) {
   didWarnAboutMaps = false;
   didWarnAboutGenerators = false;
-  didWarnAboutStringRefInStrictMode = {};
+  didWarnAboutStringRefs = {};
 
   /**
    * Warn if there's no key explicitly set on dynamic arrays of children or
@@ -90,8 +92,7 @@ if (__DEV__) {
     }
     ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
 
-    warning(
-      false,
+    console.error(
       'Each child in a list should have a unique ' +
         '"key" prop. See https://fb.me/react-warning-keys for ' +
         'more information.',
@@ -113,21 +114,44 @@ function coerceRef(
     typeof mixedRef !== 'object'
   ) {
     if (__DEV__) {
-      if (returnFiber.mode & StrictMode) {
+      // TODO: Clean this up once we turn on the string ref warning for
+      // everyone, because the strict mode case will no longer be relevant
+      if (
+        (returnFiber.mode & StrictMode || warnAboutStringRefs) &&
+        // We warn in ReactElement.js if owner and self are equal for string refs
+        // because these cannot be automatically converted to an arrow function
+        // using a codemod. Therefore, we don't have to warn about string refs again.
+        !(
+          element._owner &&
+          element._self &&
+          element._owner.stateNode !== element._self
+        )
+      ) {
         const componentName = getComponentName(returnFiber.type) || 'Component';
-        if (!didWarnAboutStringRefInStrictMode[componentName]) {
-          warningWithoutStack(
-            false,
-            'A string ref, "%s", has been found within a strict mode tree. ' +
-              'String refs are a source of potential bugs and should be avoided. ' +
-              'We recommend using createRef() instead.' +
-              '\n%s' +
-              '\n\nLearn more about using refs safely here:' +
-              '\nhttps://fb.me/react-strict-mode-string-ref',
-            mixedRef,
-            getStackByFiberInDevAndProd(returnFiber),
-          );
-          didWarnAboutStringRefInStrictMode[componentName] = true;
+        if (!didWarnAboutStringRefs[componentName]) {
+          if (warnAboutStringRefs) {
+            console.error(
+              'Component "%s" contains the string ref "%s". Support for string refs ' +
+                'will be removed in a future major release. We recommend using ' +
+                'useRef() or createRef() instead. ' +
+                'Learn more about using refs safely here: ' +
+                'https://fb.me/react-strict-mode-string-ref%s',
+              componentName,
+              mixedRef,
+              getStackByFiberInDevAndProd(returnFiber),
+            );
+          } else {
+            console.error(
+              'A string ref, "%s", has been found within a strict mode tree. ' +
+                'String refs are a source of potential bugs and should be avoided. ' +
+                'We recommend using useRef() or createRef() instead. ' +
+                'Learn more about using refs safely here: ' +
+                'https://fb.me/react-strict-mode-string-ref%s',
+              mixedRef,
+              getStackByFiberInDevAndProd(returnFiber),
+            );
+          }
+          didWarnAboutStringRefs[componentName] = true;
         }
       }
     }
@@ -215,23 +239,24 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
 }
 
 function warnOnFunctionType() {
-  const currentComponentErrorInfo =
-    'Functions are not valid as a React child. This may happen if ' +
-    'you return a Component instead of <Component /> from render. ' +
-    'Or maybe you meant to call this function rather than return it.' +
-    getCurrentFiberStackInDev();
+  if (__DEV__) {
+    const currentComponentErrorInfo =
+      'Functions are not valid as a React child. This may happen if ' +
+      'you return a Component instead of <Component /> from render. ' +
+      'Or maybe you meant to call this function rather than return it.' +
+      getCurrentFiberStackInDev();
 
-  if (ownerHasFunctionTypeWarning[currentComponentErrorInfo]) {
-    return;
-  }
-  ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
+    if (ownerHasFunctionTypeWarning[currentComponentErrorInfo]) {
+      return;
+    }
+    ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
 
-  warning(
-    false,
-    'Functions are not valid as a React child. This may happen if ' +
-      'you return a Component instead of <Component /> from render. ' +
-      'Or maybe you meant to call this function rather than return it.',
-  );
+    console.error(
+      'Functions are not valid as a React child. This may happen if ' +
+        'you return a Component instead of <Component /> from render. ' +
+        'Or maybe you meant to call this function rather than return it.',
+    );
+  }
 }
 
 // This wrapper function exists because I expect to clone the code in each path
@@ -379,32 +404,47 @@ function ChildReconciler(shouldTrackSideEffects) {
     element: ReactElement,
     expirationTime: ExpirationTime,
   ): Fiber {
-    if (
-      current !== null &&
-      (current.elementType === element.type ||
+    if (current !== null) {
+      if (
+        current.elementType === element.type ||
         // Keep this check inline so it only runs on the false path:
-        (__DEV__ ? isCompatibleFamilyForHotReloading(current, element) : false))
-    ) {
-      // Move based on index
-      const existing = useFiber(current, element.props, expirationTime);
-      existing.ref = coerceRef(returnFiber, current, element);
-      existing.return = returnFiber;
-      if (__DEV__) {
-        existing._debugSource = element._source;
-        existing._debugOwner = element._owner;
+        (__DEV__ ? isCompatibleFamilyForHotReloading(current, element) : false)
+      ) {
+        // Move based on index
+        const existing = useFiber(current, element.props, expirationTime);
+        existing.ref = coerceRef(returnFiber, current, element);
+        existing.return = returnFiber;
+        if (__DEV__) {
+          existing._debugSource = element._source;
+          existing._debugOwner = element._owner;
+        }
+        return existing;
+      } else if (
+        enableChunksAPI &&
+        current.tag === Chunk &&
+        element.type.$$typeof === REACT_CHUNK_TYPE &&
+        element.type.render === current.type.render
+      ) {
+        // Same as above but also update the .type field.
+        const existing = useFiber(current, element.props, expirationTime);
+        existing.return = returnFiber;
+        existing.type = element.type;
+        if (__DEV__) {
+          existing._debugSource = element._source;
+          existing._debugOwner = element._owner;
+        }
+        return existing;
       }
-      return existing;
-    } else {
-      // Insert
-      const created = createFiberFromElement(
-        element,
-        returnFiber.mode,
-        expirationTime,
-      );
-      created.ref = coerceRef(returnFiber, current, element);
-      created.return = returnFiber;
-      return created;
     }
+    // Insert
+    const created = createFiberFromElement(
+      element,
+      returnFiber.mode,
+      expirationTime,
+    );
+    created.ref = coerceRef(returnFiber, current, element);
+    created.return = returnFiber;
+    return created;
   }
 
   function updatePortal(
@@ -719,8 +759,7 @@ function ChildReconciler(shouldTrackSideEffects) {
             knownKeys.add(key);
             break;
           }
-          warning(
-            false,
+          console.error(
             'Encountered two children with the same key, `%s`. ' +
               'Keys should be unique so that components maintain their identity ' +
               'across updates. Non-unique keys may cause children to be ' +
@@ -919,25 +958,27 @@ function ChildReconciler(shouldTrackSideEffects) {
         // $FlowFixMe Flow doesn't know about toStringTag
         newChildrenIterable[Symbol.toStringTag] === 'Generator'
       ) {
-        warning(
-          didWarnAboutGenerators,
-          'Using Generators as children is unsupported and will likely yield ' +
-            'unexpected results because enumerating a generator mutates it. ' +
-            'You may convert it to an array with `Array.from()` or the ' +
-            '`[...spread]` operator before rendering. Keep in mind ' +
-            'you might need to polyfill these features for older browsers.',
-        );
+        if (!didWarnAboutGenerators) {
+          console.error(
+            'Using Generators as children is unsupported and will likely yield ' +
+              'unexpected results because enumerating a generator mutates it. ' +
+              'You may convert it to an array with `Array.from()` or the ' +
+              '`[...spread]` operator before rendering. Keep in mind ' +
+              'you might need to polyfill these features for older browsers.',
+          );
+        }
         didWarnAboutGenerators = true;
       }
 
       // Warn about using Maps as children
       if ((newChildrenIterable: any).entries === iteratorFn) {
-        warning(
-          didWarnAboutMaps,
-          'Using Maps as children is unsupported and will likely yield ' +
-            'unexpected results. Convert it to a sequence/iterable of keyed ' +
-            'ReactElements instead.',
-        );
+        if (!didWarnAboutMaps) {
+          console.error(
+            'Using Maps as children is unsupported and will likely yield ' +
+              'unexpected results. Convert it to a sequence/iterable of keyed ' +
+              'ReactElements instead.',
+          );
+        }
         didWarnAboutMaps = true;
       }
 
@@ -1124,34 +1165,67 @@ function ChildReconciler(shouldTrackSideEffects) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
       if (child.key === key) {
-        if (
-          child.tag === Fragment
-            ? element.type === REACT_FRAGMENT_TYPE
-            : child.elementType === element.type ||
+        switch (child.tag) {
+          case Fragment: {
+            if (element.type === REACT_FRAGMENT_TYPE) {
+              deleteRemainingChildren(returnFiber, child.sibling);
+              const existing = useFiber(
+                child,
+                element.props.children,
+                expirationTime,
+              );
+              existing.return = returnFiber;
+              if (__DEV__) {
+                existing._debugSource = element._source;
+                existing._debugOwner = element._owner;
+              }
+              return existing;
+            }
+            break;
+          }
+          case Chunk:
+            if (enableChunksAPI) {
+              if (
+                element.type.$$typeof === REACT_CHUNK_TYPE &&
+                element.type.render === child.type.render
+              ) {
+                deleteRemainingChildren(returnFiber, child.sibling);
+                const existing = useFiber(child, element.props, expirationTime);
+                existing.type = element.type;
+                existing.return = returnFiber;
+                if (__DEV__) {
+                  existing._debugSource = element._source;
+                  existing._debugOwner = element._owner;
+                }
+                return existing;
+              }
+            }
+          // We intentionally fallthrough here if enableChunksAPI is not on.
+          // eslint-disable-next-lined no-fallthrough
+          default: {
+            if (
+              child.elementType === element.type ||
               // Keep this check inline so it only runs on the false path:
               (__DEV__
                 ? isCompatibleFamilyForHotReloading(child, element)
                 : false)
-        ) {
-          deleteRemainingChildren(returnFiber, child.sibling);
-          const existing = useFiber(
-            child,
-            element.type === REACT_FRAGMENT_TYPE
-              ? element.props.children
-              : element.props,
-            expirationTime,
-          );
-          existing.ref = coerceRef(returnFiber, child, element);
-          existing.return = returnFiber;
-          if (__DEV__) {
-            existing._debugSource = element._source;
-            existing._debugOwner = element._owner;
+            ) {
+              deleteRemainingChildren(returnFiber, child.sibling);
+              const existing = useFiber(child, element.props, expirationTime);
+              existing.ref = coerceRef(returnFiber, child, element);
+              existing.return = returnFiber;
+              if (__DEV__) {
+                existing._debugSource = element._source;
+                existing._debugOwner = element._owner;
+              }
+              return existing;
+            }
+            break;
           }
-          return existing;
-        } else {
-          deleteRemainingChildren(returnFiber, child);
-          break;
         }
+        // Didn't match.
+        deleteRemainingChildren(returnFiber, child);
+        break;
       } else {
         deleteChild(returnFiber, child);
       }
@@ -1386,3 +1460,15 @@ export function cloneChildFibers(
   }
   newChild.sibling = null;
 }
+
+// Reset a workInProgress child set to prepare it for a second pass.
+export function resetChildFibers(
+  workInProgress: Fiber,
+  renderExpirationTime: ExpirationTime,
+): void {
+  let child = workInProgress.child;
+  while (child !== null) {
+    resetWorkInProgress(child, renderExpirationTime);
+    child = child.sibling;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactDebugFiberPerf.js b/packages/react-reconciler/src/ReactDebugFiberPerf.js
index 6abf5df279874..c08276945c2ec 100644
--- a/packages/react-reconciler/src/ReactDebugFiberPerf.js
+++ b/packages/react-reconciler/src/ReactDebugFiberPerf.js
@@ -21,7 +21,6 @@ import {
   ContextConsumer,
   Mode,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
 } from 'shared/ReactWorkTags';
 
 type MeasurementPhase =
@@ -317,8 +316,7 @@ export function stopFailedWorkTimer(fiber: Fiber): void {
     }
     fiber._debugIsCurrentlyTiming = false;
     const warning =
-      fiber.tag === SuspenseComponent ||
-      fiber.tag === DehydratedSuspenseComponent
+      fiber.tag === SuspenseComponent
         ? 'Rendering was suspended'
         : 'An error was thrown inside this error boundary';
     endFiberMark(fiber, null, warning);
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 589c482bc1178..792cd1def4db5 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -12,8 +12,10 @@ import type {
   ReactFragment,
   ReactPortal,
   RefObject,
-  ReactEventComponent,
-  ReactEventTarget,
+  ReactEventResponder,
+  ReactEventResponderInstance,
+  ReactFundamentalComponent,
+  ReactScope,
 } from 'shared/ReactTypes';
 import type {RootTag} from 'shared/ReactRootTags';
 import type {WorkTag} from 'shared/ReactWorkTags';
@@ -21,14 +23,20 @@ import type {TypeOfMode} from './ReactTypeOfMode';
 import type {SideEffectTag} from 'shared/ReactSideEffectTags';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 import type {UpdateQueue} from './ReactUpdateQueue';
-import type {ContextDependencyList} from './ReactFiberNewContext';
+import type {ContextDependency} from './ReactFiberNewContext';
 import type {HookType} from './ReactFiberHooks';
+import type {SuspenseInstance} from './ReactFiberHostConfig';
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableProfilerTimer, enableEventAPI} from 'shared/ReactFeatureFlags';
-import {NoEffect} from 'shared/ReactSideEffectTags';
-import {ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags';
+import {
+  enableProfilerTimer,
+  enableFundamentalAPI,
+  enableUserTimingAPI,
+  enableScopeAPI,
+  enableChunksAPI,
+} from 'shared/ReactFeatureFlags';
+import {NoEffect, Placement} from 'shared/ReactSideEffectTags';
+import {ConcurrentRoot, BlockingRoot} from 'shared/ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -43,17 +51,21 @@ import {
   ContextConsumer,
   Profiler,
   SuspenseComponent,
+  SuspenseListComponent,
+  DehydratedFragment,
   FunctionComponent,
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
-  EventComponent,
-  EventTarget,
+  FundamentalComponent,
+  ScopeComponent,
+  Chunk,
 } from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
 import {isDevToolsPresent} from './ReactFiberDevToolsHook';
 import {
+  resolveClassForHotReloading,
   resolveFunctionForHotReloading,
   resolveForwardRefForHotReloading,
 } from './ReactFiberHotReloading';
@@ -63,7 +75,7 @@ import {
   ConcurrentMode,
   ProfileMode,
   StrictMode,
-  BatchedMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -74,10 +86,12 @@ import {
   REACT_CONTEXT_TYPE,
   REACT_CONCURRENT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
-  REACT_EVENT_COMPONENT_TYPE,
-  REACT_EVENT_TARGET_TYPE,
+  REACT_FUNDAMENTAL_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_CHUNK_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -99,6 +113,16 @@ if (__DEV__) {
   }
 }
 
+export type Dependencies = {
+  expirationTime: ExpirationTime,
+  firstContext: ContextDependency<mixed> | null,
+  responders: Map<
+    ReactEventResponder<any, any>,
+    ReactEventResponderInstance<any, any>,
+  > | null,
+  ...
+};
+
 // A Fiber is work on a Component that needs to be done or was done. There can
 // be more than one per component.
 export type Fiber = {|
@@ -147,7 +171,10 @@ export type Fiber = {|
 
   // The ref last used to attach this node.
   // I'll avoid adding an owner field for prod and model that as functions.
-  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,
+  ref:
+    | null
+    | (((handle: mixed) => void) & {_stringRef: ?string, ...})
+    | RefObject,
 
   // Input is the data coming into process this fiber. Arguments. Props.
   pendingProps: any, // This type will be more specific once we overload the tag.
@@ -159,8 +186,8 @@ export type Fiber = {|
   // The state used to create the output
   memoizedState: any,
 
-  // A linked-list of contexts that this fiber depends on
-  contextDependencies: ContextDependencyList | null,
+  // Dependencies (contexts, events) for this fiber, if it has any
+  dependencies: Dependencies | null,
 
   // Bitfield that describes properties about the fiber and its subtree. E.g.
   // the ConcurrentMode flag indicates whether the subtree should be async-by-
@@ -210,7 +237,7 @@ export type Fiber = {|
   // This field is only set when the enableProfilerTimer flag is enabled.
   selfBaseDuration?: number,
 
-  // Sum of base times for all descedents of this Fiber.
+  // Sum of base times for all descendants of this Fiber.
   // This value bubbles up during the "complete" phase.
   // This field is only set when the enableProfilerTimer flag is enabled.
   treeBaseDuration?: number,
@@ -229,11 +256,7 @@ export type Fiber = {|
   _debugHookTypes?: Array<HookType> | null,
 |};
 
-let debugCounter;
-
-if (__DEV__) {
-  debugCounter = 1;
-}
+let debugCounter = 1;
 
 function FiberNode(
   tag: WorkTag,
@@ -260,7 +283,7 @@ function FiberNode(
   this.memoizedProps = null;
   this.updateQueue = null;
   this.memoizedState = null;
-  this.contextDependencies = null;
+  this.dependencies = null;
 
   this.mode = mode;
 
@@ -303,11 +326,16 @@ function FiberNode(
     this.treeBaseDuration = 0;
   }
 
-  if (__DEV__) {
+  // This is normally DEV-only except www when it adds listeners.
+  // TODO: remove the User Timing integration in favor of Root Events.
+  if (enableUserTimingAPI) {
     this._debugID = debugCounter++;
+    this._debugIsCurrentlyTiming = false;
+  }
+
+  if (__DEV__) {
     this._debugSource = null;
     this._debugOwner = null;
-    this._debugIsCurrentlyTiming = false;
     this._debugNeedsRemount = false;
     this._debugHookTypes = null;
     if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
@@ -363,6 +391,11 @@ export function resolveLazyComponentTag(Component: Function): WorkTag {
     if ($$typeof === REACT_MEMO_TYPE) {
       return MemoComponent;
     }
+    if (enableChunksAPI) {
+      if ($$typeof === REACT_CHUNK_TYPE) {
+        return Chunk;
+      }
+    }
   }
   return IndeterminateComponent;
 }
@@ -429,7 +462,18 @@ export function createWorkInProgress(
   workInProgress.memoizedProps = current.memoizedProps;
   workInProgress.memoizedState = current.memoizedState;
   workInProgress.updateQueue = current.updateQueue;
-  workInProgress.contextDependencies = current.contextDependencies;
+
+  // Clone the dependencies object. This is mutated during the render phase, so
+  // it cannot be shared with the current fiber.
+  const currentDependencies = current.dependencies;
+  workInProgress.dependencies =
+    currentDependencies === null
+      ? null
+      : {
+          expirationTime: currentDependencies.expirationTime,
+          firstContext: currentDependencies.firstContext,
+          responders: currentDependencies.responders,
+        };
 
   // These will be overridden during the parent's reconciliation
   workInProgress.sibling = current.sibling;
@@ -449,6 +493,9 @@ export function createWorkInProgress(
       case SimpleMemoComponent:
         workInProgress.type = resolveFunctionForHotReloading(current.type);
         break;
+      case ClassComponent:
+        workInProgress.type = resolveClassForHotReloading(current.type);
+        break;
       case ForwardRef:
         workInProgress.type = resolveForwardRefForHotReloading(current.type);
         break;
@@ -460,12 +507,86 @@ export function createWorkInProgress(
   return workInProgress;
 }
 
+// Used to reuse a Fiber for a second pass.
+export function resetWorkInProgress(
+  workInProgress: Fiber,
+  renderExpirationTime: ExpirationTime,
+) {
+  // This resets the Fiber to what createFiber or createWorkInProgress would
+  // have set the values to before during the first pass. Ideally this wouldn't
+  // be necessary but unfortunately many code paths reads from the workInProgress
+  // when they should be reading from current and writing to workInProgress.
+
+  // We assume pendingProps, index, key, ref, return are still untouched to
+  // avoid doing another reconciliation.
+
+  // Reset the effect tag but keep any Placement tags, since that's something
+  // that child fiber is setting, not the reconciliation.
+  workInProgress.effectTag &= Placement;
+
+  // The effect list is no longer valid.
+  workInProgress.nextEffect = null;
+  workInProgress.firstEffect = null;
+  workInProgress.lastEffect = null;
+
+  let current = workInProgress.alternate;
+  if (current === null) {
+    // Reset to createFiber's initial values.
+    workInProgress.childExpirationTime = NoWork;
+    workInProgress.expirationTime = renderExpirationTime;
+
+    workInProgress.child = null;
+    workInProgress.memoizedProps = null;
+    workInProgress.memoizedState = null;
+    workInProgress.updateQueue = null;
+
+    workInProgress.dependencies = null;
+
+    if (enableProfilerTimer) {
+      // Note: We don't reset the actualTime counts. It's useful to accumulate
+      // actual time across multiple render passes.
+      workInProgress.selfBaseDuration = 0;
+      workInProgress.treeBaseDuration = 0;
+    }
+  } else {
+    // Reset to the cloned values that createWorkInProgress would've.
+    workInProgress.childExpirationTime = current.childExpirationTime;
+    workInProgress.expirationTime = current.expirationTime;
+
+    workInProgress.child = current.child;
+    workInProgress.memoizedProps = current.memoizedProps;
+    workInProgress.memoizedState = current.memoizedState;
+    workInProgress.updateQueue = current.updateQueue;
+
+    // Clone the dependencies object. This is mutated during the render phase, so
+    // it cannot be shared with the current fiber.
+    const currentDependencies = current.dependencies;
+    workInProgress.dependencies =
+      currentDependencies === null
+        ? null
+        : {
+            expirationTime: currentDependencies.expirationTime,
+            firstContext: currentDependencies.firstContext,
+            responders: currentDependencies.responders,
+          };
+
+    if (enableProfilerTimer) {
+      // Note: We don't reset the actualTime counts. It's useful to accumulate
+      // actual time across multiple render passes.
+      workInProgress.selfBaseDuration = current.selfBaseDuration;
+      workInProgress.treeBaseDuration = current.treeBaseDuration;
+    }
+  }
+
+  return workInProgress;
+}
+
 export function createHostRootFiber(tag: RootTag): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BatchedMode | StrictMode;
-  } else if (tag === BatchedRoot) {
-    mode = BatchedMode | StrictMode;
+    mode = ConcurrentMode | BlockingMode | StrictMode;
+  } else if (tag === BlockingRoot) {
+    mode = BlockingMode | StrictMode;
   } else {
     mode = NoMode;
   }
@@ -496,6 +617,9 @@ export function createFiberFromTypeAndProps(
   if (typeof type === 'function') {
     if (shouldConstruct(type)) {
       fiberTag = ClassComponent;
+      if (__DEV__) {
+        resolvedType = resolveClassForHotReloading(resolvedType);
+      }
     } else {
       if (__DEV__) {
         resolvedType = resolveFunctionForHotReloading(resolvedType);
@@ -514,7 +638,7 @@ export function createFiberFromTypeAndProps(
         );
       case REACT_CONCURRENT_MODE_TYPE:
         fiberTag = Mode;
-        mode |= ConcurrentMode | BatchedMode | StrictMode;
+        mode |= ConcurrentMode | BlockingMode | StrictMode;
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
@@ -524,6 +648,13 @@ export function createFiberFromTypeAndProps(
         return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
       case REACT_SUSPENSE_TYPE:
         return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
+      case REACT_SUSPENSE_LIST_TYPE:
+        return createFiberFromSuspenseList(
+          pendingProps,
+          mode,
+          expirationTime,
+          key,
+        );
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -547,9 +678,12 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_EVENT_COMPONENT_TYPE:
-              if (enableEventAPI) {
-                return createFiberFromEventComponent(
+            case REACT_CHUNK_TYPE:
+              fiberTag = Chunk;
+              break getTag;
+            case REACT_FUNDAMENTAL_TYPE:
+              if (enableFundamentalAPI) {
+                return createFiberFromFundamental(
                   type,
                   pendingProps,
                   mode,
@@ -558,9 +692,9 @@ export function createFiberFromTypeAndProps(
                 );
               }
               break;
-            case REACT_EVENT_TARGET_TYPE:
-              if (enableEventAPI) {
-                return createFiberFromEventTarget(
+            case REACT_SCOPE_TYPE:
+              if (enableScopeAPI) {
+                return createFiberFromScope(
                   type,
                   pendingProps,
                   mode,
@@ -568,7 +702,6 @@ export function createFiberFromTypeAndProps(
                   key,
                 );
               }
-              break;
           }
         }
         let info = '';
@@ -647,35 +780,31 @@ export function createFiberFromFragment(
   return fiber;
 }
 
-export function createFiberFromEventComponent(
-  eventComponent: ReactEventComponent,
+export function createFiberFromFundamental(
+  fundamentalComponent: ReactFundamentalComponent<any, any>,
   pendingProps: any,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,
   key: null | string,
 ): Fiber {
-  const fiber = createFiber(EventComponent, pendingProps, key, mode);
-  fiber.elementType = eventComponent;
-  fiber.type = eventComponent;
+  const fiber = createFiber(FundamentalComponent, pendingProps, key, mode);
+  fiber.elementType = fundamentalComponent;
+  fiber.type = fundamentalComponent;
   fiber.expirationTime = expirationTime;
   return fiber;
 }
 
-export function createFiberFromEventTarget(
-  eventTarget: ReactEventTarget,
+function createFiberFromScope(
+  scope: ReactScope,
   pendingProps: any,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,
   key: null | string,
-): Fiber {
-  const fiber = createFiber(EventTarget, pendingProps, key, mode);
-  fiber.elementType = eventTarget;
-  fiber.type = eventTarget;
+) {
+  const fiber = createFiber(ScopeComponent, pendingProps, key, mode);
+  fiber.type = scope;
+  fiber.elementType = scope;
   fiber.expirationTime = expirationTime;
-  // Store latest props
-  fiber.stateNode = {
-    props: pendingProps,
-  };
   return fiber;
 }
 
@@ -690,8 +819,7 @@ function createFiberFromProfiler(
       typeof pendingProps.id !== 'string' ||
       typeof pendingProps.onRender !== 'function'
     ) {
-      warningWithoutStack(
-        false,
+      console.error(
         'Profiler must specify an "id" string and "onRender" function as props',
       );
     }
@@ -715,10 +843,29 @@ export function createFiberFromSuspense(
   const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
 
   // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
-  const type = REACT_SUSPENSE_TYPE;
-  fiber.elementType = type;
-  fiber.type = type;
+  // This needs to be fixed in getComponentName so that it relies on the tag
+  // instead.
+  fiber.type = REACT_SUSPENSE_TYPE;
+  fiber.elementType = REACT_SUSPENSE_TYPE;
+
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
 
+export function createFiberFromSuspenseList(
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+) {
+  const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
+  if (__DEV__) {
+    // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.
+    // This needs to be fixed in getComponentName so that it relies on the tag
+    // instead.
+    fiber.type = REACT_SUSPENSE_LIST_TYPE;
+  }
+  fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
   fiber.expirationTime = expirationTime;
   return fiber;
 }
@@ -741,6 +888,14 @@ export function createFiberFromHostInstanceForDeletion(): Fiber {
   return fiber;
 }
 
+export function createFiberFromDehydratedFragment(
+  dehydratedNode: SuspenseInstance,
+): Fiber {
+  const fiber = createFiber(DehydratedFragment, null, null, NoMode);
+  fiber.stateNode = dehydratedNode;
+  return fiber;
+}
+
 export function createFiberFromPortal(
   portal: ReactPortal,
   mode: TypeOfMode,
@@ -788,7 +943,7 @@ export function assignFiberPropertiesInDEV(
   target.memoizedProps = source.memoizedProps;
   target.updateQueue = source.updateQueue;
   target.memoizedState = source.memoizedState;
-  target.contextDependencies = source.contextDependencies;
+  target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.effectTag = source.effectTag;
   target.nextEffect = source.nextEffect;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
index 33472084173c0..9db5886a6c2b4 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -11,7 +11,11 @@ import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {Fiber} from './ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
-import type {SuspenseState} from './ReactFiberSuspenseComponent';
+import type {
+  SuspenseState,
+  SuspenseListRenderState,
+  SuspenseListTailMode,
+} from './ReactFiberSuspenseComponent';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
 import checkPropTypes from 'prop-types/checkPropTypes';
@@ -31,18 +35,20 @@ import {
   ContextConsumer,
   Profiler,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
+  SuspenseListComponent,
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  EventComponent,
-  EventTarget,
+  FundamentalComponent,
+  ScopeComponent,
+  Chunk,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
   PerformedWork,
   Placement,
+  Hydrating,
   ContentReset,
   DidCapture,
   Update,
@@ -51,37 +57,48 @@ import {
 } from 'shared/ReactSideEffectTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
-  debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
+  disableLegacyContext,
   enableProfilerTimer,
+  enableSchedulerTracing,
   enableSuspenseServerRenderer,
-  enableEventAPI,
+  enableFundamentalAPI,
+  warnAboutDefaultPropsOnFunctionComponents,
+  enableScopeAPI,
+  enableChunksAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
-import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
-import warning from 'shared/warning';
-import warningWithoutStack from 'shared/warningWithoutStack';
+import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
 import {
   setCurrentPhase,
   getCurrentFiberOwnerNameInDevOrNull,
   getCurrentFiberStackInDev,
 } from './ReactCurrentFiber';
 import {startWorkTimer, cancelWorkTimer} from './ReactDebugFiberPerf';
-import {resolveFunctionForHotReloading} from './ReactFiberHotReloading';
+import {
+  resolveFunctionForHotReloading,
+  resolveForwardRefForHotReloading,
+  resolveClassForHotReloading,
+} from './ReactFiberHotReloading';
 
 import {
   mountChildFibers,
   reconcileChildFibers,
   cloneChildFibers,
 } from './ReactChildFiber';
-import {processUpdateQueue} from './ReactUpdateQueue';
+import {
+  processUpdateQueue,
+  cloneUpdateQueue,
+  initializeUpdateQueue,
+} from './ReactUpdateQueue';
 import {
   NoWork,
   Never,
+  Sync,
   computeAsyncExpiration,
 } from './ReactFiberExpirationTime';
 import {
@@ -89,7 +106,7 @@ import {
   NoMode,
   ProfileMode,
   StrictMode,
-  BatchedMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -99,32 +116,28 @@ import {
   registerSuspenseInstanceRetry,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {getEventTargetChildElement} from './ReactFiberHostConfig';
 import {shouldSuspend} from './ReactFiberReconciler';
-import {
-  pushHostContext,
-  pushHostContainer,
-  pushHostContextForEventComponent,
-  pushHostContextForEventTarget,
-} from './ReactFiberHostContext';
+import {pushHostContext, pushHostContainer} from './ReactFiberHostContext';
 import {
   suspenseStackCursor,
   pushSuspenseContext,
-  popSuspenseContext,
   InvisibleParentSuspenseContext,
   ForceSuspenseFallback,
   hasSuspenseContext,
   setDefaultShallowSuspenseContext,
   addSubtreeSuspenseContext,
+  setShallowSuspenseContext,
 } from './ReactFiberSuspenseContext';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
 import {
   pushProvider,
   propagateContextChange,
   readContext,
   prepareToReadContext,
   calculateChangedBits,
+  scheduleWorkOnParentPath,
 } from './ReactFiberNewContext';
-import {resetHooks, renderWithHooks, bailoutHooks} from './ReactFiberHooks';
+import {renderWithHooks, bailoutHooks} from './ReactFiberHooks';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer';
 import {
   getMaskedContext,
@@ -140,6 +153,7 @@ import {
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
   tryToClaimNextHydratableInstance,
+  warnIfHydrating,
 } from './ReactFiberHydrationContext';
 import {
   adoptClassInstance,
@@ -160,7 +174,14 @@ import {
   createWorkInProgress,
   isSimpleFunctionComponent,
 } from './ReactFiber';
-import {requestCurrentTime, retryTimedOutBoundary} from './ReactFiberWorkLoop';
+import {
+  markSpawnedWork,
+  requestCurrentTimeForUpdate,
+  retryDehydratedSuspenseBoundary,
+  scheduleWork,
+  renderDidSuspendDelayIfPossible,
+  markUnprocessedUpdateTime,
+} from './ReactFiberWorkLoop';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -173,6 +194,9 @@ let didWarnAboutGetDerivedStateOnFunctionComponent;
 let didWarnAboutFunctionRefs;
 export let didWarnAboutReassigningProps;
 let didWarnAboutMaxDuration;
+let didWarnAboutRevealOrder;
+let didWarnAboutTailOptions;
+let didWarnAboutDefaultPropsOnFunctionComponent;
 
 if (__DEV__) {
   didWarnAboutBadClass = {};
@@ -182,6 +206,9 @@ if (__DEV__) {
   didWarnAboutFunctionRefs = {};
   didWarnAboutReassigningProps = false;
   didWarnAboutMaxDuration = false;
+  didWarnAboutRevealOrder = {};
+  didWarnAboutTailOptions = {};
+  didWarnAboutDefaultPropsOnFunctionComponent = {};
 }
 
 export function reconcileChildren(
@@ -239,8 +266,8 @@ function forceUnmountCurrentAndReconcile(
   );
   // In the second pass, we mount the new children. The trick here is that we
   // pass null in place of where we usually pass the current child set. This has
-  // the effect of remounting all children regardless of whether their their
-  // identity matches.
+  // the effect of remounting all children regardless of whether their
+  // identities match.
   workInProgress.child = reconcileChildFibers(
     workInProgress,
     null,
@@ -295,9 +322,8 @@ function updateForwardRef(
       renderExpirationTime,
     );
     if (
-      debugRenderPhaseSideEffects ||
-      (debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode)
+      debugRenderPhaseSideEffectsForStrictMode &&
+      workInProgress.mode & StrictMode
     ) {
       // Only double-render components with Hooks
       if (workInProgress.memoizedState !== null) {
@@ -492,7 +518,7 @@ function updateSimpleMemoComponent(
     if (
       shallowEqual(prevProps, nextProps) &&
       current.ref === workInProgress.ref &&
-      // Prevent bailout if the implementation changed due to hot reload:
+      // Prevent bailout if the implementation changed due to hot reload.
       (__DEV__ ? workInProgress.type === current.type : true)
     ) {
       didReceiveUpdate = false;
@@ -598,8 +624,11 @@ function updateFunctionComponent(
     }
   }
 
-  const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
-  const context = getMaskedContext(workInProgress, unmaskedContext);
+  let context;
+  if (!disableLegacyContext) {
+    const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
+    context = getMaskedContext(workInProgress, unmaskedContext);
+  }
 
   let nextChildren;
   prepareToReadContext(workInProgress, renderExpirationTime);
@@ -615,9 +644,8 @@ function updateFunctionComponent(
       renderExpirationTime,
     );
     if (
-      debugRenderPhaseSideEffects ||
-      (debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode)
+      debugRenderPhaseSideEffectsForStrictMode &&
+      workInProgress.mode & StrictMode
     ) {
       // Only double-render components with Hooks
       if (workInProgress.memoizedState !== null) {
@@ -663,6 +691,82 @@ function updateFunctionComponent(
   return workInProgress.child;
 }
 
+function updateChunk(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  chunk: any,
+  nextProps: any,
+  renderExpirationTime: ExpirationTime,
+) {
+  // TODO: current can be non-null here even if the component
+  // hasn't yet mounted. This happens after the first render suspends.
+  // We'll need to figure out if this is fine or can cause issues.
+
+  const render = chunk.render;
+  const data = chunk.query();
+
+  // The rest is a fork of updateFunctionComponent
+  let nextChildren;
+  prepareToReadContext(workInProgress, renderExpirationTime);
+  if (__DEV__) {
+    ReactCurrentOwner.current = workInProgress;
+    setCurrentPhase('render');
+    nextChildren = renderWithHooks(
+      current,
+      workInProgress,
+      render,
+      nextProps,
+      data,
+      renderExpirationTime,
+    );
+    if (
+      debugRenderPhaseSideEffectsForStrictMode &&
+      workInProgress.mode & StrictMode
+    ) {
+      // Only double-render components with Hooks
+      if (workInProgress.memoizedState !== null) {
+        nextChildren = renderWithHooks(
+          current,
+          workInProgress,
+          render,
+          nextProps,
+          data,
+          renderExpirationTime,
+        );
+      }
+    }
+    setCurrentPhase(null);
+  } else {
+    nextChildren = renderWithHooks(
+      current,
+      workInProgress,
+      render,
+      nextProps,
+      data,
+      renderExpirationTime,
+    );
+  }
+
+  if (current !== null && !didReceiveUpdate) {
+    bailoutHooks(current, workInProgress, renderExpirationTime);
+    return bailoutOnAlreadyFinishedWork(
+      current,
+      workInProgress,
+      renderExpirationTime,
+    );
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.effectTag |= PerformedWork;
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
+  );
+  return workInProgress.child;
+}
+
 function updateClassComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -703,9 +807,9 @@ function updateClassComponent(
   let shouldUpdate;
   if (instance === null) {
     if (current !== null) {
-      // An class component without an instance only mounts if it suspended
-      // inside a non- concurrent tree, in an inconsistent state. We want to
-      // tree it like a new mount, even though an empty version of it already
+      // A class component without an instance only mounts if it suspended
+      // inside a non-concurrent tree, in an inconsistent state. We want to
+      // treat it like a new mount, even though an empty version of it already
       // committed. Disconnect the alternate pointers.
       current.alternate = null;
       workInProgress.alternate = null;
@@ -754,12 +858,13 @@ function updateClassComponent(
   if (__DEV__) {
     let inst = workInProgress.stateNode;
     if (inst.props !== nextProps) {
-      warning(
-        didWarnAboutReassigningProps,
-        'It looks like %s is reassigning its own `this.props` while rendering. ' +
-          'This is not supported and can lead to confusing bugs.',
-        getComponentName(workInProgress.type) || 'a component',
-      );
+      if (!didWarnAboutReassigningProps) {
+        console.error(
+          'It looks like %s is reassigning its own `this.props` while rendering. ' +
+            'This is not supported and can lead to confusing bugs.',
+          getComponentName(workInProgress.type) || 'a component',
+        );
+      }
       didWarnAboutReassigningProps = true;
     }
   }
@@ -801,7 +906,7 @@ function finishClassComponent(
     didCaptureError &&
     typeof Component.getDerivedStateFromError !== 'function'
   ) {
-    // If we captured an error, but getDerivedStateFrom catch is not defined,
+    // If we captured an error, but getDerivedStateFromError is not defined,
     // unmount all the children. componentDidCatch will schedule an update to
     // re-render a fallback. This is temporary until we migrate everyone to
     // the new API.
@@ -816,9 +921,8 @@ function finishClassComponent(
       setCurrentPhase('render');
       nextChildren = instance.render();
       if (
-        debugRenderPhaseSideEffects ||
-        (debugRenderPhaseSideEffectsForStrictMode &&
-          workInProgress.mode & StrictMode)
+        debugRenderPhaseSideEffectsForStrictMode &&
+        workInProgress.mode & StrictMode
       ) {
         instance.render();
       }
@@ -881,7 +985,7 @@ function updateHostRoot(current, workInProgress, renderExpirationTime) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
   invariant(
-    updateQueue !== null,
+    current !== null && updateQueue !== null,
     'If the root does not have an updateQueue, we should have already ' +
       'bailed out. This error is likely caused by a bug in React. Please ' +
       'file an issue.',
@@ -889,13 +993,8 @@ function updateHostRoot(current, workInProgress, renderExpirationTime) {
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState !== null ? prevState.element : null;
-  processUpdateQueue(
-    workInProgress,
-    updateQueue,
-    nextProps,
-    null,
-    renderExpirationTime,
-  );
+  cloneUpdateQueue(current, workInProgress);
+  processUpdateQueue(workInProgress, nextProps, null, renderExpirationTime);
   const nextState = workInProgress.memoizedState;
   // Caution: React DevTools currently depends on this property
   // being called "element".
@@ -911,31 +1010,31 @@ function updateHostRoot(current, workInProgress, renderExpirationTime) {
     );
   }
   const root: FiberRoot = workInProgress.stateNode;
-  if (
-    (current === null || current.child === null) &&
-    root.hydrate &&
-    enterHydrationState(workInProgress)
-  ) {
+  if (root.hydrate && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
 
-    // This is a bit of a hack. We track the host root as a placement to
-    // know that we're currently in a mounting state. That way isMounted
-    // works as expected. We must reset this before committing.
-    // TODO: Delete this when we delete isMounted and findDOMNode.
-    workInProgress.effectTag |= Placement;
-
-    // Ensure that children mount into this root without tracking
-    // side-effects. This ensures that we don't store Placement effects on
-    // nodes that will be hydrated.
-    workInProgress.child = mountChildFibers(
+    let child = mountChildFibers(
       workInProgress,
       null,
       nextChildren,
       renderExpirationTime,
     );
+    workInProgress.child = child;
+
+    let node = child;
+    while (node) {
+      // Mark each child as hydrating. This is a fast path to know whether this
+      // tree is part of a hydrating tree. This is used to determine if a child
+      // node has fully mounted yet, and for scheduling event replaying.
+      // Conceptually this is similar to Placement in that a new subtree is
+      // inserted into the React tree here. It just happens to not need DOM
+      // mutations because it already exists.
+      node.effectTag = (node.effectTag & ~Placement) | Hydrating;
+      node = node.sibling;
+    }
   } else {
     // Otherwise reset hydration state in case we aborted and resumed another
     // root.
@@ -967,7 +1066,7 @@ function updateHostComponent(current, workInProgress, renderExpirationTime) {
   if (isDirectTextChild) {
     // We special case a direct text child of a host node. This is a common
     // case. We won't handle it as a reified child. We will instead handle
-    // this in the host environment that also have access to this prop. That
+    // this in the host environment that also has access to this prop. That
     // avoids allocating another HostText fiber and traversing it.
     nextChildren = null;
   } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
@@ -984,6 +1083,9 @@ function updateHostComponent(current, workInProgress, renderExpirationTime) {
     renderExpirationTime !== Never &&
     shouldDeprioritizeSubtree(type, nextProps)
   ) {
+    if (enableSchedulerTracing) {
+      markSpawnedWork(Never);
+    }
     // Schedule this fiber to re-render at offscreen priority. Then bailout.
     workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
     return null;
@@ -1015,7 +1117,7 @@ function mountLazyComponent(
   renderExpirationTime,
 ) {
   if (_current !== null) {
-    // An lazy component only mounts if it suspended inside a non-
+    // A lazy component only mounts if it suspended inside a non-
     // concurrent tree, in an inconsistent state. We want to treat it like
     // a new mount, even though an empty version of it already committed.
     // Disconnect the alternate pointers.
@@ -1051,9 +1153,14 @@ function mountLazyComponent(
         resolvedProps,
         renderExpirationTime,
       );
-      break;
+      return child;
     }
     case ClassComponent: {
+      if (__DEV__) {
+        workInProgress.type = Component = resolveClassForHotReloading(
+          Component,
+        );
+      }
       child = updateClassComponent(
         null,
         workInProgress,
@@ -1061,11 +1168,11 @@ function mountLazyComponent(
         resolvedProps,
         renderExpirationTime,
       );
-      break;
+      return child;
     }
     case ForwardRef: {
       if (__DEV__) {
-        workInProgress.type = Component = resolveFunctionForHotReloading(
+        workInProgress.type = Component = resolveForwardRefForHotReloading(
           Component,
         );
       }
@@ -1076,7 +1183,7 @@ function mountLazyComponent(
         resolvedProps,
         renderExpirationTime,
       );
-      break;
+      return child;
     }
     case MemoComponent: {
       if (__DEV__) {
@@ -1101,32 +1208,43 @@ function mountLazyComponent(
         updateExpirationTime,
         renderExpirationTime,
       );
-      break;
+      return child;
     }
-    default: {
-      let hint = '';
-      if (__DEV__) {
-        if (
-          Component !== null &&
-          typeof Component === 'object' &&
-          Component.$$typeof === REACT_LAZY_TYPE
-        ) {
-          hint = ' Did you wrap a component in React.lazy() more than once?';
-        }
+    case Chunk: {
+      if (enableChunksAPI) {
+        // TODO: Resolve for Hot Reloading.
+        child = updateChunk(
+          null,
+          workInProgress,
+          Component,
+          props,
+          renderExpirationTime,
+        );
+        return child;
       }
-      // This message intentionally doesn't mention ForwardRef or MemoComponent
-      // because the fact that it's a separate type of work is an
-      // implementation detail.
-      invariant(
-        false,
-        'Element type is invalid. Received a promise that resolves to: %s. ' +
-          'Lazy element type must resolve to a class or function.%s',
-        Component,
-        hint,
-      );
+      break;
+    }
+  }
+  let hint = '';
+  if (__DEV__) {
+    if (
+      Component !== null &&
+      typeof Component === 'object' &&
+      Component.$$typeof === REACT_LAZY_TYPE
+    ) {
+      hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
-  return child;
+  // This message intentionally doesn't mention ForwardRef or MemoComponent
+  // because the fact that it's a separate type of work is an
+  // implementation detail.
+  invariant(
+    false,
+    'Element type is invalid. Received a promise that resolves to: %s. ' +
+      'Lazy element type must resolve to a class or function.%s',
+    Component,
+    hint,
+  );
 }
 
 function mountIncompleteClassComponent(
@@ -1205,11 +1323,17 @@ function mountIndeterminateComponent(
   }
 
   const props = workInProgress.pendingProps;
-  const unmaskedContext = getUnmaskedContext(workInProgress, Component, false);
-  const context = getMaskedContext(workInProgress, unmaskedContext);
+  let context;
+  if (!disableLegacyContext) {
+    const unmaskedContext = getUnmaskedContext(
+      workInProgress,
+      Component,
+      false,
+    );
+    context = getMaskedContext(workInProgress, unmaskedContext);
+  }
 
   prepareToReadContext(workInProgress, renderExpirationTime);
-
   let value;
 
   if (__DEV__) {
@@ -1220,8 +1344,7 @@ function mountIndeterminateComponent(
       const componentName = getComponentName(Component) || 'Unknown';
 
       if (!didWarnAboutBadClass[componentName]) {
-        warningWithoutStack(
-          false,
+        console.error(
           "The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
             'This is likely to cause errors. Change %s to extend React.Component instead.',
           componentName,
@@ -1266,8 +1389,7 @@ function mountIndeterminateComponent(
     if (__DEV__) {
       const componentName = getComponentName(Component) || 'Unknown';
       if (!didWarnAboutModulePatternComponent[componentName]) {
-        warningWithoutStack(
-          false,
+        console.error(
           'The <%s /> component appears to be a function component that returns a class instance. ' +
             'Change %s to a class that extends React.Component instead. ' +
             "If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -1285,7 +1407,8 @@ function mountIndeterminateComponent(
     workInProgress.tag = ClassComponent;
 
     // Throw out any hooks that were used.
-    resetHooks();
+    workInProgress.memoizedState = null;
+    workInProgress.updateQueue = null;
 
     // Push context providers early to prevent context stack mismatches.
     // During mounting we don't know the child context yet as the instance doesn't exist.
@@ -1301,6 +1424,8 @@ function mountIndeterminateComponent(
     workInProgress.memoizedState =
       value.state !== null && value.state !== undefined ? value.state : null;
 
+    initializeUpdateQueue(workInProgress);
+
     const getDerivedStateFromProps = Component.getDerivedStateFromProps;
     if (typeof getDerivedStateFromProps === 'function') {
       applyDerivedStateFromProps(
@@ -1325,10 +1450,17 @@ function mountIndeterminateComponent(
     // Proceed under the assumption that this is a function component
     workInProgress.tag = FunctionComponent;
     if (__DEV__) {
+      if (disableLegacyContext && Component.contextTypes) {
+        console.error(
+          '%s uses the legacy contextTypes API which is no longer supported. ' +
+            'Use React.createContext() with React.useContext() instead.',
+          getComponentName(Component) || 'Unknown',
+        );
+      }
+
       if (
-        debugRenderPhaseSideEffects ||
-        (debugRenderPhaseSideEffectsForStrictMode &&
-          workInProgress.mode & StrictMode)
+        debugRenderPhaseSideEffectsForStrictMode &&
+        workInProgress.mode & StrictMode
       ) {
         // Only double-render components with Hooks
         if (workInProgress.memoizedState !== null) {
@@ -1352,67 +1484,104 @@ function mountIndeterminateComponent(
 }
 
 function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
-  if (Component) {
-    warningWithoutStack(
-      !Component.childContextTypes,
-      '%s(...): childContextTypes cannot be defined on a function component.',
-      Component.displayName || Component.name || 'Component',
-    );
-  }
-  if (workInProgress.ref !== null) {
-    let info = '';
-    const ownerName = getCurrentFiberOwnerNameInDevOrNull();
-    if (ownerName) {
-      info += '\n\nCheck the render method of `' + ownerName + '`.';
-    }
-
-    let warningKey = ownerName || workInProgress._debugID || '';
-    const debugSource = workInProgress._debugSource;
-    if (debugSource) {
-      warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
-    }
-    if (!didWarnAboutFunctionRefs[warningKey]) {
-      didWarnAboutFunctionRefs[warningKey] = true;
-      warning(
-        false,
-        'Function components cannot be given refs. ' +
-          'Attempts to access this ref will fail. ' +
-          'Did you mean to use React.forwardRef()?%s',
-        info,
-      );
+  if (__DEV__) {
+    if (Component) {
+      if (Component.childContextTypes) {
+        console.error(
+          '%s(...): childContextTypes cannot be defined on a function component.',
+          Component.displayName || Component.name || 'Component',
+        );
+      }
     }
-  }
+    if (workInProgress.ref !== null) {
+      let info = '';
+      const ownerName = getCurrentFiberOwnerNameInDevOrNull();
+      if (ownerName) {
+        info += '\n\nCheck the render method of `' + ownerName + '`.';
+      }
 
-  if (typeof Component.getDerivedStateFromProps === 'function') {
-    const componentName = getComponentName(Component) || 'Unknown';
+      let warningKey = ownerName || workInProgress._debugID || '';
+      const debugSource = workInProgress._debugSource;
+      if (debugSource) {
+        warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
+      }
+      if (!didWarnAboutFunctionRefs[warningKey]) {
+        didWarnAboutFunctionRefs[warningKey] = true;
+        console.error(
+          'Function components cannot be given refs. ' +
+            'Attempts to access this ref will fail. ' +
+            'Did you mean to use React.forwardRef()?%s',
+          info,
+        );
+      }
+    }
 
-    if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
-      warningWithoutStack(
-        false,
-        '%s: Function components do not support getDerivedStateFromProps.',
-        componentName,
-      );
-      didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
+    if (
+      warnAboutDefaultPropsOnFunctionComponents &&
+      Component.defaultProps !== undefined
+    ) {
+      const componentName = getComponentName(Component) || 'Unknown';
+
+      if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Support for defaultProps will be removed from function components ' +
+            'in a future major release. Use JavaScript default parameters instead.',
+          componentName,
+        );
+        didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
+      }
     }
-  }
 
-  if (
-    typeof Component.contextType === 'object' &&
-    Component.contextType !== null
-  ) {
-    const componentName = getComponentName(Component) || 'Unknown';
+    if (typeof Component.getDerivedStateFromProps === 'function') {
+      const componentName = getComponentName(Component) || 'Unknown';
 
-    if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
-      warningWithoutStack(
-        false,
-        '%s: Function components do not support contextType.',
-        componentName,
-      );
-      didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
+      if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Function components do not support getDerivedStateFromProps.',
+          componentName,
+        );
+        didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
+      }
+    }
+
+    if (
+      typeof Component.contextType === 'object' &&
+      Component.contextType !== null
+    ) {
+      const componentName = getComponentName(Component) || 'Unknown';
+
+      if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Function components do not support contextType.',
+          componentName,
+        );
+        didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
+      }
     }
   }
 }
 
+const SUSPENDED_MARKER: SuspenseState = {
+  dehydrated: null,
+  retryTime: NoWork,
+};
+
+function shouldRemainOnFallback(
+  suspenseContext: SuspenseContext,
+  current: null | Fiber,
+  workInProgress: Fiber,
+) {
+  // If the context is telling us that we should show a fallback, and we're not
+  // already showing content, then we should show the fallback instead.
+  return (
+    hasSuspenseContext(
+      suspenseContext,
+      (ForceSuspenseFallback: SuspenseContext),
+    ) &&
+    (current === null || current.memoizedState !== null)
+  );
+}
+
 function updateSuspenseComponent(
   current,
   workInProgress,
@@ -1430,32 +1599,23 @@ function updateSuspenseComponent(
 
   let suspenseContext: SuspenseContext = suspenseStackCursor.current;
 
-  let nextState = null;
   let nextDidTimeout = false;
+  const didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;
 
   if (
-    (workInProgress.effectTag & DidCapture) !== NoEffect ||
-    hasSuspenseContext(
-      suspenseContext,
-      (ForceSuspenseFallback: SuspenseContext),
-    )
+    didSuspend ||
+    shouldRemainOnFallback(suspenseContext, current, workInProgress)
   ) {
-    // This either already captured or is a new mount that was forced into its fallback
-    // state by a parent.
-    const attemptedState: SuspenseState | null = workInProgress.memoizedState;
     // Something in this boundary's subtree already suspended. Switch to
     // rendering the fallback children.
-    nextState = {
-      fallbackExpirationTime:
-        attemptedState !== null
-          ? attemptedState.fallbackExpirationTime
-          : NoWork,
-    };
     nextDidTimeout = true;
     workInProgress.effectTag &= ~DidCapture;
   } else {
     // Attempting the main content
-    if (current === null || current.memoizedState !== null) {
+    if (
+      current === null ||
+      (current.memoizedState: null | SuspenseState) !== null
+    ) {
       // This is a new mount or this boundary is already showing a fallback state.
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
@@ -1481,8 +1641,7 @@ function updateSuspenseComponent(
     if ('maxDuration' in nextProps) {
       if (!didWarnAboutMaxDuration) {
         didWarnAboutMaxDuration = true;
-        warning(
-          false,
+        console.error(
           'maxDuration has been removed from React. ' +
             'Remove the maxDuration prop.',
         );
@@ -1512,29 +1671,24 @@ function updateSuspenseComponent(
   // custom reconciliation logic to preserve the state of the primary
   // children. It's essentially a very basic form of re-parenting.
 
-  // `child` points to the child fiber. In the normal case, this is the first
-  // fiber of the primary children set. In the timed-out case, it's a
-  // a fragment fiber containing the primary children.
-  let child;
-  // `next` points to the next fiber React should render. In the normal case,
-  // it's the same as `child`: the first fiber of the primary children set.
-  // In the timed-out case, it's a fragment fiber containing the *fallback*
-  // children -- we skip over the primary children entirely.
-  let next;
   if (current === null) {
-    if (enableSuspenseServerRenderer) {
-      // If we're currently hydrating, try to hydrate this boundary.
-      // But only if this has a fallback.
-      if (nextProps.fallback !== undefined) {
-        tryToClaimNextHydratableInstance(workInProgress);
-        // This could've changed the tag if this was a dehydrated suspense component.
-        if (workInProgress.tag === DehydratedSuspenseComponent) {
-          popSuspenseContext(workInProgress);
-          return updateDehydratedSuspenseComponent(
-            null,
-            workInProgress,
-            renderExpirationTime,
-          );
+    // If we're currently hydrating, try to hydrate this boundary.
+    // But only if this has a fallback.
+    if (nextProps.fallback !== undefined) {
+      tryToClaimNextHydratableInstance(workInProgress);
+      // This could've been a dehydrated suspense component.
+      if (enableSuspenseServerRenderer) {
+        const suspenseState: null | SuspenseState =
+          workInProgress.memoizedState;
+        if (suspenseState !== null) {
+          const dehydrated = suspenseState.dehydrated;
+          if (dehydrated !== null) {
+            return mountDehydratedSuspenseComponent(
+              workInProgress,
+              dehydrated,
+              renderExpirationTime,
+            );
+          }
         }
       }
     }
@@ -1552,8 +1706,8 @@ function updateSuspenseComponent(
       );
       primaryChildFragment.return = workInProgress;
 
-      if ((workInProgress.mode & BatchedMode) === NoMode) {
-        // Outside of batched mode, we commit the effects from the
+      if ((workInProgress.mode & BlockingMode) === NoMode) {
+        // Outside of blocking mode, we commit the effects from the
         // partially completed, timed-out tree, too.
         const progressedState: SuspenseState = workInProgress.memoizedState;
         const progressedPrimaryChild: Fiber | null =
@@ -1576,26 +1730,122 @@ function updateSuspenseComponent(
       );
       fallbackChildFragment.return = workInProgress;
       primaryChildFragment.sibling = fallbackChildFragment;
-      child = primaryChildFragment;
       // Skip the primary children, and continue working on the
       // fallback children.
-      next = fallbackChildFragment;
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      workInProgress.child = primaryChildFragment;
+      return fallbackChildFragment;
     } else {
       // Mount the primary children without an intermediate fragment fiber.
       const nextPrimaryChildren = nextProps.children;
-      child = next = mountChildFibers(
+      workInProgress.memoizedState = null;
+      return (workInProgress.child = mountChildFibers(
         workInProgress,
         null,
         nextPrimaryChildren,
         renderExpirationTime,
-      );
+      ));
     }
   } else {
     // This is an update. This branch is more complicated because we need to
     // ensure the state of the primary children is preserved.
-    const prevState = current.memoizedState;
-    const prevDidTimeout = prevState !== null;
-    if (prevDidTimeout) {
+    const prevState: null | SuspenseState = current.memoizedState;
+    if (prevState !== null) {
+      if (enableSuspenseServerRenderer) {
+        const dehydrated = prevState.dehydrated;
+        if (dehydrated !== null) {
+          if (!didSuspend) {
+            return updateDehydratedSuspenseComponent(
+              current,
+              workInProgress,
+              dehydrated,
+              prevState,
+              renderExpirationTime,
+            );
+          } else if (
+            (workInProgress.memoizedState: null | SuspenseState) !== null
+          ) {
+            // Something suspended and we should still be in dehydrated mode.
+            // Leave the existing child in place.
+            workInProgress.child = current.child;
+            // The dehydrated completion pass expects this flag to be there
+            // but the normal suspense pass doesn't.
+            workInProgress.effectTag |= DidCapture;
+            return null;
+          } else {
+            // Suspended but we should no longer be in dehydrated mode.
+            // Therefore we now have to render the fallback. Wrap the children
+            // in a fragment fiber to keep them separate from the fallback
+            // children.
+            const nextFallbackChildren = nextProps.fallback;
+            const primaryChildFragment = createFiberFromFragment(
+              // It shouldn't matter what the pending props are because we aren't
+              // going to render this fragment.
+              null,
+              mode,
+              NoWork,
+              null,
+            );
+            primaryChildFragment.return = workInProgress;
+
+            // This is always null since we never want the previous child
+            // that we're not going to hydrate.
+            primaryChildFragment.child = null;
+
+            if ((workInProgress.mode & BlockingMode) === NoMode) {
+              // Outside of blocking mode, we commit the effects from the
+              // partially completed, timed-out tree, too.
+              let progressedChild = (primaryChildFragment.child =
+                workInProgress.child);
+              while (progressedChild !== null) {
+                progressedChild.return = primaryChildFragment;
+                progressedChild = progressedChild.sibling;
+              }
+            } else {
+              // We will have dropped the effect list which contains the deletion.
+              // We need to reconcile to delete the current child.
+              reconcileChildFibers(
+                workInProgress,
+                current.child,
+                null,
+                renderExpirationTime,
+              );
+            }
+
+            // Because primaryChildFragment is a new fiber that we're inserting as the
+            // parent of a new tree, we need to set its treeBaseDuration.
+            if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
+              // treeBaseDuration is the sum of all the child tree base durations.
+              let treeBaseDuration = 0;
+              let hiddenChild = primaryChildFragment.child;
+              while (hiddenChild !== null) {
+                treeBaseDuration += hiddenChild.treeBaseDuration;
+                hiddenChild = hiddenChild.sibling;
+              }
+              primaryChildFragment.treeBaseDuration = treeBaseDuration;
+            }
+
+            // Create a fragment from the fallback children, too.
+            const fallbackChildFragment = createFiberFromFragment(
+              nextFallbackChildren,
+              mode,
+              renderExpirationTime,
+              null,
+            );
+            fallbackChildFragment.return = workInProgress;
+            primaryChildFragment.sibling = fallbackChildFragment;
+            fallbackChildFragment.effectTag |= Placement;
+            primaryChildFragment.childExpirationTime = NoWork;
+
+            workInProgress.memoizedState = SUSPENDED_MARKER;
+            workInProgress.child = primaryChildFragment;
+
+            // Skip the primary children, and continue working on the
+            // fallback children.
+            return fallbackChildFragment;
+          }
+        }
+      }
       // The current tree already timed out. That means each child set is
       // wrapped in a fragment fiber.
       const currentPrimaryChildFragment: Fiber = (current.child: any);
@@ -1611,8 +1861,8 @@ function updateSuspenseComponent(
         );
         primaryChildFragment.return = workInProgress;
 
-        if ((workInProgress.mode & BatchedMode) === NoMode) {
-          // Outside of batched mode, we commit the effects from the
+        if ((workInProgress.mode & BlockingMode) === NoMode) {
+          // Outside of blocking mode, we commit the effects from the
           // partially completed, timed-out tree, too.
           const progressedState: SuspenseState = workInProgress.memoizedState;
           const progressedPrimaryChild: Fiber | null =
@@ -1651,11 +1901,12 @@ function updateSuspenseComponent(
         );
         fallbackChildFragment.return = workInProgress;
         primaryChildFragment.sibling = fallbackChildFragment;
-        child = primaryChildFragment;
         primaryChildFragment.childExpirationTime = NoWork;
         // Skip the primary children, and continue working on the
         // fallback children.
-        next = fallbackChildFragment;
+        workInProgress.memoizedState = SUSPENDED_MARKER;
+        workInProgress.child = primaryChildFragment;
+        return fallbackChildFragment;
       } else {
         // No longer suspended. Switch back to showing the primary children,
         // and remove the intermediate fragment fiber.
@@ -1675,7 +1926,8 @@ function updateSuspenseComponent(
         // the stateNode?
 
         // Continue rendering the children, like we normally do.
-        child = next = primaryChild;
+        workInProgress.memoizedState = null;
+        return (workInProgress.child = primaryChild);
       }
     } else {
       // The current tree has not already timed out. That means the primary
@@ -1704,8 +1956,8 @@ function updateSuspenseComponent(
         // schedule a placement.
         // primaryChildFragment.effectTag |= Placement;
 
-        if ((workInProgress.mode & BatchedMode) === NoMode) {
-          // Outside of batched mode, we commit the effects from the
+        if ((workInProgress.mode & BlockingMode) === NoMode) {
+          // Outside of blocking mode, we commit the effects from the
           // partially completed, timed-out tree, too.
           const progressedState: SuspenseState = workInProgress.memoizedState;
           const progressedPrimaryChild: Fiber | null =
@@ -1743,29 +1995,26 @@ function updateSuspenseComponent(
         fallbackChildFragment.return = workInProgress;
         primaryChildFragment.sibling = fallbackChildFragment;
         fallbackChildFragment.effectTag |= Placement;
-        child = primaryChildFragment;
         primaryChildFragment.childExpirationTime = NoWork;
         // Skip the primary children, and continue working on the
         // fallback children.
-        next = fallbackChildFragment;
+        workInProgress.memoizedState = SUSPENDED_MARKER;
+        workInProgress.child = primaryChildFragment;
+        return fallbackChildFragment;
       } else {
-        // Still haven't timed out.  Continue rendering the children, like we
+        // Still haven't timed out. Continue rendering the children, like we
         // normally do.
+        workInProgress.memoizedState = null;
         const nextPrimaryChildren = nextProps.children;
-        next = child = reconcileChildFibers(
+        return (workInProgress.child = reconcileChildFibers(
           workInProgress,
           currentPrimaryChild,
           nextPrimaryChildren,
           renderExpirationTime,
-        );
+        ));
       }
     }
-    workInProgress.stateNode = current.stateNode;
   }
-
-  workInProgress.memoizedState = nextState;
-  workInProgress.child = child;
-  return next;
 }
 
 function retrySuspenseComponentWithoutHydrating(
@@ -1773,80 +2022,90 @@ function retrySuspenseComponentWithoutHydrating(
   workInProgress: Fiber,
   renderExpirationTime: ExpirationTime,
 ) {
-  // Detach from the current dehydrated boundary.
-  current.alternate = null;
-  workInProgress.alternate = null;
-
-  // Insert a deletion in the effect list.
-  let returnFiber = workInProgress.return;
-  invariant(
-    returnFiber !== null,
-    'Suspense boundaries are never on the root. ' +
-      'This is probably a bug in React.',
+  // We're now not suspended nor dehydrated.
+  workInProgress.memoizedState = null;
+  // Retry with the full children.
+  const nextProps = workInProgress.pendingProps;
+  const nextChildren = nextProps.children;
+  // This will ensure that the children get Placement effects and
+  // that the old child gets a Deletion effect.
+  // We could also call forceUnmountCurrentAndReconcile.
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
   );
-  const last = returnFiber.lastEffect;
-  if (last !== null) {
-    last.nextEffect = current;
-    returnFiber.lastEffect = current;
+  return workInProgress.child;
+}
+
+function mountDehydratedSuspenseComponent(
+  workInProgress: Fiber,
+  suspenseInstance: SuspenseInstance,
+  renderExpirationTime: ExpirationTime,
+): null | Fiber {
+  // During the first pass, we'll bail out and not drill into the children.
+  // Instead, we'll leave the content in place and try to hydrate it later.
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
+    if (__DEV__) {
+      console.error(
+        'Cannot hydrate Suspense in legacy mode. Switch from ' +
+          'ReactDOM.hydrate(element, container) to ' +
+          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+          '.render(element) or remove the Suspense components from ' +
+          'the server rendered components.',
+      );
+    }
+    workInProgress.expirationTime = Sync;
+  } else if (isSuspenseInstanceFallback(suspenseInstance)) {
+    // This is a client-only boundary. Since we won't get any content from the server
+    // for this, we need to schedule that at a higher priority based on when it would
+    // have timed out. In theory we could render it in this pass but it would have the
+    // wrong priority associated with it and will prevent hydration of parent path.
+    // Instead, we'll leave work left on it to render it in a separate commit.
+
+    // TODO This time should be the time at which the server rendered response that is
+    // a parent to this boundary was displayed. However, since we currently don't have
+    // a protocol to transfer that time, we'll just estimate it by using the current
+    // time. This will mean that Suspense timeouts are slightly shifted to later than
+    // they should be.
+    let serverDisplayTime = requestCurrentTimeForUpdate();
+    // Schedule a normal pri update to render this content.
+    let newExpirationTime = computeAsyncExpiration(serverDisplayTime);
+    if (enableSchedulerTracing) {
+      markSpawnedWork(newExpirationTime);
+    }
+    workInProgress.expirationTime = newExpirationTime;
   } else {
-    returnFiber.firstEffect = returnFiber.lastEffect = current;
+    // We'll continue hydrating the rest at offscreen priority since we'll already
+    // be showing the right content coming from the server, it is no rush.
+    workInProgress.expirationTime = Never;
+    if (enableSchedulerTracing) {
+      markSpawnedWork(Never);
+    }
   }
-  current.nextEffect = null;
-  current.effectTag = Deletion;
-
-  popSuspenseContext(workInProgress);
-
-  // Upgrade this work in progress to a real Suspense component.
-  workInProgress.tag = SuspenseComponent;
-  workInProgress.stateNode = null;
-  workInProgress.memoizedState = null;
-  // This is now an insertion.
-  workInProgress.effectTag |= Placement;
-  // Retry as a real Suspense component.
-  return updateSuspenseComponent(null, workInProgress, renderExpirationTime);
+  return null;
 }
 
 function updateDehydratedSuspenseComponent(
-  current: Fiber | null,
+  current: Fiber,
   workInProgress: Fiber,
+  suspenseInstance: SuspenseInstance,
+  suspenseState: SuspenseState,
   renderExpirationTime: ExpirationTime,
-) {
-  pushSuspenseContext(
-    workInProgress,
-    setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-  );
-  const suspenseInstance = (workInProgress.stateNode: SuspenseInstance);
-  if (current === null) {
-    // During the first pass, we'll bail out and not drill into the children.
-    // Instead, we'll leave the content in place and try to hydrate it later.
-    if (isSuspenseInstanceFallback(suspenseInstance)) {
-      // This is a client-only boundary. Since we won't get any content from the server
-      // for this, we need to schedule that at a higher priority based on when it would
-      // have timed out. In theory we could render it in this pass but it would have the
-      // wrong priority associated with it and will prevent hydration of parent path.
-      // Instead, we'll leave work left on it to render it in a separate commit.
-
-      // TODO This time should be the time at which the server rendered response that is
-      // a parent to this boundary was displayed. However, since we currently don't have
-      // a protocol to transfer that time, we'll just estimate it by using the current
-      // time. This will mean that Suspense timeouts are slightly shifted to later than
-      // they should be.
-      let serverDisplayTime = requestCurrentTime();
-      // Schedule a normal pri update to render this content.
-      workInProgress.expirationTime = computeAsyncExpiration(serverDisplayTime);
-    } else {
-      // We'll continue hydrating the rest at offscreen priority since we'll already
-      // be showing the right content coming from the server, it is no rush.
-      workInProgress.expirationTime = Never;
-    }
-    return null;
-  }
-  if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
-    // Something suspended. Leave the existing children in place.
-    // TODO: In non-concurrent mode, should we commit the nodes we have hydrated so far?
-    workInProgress.child = null;
-    return null;
+): null | Fiber {
+  // We should never be hydrating at this point because it is the first pass,
+  // but after we've already committed once.
+  warnIfHydrating();
+
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
+    return retrySuspenseComponentWithoutHydrating(
+      current,
+      workInProgress,
+      renderExpirationTime,
+    );
   }
+
   if (isSuspenseInstanceFallback(suspenseInstance)) {
     // This boundary is in a permanent fallback state. In this case, we'll never
     // get an update and we'll never be able to hydrate the final content. Let's just try the
@@ -1862,11 +2121,31 @@ function updateDehydratedSuspenseComponent(
   const hasContextChanged = current.childExpirationTime >= renderExpirationTime;
   if (didReceiveUpdate || hasContextChanged) {
     // This boundary has changed since the first render. This means that we are now unable to
-    // hydrate it. We might still be able to hydrate it using an earlier expiration time but
-    // during this render we can't. Instead, we're going to delete the whole subtree and
-    // instead inject a new real Suspense boundary to take its place, which may render content
-    // or fallback. The real Suspense boundary will suspend for a while so we have some time
-    // to ensure it can produce real content, but all state and pending events will be lost.
+    // hydrate it. We might still be able to hydrate it using an earlier expiration time, if
+    // we are rendering at lower expiration than sync.
+    if (renderExpirationTime < Sync) {
+      if (suspenseState.retryTime <= renderExpirationTime) {
+        // This render is even higher pri than we've seen before, let's try again
+        // at even higher pri.
+        let attemptHydrationAtExpirationTime = renderExpirationTime + 1;
+        suspenseState.retryTime = attemptHydrationAtExpirationTime;
+        scheduleWork(current, attemptHydrationAtExpirationTime);
+        // TODO: Early abort this render.
+      } else {
+        // We have already tried to ping at a higher priority than we're rendering with
+        // so if we got here, we must have failed to hydrate at those levels. We must
+        // now give up. Instead, we're going to delete the whole subtree and instead inject
+        // a new real Suspense boundary to take its place, which may render content
+        // or fallback. This might suspend for a while and if it does we might still have
+        // an opportunity to hydrate before this pass commits.
+      }
+    }
+    // If we have scheduled higher pri work above, this will probably just abort the render
+    // since we now have higher priority work, but in case it doesn't, we need to prepare to
+    // render something, if we time out. Even if that requires us to delete everything and
+    // skip hydration.
+    // Delay having to do this as long as the suspense timeout allows us.
+    renderDidSuspendDelayIfPossible();
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -1883,29 +2162,435 @@ function updateDehydratedSuspenseComponent(
     // these should update this boundary to the permanent Fallback state instead.
     // Mark it as having captured (i.e. suspended).
     workInProgress.effectTag |= DidCapture;
-    // Leave the children in place. I.e. empty.
-    workInProgress.child = null;
+    // Leave the child in place. I.e. the dehydrated fragment.
+    workInProgress.child = current.child;
     // Register a callback to retry this boundary once the server has sent the result.
     registerSuspenseInstanceRetry(
       suspenseInstance,
-      retryTimedOutBoundary.bind(null, current),
+      retryDehydratedSuspenseBoundary.bind(null, current),
     );
     return null;
   } else {
     // This is the first attempt.
-    reenterHydrationStateFromDehydratedSuspenseInstance(workInProgress);
+    reenterHydrationStateFromDehydratedSuspenseInstance(
+      workInProgress,
+      suspenseInstance,
+    );
     const nextProps = workInProgress.pendingProps;
     const nextChildren = nextProps.children;
-    workInProgress.child = mountChildFibers(
+    const child = mountChildFibers(
       workInProgress,
       null,
       nextChildren,
       renderExpirationTime,
     );
+    let node = child;
+    while (node) {
+      // Mark each child as hydrating. This is a fast path to know whether this
+      // tree is part of a hydrating tree. This is used to determine if a child
+      // node has fully mounted yet, and for scheduling event replaying.
+      // Conceptually this is similar to Placement in that a new subtree is
+      // inserted into the React tree here. It just happens to not need DOM
+      // mutations because it already exists.
+      node.effectTag |= Hydrating;
+      node = node.sibling;
+    }
+    workInProgress.child = child;
     return workInProgress.child;
   }
 }
 
+function scheduleWorkOnFiber(
+  fiber: Fiber,
+  renderExpirationTime: ExpirationTime,
+) {
+  if (fiber.expirationTime < renderExpirationTime) {
+    fiber.expirationTime = renderExpirationTime;
+  }
+  let alternate = fiber.alternate;
+  if (alternate !== null && alternate.expirationTime < renderExpirationTime) {
+    alternate.expirationTime = renderExpirationTime;
+  }
+  scheduleWorkOnParentPath(fiber.return, renderExpirationTime);
+}
+
+function propagateSuspenseContextChange(
+  workInProgress: Fiber,
+  firstChild: null | Fiber,
+  renderExpirationTime: ExpirationTime,
+): void {
+  // Mark any Suspense boundaries with fallbacks as having work to do.
+  // If they were previously forced into fallbacks, they may now be able
+  // to unblock.
+  let node = firstChild;
+  while (node !== null) {
+    if (node.tag === SuspenseComponent) {
+      const state: SuspenseState | null = node.memoizedState;
+      if (state !== null) {
+        scheduleWorkOnFiber(node, renderExpirationTime);
+      }
+    } else if (node.tag === SuspenseListComponent) {
+      // If the tail is hidden there might not be an Suspense boundaries
+      // to schedule work on. In this case we have to schedule it on the
+      // list itself.
+      // We don't have to traverse to the children of the list since
+      // the list will propagate the change when it rerenders.
+      scheduleWorkOnFiber(node, renderExpirationTime);
+    } else if (node.child !== null) {
+      node.child.return = node;
+      node = node.child;
+      continue;
+    }
+    if (node === workInProgress) {
+      return;
+    }
+    while (node.sibling === null) {
+      if (node.return === null || node.return === workInProgress) {
+        return;
+      }
+      node = node.return;
+    }
+    node.sibling.return = node.return;
+    node = node.sibling;
+  }
+}
+
+function findLastContentRow(firstChild: null | Fiber): null | Fiber {
+  // This is going to find the last row among these children that is already
+  // showing content on the screen, as opposed to being in fallback state or
+  // new. If a row has multiple Suspense boundaries, any of them being in the
+  // fallback state, counts as the whole row being in a fallback state.
+  // Note that the "rows" will be workInProgress, but any nested children
+  // will still be current since we haven't rendered them yet. The mounted
+  // order may not be the same as the new order. We use the new order.
+  let row = firstChild;
+  let lastContentRow: null | Fiber = null;
+  while (row !== null) {
+    let currentRow = row.alternate;
+    // New rows can't be content rows.
+    if (currentRow !== null && findFirstSuspended(currentRow) === null) {
+      lastContentRow = row;
+    }
+    row = row.sibling;
+  }
+  return lastContentRow;
+}
+
+type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together' | void;
+
+function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
+  if (__DEV__) {
+    if (
+      revealOrder !== undefined &&
+      revealOrder !== 'forwards' &&
+      revealOrder !== 'backwards' &&
+      revealOrder !== 'together' &&
+      !didWarnAboutRevealOrder[revealOrder]
+    ) {
+      didWarnAboutRevealOrder[revealOrder] = true;
+      if (typeof revealOrder === 'string') {
+        switch (revealOrder.toLowerCase()) {
+          case 'together':
+          case 'forwards':
+          case 'backwards': {
+            console.error(
+              '"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
+                'Use lowercase "%s" instead.',
+              revealOrder,
+              revealOrder.toLowerCase(),
+            );
+            break;
+          }
+          case 'forward':
+          case 'backward': {
+            console.error(
+              '"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
+                'React uses the -s suffix in the spelling. Use "%ss" instead.',
+              revealOrder,
+              revealOrder.toLowerCase(),
+            );
+            break;
+          }
+          default:
+            console.error(
+              '"%s" is not a supported revealOrder on <SuspenseList />. ' +
+                'Did you mean "together", "forwards" or "backwards"?',
+              revealOrder,
+            );
+            break;
+        }
+      } else {
+        console.error(
+          '%s is not a supported value for revealOrder on <SuspenseList />. ' +
+            'Did you mean "together", "forwards" or "backwards"?',
+          revealOrder,
+        );
+      }
+    }
+  }
+}
+
+function validateTailOptions(
+  tailMode: SuspenseListTailMode,
+  revealOrder: SuspenseListRevealOrder,
+) {
+  if (__DEV__) {
+    if (tailMode !== undefined && !didWarnAboutTailOptions[tailMode]) {
+      if (tailMode !== 'collapsed' && tailMode !== 'hidden') {
+        didWarnAboutTailOptions[tailMode] = true;
+        console.error(
+          '"%s" is not a supported value for tail on <SuspenseList />. ' +
+            'Did you mean "collapsed" or "hidden"?',
+          tailMode,
+        );
+      } else if (revealOrder !== 'forwards' && revealOrder !== 'backwards') {
+        didWarnAboutTailOptions[tailMode] = true;
+        console.error(
+          '<SuspenseList tail="%s" /> is only valid if revealOrder is ' +
+            '"forwards" or "backwards". ' +
+            'Did you mean to specify revealOrder="forwards"?',
+          tailMode,
+        );
+      }
+    }
+  }
+}
+
+function validateSuspenseListNestedChild(childSlot: mixed, index: number) {
+  if (__DEV__) {
+    let isArray = Array.isArray(childSlot);
+    let isIterable = !isArray && typeof getIteratorFn(childSlot) === 'function';
+    if (isArray || isIterable) {
+      let type = isArray ? 'array' : 'iterable';
+      console.error(
+        'A nested %s was passed to row #%s in <SuspenseList />. Wrap it in ' +
+          'an additional SuspenseList to configure its revealOrder: ' +
+          '<SuspenseList revealOrder=...> ... ' +
+          '<SuspenseList revealOrder=...>{%s}</SuspenseList> ... ' +
+          '</SuspenseList>',
+        type,
+        index,
+        type,
+      );
+      return false;
+    }
+  }
+  return true;
+}
+
+function validateSuspenseListChildren(
+  children: mixed,
+  revealOrder: SuspenseListRevealOrder,
+) {
+  if (__DEV__) {
+    if (
+      (revealOrder === 'forwards' || revealOrder === 'backwards') &&
+      children !== undefined &&
+      children !== null &&
+      children !== false
+    ) {
+      if (Array.isArray(children)) {
+        for (let i = 0; i < children.length; i++) {
+          if (!validateSuspenseListNestedChild(children[i], i)) {
+            return;
+          }
+        }
+      } else {
+        let iteratorFn = getIteratorFn(children);
+        if (typeof iteratorFn === 'function') {
+          const childrenIterator = iteratorFn.call(children);
+          if (childrenIterator) {
+            let step = childrenIterator.next();
+            let i = 0;
+            for (; !step.done; step = childrenIterator.next()) {
+              if (!validateSuspenseListNestedChild(step.value, i)) {
+                return;
+              }
+              i++;
+            }
+          }
+        } else {
+          console.error(
+            'A single row was passed to a <SuspenseList revealOrder="%s" />. ' +
+              'This is not useful since it needs multiple rows. ' +
+              'Did you mean to pass multiple children or an array?',
+            revealOrder,
+          );
+        }
+      }
+    }
+  }
+}
+
+function initSuspenseListRenderState(
+  workInProgress: Fiber,
+  isBackwards: boolean,
+  tail: null | Fiber,
+  lastContentRow: null | Fiber,
+  tailMode: SuspenseListTailMode,
+  lastEffectBeforeRendering: null | Fiber,
+): void {
+  let renderState: null | SuspenseListRenderState =
+    workInProgress.memoizedState;
+  if (renderState === null) {
+    workInProgress.memoizedState = ({
+      isBackwards: isBackwards,
+      rendering: null,
+      renderingStartTime: 0,
+      last: lastContentRow,
+      tail: tail,
+      tailExpiration: 0,
+      tailMode: tailMode,
+      lastEffect: lastEffectBeforeRendering,
+    }: SuspenseListRenderState);
+  } else {
+    // We can reuse the existing object from previous renders.
+    renderState.isBackwards = isBackwards;
+    renderState.rendering = null;
+    renderState.renderingStartTime = 0;
+    renderState.last = lastContentRow;
+    renderState.tail = tail;
+    renderState.tailExpiration = 0;
+    renderState.tailMode = tailMode;
+    renderState.lastEffect = lastEffectBeforeRendering;
+  }
+}
+
+// This can end up rendering this component multiple passes.
+// The first pass splits the children fibers into two sets. A head and tail.
+// We first render the head. If anything is in fallback state, we do another
+// pass through beginWork to rerender all children (including the tail) with
+// the force suspend context. If the first render didn't have anything in
+// in fallback state. Then we render each row in the tail one-by-one.
+// That happens in the completeWork phase without going back to beginWork.
+function updateSuspenseListComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderExpirationTime: ExpirationTime,
+) {
+  const nextProps = workInProgress.pendingProps;
+  const revealOrder: SuspenseListRevealOrder = nextProps.revealOrder;
+  const tailMode: SuspenseListTailMode = nextProps.tail;
+  const newChildren = nextProps.children;
+
+  validateRevealOrder(revealOrder);
+  validateTailOptions(tailMode, revealOrder);
+  validateSuspenseListChildren(newChildren, revealOrder);
+
+  reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
+
+  let suspenseContext: SuspenseContext = suspenseStackCursor.current;
+
+  let shouldForceFallback = hasSuspenseContext(
+    suspenseContext,
+    (ForceSuspenseFallback: SuspenseContext),
+  );
+  if (shouldForceFallback) {
+    suspenseContext = setShallowSuspenseContext(
+      suspenseContext,
+      ForceSuspenseFallback,
+    );
+    workInProgress.effectTag |= DidCapture;
+  } else {
+    const didSuspendBefore =
+      current !== null && (current.effectTag & DidCapture) !== NoEffect;
+    if (didSuspendBefore) {
+      // If we previously forced a fallback, we need to schedule work
+      // on any nested boundaries to let them know to try to render
+      // again. This is the same as context updating.
+      propagateSuspenseContextChange(
+        workInProgress,
+        workInProgress.child,
+        renderExpirationTime,
+      );
+    }
+    suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
+  }
+  pushSuspenseContext(workInProgress, suspenseContext);
+
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
+    // Outside of blocking mode, SuspenseList doesn't work so we just
+    // use make it a noop by treating it as the default revealOrder.
+    workInProgress.memoizedState = null;
+  } else {
+    switch (revealOrder) {
+      case 'forwards': {
+        let lastContentRow = findLastContentRow(workInProgress.child);
+        let tail;
+        if (lastContentRow === null) {
+          // The whole list is part of the tail.
+          // TODO: We could fast path by just rendering the tail now.
+          tail = workInProgress.child;
+          workInProgress.child = null;
+        } else {
+          // Disconnect the tail rows after the content row.
+          // We're going to render them separately later.
+          tail = lastContentRow.sibling;
+          lastContentRow.sibling = null;
+        }
+        initSuspenseListRenderState(
+          workInProgress,
+          false, // isBackwards
+          tail,
+          lastContentRow,
+          tailMode,
+          workInProgress.lastEffect,
+        );
+        break;
+      }
+      case 'backwards': {
+        // We're going to find the first row that has existing content.
+        // At the same time we're going to reverse the list of everything
+        // we pass in the meantime. That's going to be our tail in reverse
+        // order.
+        let tail = null;
+        let row = workInProgress.child;
+        workInProgress.child = null;
+        while (row !== null) {
+          let currentRow = row.alternate;
+          // New rows can't be content rows.
+          if (currentRow !== null && findFirstSuspended(currentRow) === null) {
+            // This is the beginning of the main content.
+            workInProgress.child = row;
+            break;
+          }
+          let nextRow = row.sibling;
+          row.sibling = tail;
+          tail = row;
+          row = nextRow;
+        }
+        // TODO: If workInProgress.child is null, we can continue on the tail immediately.
+        initSuspenseListRenderState(
+          workInProgress,
+          true, // isBackwards
+          tail,
+          null, // last
+          tailMode,
+          workInProgress.lastEffect,
+        );
+        break;
+      }
+      case 'together': {
+        initSuspenseListRenderState(
+          workInProgress,
+          false, // isBackwards
+          null, // tail
+          null, // last
+          undefined,
+          workInProgress.lastEffect,
+        );
+        break;
+      }
+      default: {
+        // The default reveal order is the same as not having
+        // a boundary.
+        workInProgress.memoizedState = null;
+      }
+    }
+  }
+  return workInProgress.child;
+}
+
 function updatePortalComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -2020,8 +2705,7 @@ function updateContextConsumer(
       if (context !== context.Consumer) {
         if (!hasWarnedAboutUsingContextAsConsumer) {
           hasWarnedAboutUsingContextAsConsumer = true;
-          warning(
-            false,
+          console.error(
             'Rendering <Context> directly is not supported and will be removed in ' +
               'a future major release. Did you mean to render <Context.Consumer> instead?',
           );
@@ -2035,13 +2719,14 @@ function updateContextConsumer(
   const render = newProps.children;
 
   if (__DEV__) {
-    warningWithoutStack(
-      typeof render === 'function',
-      'A context consumer was rendered with multiple children, or a child ' +
-        "that isn't a function. A context consumer expects a single child " +
-        'that is a function. If you did pass a function, make sure there ' +
-        'is no trailing or leading whitespace around it.',
-    );
+    if (typeof render !== 'function') {
+      console.error(
+        'A context consumer was rendered with multiple children, or a child ' +
+          "that isn't a function. A context consumer expects a single child " +
+          'that is a function. If you did pass a function, make sure there ' +
+          'is no trailing or leading whitespace around it.',
+      );
+    }
   }
 
   prepareToReadContext(workInProgress, renderExpirationTime);
@@ -2062,9 +2747,17 @@ function updateContextConsumer(
   return workInProgress.child;
 }
 
-function updateEventComponent(current, workInProgress, renderExpirationTime) {
+function updateFundamentalComponent(
+  current,
+  workInProgress,
+  renderExpirationTime,
+) {
+  const fundamentalImpl = workInProgress.type.impl;
+  if (fundamentalImpl.reconcileChildren === false) {
+    return null;
+  }
   const nextProps = workInProgress.pendingProps;
-  let nextChildren = nextProps.children;
+  const nextChildren = nextProps.children;
 
   reconcileChildren(
     current,
@@ -2072,39 +2765,19 @@ function updateEventComponent(current, workInProgress, renderExpirationTime) {
     nextChildren,
     renderExpirationTime,
   );
-  pushHostContextForEventComponent(workInProgress);
   return workInProgress.child;
 }
 
-function updateEventTarget(current, workInProgress, renderExpirationTime) {
-  const type = workInProgress.type.type;
+function updateScopeComponent(current, workInProgress, renderExpirationTime) {
   const nextProps = workInProgress.pendingProps;
-  const eventTargetChild = getEventTargetChildElement(type, nextProps);
-
-  if (__DEV__) {
-    warning(
-      nextProps.children == null,
-      'Event targets should not have children.',
-    );
-  }
-  if (eventTargetChild !== null) {
-    const child = (workInProgress.child = createFiberFromTypeAndProps(
-      eventTargetChild.type,
-      null,
-      eventTargetChild.props,
-      null,
-      workInProgress.mode,
-      renderExpirationTime,
-    ));
-    child.return = workInProgress;
+  const nextChildren = nextProps.children;
 
-    if (current === null || current.child === null) {
-      child.effectTag = Placement;
-    }
-  } else {
-    reconcileChildren(current, workInProgress, null, renderExpirationTime);
-  }
-  pushHostContextForEventTarget(workInProgress);
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
+  );
   return workInProgress.child;
 }
 
@@ -2120,8 +2793,8 @@ function bailoutOnAlreadyFinishedWork(
   cancelWorkTimer(workInProgress);
 
   if (current !== null) {
-    // Reuse previous context list
-    workInProgress.contextDependencies = current.contextDependencies;
+    // Reuse previous dependencies
+    workInProgress.dependencies = current.dependencies;
   }
 
   if (enableProfilerTimer) {
@@ -2129,6 +2802,11 @@ function bailoutOnAlreadyFinishedWork(
     stopProfilerTimerIfRunning(workInProgress);
   }
 
+  const updateExpirationTime = workInProgress.expirationTime;
+  if (updateExpirationTime !== NoWork) {
+    markUnprocessedUpdateTime(updateExpirationTime);
+  }
+
   // Check if the children have any pending work.
   const childExpirationTime = workInProgress.childExpirationTime;
   if (childExpirationTime < renderExpirationTime) {
@@ -2164,6 +2842,7 @@ function remountFiber(
     newWorkInProgress.index = oldWorkInProgress.index;
     newWorkInProgress.sibling = oldWorkInProgress.sibling;
     newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
 
     // Replace the child/sibling pointers above it.
     if (oldWorkInProgress === returnFiber.child) {
@@ -2261,6 +2940,9 @@ function beginWork(
             renderExpirationTime !== Never &&
             shouldDeprioritizeSubtree(workInProgress.type, newProps)
           ) {
+            if (enableSchedulerTracing) {
+              markSpawnedWork(Never);
+            }
             // Schedule this fiber to re-render at offscreen priority. Then bailout.
             workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
             return null;
@@ -2286,13 +2968,31 @@ function beginWork(
         }
         case Profiler:
           if (enableProfilerTimer) {
-            workInProgress.effectTag |= Update;
+            // Profiler should only call onRender when one of its descendants actually rendered.
+            const hasChildWork =
+              workInProgress.childExpirationTime >= renderExpirationTime;
+            if (hasChildWork) {
+              workInProgress.effectTag |= Update;
+            }
           }
           break;
         case SuspenseComponent: {
           const state: SuspenseState | null = workInProgress.memoizedState;
-          const didTimeout = state !== null;
-          if (didTimeout) {
+          if (state !== null) {
+            if (enableSuspenseServerRenderer) {
+              if (state.dehydrated !== null) {
+                pushSuspenseContext(
+                  workInProgress,
+                  setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+                );
+                // We know that this component will suspend again because if it has
+                // been unsuspended it has committed as a resolved Suspense component.
+                // If it needs to be retried, it should have work scheduled on it.
+                workInProgress.effectTag |= DidCapture;
+                break;
+              }
+            }
+
             // If this boundary is currently timed out, we need to decide
             // whether to retry the primary children, or to skip over it and
             // go straight to the fallback. Check the priority of the primary
@@ -2339,29 +3039,52 @@ function beginWork(
           }
           break;
         }
-        case DehydratedSuspenseComponent: {
-          if (enableSuspenseServerRenderer) {
-            pushSuspenseContext(
-              workInProgress,
-              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-            );
-            // We know that this component will suspend again because if it has
-            // been unsuspended it has committed as a regular Suspense component.
-            // If it needs to be retried, it should have work scheduled on it.
+        case SuspenseListComponent: {
+          const didSuspendBefore =
+            (current.effectTag & DidCapture) !== NoEffect;
+
+          const hasChildWork =
+            workInProgress.childExpirationTime >= renderExpirationTime;
+
+          if (didSuspendBefore) {
+            if (hasChildWork) {
+              // If something was in fallback state last time, and we have all the
+              // same children then we're still in progressive loading state.
+              // Something might get unblocked by state updates or retries in the
+              // tree which will affect the tail. So we need to use the normal
+              // path to compute the correct tail.
+              return updateSuspenseListComponent(
+                current,
+                workInProgress,
+                renderExpirationTime,
+              );
+            }
+            // If none of the children had any work, that means that none of
+            // them got retried so they'll still be blocked in the same way
+            // as before. We can fast bail out.
             workInProgress.effectTag |= DidCapture;
           }
-          break;
-        }
-        case EventComponent:
-          if (enableEventAPI) {
-            pushHostContextForEventComponent(workInProgress);
+
+          // If nothing suspended before and we're rendering the same children,
+          // then the tail doesn't matter. Anything new that suspends will work
+          // in the "together" mode, so we can continue from the state we had.
+          let renderState = workInProgress.memoizedState;
+          if (renderState !== null) {
+            // Reset to the "together" mode in case we've started a different
+            // update in the past but didn't complete it.
+            renderState.rendering = null;
+            renderState.tail = null;
           }
-          break;
-        case EventTarget: {
-          if (enableEventAPI) {
-            pushHostContextForEventTarget(workInProgress);
+          pushSuspenseContext(workInProgress, suspenseStackCursor.current);
+
+          if (hasChildWork) {
+            break;
+          } else {
+            // If none of the children had any work, that means that none of
+            // them got retried so they'll still be blocked in the same way
+            // as before. We can fast bail out.
+            return null;
           }
-          break;
         }
       }
       return bailoutOnAlreadyFinishedWork(
@@ -2369,6 +3092,12 @@ function beginWork(
         workInProgress,
         renderExpirationTime,
       );
+    } else {
+      // An update was scheduled on this fiber, but there are no new props
+      // nor legacy context. Set this to false. If an update queue or context
+      // consumer produces a changed value, it will set this to true. Otherwise,
+      // the component will assume the children have not changed and bail out.
+      didReceiveUpdate = false;
     }
   } else {
     didReceiveUpdate = false;
@@ -2531,9 +3260,16 @@ function beginWork(
         renderExpirationTime,
       );
     }
-    case DehydratedSuspenseComponent: {
-      if (enableSuspenseServerRenderer) {
-        return updateDehydratedSuspenseComponent(
+    case SuspenseListComponent: {
+      return updateSuspenseListComponent(
+        current,
+        workInProgress,
+        renderExpirationTime,
+      );
+    }
+    case FundamentalComponent: {
+      if (enableFundamentalAPI) {
+        return updateFundamentalComponent(
           current,
           workInProgress,
           renderExpirationTime,
@@ -2541,9 +3277,9 @@ function beginWork(
       }
       break;
     }
-    case EventComponent: {
-      if (enableEventAPI) {
-        return updateEventComponent(
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        return updateScopeComponent(
           current,
           workInProgress,
           renderExpirationTime,
@@ -2551,17 +3287,26 @@ function beginWork(
       }
       break;
     }
-    case EventTarget: {
-      if (enableEventAPI) {
-        return updateEventTarget(current, workInProgress, renderExpirationTime);
+    case Chunk: {
+      if (enableChunksAPI) {
+        const chunk = workInProgress.type;
+        const props = workInProgress.pendingProps;
+        return updateChunk(
+          current,
+          workInProgress,
+          chunk,
+          props,
+          renderExpirationTime,
+        );
       }
       break;
     }
   }
   invariant(
     false,
-    'Unknown unit of work tag. This error is likely caused by a bug in ' +
+    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
       'React. Please file an issue.',
+    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
index 369b01dbca350..6b28bf900a89c 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -9,12 +9,13 @@
 
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import type {UpdateQueue} from './ReactUpdateQueue';
 
 import React from 'react';
 import {Update, Snapshot} from 'shared/ReactSideEffectTags';
 import {
-  debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
+  disableLegacyContext,
   warnAboutDeprecatedLifecycles,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
@@ -23,7 +24,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
@@ -38,6 +38,8 @@ import {
   createUpdate,
   ReplaceState,
   ForceUpdate,
+  initializeUpdateQueue,
+  cloneUpdateQueue,
 } from './ReactUpdateQueue';
 import {NoWork} from './ReactFiberExpirationTime';
 import {
@@ -49,12 +51,10 @@ import {
 } from './ReactFiberContext';
 import {readContext} from './ReactFiberNewContext';
 import {
-  requestCurrentTime,
+  requestCurrentTimeForUpdate,
   computeExpirationForFiber,
   scheduleWork,
-  flushPassiveEffects,
 } from './ReactFiberWorkLoop';
-import {revertPassiveEffectsChange} from 'shared/ReactFeatureFlags';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 
 const fakeInternalInstance = {};
@@ -94,8 +94,7 @@ if (__DEV__) {
     const key = `${callerName}_${(callback: any)}`;
     if (!didWarnOnInvalidCallback.has(key)) {
       didWarnOnInvalidCallback.add(key);
-      warningWithoutStack(
-        false,
+      console.error(
         '%s(...): Expected the last optional `callback` argument to be a ' +
           'function. Instead received: %s.',
         callerName,
@@ -109,8 +108,7 @@ if (__DEV__) {
       const componentName = getComponentName(type) || 'Component';
       if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
         didWarnAboutUndefinedDerivedState.add(componentName);
-        warningWithoutStack(
-          false,
+        console.error(
           '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
             'You have returned undefined.',
           componentName,
@@ -151,9 +149,8 @@ export function applyDerivedStateFromProps(
 
   if (__DEV__) {
     if (
-      debugRenderPhaseSideEffects ||
-      (debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode)
+      debugRenderPhaseSideEffectsForStrictMode &&
+      workInProgress.mode & StrictMode
     ) {
       // Invoke the function an extra time to help detect side-effects.
       getDerivedStateFromProps(nextProps, prevState);
@@ -174,8 +171,9 @@ export function applyDerivedStateFromProps(
 
   // Once the update queue is empty, persist the derived state onto the
   // base state.
-  const updateQueue = workInProgress.updateQueue;
-  if (updateQueue !== null && workInProgress.expirationTime === NoWork) {
+  if (workInProgress.expirationTime === NoWork) {
+    // Queue is always non-null for classes
+    const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);
     updateQueue.baseState = memoizedState;
   }
 }
@@ -184,7 +182,7 @@ const classComponentUpdater = {
   isMounted,
   enqueueSetState(inst, payload, callback) {
     const fiber = getInstance(inst);
-    const currentTime = requestCurrentTime();
+    const currentTime = requestCurrentTimeForUpdate();
     const suspenseConfig = requestCurrentSuspenseConfig();
     const expirationTime = computeExpirationForFiber(
       currentTime,
@@ -201,15 +199,12 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
   },
   enqueueReplaceState(inst, payload, callback) {
     const fiber = getInstance(inst);
-    const currentTime = requestCurrentTime();
+    const currentTime = requestCurrentTimeForUpdate();
     const suspenseConfig = requestCurrentSuspenseConfig();
     const expirationTime = computeExpirationForFiber(
       currentTime,
@@ -228,15 +223,12 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
   },
   enqueueForceUpdate(inst, callback) {
     const fiber = getInstance(inst);
-    const currentTime = requestCurrentTime();
+    const currentTime = requestCurrentTimeForUpdate();
     const suspenseConfig = requestCurrentSuspenseConfig();
     const expirationTime = computeExpirationForFiber(
       currentTime,
@@ -254,9 +246,6 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
   },
@@ -282,12 +271,13 @@ function checkShouldComponentUpdate(
     stopPhaseTimer();
 
     if (__DEV__) {
-      warningWithoutStack(
-        shouldUpdate !== undefined,
-        '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
-          'boolean value. Make sure to return true or false.',
-        getComponentName(ctor) || 'Component',
-      );
+      if (shouldUpdate === undefined) {
+        console.error(
+          '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
+            'boolean value. Make sure to return true or false.',
+          getComponentName(ctor) || 'Component',
+        );
+      }
     }
 
     return shouldUpdate;
@@ -310,15 +300,13 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
 
     if (!renderPresent) {
       if (ctor.prototype && typeof ctor.prototype.render === 'function') {
-        warningWithoutStack(
-          false,
+        console.error(
           '%s(...): No `render` method found on the returned component ' +
             'instance: did you accidentally return an object from the constructor?',
           name,
         );
       } else {
-        warningWithoutStack(
-          false,
+        console.error(
           '%s(...): No `render` method found on the returned component ' +
             'instance: you may have forgotten to define `render`.',
           name,
@@ -326,138 +314,152 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
       }
     }
 
-    const noGetInitialStateOnES6 =
-      !instance.getInitialState ||
-      instance.getInitialState.isReactClassApproved ||
-      instance.state;
-    warningWithoutStack(
-      noGetInitialStateOnES6,
-      'getInitialState was defined on %s, a plain JavaScript class. ' +
-        'This is only supported for classes created using React.createClass. ' +
-        'Did you mean to define a state property instead?',
-      name,
-    );
-    const noGetDefaultPropsOnES6 =
-      !instance.getDefaultProps ||
-      instance.getDefaultProps.isReactClassApproved;
-    warningWithoutStack(
-      noGetDefaultPropsOnES6,
-      'getDefaultProps was defined on %s, a plain JavaScript class. ' +
-        'This is only supported for classes created using React.createClass. ' +
-        'Use a static property to define defaultProps instead.',
-      name,
-    );
-    const noInstancePropTypes = !instance.propTypes;
-    warningWithoutStack(
-      noInstancePropTypes,
-      'propTypes was defined as an instance property on %s. Use a static ' +
-        'property to define propTypes instead.',
-      name,
-    );
-    const noInstanceContextType = !instance.contextType;
-    warningWithoutStack(
-      noInstanceContextType,
-      'contextType was defined as an instance property on %s. Use a static ' +
-        'property to define contextType instead.',
-      name,
-    );
-    const noInstanceContextTypes = !instance.contextTypes;
-    warningWithoutStack(
-      noInstanceContextTypes,
-      'contextTypes was defined as an instance property on %s. Use a static ' +
-        'property to define contextTypes instead.',
-      name,
-    );
-
     if (
-      ctor.contextType &&
-      ctor.contextTypes &&
-      !didWarnAboutContextTypeAndContextTypes.has(ctor)
+      instance.getInitialState &&
+      !instance.getInitialState.isReactClassApproved &&
+      !instance.state
     ) {
-      didWarnAboutContextTypeAndContextTypes.add(ctor);
-      warningWithoutStack(
-        false,
-        '%s declares both contextTypes and contextType static properties. ' +
-          'The legacy contextTypes property will be ignored.',
+      console.error(
+        'getInitialState was defined on %s, a plain JavaScript class. ' +
+          'This is only supported for classes created using React.createClass. ' +
+          'Did you mean to define a state property instead?',
+        name,
+      );
+    }
+    if (
+      instance.getDefaultProps &&
+      !instance.getDefaultProps.isReactClassApproved
+    ) {
+      console.error(
+        'getDefaultProps was defined on %s, a plain JavaScript class. ' +
+          'This is only supported for classes created using React.createClass. ' +
+          'Use a static property to define defaultProps instead.',
+        name,
+      );
+    }
+    if (instance.propTypes) {
+      console.error(
+        'propTypes was defined as an instance property on %s. Use a static ' +
+          'property to define propTypes instead.',
+        name,
+      );
+    }
+    if (instance.contextType) {
+      console.error(
+        'contextType was defined as an instance property on %s. Use a static ' +
+          'property to define contextType instead.',
         name,
       );
     }
 
-    const noComponentShouldUpdate =
-      typeof instance.componentShouldUpdate !== 'function';
-    warningWithoutStack(
-      noComponentShouldUpdate,
-      '%s has a method called ' +
-        'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
-        'The name is phrased as a question because the function is ' +
-        'expected to return a value.',
-      name,
-    );
+    if (disableLegacyContext) {
+      if (ctor.childContextTypes) {
+        console.error(
+          '%s uses the legacy childContextTypes API which is no longer supported. ' +
+            'Use React.createContext() instead.',
+          name,
+        );
+      }
+      if (ctor.contextTypes) {
+        console.error(
+          '%s uses the legacy contextTypes API which is no longer supported. ' +
+            'Use React.createContext() with static contextType instead.',
+          name,
+        );
+      }
+    } else {
+      if (instance.contextTypes) {
+        console.error(
+          'contextTypes was defined as an instance property on %s. Use a static ' +
+            'property to define contextTypes instead.',
+          name,
+        );
+      }
+
+      if (
+        ctor.contextType &&
+        ctor.contextTypes &&
+        !didWarnAboutContextTypeAndContextTypes.has(ctor)
+      ) {
+        didWarnAboutContextTypeAndContextTypes.add(ctor);
+        console.error(
+          '%s declares both contextTypes and contextType static properties. ' +
+            'The legacy contextTypes property will be ignored.',
+          name,
+        );
+      }
+    }
+
+    if (typeof instance.componentShouldUpdate === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
+          'The name is phrased as a question because the function is ' +
+          'expected to return a value.',
+        name,
+      );
+    }
     if (
       ctor.prototype &&
       ctor.prototype.isPureReactComponent &&
       typeof instance.shouldComponentUpdate !== 'undefined'
     ) {
-      warningWithoutStack(
-        false,
+      console.error(
         '%s has a method called shouldComponentUpdate(). ' +
           'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
           'Please extend React.Component if shouldComponentUpdate is used.',
         getComponentName(ctor) || 'A pure component',
       );
     }
-    const noComponentDidUnmount =
-      typeof instance.componentDidUnmount !== 'function';
-    warningWithoutStack(
-      noComponentDidUnmount,
-      '%s has a method called ' +
-        'componentDidUnmount(). But there is no such lifecycle method. ' +
-        'Did you mean componentWillUnmount()?',
-      name,
-    );
-    const noComponentDidReceiveProps =
-      typeof instance.componentDidReceiveProps !== 'function';
-    warningWithoutStack(
-      noComponentDidReceiveProps,
-      '%s has a method called ' +
-        'componentDidReceiveProps(). But there is no such lifecycle method. ' +
-        'If you meant to update the state in response to changing props, ' +
-        'use componentWillReceiveProps(). If you meant to fetch data or ' +
-        'run side-effects or mutations after React has updated the UI, use componentDidUpdate().',
-      name,
-    );
-    const noComponentWillRecieveProps =
-      typeof instance.componentWillRecieveProps !== 'function';
-    warningWithoutStack(
-      noComponentWillRecieveProps,
-      '%s has a method called ' +
-        'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
-      name,
-    );
-    const noUnsafeComponentWillRecieveProps =
-      typeof instance.UNSAFE_componentWillRecieveProps !== 'function';
-    warningWithoutStack(
-      noUnsafeComponentWillRecieveProps,
-      '%s has a method called ' +
-        'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
-      name,
-    );
+    if (typeof instance.componentDidUnmount === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'componentDidUnmount(). But there is no such lifecycle method. ' +
+          'Did you mean componentWillUnmount()?',
+        name,
+      );
+    }
+    if (typeof instance.componentDidReceiveProps === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'componentDidReceiveProps(). But there is no such lifecycle method. ' +
+          'If you meant to update the state in response to changing props, ' +
+          'use componentWillReceiveProps(). If you meant to fetch data or ' +
+          'run side-effects or mutations after React has updated the UI, use componentDidUpdate().',
+        name,
+      );
+    }
+    if (typeof instance.componentWillRecieveProps === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
+        name,
+      );
+    }
+    if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
+        name,
+      );
+    }
     const hasMutatedProps = instance.props !== newProps;
-    warningWithoutStack(
-      instance.props === undefined || !hasMutatedProps,
-      '%s(...): When calling super() in `%s`, make sure to pass ' +
-        "up the same props that your component's constructor was passed.",
-      name,
-      name,
-    );
-    const noInstanceDefaultProps = !instance.defaultProps;
-    warningWithoutStack(
-      noInstanceDefaultProps,
-      'Setting defaultProps as an instance property on %s is not supported and will be ignored.' +
-        ' Instead, define defaultProps as a static property on %s.',
-      name,
-      name,
-    );
+    if (instance.props !== undefined && hasMutatedProps) {
+      console.error(
+        '%s(...): When calling super() in `%s`, make sure to pass ' +
+          "up the same props that your component's constructor was passed.",
+        name,
+        name,
+      );
+    }
+    if (instance.defaultProps) {
+      console.error(
+        'Setting defaultProps as an instance property on %s is not supported and will be ignored.' +
+          ' Instead, define defaultProps as a static property on %s.',
+        name,
+        name,
+      );
+    }
 
     if (
       typeof instance.getSnapshotBeforeUpdate === 'function' &&
@@ -465,49 +467,43 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
       !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)
     ) {
       didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
-      warningWithoutStack(
-        false,
+      console.error(
         '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
           'This component defines getSnapshotBeforeUpdate() only.',
         getComponentName(ctor),
       );
     }
 
-    const noInstanceGetDerivedStateFromProps =
-      typeof instance.getDerivedStateFromProps !== 'function';
-    warningWithoutStack(
-      noInstanceGetDerivedStateFromProps,
-      '%s: getDerivedStateFromProps() is defined as an instance method ' +
-        'and will be ignored. Instead, declare it as a static method.',
-      name,
-    );
-    const noInstanceGetDerivedStateFromCatch =
-      typeof instance.getDerivedStateFromError !== 'function';
-    warningWithoutStack(
-      noInstanceGetDerivedStateFromCatch,
-      '%s: getDerivedStateFromError() is defined as an instance method ' +
-        'and will be ignored. Instead, declare it as a static method.',
-      name,
-    );
-    const noStaticGetSnapshotBeforeUpdate =
-      typeof ctor.getSnapshotBeforeUpdate !== 'function';
-    warningWithoutStack(
-      noStaticGetSnapshotBeforeUpdate,
-      '%s: getSnapshotBeforeUpdate() is defined as a static method ' +
-        'and will be ignored. Instead, declare it as an instance method.',
-      name,
-    );
-    const state = instance.state;
-    if (state && (typeof state !== 'object' || isArray(state))) {
-      warningWithoutStack(
-        false,
-        '%s.state: must be set to an object or null',
+    if (typeof instance.getDerivedStateFromProps === 'function') {
+      console.error(
+        '%s: getDerivedStateFromProps() is defined as an instance method ' +
+          'and will be ignored. Instead, declare it as a static method.',
         name,
       );
     }
-    if (typeof instance.getChildContext === 'function') {
-      warningWithoutStack(
-        typeof ctor.childContextTypes === 'object',
+    if (typeof instance.getDerivedStateFromError === 'function') {
+      console.error(
+        '%s: getDerivedStateFromError() is defined as an instance method ' +
+          'and will be ignored. Instead, declare it as a static method.',
+        name,
+      );
+    }
+    if (typeof ctor.getSnapshotBeforeUpdate === 'function') {
+      console.error(
+        '%s: getSnapshotBeforeUpdate() is defined as a static method ' +
+          'and will be ignored. Instead, declare it as an instance method.',
+        name,
+      );
+    }
+    const state = instance.state;
+    if (state && (typeof state !== 'object' || isArray(state))) {
+      console.error('%s.state: must be set to an object or null', name);
+    }
+    if (
+      typeof instance.getChildContext === 'function' &&
+      typeof ctor.childContextTypes !== 'object'
+    ) {
+      console.error(
         '%s.getChildContext(): childContextTypes must be defined in order to ' +
           'use getChildContext().',
         name,
@@ -534,7 +530,7 @@ function constructClassInstance(
 ): any {
   let isLegacyContextConsumer = false;
   let unmaskedContext = emptyContextObject;
-  let context = null;
+  let context = emptyContextObject;
   const contextType = ctor.contextType;
 
   if (__DEV__) {
@@ -569,8 +565,7 @@ function constructClassInstance(
             Object.keys(contextType).join(', ') +
             '}.';
         }
-        warningWithoutStack(
-          false,
+        console.error(
           '%s defines an invalid contextType. ' +
             'contextType should point to the Context object returned by React.createContext().%s',
           getComponentName(ctor) || 'Component',
@@ -582,7 +577,7 @@ function constructClassInstance(
 
   if (typeof contextType === 'object' && contextType !== null) {
     context = readContext((contextType: any));
-  } else {
+  } else if (!disableLegacyContext) {
     unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
     const contextTypes = ctor.contextTypes;
     isLegacyContextConsumer =
@@ -595,9 +590,8 @@ function constructClassInstance(
   // Instantiate twice to help detect side-effects.
   if (__DEV__) {
     if (
-      debugRenderPhaseSideEffects ||
-      (debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode)
+      debugRenderPhaseSideEffectsForStrictMode &&
+      workInProgress.mode & StrictMode
     ) {
       new ctor(props, context); // eslint-disable-line no-new
     }
@@ -615,8 +609,7 @@ function constructClassInstance(
       const componentName = getComponentName(ctor) || 'Component';
       if (!didWarnAboutUninitializedState.has(componentName)) {
         didWarnAboutUninitializedState.add(componentName);
-        warningWithoutStack(
-          false,
+        console.error(
           '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
             '%s. This is not recommended. Instead, define the initial state by ' +
             'assigning an object to `this.state` in the constructor of `%s`. ' +
@@ -676,12 +669,11 @@ function constructClassInstance(
             : 'getSnapshotBeforeUpdate()';
         if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(componentName)) {
           didWarnAboutLegacyLifecyclesAndDerivedState.add(componentName);
-          warningWithoutStack(
-            false,
+          console.error(
             'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
               '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' +
               'The above lifecycles should be removed. Learn more about this warning here:\n' +
-              'https://fb.me/react-async-component-lifecycle-hooks',
+              'https://fb.me/react-unsafe-component-lifecycles',
             componentName,
             newApiName,
             foundWillMountName !== null ? `\n  ${foundWillMountName}` : '',
@@ -719,8 +711,7 @@ function callComponentWillMount(workInProgress, instance) {
 
   if (oldState !== instance.state) {
     if (__DEV__) {
-      warningWithoutStack(
-        false,
+      console.error(
         '%s.componentWillMount(): Assigning directly to this.state is ' +
           "deprecated (except inside a component's " +
           'constructor). Use setState instead.',
@@ -753,8 +744,7 @@ function callComponentWillReceiveProps(
         getComponentName(workInProgress.type) || 'Component';
       if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
         didWarnAboutStateAssignmentForComponent.add(componentName);
-        warningWithoutStack(
-          false,
+        console.error(
           '%s.componentWillReceiveProps(): Assigning directly to ' +
             "this.state is deprecated (except inside a component's " +
             'constructor). Use setState instead.',
@@ -782,9 +772,13 @@ function mountClassInstance(
   instance.state = workInProgress.memoizedState;
   instance.refs = emptyRefsObject;
 
+  initializeUpdateQueue(workInProgress);
+
   const contextType = ctor.contextType;
   if (typeof contextType === 'object' && contextType !== null) {
     instance.context = readContext(contextType);
+  } else if (disableLegacyContext) {
+    instance.context = emptyContextObject;
   } else {
     const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
     instance.context = getMaskedContext(workInProgress, unmaskedContext);
@@ -795,8 +789,7 @@ function mountClassInstance(
       const componentName = getComponentName(ctor) || 'Component';
       if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
         didWarnAboutDirectlyAssigningPropsToState.add(componentName);
-        warningWithoutStack(
-          false,
+        console.error(
           '%s: It is not recommended to assign props directly to state ' +
             "because updates to props won't be reflected in state. " +
             'In most cases, it is better to use props directly.',
@@ -806,11 +799,6 @@ function mountClassInstance(
     }
 
     if (workInProgress.mode & StrictMode) {
-      ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
-        workInProgress,
-        instance,
-      );
-
       ReactStrictModeWarnings.recordLegacyContextWarning(
         workInProgress,
         instance,
@@ -818,24 +806,15 @@ function mountClassInstance(
     }
 
     if (warnAboutDeprecatedLifecycles) {
-      ReactStrictModeWarnings.recordDeprecationWarnings(
+      ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
         workInProgress,
         instance,
       );
     }
   }
 
-  let updateQueue = workInProgress.updateQueue;
-  if (updateQueue !== null) {
-    processUpdateQueue(
-      workInProgress,
-      updateQueue,
-      newProps,
-      instance,
-      renderExpirationTime,
-    );
-    instance.state = workInProgress.memoizedState;
-  }
+  processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+  instance.state = workInProgress.memoizedState;
 
   const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
   if (typeof getDerivedStateFromProps === 'function') {
@@ -859,17 +838,13 @@ function mountClassInstance(
     callComponentWillMount(workInProgress, instance);
     // If we had additional state updates during this life-cycle, let's
     // process them now.
-    updateQueue = workInProgress.updateQueue;
-    if (updateQueue !== null) {
-      processUpdateQueue(
-        workInProgress,
-        updateQueue,
-        newProps,
-        instance,
-        renderExpirationTime,
-      );
-      instance.state = workInProgress.memoizedState;
-    }
+    processUpdateQueue(
+      workInProgress,
+      newProps,
+      instance,
+      renderExpirationTime,
+    );
+    instance.state = workInProgress.memoizedState;
   }
 
   if (typeof instance.componentDidMount === 'function') {
@@ -890,10 +865,10 @@ function resumeMountClassInstance(
 
   const oldContext = instance.context;
   const contextType = ctor.contextType;
-  let nextContext;
+  let nextContext = emptyContextObject;
   if (typeof contextType === 'object' && contextType !== null) {
     nextContext = readContext(contextType);
-  } else {
+  } else if (!disableLegacyContext) {
     const nextLegacyUnmaskedContext = getUnmaskedContext(
       workInProgress,
       ctor,
@@ -932,17 +907,8 @@ function resumeMountClassInstance(
 
   const oldState = workInProgress.memoizedState;
   let newState = (instance.state = oldState);
-  let updateQueue = workInProgress.updateQueue;
-  if (updateQueue !== null) {
-    processUpdateQueue(
-      workInProgress,
-      updateQueue,
-      newProps,
-      instance,
-      renderExpirationTime,
-    );
-    newState = workInProgress.memoizedState;
-  }
+  processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+  newState = workInProgress.memoizedState;
   if (
     oldProps === newProps &&
     oldState === newState &&
@@ -1031,6 +997,8 @@ function updateClassInstance(
 ): boolean {
   const instance = workInProgress.stateNode;
 
+  cloneUpdateQueue(current, workInProgress);
+
   const oldProps = workInProgress.memoizedProps;
   instance.props =
     workInProgress.type === workInProgress.elementType
@@ -1039,10 +1007,10 @@ function updateClassInstance(
 
   const oldContext = instance.context;
   const contextType = ctor.contextType;
-  let nextContext;
+  let nextContext = emptyContextObject;
   if (typeof contextType === 'object' && contextType !== null) {
     nextContext = readContext(contextType);
-  } else {
+  } else if (!disableLegacyContext) {
     const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
     nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
   }
@@ -1077,17 +1045,8 @@ function updateClassInstance(
 
   const oldState = workInProgress.memoizedState;
   let newState = (instance.state = oldState);
-  let updateQueue = workInProgress.updateQueue;
-  if (updateQueue !== null) {
-    processUpdateQueue(
-      workInProgress,
-      updateQueue,
-      newProps,
-      instance,
-      renderExpirationTime,
-    );
-    newState = workInProgress.memoizedState;
-  }
+  processUpdateQueue(workInProgress, newProps, instance, renderExpirationTime);
+  newState = workInProgress.memoizedState;
 
   if (
     oldProps === newProps &&
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 83f3fe1b72dd4..77b074a175222 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -22,13 +22,17 @@ import type {CapturedValue, CapturedError} from './ReactCapturedValue';
 import type {SuspenseState} from './ReactFiberSuspenseComponent';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';
 import type {Thenable} from './ReactFiberWorkLoop';
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
   enableProfilerTimer,
   enableSuspenseServerRenderer,
-  enableEventAPI,
+  enableDeprecatedFlareAPI,
+  enableFundamentalAPI,
+  enableSuspenseCallback,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -40,12 +44,14 @@ import {
   HostPortal,
   Profiler,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
+  DehydratedFragment,
   IncompleteClassComponent,
   MemoComponent,
   SimpleMemoComponent,
-  EventComponent,
-  EventTarget,
+  SuspenseListComponent,
+  FundamentalComponent,
+  ScopeComponent,
+  Chunk,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -53,20 +59,16 @@ import {
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
 import {
+  NoEffect,
   ContentReset,
   Placement,
   Snapshot,
   Update,
+  Passive,
 } from 'shared/ReactSideEffectTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import warning from 'shared/warning';
 
-import {
-  NoWork,
-  computeAsyncExpirationNoBucket,
-} from './ReactFiberExpirationTime';
 import {onCommitUnmount} from './ReactFiberDevToolsHook';
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
 import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
@@ -78,6 +80,7 @@ import {
   getPublicInstance,
   supportsMutation,
   supportsPersistence,
+  supportsHydration,
   commitMount,
   commitUpdate,
   resetTextContent,
@@ -96,14 +99,16 @@ import {
   hideTextInstance,
   unhideInstance,
   unhideTextInstance,
-  unmountEventComponent,
-  commitEventTarget,
-  mountEventComponent,
+  unmountFundamentalComponent,
+  updateFundamentalComponent,
+  commitHydratedContainer,
+  commitHydratedSuspenseInstance,
+  beforeRemoveInstance,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
-  requestCurrentTime,
   resolveRetryThenable,
+  markCommitTimeOfFallback,
 } from './ReactFiberWorkLoop';
 import {
   NoEffect as NoHookEffect,
@@ -116,6 +121,11 @@ import {
   MountPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork';
+import {runWithPriority, NormalPriority} from './SchedulerWithReactIntegration';
+import {
+  updateDeprecatedEventListeners,
+  unmountDeprecatedResponderListeners,
+} from './ReactFiberDeprecatedEvents';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -238,7 +248,8 @@ function commitBeforeMutationLifeCycles(
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent: {
+    case SimpleMemoComponent:
+    case Chunk: {
       commitHookEffectList(UnmountSnapshot, NoHookEffect, finishedWork);
       return;
     }
@@ -257,24 +268,26 @@ function commitBeforeMutationLifeCycles(
               finishedWork.type === finishedWork.elementType &&
               !didWarnAboutReassigningProps
             ) {
-              warning(
-                instance.props === finishedWork.memoizedProps,
-                'Expected %s props to match memoized props before ' +
-                  'getSnapshotBeforeUpdate. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
-              warning(
-                instance.state === finishedWork.memoizedState,
-                'Expected %s state to match memoized state before ' +
-                  'getSnapshotBeforeUpdate. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
+              if (instance.props !== finishedWork.memoizedProps) {
+                console.error(
+                  'Expected %s props to match memoized props before ' +
+                    'getSnapshotBeforeUpdate. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
+                console.error(
+                  'Expected %s state to match memoized state before ' +
+                    'getSnapshotBeforeUpdate. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
             }
           }
           const snapshot = instance.getSnapshotBeforeUpdate(
@@ -284,13 +297,10 @@ function commitBeforeMutationLifeCycles(
             prevState,
           );
           if (__DEV__) {
-            const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<
-              mixed,
-            >);
+            const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
             if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
               didWarnSet.add(finishedWork.type);
-              warningWithoutStack(
-                false,
+              console.error(
                 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
                   'must be returned. You have returned undefined.',
                 getComponentName(finishedWork.type),
@@ -308,17 +318,14 @@ function commitBeforeMutationLifeCycles(
     case HostText:
     case HostPortal:
     case IncompleteClassComponent:
-    case EventTarget:
       // Nothing to do for these component types
       return;
-    default: {
-      invariant(
-        false,
-        'This unit of work tag should not have side-effects. This error is ' +
-          'likely caused by a bug in React. Please file an issue.',
-      );
-    }
   }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
 }
 
 function commitHookEffectList(
@@ -370,8 +377,7 @@ function commitHookEffectList(
             } else {
               addendum = ' You returned: ' + destroy;
             }
-            warningWithoutStack(
-              false,
+            console.error(
               'An effect function must not return anything besides a function, ' +
                 'which is used for clean-up.%s%s',
               addendum,
@@ -386,8 +392,20 @@ function commitHookEffectList(
 }
 
 export function commitPassiveHookEffects(finishedWork: Fiber): void {
-  commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
-  commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
+  if ((finishedWork.effectTag & Passive) !== NoEffect) {
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent:
+      case Chunk: {
+        commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
+        commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
+        break;
+      }
+      default:
+        break;
+    }
+  }
 }
 
 function commitLifeCycles(
@@ -399,9 +417,10 @@ function commitLifeCycles(
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent: {
+    case SimpleMemoComponent:
+    case Chunk: {
       commitHookEffectList(UnmountLayout, MountLayout, finishedWork);
-      break;
+      return;
     }
     case ClassComponent: {
       const instance = finishedWork.stateNode;
@@ -416,24 +435,26 @@ function commitLifeCycles(
               finishedWork.type === finishedWork.elementType &&
               !didWarnAboutReassigningProps
             ) {
-              warning(
-                instance.props === finishedWork.memoizedProps,
-                'Expected %s props to match memoized props before ' +
-                  'componentDidMount. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
-              warning(
-                instance.state === finishedWork.memoizedState,
-                'Expected %s state to match memoized state before ' +
-                  'componentDidMount. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
+              if (instance.props !== finishedWork.memoizedProps) {
+                console.error(
+                  'Expected %s props to match memoized props before ' +
+                    'componentDidMount. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
+                console.error(
+                  'Expected %s state to match memoized state before ' +
+                    'componentDidMount. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
             }
           }
           instance.componentDidMount();
@@ -453,24 +474,26 @@ function commitLifeCycles(
               finishedWork.type === finishedWork.elementType &&
               !didWarnAboutReassigningProps
             ) {
-              warning(
-                instance.props === finishedWork.memoizedProps,
-                'Expected %s props to match memoized props before ' +
-                  'componentDidUpdate. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
-              warning(
-                instance.state === finishedWork.memoizedState,
-                'Expected %s state to match memoized state before ' +
-                  'componentDidUpdate. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.props`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
+              if (instance.props !== finishedWork.memoizedProps) {
+                console.error(
+                  'Expected %s props to match memoized props before ' +
+                    'componentDidUpdate. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
+                console.error(
+                  'Expected %s state to match memoized state before ' +
+                    'componentDidUpdate. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.props`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
             }
           }
           instance.componentDidUpdate(
@@ -488,24 +511,26 @@ function commitLifeCycles(
             finishedWork.type === finishedWork.elementType &&
             !didWarnAboutReassigningProps
           ) {
-            warning(
-              instance.props === finishedWork.memoizedProps,
-              'Expected %s props to match memoized props before ' +
-                'processing the update queue. ' +
-                'This might either be because of a bug in React, or because ' +
-                'a component reassigns its own `this.props`. ' +
-                'Please file an issue.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
-            warning(
-              instance.state === finishedWork.memoizedState,
-              'Expected %s state to match memoized state before ' +
-                'processing the update queue. ' +
-                'This might either be because of a bug in React, or because ' +
-                'a component reassigns its own `this.props`. ' +
-                'Please file an issue.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
+            if (instance.props !== finishedWork.memoizedProps) {
+              console.error(
+                'Expected %s props to match memoized props before ' +
+                  'processing the update queue. ' +
+                  'This might either be because of a bug in React, or because ' +
+                  'a component reassigns its own `this.props`. ' +
+                  'Please file an issue.',
+                getComponentName(finishedWork.type) || 'instance',
+              );
+            }
+            if (instance.state !== finishedWork.memoizedState) {
+              console.error(
+                'Expected %s state to match memoized state before ' +
+                  'processing the update queue. ' +
+                  'This might either be because of a bug in React, or because ' +
+                  'a component reassigns its own `this.props`. ' +
+                  'Please file an issue.',
+                getComponentName(finishedWork.type) || 'instance',
+              );
+            }
           }
         }
         // We could update instance props and state here,
@@ -570,74 +595,46 @@ function commitLifeCycles(
       if (enableProfilerTimer) {
         const onRender = finishedWork.memoizedProps.onRender;
 
-        if (enableSchedulerTracing) {
-          onRender(
-            finishedWork.memoizedProps.id,
-            current === null ? 'mount' : 'update',
-            finishedWork.actualDuration,
-            finishedWork.treeBaseDuration,
-            finishedWork.actualStartTime,
-            getCommitTime(),
-            finishedRoot.memoizedInteractions,
-          );
-        } else {
-          onRender(
-            finishedWork.memoizedProps.id,
-            current === null ? 'mount' : 'update',
-            finishedWork.actualDuration,
-            finishedWork.treeBaseDuration,
-            finishedWork.actualStartTime,
-            getCommitTime(),
-          );
-        }
-      }
-      return;
-    }
-    case SuspenseComponent:
-    case IncompleteClassComponent:
-      return;
-    case EventTarget: {
-      if (enableEventAPI) {
-        const type = finishedWork.type.type;
-        const props = finishedWork.memoizedProps;
-        const instance = finishedWork.stateNode;
-        let parentInstance = null;
-
-        let node = finishedWork.return;
-        // Traverse up the fiber tree until we find the parent host node.
-        while (node !== null) {
-          if (node.tag === HostComponent) {
-            parentInstance = node.stateNode;
-            break;
-          } else if (node.tag === HostRoot) {
-            parentInstance = node.stateNode.containerInfo;
-            break;
+        if (typeof onRender === 'function') {
+          if (enableSchedulerTracing) {
+            onRender(
+              finishedWork.memoizedProps.id,
+              current === null ? 'mount' : 'update',
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              getCommitTime(),
+              finishedRoot.memoizedInteractions,
+            );
+          } else {
+            onRender(
+              finishedWork.memoizedProps.id,
+              current === null ? 'mount' : 'update',
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              getCommitTime(),
+            );
           }
-          node = node.return;
         }
-        invariant(
-          parentInstance !== null,
-          'This should have a parent host component initialized. This error is likely ' +
-            'caused by a bug in React. Please file an issue.',
-        );
-        commitEventTarget(type, props, instance, parentInstance);
       }
       return;
     }
-    case EventComponent: {
-      if (enableEventAPI) {
-        mountEventComponent(finishedWork.stateNode);
-      }
+    case SuspenseComponent: {
+      commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
       return;
     }
-    default: {
-      invariant(
-        false,
-        'This unit of work tag should not have side-effects. This error is ' +
-          'likely caused by a bug in React. Please file an issue.',
-      );
-    }
+    case SuspenseListComponent:
+    case IncompleteClassComponent:
+    case FundamentalComponent:
+    case ScopeComponent:
+      return;
   }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
@@ -662,7 +659,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         }
       } else if (
         node.tag === SuspenseComponent &&
-        node.memoizedState !== null
+        node.memoizedState !== null &&
+        node.memoizedState.dehydrated === null
       ) {
         // Found a nested Suspense component that timed out. Skip over the
         // primary child fragment, which should remain hidden.
@@ -702,13 +700,16 @@ function commitAttachRef(finishedWork: Fiber) {
       default:
         instanceToUse = instance;
     }
+    // Moved outside to ensure DCE works with this flag
+    if (enableScopeAPI && finishedWork.tag === ScopeComponent) {
+      instanceToUse = instance.methods;
+    }
     if (typeof ref === 'function') {
       ref(instanceToUse);
     } else {
       if (__DEV__) {
         if (!ref.hasOwnProperty('current')) {
-          warningWithoutStack(
-            false,
+          console.error(
             'Unexpected ref object provided for %s. ' +
               'Use either a ref-setter function or React.createRef().%s',
             getComponentName(finishedWork.type),
@@ -736,30 +737,54 @@ function commitDetachRef(current: Fiber) {
 // User-originating errors (lifecycles and refs) should not interrupt
 // deletion, so don't let them throw. Host-originating errors should
 // interrupt deletion, so it's okay
-function commitUnmount(current: Fiber): void {
+function commitUnmount(
+  finishedRoot: FiberRoot,
+  current: Fiber,
+  renderPriorityLevel: ReactPriorityLevel,
+): void {
   onCommitUnmount(current);
 
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent: {
+    case SimpleMemoComponent:
+    case Chunk: {
       const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
       if (updateQueue !== null) {
         const lastEffect = updateQueue.lastEffect;
         if (lastEffect !== null) {
           const firstEffect = lastEffect.next;
-          let effect = firstEffect;
-          do {
-            const destroy = effect.destroy;
-            if (destroy !== undefined) {
-              safelyCallDestroy(current, destroy);
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
+
+          // When the owner fiber is deleted, the destroy function of a passive
+          // effect hook is called during the synchronous commit phase. This is
+          // a concession to implementation complexity. Calling it in the
+          // passive effect phase (like they usually are, when dependencies
+          // change during an update) would require either traversing the
+          // children of the deleted fiber again, or including unmount effects
+          // as part of the fiber effect list.
+          //
+          // Because this is during the sync commit phase, we need to change
+          // the priority.
+          //
+          // TODO: Reconsider this implementation trade off.
+          const priorityLevel =
+            renderPriorityLevel > NormalPriority
+              ? NormalPriority
+              : renderPriorityLevel;
+          runWithPriority(priorityLevel, () => {
+            let effect = firstEffect;
+            do {
+              const destroy = effect.destroy;
+              if (destroy !== undefined) {
+                safelyCallDestroy(current, destroy);
+              }
+              effect = effect.next;
+            } while (effect !== firstEffect);
+          });
         }
       }
-      break;
+      return;
     }
     case ClassComponent: {
       safelyDetachRef(current);
@@ -770,6 +795,10 @@ function commitUnmount(current: Fiber): void {
       return;
     }
     case HostComponent: {
+      if (enableDeprecatedFlareAPI) {
+        unmountDeprecatedResponderListeners(current);
+        beforeRemoveInstance(current.stateNode);
+      }
       safelyDetachRef(current);
       return;
     }
@@ -778,23 +807,51 @@ function commitUnmount(current: Fiber): void {
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(current);
+        unmountHostComponents(finishedRoot, current, renderPriorityLevel);
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
       return;
     }
-    case EventComponent: {
-      if (enableEventAPI) {
-        const eventComponentInstance = current.stateNode;
-        unmountEventComponent(eventComponentInstance);
-        current.stateNode = null;
+    case FundamentalComponent: {
+      if (enableFundamentalAPI) {
+        const fundamentalInstance = current.stateNode;
+        if (fundamentalInstance !== null) {
+          unmountFundamentalComponent(fundamentalInstance);
+          current.stateNode = null;
+        }
+      }
+      return;
+    }
+    case DehydratedFragment: {
+      if (enableSuspenseCallback) {
+        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+        if (hydrationCallbacks !== null) {
+          const onDeleted = hydrationCallbacks.onDeleted;
+          if (onDeleted) {
+            onDeleted((current.stateNode: SuspenseInstance));
+          }
+        }
+      }
+      return;
+    }
+    case ScopeComponent: {
+      if (enableDeprecatedFlareAPI) {
+        unmountDeprecatedResponderListeners(current);
+      }
+      if (enableScopeAPI) {
+        safelyDetachRef(current);
       }
+      return;
     }
   }
 }
 
-function commitNestedUnmounts(root: Fiber): void {
+function commitNestedUnmounts(
+  finishedRoot: FiberRoot,
+  root: Fiber,
+  renderPriorityLevel: ReactPriorityLevel,
+): void {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
   // call anyway. We also want to call componentWillUnmount on all
@@ -802,7 +859,7 @@ function commitNestedUnmounts(root: Fiber): void {
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(node);
+    commitUnmount(finishedRoot, node, renderPriorityLevel);
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -830,6 +887,7 @@ function commitNestedUnmounts(root: Fiber): void {
 }
 
 function detachFiber(current: Fiber) {
+  const alternate = current.alternate;
   // Cut off the return pointers to disconnect it from the tree. Ideally, we
   // should clear the child pointer of the parent alternate to let this
   // get GC:ed but we don't know which for sure which parent is the current
@@ -839,12 +897,15 @@ function detachFiber(current: Fiber) {
   current.child = null;
   current.memoizedState = null;
   current.updateQueue = null;
-  const alternate = current.alternate;
+  current.dependencies = null;
+  current.alternate = null;
+  current.firstEffect = null;
+  current.lastEffect = null;
+  current.pendingProps = null;
+  current.memoizedProps = null;
+  current.stateNode = null;
   if (alternate !== null) {
-    alternate.return = null;
-    alternate.child = null;
-    alternate.memoizedState = null;
-    alternate.updateQueue = null;
+    detachFiber(alternate);
   }
 }
 
@@ -853,8 +914,11 @@ function emptyPortalContainer(current: Fiber) {
     return;
   }
 
-  const portal: {containerInfo: Container, pendingChildren: ChildSet} =
-    current.stateNode;
+  const portal: {
+    containerInfo: Container,
+    pendingChildren: ChildSet,
+    ...
+  } = current.stateNode;
   const {containerInfo} = portal;
   const emptyChildSet = createContainerChildSet(containerInfo);
   replaceContainerChildren(containerInfo, emptyChildSet);
@@ -869,8 +933,7 @@ function commitContainer(finishedWork: Fiber) {
     case ClassComponent:
     case HostComponent:
     case HostText:
-    case EventTarget:
-    case EventComponent: {
+    case FundamentalComponent: {
       return;
     }
     case HostRoot:
@@ -878,20 +941,18 @@ function commitContainer(finishedWork: Fiber) {
       const portalOrRoot: {
         containerInfo: Container,
         pendingChildren: ChildSet,
-      } =
-        finishedWork.stateNode;
+        ...
+      } = finishedWork.stateNode;
       const {containerInfo, pendingChildren} = portalOrRoot;
       replaceContainerChildren(containerInfo, pendingChildren);
       return;
     }
-    default: {
-      invariant(
-        false,
-        'This unit of work tag should not have side-effects. This error is ' +
-          'likely caused by a bug in React. Please file an issue.',
-      );
-    }
   }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
 }
 
 function getHostParentFiber(fiber: Fiber): Fiber {
@@ -938,7 +999,7 @@ function getHostSibling(fiber: Fiber): ?Instance {
     while (
       node.tag !== HostComponent &&
       node.tag !== HostText &&
-      node.tag !== DehydratedSuspenseComponent
+      node.tag !== DehydratedFragment
     ) {
       // If it is not host node and, we might have a host node inside it.
       // Try to search down until we find one.
@@ -974,20 +1035,26 @@ function commitPlacement(finishedWork: Fiber): void {
   // Note: these two variables *must* always be updated together.
   let parent;
   let isContainer;
-
+  const parentStateNode = parentFiber.stateNode;
   switch (parentFiber.tag) {
     case HostComponent:
-      parent = parentFiber.stateNode;
+      parent = parentStateNode;
       isContainer = false;
       break;
     case HostRoot:
-      parent = parentFiber.stateNode.containerInfo;
+      parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
     case HostPortal:
-      parent = parentFiber.stateNode.containerInfo;
+      parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
+    case FundamentalComponent:
+      if (enableFundamentalAPI) {
+        parent = parentStateNode.instance;
+        isContainer = false;
+      }
+    // eslint-disable-next-line-no-fallthrough
     default:
       invariant(
         false,
@@ -1007,8 +1074,9 @@ function commitPlacement(finishedWork: Fiber): void {
   // children to find all the terminal nodes.
   let node: Fiber = finishedWork;
   while (true) {
-    if (node.tag === HostComponent || node.tag === HostText) {
-      const stateNode = node.stateNode;
+    const isHost = node.tag === HostComponent || node.tag === HostText;
+    if (isHost || (enableFundamentalAPI && node.tag === FundamentalComponent)) {
+      const stateNode = isHost ? node.stateNode : node.stateNode.instance;
       if (before) {
         if (isContainer) {
           insertInContainerBefore(parent, stateNode, before);
@@ -1045,7 +1113,11 @@ function commitPlacement(finishedWork: Fiber): void {
   }
 }
 
-function unmountHostComponents(current): void {
+function unmountHostComponents(
+  finishedRoot,
+  current,
+  renderPriorityLevel,
+): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
   let node: Fiber = current;
@@ -1067,19 +1139,25 @@ function unmountHostComponents(current): void {
           'Expected to find a host parent. This error is likely caused by ' +
             'a bug in React. Please file an issue.',
         );
+        const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
-            currentParent = parent.stateNode;
+            currentParent = parentStateNode;
             currentParentIsContainer = false;
             break findParent;
           case HostRoot:
-            currentParent = parent.stateNode.containerInfo;
+            currentParent = parentStateNode.containerInfo;
             currentParentIsContainer = true;
             break findParent;
           case HostPortal:
-            currentParent = parent.stateNode.containerInfo;
+            currentParent = parentStateNode.containerInfo;
             currentParentIsContainer = true;
             break findParent;
+          case FundamentalComponent:
+            if (enableFundamentalAPI) {
+              currentParent = parentStateNode.instance;
+              currentParentIsContainer = false;
+            }
         }
         parent = parent.return;
       }
@@ -1087,7 +1165,7 @@ function unmountHostComponents(current): void {
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(node);
+      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1102,10 +1180,36 @@ function unmountHostComponents(current): void {
         );
       }
       // Don't visit children because we already visited them.
+    } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
+      const fundamentalNode = node.stateNode.instance;
+      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
+      // After all the children have unmounted, it is now safe to remove the
+      // node from the tree.
+      if (currentParentIsContainer) {
+        removeChildFromContainer(
+          ((currentParent: any): Container),
+          (fundamentalNode: Instance),
+        );
+      } else {
+        removeChild(
+          ((currentParent: any): Instance),
+          (fundamentalNode: Instance),
+        );
+      }
     } else if (
       enableSuspenseServerRenderer &&
-      node.tag === DehydratedSuspenseComponent
+      node.tag === DehydratedFragment
     ) {
+      if (enableSuspenseCallback) {
+        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+        if (hydrationCallbacks !== null) {
+          const onDeleted = hydrationCallbacks.onDeleted;
+          if (onDeleted) {
+            onDeleted((node.stateNode: SuspenseInstance));
+          }
+        }
+      }
+
       // Delete the dehydrated suspense boundary and all of its content.
       if (currentParentIsContainer) {
         clearSuspenseBoundaryFromContainer(
@@ -1130,7 +1234,7 @@ function unmountHostComponents(current): void {
         continue;
       }
     } else {
-      commitUnmount(node);
+      commitUnmount(finishedRoot, node, renderPriorityLevel);
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -1157,14 +1261,18 @@ function unmountHostComponents(current): void {
   }
 }
 
-function commitDeletion(current: Fiber): void {
+function commitDeletion(
+  finishedRoot: FiberRoot,
+  current: Fiber,
+  renderPriorityLevel: ReactPriorityLevel,
+): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(current);
+    unmountHostComponents(finishedRoot, current, renderPriorityLevel);
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(current);
+    commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
   }
   detachFiber(current);
 }
@@ -1175,7 +1283,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case MemoComponent:
-      case SimpleMemoComponent: {
+      case SimpleMemoComponent:
+      case Chunk: {
         // Note: We currently never use MountMutation, but useLayout uses
         // UnmountMutation.
         commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
@@ -1186,8 +1295,24 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case SuspenseComponent: {
         commitSuspenseComponent(finishedWork);
+        attachSuspenseRetryListeners(finishedWork);
+        return;
+      }
+      case SuspenseListComponent: {
+        attachSuspenseRetryListeners(finishedWork);
         return;
       }
+      case HostRoot: {
+        if (supportsHydration) {
+          const root: FiberRoot = finishedWork.stateNode;
+          if (root.hydrate) {
+            // We've just hydrated. No need to hydrate again.
+            root.hydrate = false;
+            commitHydratedContainer(root.containerInfo);
+          }
+        }
+        break;
+      }
     }
 
     commitContainer(finishedWork);
@@ -1198,7 +1323,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent: {
+    case SimpleMemoComponent:
+    case Chunk: {
       // Note: We currently never use MountMutation, but useLayout uses
       // UnmountMutation.
       commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
@@ -1230,6 +1356,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
             finishedWork,
           );
         }
+        if (enableDeprecatedFlareAPI) {
+          const prevListeners = oldProps.DEPRECATED_flareListeners;
+          const nextListeners = newProps.DEPRECATED_flareListeners;
+          if (prevListeners !== nextListeners) {
+            updateDeprecatedEventListeners(nextListeners, finishedWork, null);
+          }
+        }
       }
       return;
     }
@@ -1249,10 +1382,15 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       commitTextUpdate(textInstance, oldText, newText);
       return;
     }
-    case EventTarget: {
-      return;
-    }
     case HostRoot: {
+      if (supportsHydration) {
+        const root: FiberRoot = finishedWork.stateNode;
+        if (root.hydrate) {
+          // We've just hydrated. No need to hydrate again.
+          root.hydrate = false;
+          commitHydratedContainer(root.containerInfo);
+        }
+      }
       return;
     }
     case Profiler: {
@@ -1260,22 +1398,47 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case SuspenseComponent: {
       commitSuspenseComponent(finishedWork);
+      attachSuspenseRetryListeners(finishedWork);
       return;
     }
-    case IncompleteClassComponent: {
+    case SuspenseListComponent: {
+      attachSuspenseRetryListeners(finishedWork);
       return;
     }
-    case EventComponent: {
+    case IncompleteClassComponent: {
       return;
     }
-    default: {
-      invariant(
-        false,
-        'This unit of work tag should not have side-effects. This error is ' +
-          'likely caused by a bug in React. Please file an issue.',
-      );
+    case FundamentalComponent: {
+      if (enableFundamentalAPI) {
+        const fundamentalInstance = finishedWork.stateNode;
+        updateFundamentalComponent(fundamentalInstance);
+        return;
+      }
+      break;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        const scopeInstance = finishedWork.stateNode;
+        scopeInstance.fiber = finishedWork;
+        if (enableDeprecatedFlareAPI) {
+          const newProps = finishedWork.memoizedProps;
+          const oldProps = current !== null ? current.memoizedProps : newProps;
+          const prevListeners = oldProps.DEPRECATED_flareListeners;
+          const nextListeners = newProps.DEPRECATED_flareListeners;
+          if (prevListeners !== nextListeners || current === null) {
+            updateDeprecatedEventListeners(nextListeners, finishedWork, null);
+          }
+        }
+        return;
+      }
+      break;
     }
   }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
 }
 
 function commitSuspenseComponent(finishedWork: Fiber) {
@@ -1288,22 +1451,60 @@ function commitSuspenseComponent(finishedWork: Fiber) {
   } else {
     newDidTimeout = true;
     primaryChildParent = finishedWork.child;
-    if (newState.fallbackExpirationTime === NoWork) {
-      // If the children had not already timed out, record the time.
-      // This is used to compute the elapsed time during subsequent
-      // attempts to render the children.
-      // We model this as a normal pri expiration time since that's
-      // how we infer start time for updates.
-      newState.fallbackExpirationTime = computeAsyncExpirationNoBucket(
-        requestCurrentTime(),
-      );
-    }
+    markCommitTimeOfFallback();
   }
 
   if (supportsMutation && primaryChildParent !== null) {
     hideOrUnhideAllChildren(primaryChildParent, newDidTimeout);
   }
 
+  if (enableSuspenseCallback && newState !== null) {
+    const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;
+    if (typeof suspenseCallback === 'function') {
+      const thenables: Set<Thenable> | null = (finishedWork.updateQueue: any);
+      if (thenables !== null) {
+        suspenseCallback(new Set(thenables));
+      }
+    } else if (__DEV__) {
+      if (suspenseCallback !== undefined) {
+        console.error('Unexpected type for suspenseCallback.');
+      }
+    }
+  }
+}
+
+function commitSuspenseHydrationCallbacks(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+) {
+  if (!supportsHydration) {
+    return;
+  }
+  const newState: SuspenseState | null = finishedWork.memoizedState;
+  if (newState === null) {
+    const current = finishedWork.alternate;
+    if (current !== null) {
+      const prevState: SuspenseState | null = current.memoizedState;
+      if (prevState !== null) {
+        const suspenseInstance = prevState.dehydrated;
+        if (suspenseInstance !== null) {
+          commitHydratedSuspenseInstance(suspenseInstance);
+          if (enableSuspenseCallback) {
+            const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+            if (hydrationCallbacks !== null) {
+              const onHydrated = hydrationCallbacks.onHydrated;
+              if (onHydrated) {
+                onHydrated(suspenseInstance);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function attachSuspenseRetryListeners(finishedWork: Fiber) {
   // If this boundary just timed out, then it will have a set of thenables.
   // For each thenable, attach a listener so that when it resolves, React
   // attempts to re-render the boundary in the primary (pre-timeout) state.
@@ -1319,7 +1520,9 @@ function commitSuspenseComponent(finishedWork: Fiber) {
       let retry = resolveRetryThenable.bind(null, finishedWork, thenable);
       if (!retryCache.has(thenable)) {
         if (enableSchedulerTracing) {
-          retry = Schedule_tracing_wrap(retry);
+          if (thenable.__reactDoNotTraceInteractions !== true) {
+            retry = Schedule_tracing_wrap(retry);
+          }
         }
         retryCache.add(thenable);
         thenable.then(retry, retry);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index a75b359a484a9..1138dc57116b9 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -9,6 +9,10 @@
 
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import type {
+  ReactFundamentalComponentInstance,
+  ReactScopeInstance,
+} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {
   Instance,
@@ -17,10 +21,14 @@ import type {
   Container,
   ChildSet,
 } from './ReactFiberHostConfig';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
-import type {SuspenseState} from './ReactFiberSuspenseComponent';
+import type {
+  SuspenseState,
+  SuspenseListRenderState,
+} from './ReactFiberSuspenseComponent';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
+import {now} from './SchedulerWithReactIntegration';
+
 import {
   IndeterminateComponent,
   FunctionComponent,
@@ -36,17 +44,17 @@ import {
   Mode,
   Profiler,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
+  SuspenseListComponent,
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  EventComponent,
-  EventTarget,
+  FundamentalComponent,
+  ScopeComponent,
+  Chunk,
 } from 'shared/ReactWorkTags';
-import {NoMode, BatchedMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode} from './ReactTypeOfMode';
 import {
-  Placement,
   Ref,
   Update,
   NoEffect,
@@ -69,8 +77,10 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
-  updateEventComponent,
-  handleEventTarget,
+  getFundamentalComponentInstance,
+  mountFundamentalComponent,
+  cloneFundamentalInstance,
+  shouldUpdateFundamentalComponent,
 } from './ReactFiberHostConfig';
 import {
   getRootHostContainer,
@@ -83,7 +93,12 @@ import {
   InvisibleParentSuspenseContext,
   hasSuspenseContext,
   popSuspenseContext,
+  pushSuspenseContext,
+  setShallowSuspenseContext,
+  ForceSuspenseFallback,
+  setDefaultShallowSuspenseContext,
 } from './ReactFiberSuspenseContext';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
 import {
   isContextProvider as isLegacyContextProvider,
   popContext as popLegacyContext,
@@ -93,21 +108,30 @@ import {popProvider} from './ReactFiberNewContext';
 import {
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
-  skipPastDehydratedSuspenseInstance,
+  prepareToHydrateHostSuspenseInstance,
   popHydrationState,
+  resetHydrationState,
 } from './ReactFiberHydrationContext';
 import {
+  enableSchedulerTracing,
+  enableSuspenseCallback,
   enableSuspenseServerRenderer,
-  enableEventAPI,
+  enableDeprecatedFlareAPI,
+  enableFundamentalAPI,
+  enableScopeAPI,
+  enableChunksAPI,
 } from 'shared/ReactFeatureFlags';
 import {
-  markRenderEventTimeAndConfig,
+  markSpawnedWork,
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
+  renderHasNotSuspendedYet,
 } from './ReactFiberWorkLoop';
-import {getEventComponentHostChildrenCount} from './ReactFiberEvents';
-import getComponentName from 'shared/getComponentName';
-import warning from 'shared/warning';
+import {createFundamentalStateInstance} from './ReactFiberFundamental';
+import {Never} from './ReactFiberExpirationTime';
+import {resetChildFibers} from './ReactChildFiber';
+import {updateDeprecatedEventListeners} from './ReactFiberDeprecatedEvents';
+import {createScopeMethods} from './ReactFiberScope';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -138,6 +162,8 @@ if (supportsMutation) {
     while (node !== null) {
       if (node.tag === HostComponent || node.tag === HostText) {
         appendInitialChild(parent, node.stateNode);
+      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
+        appendInitialChild(parent, node.stateNode.instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -247,6 +273,15 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendInitialChild(parent, instance);
+      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
+        let instance = node.stateNode.instance;
+        if (needsVisibilityToggle && isHidden) {
+          // This child is inside a timed out tree. Hide it.
+          const props = node.memoizedProps;
+          const type = node.type;
+          instance = cloneHiddenInstance(instance, type, props, node);
+        }
+        appendInitialChild(parent, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -332,6 +367,15 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendChildToContainerChildSet(containerChildSet, instance);
+      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
+        let instance = node.stateNode.instance;
+        if (needsVisibilityToggle && isHidden) {
+          // This child is inside a timed out tree. Hide it.
+          const props = node.memoizedProps;
+          const type = node.type;
+          instance = cloneHiddenInstance(instance, type, props, node);
+        }
+        appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -391,8 +435,8 @@ if (supportsMutation) {
     const portalOrRoot: {
       containerInfo: Container,
       pendingChildren: ChildSet,
-    } =
-      workInProgress.stateNode;
+      ...
+    } = workInProgress.stateNode;
     const childrenUnchanged = workInProgress.firstEffect === null;
     if (childrenUnchanged) {
       // No changes, just reuse the existing instance.
@@ -495,6 +539,8 @@ if (supportsMutation) {
       // We'll have to mark it as having an effect, even though we won't use the effect for anything.
       // This lets the parents know that at least one of their children has changed.
       markUpdate(workInProgress);
+    } else {
+      workInProgress.stateNode = current.stateNode;
     }
   };
 } else {
@@ -521,6 +567,72 @@ if (supportsMutation) {
   };
 }
 
+function cutOffTailIfNeeded(
+  renderState: SuspenseListRenderState,
+  hasRenderedATailFallback: boolean,
+) {
+  switch (renderState.tailMode) {
+    case 'hidden': {
+      // Any insertions at the end of the tail list after this point
+      // should be invisible. If there are already mounted boundaries
+      // anything before them are not considered for collapsing.
+      // Therefore we need to go through the whole tail to find if
+      // there are any.
+      let tailNode = renderState.tail;
+      let lastTailNode = null;
+      while (tailNode !== null) {
+        if (tailNode.alternate !== null) {
+          lastTailNode = tailNode;
+        }
+        tailNode = tailNode.sibling;
+      }
+      // Next we're simply going to delete all insertions after the
+      // last rendered item.
+      if (lastTailNode === null) {
+        // All remaining items in the tail are insertions.
+        renderState.tail = null;
+      } else {
+        // Detach the insertion after the last node that was already
+        // inserted.
+        lastTailNode.sibling = null;
+      }
+      break;
+    }
+    case 'collapsed': {
+      // Any insertions at the end of the tail list after this point
+      // should be invisible. If there are already mounted boundaries
+      // anything before them are not considered for collapsing.
+      // Therefore we need to go through the whole tail to find if
+      // there are any.
+      let tailNode = renderState.tail;
+      let lastTailNode = null;
+      while (tailNode !== null) {
+        if (tailNode.alternate !== null) {
+          lastTailNode = tailNode;
+        }
+        tailNode = tailNode.sibling;
+      }
+      // Next we're simply going to delete all insertions after the
+      // last rendered item.
+      if (lastTailNode === null) {
+        // All remaining items in the tail are insertions.
+        if (!hasRenderedATailFallback && renderState.tail !== null) {
+          // We suspended during the head. We want to show at least one
+          // row at the tail. So we'll keep on and cut off the rest.
+          renderState.tail.sibling = null;
+        } else {
+          renderState.tail = null;
+        }
+      } else {
+        // Detach the insertion after the last node that was already
+        // inserted.
+        lastTailNode.sibling = null;
+      }
+      break;
+    }
+  }
+}
+
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -530,18 +642,22 @@ function completeWork(
 
   switch (workInProgress.tag) {
     case IndeterminateComponent:
-      break;
     case LazyComponent:
-      break;
     case SimpleMemoComponent:
     case FunctionComponent:
-      break;
+    case ForwardRef:
+    case Fragment:
+    case Mode:
+    case Profiler:
+    case ContextConsumer:
+    case MemoComponent:
+      return null;
     case ClassComponent: {
       const Component = workInProgress.type;
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }
-      break;
+      return null;
     }
     case HostRoot: {
       popHostContainer(workInProgress);
@@ -554,13 +670,15 @@ function completeWork(
       if (current === null || current.child === null) {
         // If we hydrated, pop so that we can delete any remaining children
         // that weren't hydrated.
-        popHydrationState(workInProgress);
-        // This resets the hacky state to fix isMounted before committing.
-        // TODO: Delete this when we delete isMounted and findDOMNode.
-        workInProgress.effectTag &= ~Placement;
+        let wasHydrated = popHydrationState(workInProgress);
+        if (wasHydrated) {
+          // If we hydrated, then we'll need to schedule an update for
+          // the commit side-effects on the root.
+          markUpdate(workInProgress);
+        }
       }
       updateHostContainer(workInProgress);
-      break;
+      return null;
     }
     case HostComponent: {
       popHostContext(workInProgress);
@@ -575,6 +693,14 @@ function completeWork(
           rootContainerInstance,
         );
 
+        if (enableDeprecatedFlareAPI) {
+          const prevListeners = current.memoizedProps.DEPRECATED_flareListeners;
+          const nextListeners = newProps.DEPRECATED_flareListeners;
+          if (prevListeners !== nextListeners) {
+            markUpdate(workInProgress);
+          }
+        }
+
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
         }
@@ -586,13 +712,13 @@ function completeWork(
               'caused by a bug in React. Please file an issue.',
           );
           // This can happen when we abort work.
-          break;
+          return null;
         }
 
         const currentHostContext = getHostContext();
         // TODO: Move createInstance to beginWork and keep it on a context
         // "stack" as the parent. Then append children as we go in beginWork
-        // or completeWork depending on we want to add then top->down or
+        // or completeWork depending on whether we want to add them top->down or
         // bottom->up. Top->down is faster in IE11.
         let wasHydrated = popHydrationState(workInProgress);
         if (wasHydrated) {
@@ -605,10 +731,20 @@ function completeWork(
               currentHostContext,
             )
           ) {
-            // If changes to the hydrated node needs to be applied at the
+            // If changes to the hydrated node need to be applied at the
             // commit-phase we mark this as such.
             markUpdate(workInProgress);
           }
+          if (enableDeprecatedFlareAPI) {
+            const listeners = newProps.DEPRECATED_flareListeners;
+            if (listeners != null) {
+              updateDeprecatedEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
+            }
+          }
         } else {
           let instance = createInstance(
             type,
@@ -620,6 +756,20 @@ function completeWork(
 
           appendAllChildren(instance, workInProgress, false, false);
 
+          // This needs to be set before we mount Flare event listeners
+          workInProgress.stateNode = instance;
+
+          if (enableDeprecatedFlareAPI) {
+            const listeners = newProps.DEPRECATED_flareListeners;
+            if (listeners != null) {
+              updateDeprecatedEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
+            }
+          }
+
           // Certain renderers require commit-time effects for initial mount.
           // (eg DOM renderer supports auto-focus for certain elements).
           // Make sure such renderers get scheduled for later work.
@@ -634,7 +784,6 @@ function completeWork(
           ) {
             markUpdate(workInProgress);
           }
-          workInProgress.stateNode = instance;
         }
 
         if (workInProgress.ref !== null) {
@@ -642,7 +791,7 @@ function completeWork(
           markRef(workInProgress);
         }
       }
-      break;
+      return null;
     }
     case HostText: {
       let newText = newProps;
@@ -676,13 +825,46 @@ function completeWork(
           );
         }
       }
-      break;
+      return null;
     }
-    case ForwardRef:
-      break;
     case SuspenseComponent: {
       popSuspenseContext(workInProgress);
       const nextState: null | SuspenseState = workInProgress.memoizedState;
+
+      if (enableSuspenseServerRenderer) {
+        if (nextState !== null && nextState.dehydrated !== null) {
+          if (current === null) {
+            let wasHydrated = popHydrationState(workInProgress);
+            invariant(
+              wasHydrated,
+              'A dehydrated suspense component was completed without a hydrated node. ' +
+                'This is probably a bug in React.',
+            );
+            prepareToHydrateHostSuspenseInstance(workInProgress);
+            if (enableSchedulerTracing) {
+              markSpawnedWork(Never);
+            }
+            return null;
+          } else {
+            // We should never have been in a hydration state if we didn't have a current.
+            // However, in some of those paths, we might have reentered a hydration state
+            // and then we might be inside a hydration state. In that case, we'll need to exit out of it.
+            resetHydrationState();
+            if ((workInProgress.effectTag & DidCapture) === NoEffect) {
+              // This boundary did not suspend so it's now hydrated and unsuspended.
+              workInProgress.memoizedState = null;
+            }
+            // If nothing suspended, we need to schedule an effect to mark this boundary
+            // as having hydrated so events know that they're free to be invoked.
+            // It's also a signal to replay events and the suspense callback.
+            // If something suspended, schedule an effect to attach retry listeners.
+            // So we might as well always mark this.
+            workInProgress.effectTag |= Update;
+            return null;
+          }
+        }
+      }
+
       if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
         // Something suspended. Re-render with the fallback children.
         workInProgress.expirationTime = renderExpirationTime;
@@ -693,23 +875,14 @@ function completeWork(
       const nextDidTimeout = nextState !== null;
       let prevDidTimeout = false;
       if (current === null) {
-        // In cases where we didn't find a suitable hydration boundary we never
-        // downgraded this to a DehydratedSuspenseComponent, but we still need to
-        // pop the hydration state since we might be inside the insertion tree.
-        popHydrationState(workInProgress);
+        if (workInProgress.memoizedProps.fallback !== undefined) {
+          popHydrationState(workInProgress);
+        }
       } else {
         const prevState: null | SuspenseState = current.memoizedState;
         prevDidTimeout = prevState !== null;
         if (!nextDidTimeout && prevState !== null) {
           // We just switched from the fallback to the normal children.
-
-          // Mark the event time of the switching from fallback to normal children,
-          // based on the start of when we first showed the fallback. This time
-          // was given a normal pri expiration time at the time it was shown.
-          const fallbackExpirationTime: ExpirationTime =
-            prevState.fallbackExpirationTime;
-          markRenderEventTimeAndConfig(fallbackExpirationTime, null);
-
           // Delete the fallback.
           // TODO: Would it be better to store the fallback fragment on
           // the stateNode during the begin phase?
@@ -731,12 +904,19 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtreee is running in batched mode we can suspend,
+        // If this subtreee is running in blocking mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & BatchedMode) !== NoMode) {
+        if ((workInProgress.mode & BlockingMode) !== NoMode) {
+          // TODO: Move this back to throwException because this is too late
+          // if this is a large tree which is common for initial loads. We
+          // don't know if we should restart a render or not until we get
+          // this marker, and this is too late.
+          // If this render already had a ping or lower pri updates,
+          // and this is the first time we know we're going to suspend we
+          // should be able to immediately restart from within throwException.
           const hasInvisibleChildContext =
             current === null &&
             workInProgress.memoizedProps.unstable_avoidThisFallback !== true;
@@ -762,7 +942,7 @@ function completeWork(
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the proimse. This flag is also used to hide the
+          // retry listener to the promise. This flag is also used to hide the
           // primary children.
           workInProgress.effectTag |= Update;
         }
@@ -771,33 +951,31 @@ function completeWork(
         // TODO: Only schedule updates if these values are non equal, i.e. it changed.
         if (nextDidTimeout || prevDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the proimse. This flag is also used to hide the
+          // retry listener to the promise. This flag is also used to hide the
           // primary children. In mutation mode, we also need the flag to
-          // *unhide* children that were previously hidden, so check if the
+          // *unhide* children that were previously hidden, so check if this
           // is currently timed out, too.
           workInProgress.effectTag |= Update;
         }
       }
-      break;
+      if (
+        enableSuspenseCallback &&
+        workInProgress.updateQueue !== null &&
+        workInProgress.memoizedProps.suspenseCallback != null
+      ) {
+        // Always notify the callback
+        workInProgress.effectTag |= Update;
+      }
+      return null;
     }
-    case Fragment:
-      break;
-    case Mode:
-      break;
-    case Profiler:
-      break;
     case HostPortal:
       popHostContainer(workInProgress);
       updateHostContainer(workInProgress);
-      break;
+      return null;
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
-      break;
-    case ContextConsumer:
-      break;
-    case MemoComponent:
-      break;
+      return null;
     case IncompleteClassComponent: {
       // Same as class component case. I put it down here so that the tags are
       // sequential to ensure this switch is compiled to a jump table.
@@ -805,105 +983,330 @@ function completeWork(
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }
-      break;
+      return null;
     }
-    case DehydratedSuspenseComponent: {
-      if (enableSuspenseServerRenderer) {
-        popSuspenseContext(workInProgress);
-        if (current === null) {
-          let wasHydrated = popHydrationState(workInProgress);
-          invariant(
-            wasHydrated,
-            'A dehydrated suspense component was completed without a hydrated node. ' +
-              'This is probably a bug in React.',
+    case SuspenseListComponent: {
+      popSuspenseContext(workInProgress);
+
+      const renderState: null | SuspenseListRenderState =
+        workInProgress.memoizedState;
+
+      if (renderState === null) {
+        // We're running in the default, "independent" mode.
+        // We don't do anything in this mode.
+        return null;
+      }
+
+      let didSuspendAlready =
+        (workInProgress.effectTag & DidCapture) !== NoEffect;
+
+      let renderedTail = renderState.rendering;
+      if (renderedTail === null) {
+        // We just rendered the head.
+        if (!didSuspendAlready) {
+          // This is the first pass. We need to figure out if anything is still
+          // suspended in the rendered set.
+
+          // If new content unsuspended, but there's still some content that
+          // didn't. Then we need to do a second pass that forces everything
+          // to keep showing their fallbacks.
+
+          // We might be suspended if something in this render pass suspended, or
+          // something in the previous committed pass suspended. Otherwise,
+          // there's no chance so we can skip the expensive call to
+          // findFirstSuspended.
+          let cannotBeSuspended =
+            renderHasNotSuspendedYet() &&
+            (current === null || (current.effectTag & DidCapture) === NoEffect);
+          if (!cannotBeSuspended) {
+            let row = workInProgress.child;
+            while (row !== null) {
+              let suspended = findFirstSuspended(row);
+              if (suspended !== null) {
+                didSuspendAlready = true;
+                workInProgress.effectTag |= DidCapture;
+                cutOffTailIfNeeded(renderState, false);
+
+                // If this is a newly suspended tree, it might not get committed as
+                // part of the second pass. In that case nothing will subscribe to
+                // its thennables. Instead, we'll transfer its thennables to the
+                // SuspenseList so that it can retry if they resolve.
+                // There might be multiple of these in the list but since we're
+                // going to wait for all of them anyway, it doesn't really matter
+                // which ones gets to ping. In theory we could get clever and keep
+                // track of how many dependencies remain but it gets tricky because
+                // in the meantime, we can add/remove/change items and dependencies.
+                // We might bail out of the loop before finding any but that
+                // doesn't matter since that means that the other boundaries that
+                // we did find already has their listeners attached.
+                let newThennables = suspended.updateQueue;
+                if (newThennables !== null) {
+                  workInProgress.updateQueue = newThennables;
+                  workInProgress.effectTag |= Update;
+                }
+
+                // Rerender the whole list, but this time, we'll force fallbacks
+                // to stay in place.
+                // Reset the effect list before doing the second pass since that's now invalid.
+                if (renderState.lastEffect === null) {
+                  workInProgress.firstEffect = null;
+                }
+                workInProgress.lastEffect = renderState.lastEffect;
+                // Reset the child fibers to their original state.
+                resetChildFibers(workInProgress, renderExpirationTime);
+
+                // Set up the Suspense Context to force suspense and immediately
+                // rerender the children.
+                pushSuspenseContext(
+                  workInProgress,
+                  setShallowSuspenseContext(
+                    suspenseStackCursor.current,
+                    ForceSuspenseFallback,
+                  ),
+                );
+                return workInProgress.child;
+              }
+              row = row.sibling;
+            }
+          }
+        } else {
+          cutOffTailIfNeeded(renderState, false);
+        }
+        // Next we're going to render the tail.
+      } else {
+        // Append the rendered row to the child list.
+        if (!didSuspendAlready) {
+          let suspended = findFirstSuspended(renderedTail);
+          if (suspended !== null) {
+            workInProgress.effectTag |= DidCapture;
+            didSuspendAlready = true;
+
+            // Ensure we transfer the update queue to the parent so that it doesn't
+            // get lost if this row ends up dropped during a second pass.
+            let newThennables = suspended.updateQueue;
+            if (newThennables !== null) {
+              workInProgress.updateQueue = newThennables;
+              workInProgress.effectTag |= Update;
+            }
+
+            cutOffTailIfNeeded(renderState, true);
+            // This might have been modified.
+            if (
+              renderState.tail === null &&
+              renderState.tailMode === 'hidden' &&
+              !renderedTail.alternate
+            ) {
+              // We need to delete the row we just rendered.
+              // Reset the effect list to what it was before we rendered this
+              // child. The nested children have already appended themselves.
+              let lastEffect = (workInProgress.lastEffect =
+                renderState.lastEffect);
+              // Remove any effects that were appended after this point.
+              if (lastEffect !== null) {
+                lastEffect.nextEffect = null;
+              }
+              // We're done.
+              return null;
+            }
+          } else if (
+            // The time it took to render last row is greater than time until
+            // the expiration.
+            now() * 2 - renderState.renderingStartTime >
+              renderState.tailExpiration &&
+            renderExpirationTime > Never
+          ) {
+            // We have now passed our CPU deadline and we'll just give up further
+            // attempts to render the main content and only render fallbacks.
+            // The assumption is that this is usually faster.
+            workInProgress.effectTag |= DidCapture;
+            didSuspendAlready = true;
+
+            cutOffTailIfNeeded(renderState, false);
+
+            // Since nothing actually suspended, there will nothing to ping this
+            // to get it started back up to attempt the next item. If we can show
+            // them, then they really have the same priority as this render.
+            // So we'll pick it back up the very next render pass once we've had
+            // an opportunity to yield for paint.
+
+            const nextPriority = renderExpirationTime - 1;
+            workInProgress.expirationTime = workInProgress.childExpirationTime = nextPriority;
+            if (enableSchedulerTracing) {
+              markSpawnedWork(nextPriority);
+            }
+          }
+        }
+        if (renderState.isBackwards) {
+          // The effect list of the backwards tail will have been added
+          // to the end. This breaks the guarantee that life-cycles fire in
+          // sibling order but that isn't a strong guarantee promised by React.
+          // Especially since these might also just pop in during future commits.
+          // Append to the beginning of the list.
+          renderedTail.sibling = workInProgress.child;
+          workInProgress.child = renderedTail;
+        } else {
+          let previousSibling = renderState.last;
+          if (previousSibling !== null) {
+            previousSibling.sibling = renderedTail;
+          } else {
+            workInProgress.child = renderedTail;
+          }
+          renderState.last = renderedTail;
+        }
+      }
+
+      if (renderState.tail !== null) {
+        // We still have tail rows to render.
+        if (renderState.tailExpiration === 0) {
+          // Heuristic for how long we're willing to spend rendering rows
+          // until we just give up and show what we have so far.
+          const TAIL_EXPIRATION_TIMEOUT_MS = 500;
+          renderState.tailExpiration = now() + TAIL_EXPIRATION_TIMEOUT_MS;
+          // TODO: This is meant to mimic the train model or JND but this
+          // is a per component value. It should really be since the start
+          // of the total render or last commit. Consider using something like
+          // globalMostRecentFallbackTime. That doesn't account for being
+          // suspended for part of the time or when it's a new render.
+          // It should probably use a global start time value instead.
+        }
+        // Pop a row.
+        let next = renderState.tail;
+        renderState.rendering = next;
+        renderState.tail = next.sibling;
+        renderState.lastEffect = workInProgress.lastEffect;
+        renderState.renderingStartTime = now();
+        next.sibling = null;
+
+        // Restore the context.
+        // TODO: We can probably just avoid popping it instead and only
+        // setting it the first time we go from not suspended to suspended.
+        let suspenseContext = suspenseStackCursor.current;
+        if (didSuspendAlready) {
+          suspenseContext = setShallowSuspenseContext(
+            suspenseContext,
+            ForceSuspenseFallback,
           );
-          skipPastDehydratedSuspenseInstance(workInProgress);
-        } else if ((workInProgress.effectTag & DidCapture) === NoEffect) {
-          // This boundary did not suspend so it's now hydrated.
-          // To handle any future suspense cases, we're going to now upgrade it
-          // to a Suspense component. We detach it from the existing current fiber.
-          current.alternate = null;
-          workInProgress.alternate = null;
-          workInProgress.tag = SuspenseComponent;
-          workInProgress.memoizedState = null;
-          workInProgress.stateNode = null;
+        } else {
+          suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
         }
+        pushSuspenseContext(workInProgress, suspenseContext);
+        // Do a pass over the next row.
+        return next;
       }
-      break;
+      return null;
     }
-    case EventComponent: {
-      if (enableEventAPI) {
-        popHostContext(workInProgress);
-        const rootContainerInstance = getRootHostContainer();
-        const responder = workInProgress.type.responder;
-        let eventComponentInstance: ReactEventComponentInstance | null =
-          workInProgress.stateNode;
-
-        if (eventComponentInstance === null) {
-          let responderState = null;
-          if (__DEV__ && !responder.allowMultipleHostChildren) {
-            const hostChildrenCount = getEventComponentHostChildrenCount(
-              workInProgress,
-            );
-            warning(
-              (hostChildrenCount || 0) < 2,
-              'A "<%s>" event component cannot contain multiple host children.',
-              getComponentName(workInProgress.type),
-            );
+    case FundamentalComponent: {
+      if (enableFundamentalAPI) {
+        const fundamentalImpl = workInProgress.type.impl;
+        let fundamentalInstance: ReactFundamentalComponentInstance<
+          any,
+          any,
+        > | null = workInProgress.stateNode;
+
+        if (fundamentalInstance === null) {
+          const getInitialState = fundamentalImpl.getInitialState;
+          let fundamentalState;
+          if (getInitialState !== undefined) {
+            fundamentalState = getInitialState(newProps);
           }
-          if (responder.createInitialState !== undefined) {
-            responderState = responder.createInitialState(newProps);
+          fundamentalInstance = workInProgress.stateNode = createFundamentalStateInstance(
+            workInProgress,
+            newProps,
+            fundamentalImpl,
+            fundamentalState || {},
+          );
+          const instance = ((getFundamentalComponentInstance(
+            fundamentalInstance,
+          ): any): Instance);
+          fundamentalInstance.instance = instance;
+          if (fundamentalImpl.reconcileChildren === false) {
+            return null;
           }
-          eventComponentInstance = workInProgress.stateNode = {
-            currentFiber: workInProgress,
-            props: newProps,
-            responder,
-            rootEventTypes: null,
-            rootInstance: rootContainerInstance,
-            state: responderState,
-          };
-          markUpdate(workInProgress);
+          appendAllChildren(instance, workInProgress, false, false);
+          mountFundamentalComponent(fundamentalInstance);
         } else {
-          // Update the props on the event component state node
-          eventComponentInstance.props = newProps;
-          // Update the root container, so we can properly unmount events at some point
-          eventComponentInstance.rootInstance = rootContainerInstance;
-          // Update the current fiber
-          eventComponentInstance.currentFiber = workInProgress;
-          updateEventComponent(eventComponentInstance);
+          // We fire update in commit phase
+          const prevProps = fundamentalInstance.props;
+          fundamentalInstance.prevProps = prevProps;
+          fundamentalInstance.props = newProps;
+          fundamentalInstance.currentFiber = workInProgress;
+          if (supportsPersistence) {
+            const instance = cloneFundamentalInstance(fundamentalInstance);
+            fundamentalInstance.instance = instance;
+            appendAllChildren(instance, workInProgress, false, false);
+          }
+          const shouldUpdate = shouldUpdateFundamentalComponent(
+            fundamentalInstance,
+          );
+          if (shouldUpdate) {
+            markUpdate(workInProgress);
+          }
         }
+        return null;
       }
       break;
     }
-    case EventTarget: {
-      if (enableEventAPI) {
-        popHostContext(workInProgress);
-        const type = workInProgress.type.type;
-        const rootContainerInstance = getRootHostContainer();
-        const shouldUpdate = handleEventTarget(
-          type,
-          newProps,
-          rootContainerInstance,
-          workInProgress,
-        );
-        // Update the latest props on the stateNode. This is used
-        // during the event phase to find the most current props.
-        workInProgress.stateNode.props = newProps;
-        if (shouldUpdate) {
-          markUpdate(workInProgress);
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        if (current === null) {
+          const type = workInProgress.type;
+          const scopeInstance: ReactScopeInstance = {
+            fiber: workInProgress,
+            methods: null,
+          };
+          workInProgress.stateNode = scopeInstance;
+          scopeInstance.methods = createScopeMethods(type, scopeInstance);
+          if (enableDeprecatedFlareAPI) {
+            const listeners = newProps.DEPRECATED_flareListeners;
+            if (listeners != null) {
+              const rootContainerInstance = getRootHostContainer();
+              updateDeprecatedEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
+            }
+          }
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
+            markUpdate(workInProgress);
+          }
+        } else {
+          if (enableDeprecatedFlareAPI) {
+            const prevListeners =
+              current.memoizedProps.DEPRECATED_flareListeners;
+            const nextListeners = newProps.DEPRECATED_flareListeners;
+            if (
+              prevListeners !== nextListeners ||
+              workInProgress.ref !== null
+            ) {
+              markUpdate(workInProgress);
+            }
+          } else {
+            if (workInProgress.ref !== null) {
+              markUpdate(workInProgress);
+            }
+          }
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
         }
+        return null;
       }
       break;
     }
-    default:
-      invariant(
-        false,
-        'Unknown unit of work tag. This error is likely caused by a bug in ' +
-          'React. Please file an issue.',
-      );
+    case Chunk:
+      if (enableChunksAPI) {
+        return null;
+      }
+      break;
   }
-
-  return null;
+  invariant(
+    false,
+    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+      'React. Please file an issue.',
+    workInProgress.tag,
+  );
 }
 
 export {completeWork};
diff --git a/packages/react-reconciler/src/ReactFiberContext.js b/packages/react-reconciler/src/ReactFiberContext.js
index 74826408ddf4a..946d33606c813 100644
--- a/packages/react-reconciler/src/ReactFiberContext.js
+++ b/packages/react-reconciler/src/ReactFiberContext.js
@@ -11,10 +11,10 @@ import type {Fiber} from './ReactFiber';
 import type {StackCursor} from './ReactFiberStack';
 
 import {isFiberMounted} from 'react-reconciler/reflection';
+import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import checkPropTypes from 'prop-types/checkPropTypes';
 
 import {setCurrentPhase, getCurrentFiberStackInDev} from './ReactCurrentFiber';
@@ -46,14 +46,18 @@ function getUnmaskedContext(
   Component: Function,
   didPushOwnContextIfProvider: boolean,
 ): Object {
-  if (didPushOwnContextIfProvider && isContextProvider(Component)) {
-    // If the fiber is a context provider itself, when we read its context
-    // we may have already pushed its own child context on the stack. A context
-    // provider should not "see" its own child context. Therefore we read the
-    // previous (parent) context instead for a context provider.
-    return previousContext;
+  if (disableLegacyContext) {
+    return emptyContextObject;
+  } else {
+    if (didPushOwnContextIfProvider && isContextProvider(Component)) {
+      // If the fiber is a context provider itself, when we read its context
+      // we may have already pushed its own child context on the stack. A context
+      // provider should not "see" its own child context. Therefore we read the
+      // previous (parent) context instead for a context provider.
+      return previousContext;
+    }
+    return contextStackCursor.current;
   }
-  return contextStackCursor.current;
 }
 
 function cacheContext(
@@ -61,74 +65,98 @@ function cacheContext(
   unmaskedContext: Object,
   maskedContext: Object,
 ): void {
-  const instance = workInProgress.stateNode;
-  instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
-  instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
+  if (disableLegacyContext) {
+    return;
+  } else {
+    const instance = workInProgress.stateNode;
+    instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
+    instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
+  }
 }
 
 function getMaskedContext(
   workInProgress: Fiber,
   unmaskedContext: Object,
 ): Object {
-  const type = workInProgress.type;
-  const contextTypes = type.contextTypes;
-  if (!contextTypes) {
+  if (disableLegacyContext) {
     return emptyContextObject;
-  }
+  } else {
+    const type = workInProgress.type;
+    const contextTypes = type.contextTypes;
+    if (!contextTypes) {
+      return emptyContextObject;
+    }
 
-  // Avoid recreating masked context unless unmasked context has changed.
-  // Failing to do this will result in unnecessary calls to componentWillReceiveProps.
-  // This may trigger infinite loops if componentWillReceiveProps calls setState.
-  const instance = workInProgress.stateNode;
-  if (
-    instance &&
-    instance.__reactInternalMemoizedUnmaskedChildContext === unmaskedContext
-  ) {
-    return instance.__reactInternalMemoizedMaskedChildContext;
-  }
+    // Avoid recreating masked context unless unmasked context has changed.
+    // Failing to do this will result in unnecessary calls to componentWillReceiveProps.
+    // This may trigger infinite loops if componentWillReceiveProps calls setState.
+    const instance = workInProgress.stateNode;
+    if (
+      instance &&
+      instance.__reactInternalMemoizedUnmaskedChildContext === unmaskedContext
+    ) {
+      return instance.__reactInternalMemoizedMaskedChildContext;
+    }
 
-  const context = {};
-  for (let key in contextTypes) {
-    context[key] = unmaskedContext[key];
-  }
+    const context = {};
+    for (let key in contextTypes) {
+      context[key] = unmaskedContext[key];
+    }
 
-  if (__DEV__) {
-    const name = getComponentName(type) || 'Unknown';
-    checkPropTypes(
-      contextTypes,
-      context,
-      'context',
-      name,
-      getCurrentFiberStackInDev,
-    );
-  }
+    if (__DEV__) {
+      const name = getComponentName(type) || 'Unknown';
+      checkPropTypes(
+        contextTypes,
+        context,
+        'context',
+        name,
+        getCurrentFiberStackInDev,
+      );
+    }
 
-  // Cache unmasked context so we can avoid recreating masked context unless necessary.
-  // Context is created before the class component is instantiated so check for instance.
-  if (instance) {
-    cacheContext(workInProgress, unmaskedContext, context);
-  }
+    // Cache unmasked context so we can avoid recreating masked context unless necessary.
+    // Context is created before the class component is instantiated so check for instance.
+    if (instance) {
+      cacheContext(workInProgress, unmaskedContext, context);
+    }
 
-  return context;
+    return context;
+  }
 }
 
 function hasContextChanged(): boolean {
-  return didPerformWorkStackCursor.current;
+  if (disableLegacyContext) {
+    return false;
+  } else {
+    return didPerformWorkStackCursor.current;
+  }
 }
 
 function isContextProvider(type: Function): boolean {
-  const childContextTypes = type.childContextTypes;
-  return childContextTypes !== null && childContextTypes !== undefined;
+  if (disableLegacyContext) {
+    return false;
+  } else {
+    const childContextTypes = type.childContextTypes;
+    return childContextTypes !== null && childContextTypes !== undefined;
+  }
 }
 
 function popContext(fiber: Fiber): void {
-  pop(didPerformWorkStackCursor, fiber);
-  pop(contextStackCursor, fiber);
+  if (disableLegacyContext) {
+    return;
+  } else {
+    pop(didPerformWorkStackCursor, fiber);
+    pop(contextStackCursor, fiber);
+  }
 }
 
 function popTopLevelContextObject(fiber: Fiber): void {
-  pop(didPerformWorkStackCursor, fiber);
-  pop(contextStackCursor, fiber);
+  if (disableLegacyContext) {
+    return;
+  } else {
+    pop(didPerformWorkStackCursor, fiber);
+    pop(contextStackCursor, fiber);
+  }
 }
 
 function pushTopLevelContextObject(
@@ -136,14 +164,18 @@ function pushTopLevelContextObject(
   context: Object,
   didChange: boolean,
 ): void {
-  invariant(
-    contextStackCursor.current === emptyContextObject,
-    'Unexpected context found on stack. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
-
-  push(contextStackCursor, context, fiber);
-  push(didPerformWorkStackCursor, didChange, fiber);
+  if (disableLegacyContext) {
+    return;
+  } else {
+    invariant(
+      contextStackCursor.current === emptyContextObject,
+      'Unexpected context found on stack. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+
+    push(contextStackCursor, context, fiber);
+    push(didPerformWorkStackCursor, didChange, fiber);
+  }
 }
 
 function processChildContext(
@@ -151,87 +183,94 @@ function processChildContext(
   type: any,
   parentContext: Object,
 ): Object {
-  const instance = fiber.stateNode;
-  const childContextTypes = type.childContextTypes;
+  if (disableLegacyContext) {
+    return parentContext;
+  } else {
+    const instance = fiber.stateNode;
+    const childContextTypes = type.childContextTypes;
+
+    // TODO (bvaughn) Replace this behavior with an invariant() in the future.
+    // It has only been added in Fiber to match the (unintentional) behavior in Stack.
+    if (typeof instance.getChildContext !== 'function') {
+      if (__DEV__) {
+        const componentName = getComponentName(type) || 'Unknown';
+
+        if (!warnedAboutMissingGetChildContext[componentName]) {
+          warnedAboutMissingGetChildContext[componentName] = true;
+          console.error(
+            '%s.childContextTypes is specified but there is no getChildContext() method ' +
+              'on the instance. You can either define getChildContext() on %s or remove ' +
+              'childContextTypes from it.',
+            componentName,
+            componentName,
+          );
+        }
+      }
+      return parentContext;
+    }
 
-  // TODO (bvaughn) Replace this behavior with an invariant() in the future.
-  // It has only been added in Fiber to match the (unintentional) behavior in Stack.
-  if (typeof instance.getChildContext !== 'function') {
+    let childContext;
     if (__DEV__) {
-      const componentName = getComponentName(type) || 'Unknown';
-
-      if (!warnedAboutMissingGetChildContext[componentName]) {
-        warnedAboutMissingGetChildContext[componentName] = true;
-        warningWithoutStack(
-          false,
-          '%s.childContextTypes is specified but there is no getChildContext() method ' +
-            'on the instance. You can either define getChildContext() on %s or remove ' +
-            'childContextTypes from it.',
-          componentName,
-          componentName,
-        );
-      }
+      setCurrentPhase('getChildContext');
+    }
+    startPhaseTimer(fiber, 'getChildContext');
+    childContext = instance.getChildContext();
+    stopPhaseTimer();
+    if (__DEV__) {
+      setCurrentPhase(null);
+    }
+    for (let contextKey in childContext) {
+      invariant(
+        contextKey in childContextTypes,
+        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
+        getComponentName(type) || 'Unknown',
+        contextKey,
+      );
+    }
+    if (__DEV__) {
+      const name = getComponentName(type) || 'Unknown';
+      checkPropTypes(
+        childContextTypes,
+        childContext,
+        'child context',
+        name,
+        // In practice, there is one case in which we won't get a stack. It's when
+        // somebody calls unstable_renderSubtreeIntoContainer() and we process
+        // context from the parent component instance. The stack will be missing
+        // because it's outside of the reconciliation, and so the pointer has not
+        // been set. This is rare and doesn't matter. We'll also remove that API.
+        getCurrentFiberStackInDev,
+      );
     }
-    return parentContext;
-  }
 
-  let childContext;
-  if (__DEV__) {
-    setCurrentPhase('getChildContext');
+    return {...parentContext, ...childContext};
   }
-  startPhaseTimer(fiber, 'getChildContext');
-  childContext = instance.getChildContext();
-  stopPhaseTimer();
-  if (__DEV__) {
-    setCurrentPhase(null);
-  }
-  for (let contextKey in childContext) {
-    invariant(
-      contextKey in childContextTypes,
-      '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-      getComponentName(type) || 'Unknown',
-      contextKey,
-    );
-  }
-  if (__DEV__) {
-    const name = getComponentName(type) || 'Unknown';
-    checkPropTypes(
-      childContextTypes,
-      childContext,
-      'child context',
-      name,
-      // In practice, there is one case in which we won't get a stack. It's when
-      // somebody calls unstable_renderSubtreeIntoContainer() and we process
-      // context from the parent component instance. The stack will be missing
-      // because it's outside of the reconciliation, and so the pointer has not
-      // been set. This is rare and doesn't matter. We'll also remove that API.
-      getCurrentFiberStackInDev,
-    );
-  }
-
-  return {...parentContext, ...childContext};
 }
 
 function pushContextProvider(workInProgress: Fiber): boolean {
-  const instance = workInProgress.stateNode;
-  // We push the context as early as possible to ensure stack integrity.
-  // If the instance does not exist yet, we will push null at first,
-  // and replace it on the stack later when invalidating the context.
-  const memoizedMergedChildContext =
-    (instance && instance.__reactInternalMemoizedMergedChildContext) ||
-    emptyContextObject;
-
-  // Remember the parent context so we can merge with it later.
-  // Inherit the parent's did-perform-work value to avoid inadvertently blocking updates.
-  previousContext = contextStackCursor.current;
-  push(contextStackCursor, memoizedMergedChildContext, workInProgress);
-  push(
-    didPerformWorkStackCursor,
-    didPerformWorkStackCursor.current,
-    workInProgress,
-  );
-
-  return true;
+  if (disableLegacyContext) {
+    return false;
+  } else {
+    const instance = workInProgress.stateNode;
+    // We push the context as early as possible to ensure stack integrity.
+    // If the instance does not exist yet, we will push null at first,
+    // and replace it on the stack later when invalidating the context.
+    const memoizedMergedChildContext =
+      (instance && instance.__reactInternalMemoizedMergedChildContext) ||
+      emptyContextObject;
+
+    // Remember the parent context so we can merge with it later.
+    // Inherit the parent's did-perform-work value to avoid inadvertently blocking updates.
+    previousContext = contextStackCursor.current;
+    push(contextStackCursor, memoizedMergedChildContext, workInProgress);
+    push(
+      didPerformWorkStackCursor,
+      didPerformWorkStackCursor.current,
+      workInProgress,
+    );
+
+    return true;
+  }
 }
 
 function invalidateContextProvider(
@@ -239,66 +278,74 @@ function invalidateContextProvider(
   type: any,
   didChange: boolean,
 ): void {
-  const instance = workInProgress.stateNode;
-  invariant(
-    instance,
-    'Expected to have an instance by this point. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
-
-  if (didChange) {
-    // Merge parent and own context.
-    // Skip this if we're not updating due to sCU.
-    // This avoids unnecessarily recomputing memoized values.
-    const mergedContext = processChildContext(
-      workInProgress,
-      type,
-      previousContext,
-    );
-    instance.__reactInternalMemoizedMergedChildContext = mergedContext;
-
-    // Replace the old (or empty) context with the new one.
-    // It is important to unwind the context in the reverse order.
-    pop(didPerformWorkStackCursor, workInProgress);
-    pop(contextStackCursor, workInProgress);
-    // Now push the new context and mark that it has changed.
-    push(contextStackCursor, mergedContext, workInProgress);
-    push(didPerformWorkStackCursor, didChange, workInProgress);
+  if (disableLegacyContext) {
+    return;
   } else {
-    pop(didPerformWorkStackCursor, workInProgress);
-    push(didPerformWorkStackCursor, didChange, workInProgress);
+    const instance = workInProgress.stateNode;
+    invariant(
+      instance,
+      'Expected to have an instance by this point. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+
+    if (didChange) {
+      // Merge parent and own context.
+      // Skip this if we're not updating due to sCU.
+      // This avoids unnecessarily recomputing memoized values.
+      const mergedContext = processChildContext(
+        workInProgress,
+        type,
+        previousContext,
+      );
+      instance.__reactInternalMemoizedMergedChildContext = mergedContext;
+
+      // Replace the old (or empty) context with the new one.
+      // It is important to unwind the context in the reverse order.
+      pop(didPerformWorkStackCursor, workInProgress);
+      pop(contextStackCursor, workInProgress);
+      // Now push the new context and mark that it has changed.
+      push(contextStackCursor, mergedContext, workInProgress);
+      push(didPerformWorkStackCursor, didChange, workInProgress);
+    } else {
+      pop(didPerformWorkStackCursor, workInProgress);
+      push(didPerformWorkStackCursor, didChange, workInProgress);
+    }
   }
 }
 
 function findCurrentUnmaskedContext(fiber: Fiber): Object {
-  // Currently this is only used with renderSubtreeIntoContainer; not sure if it
-  // makes sense elsewhere
-  invariant(
-    isFiberMounted(fiber) && fiber.tag === ClassComponent,
-    'Expected subtree parent to be a mounted class component. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
-
-  let node = fiber;
-  do {
-    switch (node.tag) {
-      case HostRoot:
-        return node.stateNode.context;
-      case ClassComponent: {
-        const Component = node.type;
-        if (isContextProvider(Component)) {
-          return node.stateNode.__reactInternalMemoizedMergedChildContext;
+  if (disableLegacyContext) {
+    return emptyContextObject;
+  } else {
+    // Currently this is only used with renderSubtreeIntoContainer; not sure if it
+    // makes sense elsewhere
+    invariant(
+      isFiberMounted(fiber) && fiber.tag === ClassComponent,
+      'Expected subtree parent to be a mounted class component. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+
+    let node = fiber;
+    do {
+      switch (node.tag) {
+        case HostRoot:
+          return node.stateNode.context;
+        case ClassComponent: {
+          const Component = node.type;
+          if (isContextProvider(Component)) {
+            return node.stateNode.__reactInternalMemoizedMergedChildContext;
+          }
+          break;
         }
-        break;
       }
-    }
-    node = node.return;
-  } while (node !== null);
-  invariant(
-    false,
-    'Found unexpected detached subtree parent. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+      node = node.return;
+    } while (node !== null);
+    invariant(
+      false,
+      'Found unexpected detached subtree parent. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
 }
 
 export {
diff --git a/packages/react-reconciler/src/ReactFiberDeprecatedEvents.js b/packages/react-reconciler/src/ReactFiberDeprecatedEvents.js
new file mode 100644
index 0000000000000..a3048273de617
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberDeprecatedEvents.js
@@ -0,0 +1,234 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber';
+import type {Container, Instance} from './ReactFiberHostConfig';
+import type {
+  ReactEventResponder,
+  ReactEventResponderInstance,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
+
+import {
+  DEPRECATED_mountResponderInstance,
+  DEPRECATED_unmountResponderInstance,
+} from './ReactFiberHostConfig';
+import {NoWork} from './ReactFiberExpirationTime';
+
+import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
+
+import invariant from 'shared/invariant';
+import {HostComponent, HostRoot} from 'shared/ReactWorkTags';
+
+const emptyObject = {};
+const isArray = Array.isArray;
+
+export function createResponderInstance(
+  responder: ReactEventResponder<any, any>,
+  responderProps: Object,
+  responderState: Object,
+  fiber: Fiber,
+): ReactEventResponderInstance<any, any> {
+  return {
+    fiber,
+    props: responderProps,
+    responder,
+    rootEventTypes: null,
+    state: responderState,
+  };
+}
+
+function mountEventResponder(
+  responder: ReactEventResponder<any, any>,
+  responderProps: Object,
+  fiber: Fiber,
+  respondersMap: Map<
+    ReactEventResponder<any, any>,
+    ReactEventResponderInstance<any, any>,
+  >,
+  rootContainerInstance: null | Container,
+) {
+  let responderState = emptyObject;
+  const getInitialState = responder.getInitialState;
+  if (getInitialState !== null) {
+    responderState = getInitialState(responderProps);
+  }
+  const responderInstance = createResponderInstance(
+    responder,
+    responderProps,
+    responderState,
+    fiber,
+  );
+
+  if (!rootContainerInstance) {
+    let node = fiber;
+    while (node !== null) {
+      const tag = node.tag;
+      if (tag === HostComponent) {
+        rootContainerInstance = node.stateNode;
+        break;
+      } else if (tag === HostRoot) {
+        rootContainerInstance = node.stateNode.containerInfo;
+        break;
+      }
+      node = node.return;
+    }
+  }
+
+  DEPRECATED_mountResponderInstance(
+    responder,
+    responderInstance,
+    responderProps,
+    responderState,
+    ((rootContainerInstance: any): Instance),
+  );
+  respondersMap.set(responder, responderInstance);
+}
+
+function updateEventListener(
+  listener: ReactEventResponderListener<any, any>,
+  fiber: Fiber,
+  visistedResponders: Set<ReactEventResponder<any, any>>,
+  respondersMap: Map<
+    ReactEventResponder<any, any>,
+    ReactEventResponderInstance<any, any>,
+  >,
+  rootContainerInstance: null | Container,
+): void {
+  let responder;
+  let props;
+
+  if (listener) {
+    responder = listener.responder;
+    props = listener.props;
+  }
+  invariant(
+    responder && responder.$$typeof === REACT_RESPONDER_TYPE,
+    'An invalid value was used as an event listener. Expect one or many event ' +
+      'listeners created via React.unstable_useResponder().',
+  );
+  const listenerProps = ((props: any): Object);
+  if (visistedResponders.has(responder)) {
+    // show warning
+    if (__DEV__) {
+      console.error(
+        'Duplicate event responder "%s" found in event listeners. ' +
+          'Event listeners passed to elements cannot use the same event responder more than once.',
+        responder.displayName,
+      );
+    }
+    return;
+  }
+  visistedResponders.add(responder);
+  const responderInstance = respondersMap.get(responder);
+
+  if (responderInstance === undefined) {
+    // Mount (happens in either complete or commit phase)
+    mountEventResponder(
+      responder,
+      listenerProps,
+      fiber,
+      respondersMap,
+      rootContainerInstance,
+    );
+  } else {
+    // Update (happens during commit phase only)
+    responderInstance.props = listenerProps;
+    responderInstance.fiber = fiber;
+  }
+}
+
+export function updateDeprecatedEventListeners(
+  listeners: any,
+  fiber: Fiber,
+  rootContainerInstance: null | Container,
+): void {
+  const visistedResponders = new Set();
+  let dependencies = fiber.dependencies;
+  if (listeners != null) {
+    if (dependencies === null) {
+      dependencies = fiber.dependencies = {
+        expirationTime: NoWork,
+        firstContext: null,
+        responders: new Map(),
+      };
+    }
+    let respondersMap = dependencies.responders;
+    if (respondersMap === null) {
+      dependencies.responders = respondersMap = new Map();
+    }
+    if (isArray(listeners)) {
+      for (let i = 0, length = listeners.length; i < length; i++) {
+        const listener = listeners[i];
+        updateEventListener(
+          listener,
+          fiber,
+          visistedResponders,
+          respondersMap,
+          rootContainerInstance,
+        );
+      }
+    } else {
+      updateEventListener(
+        listeners,
+        fiber,
+        visistedResponders,
+        respondersMap,
+        rootContainerInstance,
+      );
+    }
+  }
+  if (dependencies !== null) {
+    const respondersMap = dependencies.responders;
+    if (respondersMap !== null) {
+      // Unmount
+      const mountedResponders = Array.from(respondersMap.keys());
+      for (let i = 0, length = mountedResponders.length; i < length; i++) {
+        const mountedResponder = mountedResponders[i];
+        if (!visistedResponders.has(mountedResponder)) {
+          const responderInstance = ((respondersMap.get(
+            mountedResponder,
+          ): any): ReactEventResponderInstance<any, any>);
+          DEPRECATED_unmountResponderInstance(responderInstance);
+          respondersMap.delete(mountedResponder);
+        }
+      }
+    }
+  }
+}
+
+export function createDeprecatedResponderListener(
+  responder: ReactEventResponder<any, any>,
+  props: Object,
+): ReactEventResponderListener<any, any> {
+  const eventResponderListener = {
+    responder,
+    props,
+  };
+  if (__DEV__) {
+    Object.freeze(eventResponderListener);
+  }
+  return eventResponderListener;
+}
+
+export function unmountDeprecatedResponderListeners(fiber: Fiber) {
+  const dependencies = fiber.dependencies;
+
+  if (dependencies !== null) {
+    const respondersMap = dependencies.responders;
+    if (respondersMap !== null) {
+      const responderInstances = Array.from(respondersMap.values());
+      for (let i = 0, length = responderInstances.length; i < length; i++) {
+        const responderInstance = responderInstances[i];
+        DEPRECATED_unmountResponderInstance(responderInstance);
+      }
+      dependencies.responders = null;
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.js
index 08c7c12db8cf2..d75a340802732 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.js
@@ -8,17 +8,19 @@
  */
 
 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
-import {requestCurrentTime} from './ReactFiberWorkLoop';
+import {getCurrentTime} from './ReactFiberWorkLoop';
 import {inferPriorityFromExpirationTime} from './ReactFiberExpirationTime';
 
 import type {Fiber} from './ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import type {ReactNodeList} from 'shared/ReactTypes';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
+import {DidCapture} from 'shared/ReactSideEffectTags';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
+let onScheduleFiberRoot = null;
 let onCommitFiberRoot = null;
 let onCommitFiberUnmount = null;
 let hasLoggedError = false;
@@ -40,8 +42,7 @@ export function injectInternals(internals: Object): boolean {
   }
   if (!hook.supportsFiber) {
     if (__DEV__) {
-      warningWithoutStack(
-        false,
+      console.error(
         'The installed version of React DevTools is too old and will not work ' +
           'with the current version of React. Please update React DevTools. ' +
           'https://fb.me/react-devtools',
@@ -53,26 +54,46 @@ export function injectInternals(internals: Object): boolean {
   try {
     const rendererID = hook.inject(internals);
     // We have successfully injected, so now it is safe to set up hooks.
+    if (__DEV__) {
+      // Only used by Fast Refresh
+      if (typeof hook.onScheduleFiberRoot === 'function') {
+        onScheduleFiberRoot = (root, children) => {
+          try {
+            hook.onScheduleFiberRoot(rendererID, root, children);
+          } catch (err) {
+            if (__DEV__ && !hasLoggedError) {
+              hasLoggedError = true;
+              console.error(
+                'React instrumentation encountered an error: %s',
+                err,
+              );
+            }
+          }
+        };
+      }
+    }
     onCommitFiberRoot = (root, expirationTime) => {
       try {
+        const didError = (root.current.effectTag & DidCapture) === DidCapture;
         if (enableProfilerTimer) {
-          const currentTime = requestCurrentTime();
+          const currentTime = getCurrentTime();
           const priorityLevel = inferPriorityFromExpirationTime(
             currentTime,
             expirationTime,
           );
-          hook.onCommitFiberRoot(rendererID, root, priorityLevel);
+          hook.onCommitFiberRoot(rendererID, root, priorityLevel, didError);
         } else {
-          hook.onCommitFiberRoot(rendererID, root);
+          hook.onCommitFiberRoot(rendererID, root, undefined, didError);
         }
       } catch (err) {
-        if (__DEV__ && !hasLoggedError) {
-          hasLoggedError = true;
-          warningWithoutStack(
-            false,
-            'React DevTools encountered an error: %s',
-            err,
-          );
+        if (__DEV__) {
+          if (!hasLoggedError) {
+            hasLoggedError = true;
+            console.error(
+              'React instrumentation encountered an error: %s',
+              err,
+            );
+          }
         }
       }
     };
@@ -80,30 +101,33 @@ export function injectInternals(internals: Object): boolean {
       try {
         hook.onCommitFiberUnmount(rendererID, fiber);
       } catch (err) {
-        if (__DEV__ && !hasLoggedError) {
-          hasLoggedError = true;
-          warningWithoutStack(
-            false,
-            'React DevTools encountered an error: %s',
-            err,
-          );
+        if (__DEV__) {
+          if (!hasLoggedError) {
+            hasLoggedError = true;
+            console.error(
+              'React instrumentation encountered an error: %s',
+              err,
+            );
+          }
         }
       }
     };
   } catch (err) {
     // Catch all errors because it is unsafe to throw during initialization.
     if (__DEV__) {
-      warningWithoutStack(
-        false,
-        'React DevTools encountered an error: %s.',
-        err,
-      );
+      console.error('React instrumentation encountered an error: %s.', err);
     }
   }
   // DevTools exists
   return true;
 }
 
+export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
+  if (typeof onScheduleFiberRoot === 'function') {
+    onScheduleFiberRoot(root, children);
+  }
+}
+
 export function onCommitRoot(root: FiberRoot, expirationTime: ExpirationTime) {
   if (typeof onCommitFiberRoot === 'function') {
     onCommitFiberRoot(root, expirationTime);
diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js
index 9276faf3daea9..724907d561e04 100644
--- a/packages/react-reconciler/src/ReactFiberErrorLogger.js
+++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js
@@ -44,7 +44,7 @@ export function logCapturedError(capturedError: CapturedError): void {
       // been accidental, we'll surface it anyway.
       // However, the browser would have silenced the original error
       // so we'll print it first, and then print the stack addendum.
-      console.error(error);
+      console['error'](error); // Don't transform to our wrapper
       // For a more detailed description of this block, see:
       // https://github.com/facebook/react/pull/13384
     }
@@ -78,11 +78,11 @@ export function logCapturedError(capturedError: CapturedError): void {
     // We don't include the original error message and JS stack because the browser
     // has already printed it. Even if the application swallows the error, it is still
     // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
-    console.error(combinedMessage);
+    console['error'](combinedMessage); // Don't transform to our wrapper
   } else {
     // In production, we print the error directly.
     // This will include the message, the JS stack, and anything the browser wants to show.
     // We pass the error object instead of custom message so that the browser displays the error natively.
-    console.error(error);
+    console['error'](error); // Don't transform to our wrapper
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberEvents.js b/packages/react-reconciler/src/ReactFiberEvents.js
deleted file mode 100644
index 9e33ac9b2a6e7..0000000000000
--- a/packages/react-reconciler/src/ReactFiberEvents.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-import type {Fiber} from './ReactFiber';
-
-import {
-  HostComponent,
-  HostText,
-  HostPortal,
-  SuspenseComponent,
-  Fragment,
-} from 'shared/ReactWorkTags';
-
-export function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {
-  return fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-}
-
-export function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {
-  return ((((fiber.child: any): Fiber).sibling: any): Fiber).child;
-}
-
-export function isFiberSuspenseTimedOutChild(fiber: Fiber | null): boolean {
-  if (fiber === null) {
-    return false;
-  }
-  const parent = fiber.return;
-  if (parent !== null && parent.tag === Fragment) {
-    const grandParent = parent.return;
-
-    if (
-      grandParent !== null &&
-      grandParent.tag === SuspenseComponent &&
-      grandParent.stateNode !== null
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function getSuspenseFiberFromTimedOutChild(fiber: Fiber): Fiber {
-  return ((((fiber.return: any): Fiber).return: any): Fiber);
-}
-
-export function getEventComponentHostChildrenCount(
-  eventComponentFiber: Fiber,
-): ?number {
-  if (__DEV__) {
-    let hostChildrenCount = 0;
-    const getHostChildrenCount = node => {
-      if (isFiberSuspenseAndTimedOut(node)) {
-        const fallbackChild = getSuspenseFallbackChild(node);
-        if (fallbackChild !== null) {
-          getHostChildrenCount(fallbackChild);
-        }
-      } else if (
-        node.tag === HostComponent ||
-        node.tag === HostText ||
-        node.tag === HostPortal
-      ) {
-        hostChildrenCount++;
-      } else {
-        const child = node.child;
-        if (child !== null) {
-          getHostChildrenCount(child);
-        }
-      }
-      const sibling = node.sibling;
-      if (sibling !== null) {
-        getHostChildrenCount(sibling);
-      }
-    };
-
-    if (eventComponentFiber.child !== null) {
-      getHostChildrenCount(eventComponentFiber.child);
-    }
-
-    return hostChildrenCount;
-  }
-}
diff --git a/packages/react-reconciler/src/ReactFiberExpirationTime.js b/packages/react-reconciler/src/ReactFiberExpirationTime.js
index d3e2e20161010..5f4660dd5175f 100644
--- a/packages/react-reconciler/src/ReactFiberExpirationTime.js
+++ b/packages/react-reconciler/src/ReactFiberExpirationTime.js
@@ -21,7 +21,21 @@ import {
 export type ExpirationTime = number;
 
 export const NoWork = 0;
+// TODO: Think of a better name for Never. The key difference with Idle is that
+// Never work can be committed in an inconsistent state without tearing the UI.
+// The main example is offscreen content, like a hidden subtree. So one possible
+// name is Offscreen. However, it also includes dehydrated Suspense boundaries,
+// which are inconsistent in the sense that they haven't finished yet, but
+// aren't visibly inconsistent because the server rendered HTML matches what the
+// hydrated tree would look like.
 export const Never = 1;
+// Idle is slightly higher priority than Never. It must completely finish in
+// order to be consistent.
+export const Idle = 2;
+// Continuous Hydration is a moving priority. It is slightly higher than Idle
+// and is used to increase priority of hover targets. It is increasing with
+// each usage so that last always wins.
+let ContinuousHydration = 3;
 export const Sync = MAX_SIGNED_31_BIT_INT;
 export const Batched = Sync - 1;
 
@@ -83,14 +97,6 @@ export function computeSuspenseExpiration(
   );
 }
 
-// Same as computeAsyncExpiration but without the bucketing logic. This is
-// used to compute timestamps instead of actual expiration times.
-export function computeAsyncExpirationNoBucket(
-  currentTime: ExpirationTime,
-): ExpirationTime {
-  return currentTime - LOW_PRIORITY_EXPIRATION / UNIT_SIZE;
-}
-
 // We intentionally set a higher expiration time for interactive updates in
 // dev than in production.
 //
@@ -113,6 +119,15 @@ export function computeInteractiveExpiration(currentTime: ExpirationTime) {
   );
 }
 
+export function computeContinuousHydrationExpiration(
+  currentTime: ExpirationTime,
+) {
+  // Each time we ask for a new one of these we increase the priority.
+  // This ensures that the last one always wins since we can't deprioritize
+  // once we've scheduled work already.
+  return ContinuousHydration++;
+}
+
 export function inferPriorityFromExpirationTime(
   currentTime: ExpirationTime,
   expirationTime: ExpirationTime,
@@ -120,7 +135,7 @@ export function inferPriorityFromExpirationTime(
   if (expirationTime === Sync) {
     return ImmediatePriority;
   }
-  if (expirationTime === Never) {
+  if (expirationTime === Never || expirationTime === Idle) {
     return IdlePriority;
   }
   const msUntil =
diff --git a/packages/react-reconciler/src/ReactFiberFundamental.js b/packages/react-reconciler/src/ReactFiberFundamental.js
new file mode 100644
index 0000000000000..ba2d6fd22327c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberFundamental.js
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber';
+import type {
+  ReactFundamentalImpl,
+  ReactFundamentalComponentInstance,
+} from 'shared/ReactTypes';
+
+export function createFundamentalStateInstance<C, H>(
+  currentFiber: Fiber,
+  props: Object,
+  impl: ReactFundamentalImpl<C, H>,
+  state: Object,
+): ReactFundamentalComponentInstance<C, H> {
+  return {
+    currentFiber,
+    impl,
+    instance: null,
+    prevProps: null,
+    props,
+    state,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 2946c931cdc58..6022e54a138d4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -7,17 +7,22 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
-import type {SideEffectTag} from 'shared/ReactSideEffectTags';
+import type {
+  ReactEventResponder,
+  ReactContext,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 import type {HookEffectTag} from './ReactHookEffectTags';
 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
-import {NoWork} from './ReactFiberExpirationTime';
+import {NoWork, Sync} from './ReactFiberExpirationTime';
 import {readContext} from './ReactFiberNewContext';
+import {createDeprecatedResponderListener} from './ReactFiberDeprecatedEvents';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
@@ -32,24 +37,29 @@ import {
 import {
   scheduleWork,
   computeExpirationForFiber,
-  flushPassiveEffects,
-  requestCurrentTime,
+  requestCurrentTimeForUpdate,
+  warnIfNotCurrentlyActingEffectsInDEV,
   warnIfNotCurrentlyActingUpdatesInDev,
   warnIfNotScopedWithMatchingAct,
   markRenderEventTimeAndConfig,
+  markUnprocessedUpdateTime,
 } from './ReactFiberWorkLoop';
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 import getComponentName from 'shared/getComponentName';
 import is from 'shared/objectIs';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork';
-import {revertPassiveEffectsChange} from 'shared/ReactFeatureFlags';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
+import {
+  UserBlockingPriority,
+  NormalPriority,
+  runWithPriority,
+  getCurrentPriorityLevel,
+} from './SchedulerWithReactIntegration';
 
-const {ReactCurrentDispatcher} = ReactSharedInternals;
+const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export type Dispatcher = {
+export type Dispatcher = {|
   readContext<T>(
     context: ReactContext<T>,
     observedBits: void | number | boolean,
@@ -64,7 +74,7 @@ export type Dispatcher = {
     context: ReactContext<T>,
     observedBits: void | number | boolean,
   ): T,
-  useRef<T>(initialValue: T): {current: T},
+  useRef<T>(initialValue: T): {|current: T|},
   useEffect(
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
@@ -76,28 +86,37 @@ export type Dispatcher = {
   useCallback<T>(callback: T, deps: Array<mixed> | void | null): T,
   useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T,
   useImperativeHandle<T>(
-    ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+    ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
     create: () => T,
     deps: Array<mixed> | void | null,
   ): void,
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
-};
-
-type Update<S, A> = {
+  useResponder<E, C>(
+    responder: ReactEventResponder<E, C>,
+    props: Object,
+  ): ReactEventResponderListener<E, C>,
+  useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T,
+  useTransition(
+    config: SuspenseConfig | void | null,
+  ): [(() => void) => void, boolean],
+|};
+
+type Update<S, A> = {|
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
   action: A,
   eagerReducer: ((S, A) => S) | null,
   eagerState: S | null,
-  next: Update<S, A> | null,
-};
+  next: Update<S, A>,
+  priority?: ReactPriorityLevel,
+|};
 
-type UpdateQueue<S, A> = {
-  last: Update<S, A> | null,
+type UpdateQueue<S, A> = {|
+  pending: Update<S, A> | null,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
-};
+|};
 
 export type HookType =
   | 'useState'
@@ -109,34 +128,37 @@ export type HookType =
   | 'useCallback'
   | 'useMemo'
   | 'useImperativeHandle'
-  | 'useDebugValue';
+  | 'useDebugValue'
+  | 'useResponder'
+  | 'useDeferredValue'
+  | 'useTransition';
 
 let didWarnAboutMismatchedHooksForComponent;
 if (__DEV__) {
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
-export type Hook = {
+export type Hook = {|
   memoizedState: any,
-
   baseState: any,
-  baseUpdate: Update<any, any> | null,
+  baseQueue: Update<any, any> | null,
   queue: UpdateQueue<any, any> | null,
-
   next: Hook | null,
-};
+|};
 
-type Effect = {
+type Effect = {|
   tag: HookEffectTag,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
   deps: Array<mixed> | null,
   next: Effect,
-};
+|};
 
-export type FunctionComponentUpdateQueue = {
-  lastEffect: Effect | null,
-};
+export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
+
+export type TimeoutConfig = {|
+  timeoutMs: number,
+|};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -146,39 +168,21 @@ type Dispatch<A> = A => void;
 let renderExpirationTime: ExpirationTime = NoWork;
 // The work-in-progress fiber. I've named it differently to distinguish it from
 // the work-in-progress hook.
-let currentlyRenderingFiber: Fiber | null = null;
+let currentlyRenderingFiber: Fiber = (null: any);
 
 // Hooks are stored as a linked list on the fiber's memoizedState field. The
 // current hook list is the list that belongs to the current fiber. The
 // work-in-progress hook list is a new list that will be added to the
 // work-in-progress fiber.
 let currentHook: Hook | null = null;
-let nextCurrentHook: Hook | null = null;
-let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
-let nextWorkInProgressHook: Hook | null = null;
 
-let remainingExpirationTime: ExpirationTime = NoWork;
-let componentUpdateQueue: FunctionComponentUpdateQueue | null = null;
-let sideEffectTag: SideEffectTag = 0;
-
-// Updates scheduled during render will trigger an immediate re-render at the
-// end of the current pass. We can't store these updates on the normal queue,
-// because if the work is aborted, they should be discarded. Because this is
-// a relatively rare case, we also don't want to add an additional field to
-// either the hook or queue object types. So we store them in a lazily create
-// map of queue -> render-phase updates, which are discarded once the component
-// completes without re-rendering.
-
-// Whether an update was scheduled during the currently executing render pass.
+// Whether an update was scheduled at any point during the render phase. This
+// does not get reset if we do another render pass; only when we're completely
+// finished evaluating this component. This is an optimization so we know
+// whether we need to clear render phase updates after a throw.
 let didScheduleRenderPhaseUpdate: boolean = false;
-// Lazily created map of render-phase updates
-let renderPhaseUpdates: Map<
-  UpdateQueue<any, any>,
-  Update<any, any>,
-> | null = null;
-// Counter to prevent infinite loops.
-let numberOfReRenders: number = 0;
+
 const RE_RENDER_LIMIT = 25;
 
 // In DEV, this is the name of the currently executing primitive hook
@@ -225,8 +229,7 @@ function checkDepsAreArrayDev(deps: mixed) {
     if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
       // Verify deps, but only on mount to avoid extra checks.
       // It's unlikely their type would change as usually you define them inline.
-      warning(
-        false,
+      console.error(
         '%s received a final argument that is not an array (instead, received `%s`). When ' +
           'specified, the final argument must be an array.',
         currentHookNameInDev,
@@ -238,9 +241,7 @@ function checkDepsAreArrayDev(deps: mixed) {
 
 function warnOnHookMismatchInDev(currentHookName: HookType) {
   if (__DEV__) {
-    const componentName = getComponentName(
-      ((currentlyRenderingFiber: any): Fiber).type,
-    );
+    const componentName = getComponentName(currentlyRenderingFiber.type);
     if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
       didWarnAboutMismatchedHooksForComponent.add(componentName);
 
@@ -269,8 +270,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
           table += row;
         }
 
-        warning(
-          false,
+        console.error(
           'React has detected a change in the order of Hooks called by %s. ' +
             'This will lead to bugs and errors if not fixed. ' +
             'For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -311,8 +311,7 @@ function areHookInputsEqual(
 
   if (prevDeps === null) {
     if (__DEV__) {
-      warning(
-        false,
+      console.error(
         '%s received a final argument during this render, but not during ' +
           'the previous render. Even though the final argument is optional, ' +
           'its type cannot change between renders.',
@@ -326,8 +325,7 @@ function areHookInputsEqual(
     // Don't bother comparing lengths in prod because these arrays should be
     // passed inline.
     if (nextDeps.length !== prevDeps.length) {
-      warning(
-        false,
+      console.error(
         'The final argument passed to %s changed size between renders. The ' +
           'order and size of this array must remain constant.\n\n' +
           'Previous: %s\n' +
@@ -352,12 +350,11 @@ export function renderWithHooks(
   workInProgress: Fiber,
   Component: any,
   props: any,
-  refOrContext: any,
+  secondArg: any,
   nextRenderExpirationTime: ExpirationTime,
 ): any {
   renderExpirationTime = nextRenderExpirationTime;
   currentlyRenderingFiber = workInProgress;
-  nextCurrentHook = current !== null ? current.memoizedState : null;
 
   if (__DEV__) {
     hookTypesDev =
@@ -370,27 +367,25 @@ export function renderWithHooks(
       current !== null && current.type !== workInProgress.type;
   }
 
+  workInProgress.memoizedState = null;
+  workInProgress.updateQueue = null;
+  workInProgress.expirationTime = NoWork;
+
   // The following should have already been reset
   // currentHook = null;
   // workInProgressHook = null;
 
-  // remainingExpirationTime = NoWork;
-  // componentUpdateQueue = null;
-
   // didScheduleRenderPhaseUpdate = false;
-  // renderPhaseUpdates = null;
-  // numberOfReRenders = 0;
-  // sideEffectTag = 0;
 
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
-  // Currently we will identify the update render as a mount because nextCurrentHook === null.
+  // Currently we will identify the update render as a mount because memoizedState === null.
   // This is tricky because it's valid for certain types of components (e.g. React.lazy)
 
-  // Using nextCurrentHook to differentiate between mount/update only works if at least one stateful hook is used.
+  // Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.
   // Non-stateful hooks (e.g. context) don't get added to memoizedState,
-  // so nextCurrentHook would be null during updates and mounts.
+  // so memoizedState would be null during updates and mounts.
   if (__DEV__) {
-    if (nextCurrentHook !== null) {
+    if (current !== null && current.memoizedState !== null) {
       ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
     } else if (hookTypesDev !== null) {
       // This dispatcher handles an edge case where a component is updating,
@@ -404,25 +399,39 @@ export function renderWithHooks(
     }
   } else {
     ReactCurrentDispatcher.current =
-      nextCurrentHook === null
+      current === null || current.memoizedState === null
         ? HooksDispatcherOnMount
         : HooksDispatcherOnUpdate;
   }
 
-  let children = Component(props, refOrContext);
+  let children = Component(props, secondArg);
 
-  if (didScheduleRenderPhaseUpdate) {
+  // Check if there was a render phase update
+  if (workInProgress.expirationTime === renderExpirationTime) {
+    // Keep rendering in a loop for as long as render phase updates continue to
+    // be scheduled. Use a counter to prevent infinite loops.
+    let numberOfReRenders: number = 0;
     do {
-      didScheduleRenderPhaseUpdate = false;
+      workInProgress.expirationTime = NoWork;
+
+      invariant(
+        numberOfReRenders < RE_RENDER_LIMIT,
+        'Too many re-renders. React limits the number of renders to prevent ' +
+          'an infinite loop.',
+      );
+
       numberOfReRenders += 1;
+      if (__DEV__) {
+        // Even when hot reloading, allow dependencies to stabilize
+        // after first render to prevent infinite render phase updates.
+        ignorePreviousDependencies = false;
+      }
 
       // Start over from the beginning of the list
-      nextCurrentHook = current !== null ? current.memoizedState : null;
-      nextWorkInProgressHook = firstWorkInProgressHook;
-
       currentHook = null;
       workInProgressHook = null;
-      componentUpdateQueue = null;
+
+      workInProgress.updateQueue = null;
 
       if (__DEV__) {
         // Also validate hook order for cascading updates.
@@ -430,29 +439,19 @@ export function renderWithHooks(
       }
 
       ReactCurrentDispatcher.current = __DEV__
-        ? HooksDispatcherOnUpdateInDEV
-        : HooksDispatcherOnUpdate;
-
-      children = Component(props, refOrContext);
-    } while (didScheduleRenderPhaseUpdate);
+        ? HooksDispatcherOnRerenderInDEV
+        : HooksDispatcherOnRerender;
 
-    renderPhaseUpdates = null;
-    numberOfReRenders = 0;
+      children = Component(props, secondArg);
+    } while (workInProgress.expirationTime === renderExpirationTime);
   }
 
   // We can assume the previous dispatcher is always this one, since we set it
   // at the beginning of the render phase and there's no re-entrancy.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
-  const renderedWork: Fiber = (currentlyRenderingFiber: any);
-
-  renderedWork.memoizedState = firstWorkInProgressHook;
-  renderedWork.expirationTime = remainingExpirationTime;
-  renderedWork.updateQueue = (componentUpdateQueue: any);
-  renderedWork.effectTag |= sideEffectTag;
-
   if (__DEV__) {
-    renderedWork._debugHookTypes = hookTypesDev;
+    workInProgress._debugHookTypes = hookTypesDev;
   }
 
   // This check uses currentHook so that it works the same in DEV and prod bundles.
@@ -461,13 +460,10 @@ export function renderWithHooks(
     currentHook !== null && currentHook.next !== null;
 
   renderExpirationTime = NoWork;
-  currentlyRenderingFiber = null;
+  currentlyRenderingFiber = (null: any);
 
   currentHook = null;
-  nextCurrentHook = null;
-  firstWorkInProgressHook = null;
   workInProgressHook = null;
-  nextWorkInProgressHook = null;
 
   if (__DEV__) {
     currentHookNameInDev = null;
@@ -475,14 +471,7 @@ export function renderWithHooks(
     hookTypesUpdateIndexDev = -1;
   }
 
-  remainingExpirationTime = NoWork;
-  componentUpdateQueue = null;
-  sideEffectTag = 0;
-
-  // These were reset above
-  // didScheduleRenderPhaseUpdate = false;
-  // renderPhaseUpdates = null;
-  // numberOfReRenders = 0;
+  didScheduleRenderPhaseUpdate = false;
 
   invariant(
     !didRenderTooFewHooks,
@@ -505,22 +494,35 @@ export function bailoutHooks(
   }
 }
 
-export function resetHooks(): void {
+export function resetHooksAfterThrow(): void {
   // We can assume the previous dispatcher is always this one, since we set it
   // at the beginning of the render phase and there's no re-entrancy.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
-  // This is used to reset the state of this module when a component throws.
-  // It's also called inside mountIndeterminateComponent if we determine the
-  // component is a module-style component.
+  if (didScheduleRenderPhaseUpdate) {
+    // There were render phase updates. These are only valid for this render
+    // phase, which we are now aborting. Remove the updates from the queues so
+    // they do not persist to the next render. Do not remove updates from hooks
+    // that weren't processed.
+    //
+    // Only reset the updates from the queue if it has a clone. If it does
+    // not have a clone, that means it wasn't processed, and the updates were
+    // scheduled before we entered the render phase.
+    let hook: Hook | null = currentlyRenderingFiber.memoizedState;
+    while (hook !== null) {
+      const queue = hook.queue;
+      if (queue !== null) {
+        queue.pending = null;
+      }
+      hook = hook.next;
+    }
+  }
+
   renderExpirationTime = NoWork;
-  currentlyRenderingFiber = null;
+  currentlyRenderingFiber = (null: any);
 
   currentHook = null;
-  nextCurrentHook = null;
-  firstWorkInProgressHook = null;
   workInProgressHook = null;
-  nextWorkInProgressHook = null;
 
   if (__DEV__) {
     hookTypesDev = null;
@@ -529,13 +531,7 @@ export function resetHooks(): void {
     currentHookNameInDev = null;
   }
 
-  remainingExpirationTime = NoWork;
-  componentUpdateQueue = null;
-  sideEffectTag = 0;
-
   didScheduleRenderPhaseUpdate = false;
-  renderPhaseUpdates = null;
-  numberOfReRenders = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -543,15 +539,15 @@ function mountWorkInProgressHook(): Hook {
     memoizedState: null,
 
     baseState: null,
+    baseQueue: null,
     queue: null,
-    baseUpdate: null,
 
     next: null,
   };
 
   if (workInProgressHook === null) {
     // This is the first hook in the list
-    firstWorkInProgressHook = workInProgressHook = hook;
+    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
   } else {
     // Append to the end of the list
     workInProgressHook = workInProgressHook.next = hook;
@@ -565,15 +561,34 @@ function updateWorkInProgressHook(): Hook {
   // clone, or a work-in-progress hook from a previous render pass that we can
   // use as a base. When we reach the end of the base list, we must switch to
   // the dispatcher used for mounts.
+  let nextCurrentHook: null | Hook;
+  if (currentHook === null) {
+    let current = currentlyRenderingFiber.alternate;
+    if (current !== null) {
+      nextCurrentHook = current.memoizedState;
+    } else {
+      nextCurrentHook = null;
+    }
+  } else {
+    nextCurrentHook = currentHook.next;
+  }
+
+  let nextWorkInProgressHook: null | Hook;
+  if (workInProgressHook === null) {
+    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
+  } else {
+    nextWorkInProgressHook = workInProgressHook.next;
+  }
+
   if (nextWorkInProgressHook !== null) {
     // There's already a work-in-progress. Reuse it.
     workInProgressHook = nextWorkInProgressHook;
     nextWorkInProgressHook = workInProgressHook.next;
 
     currentHook = nextCurrentHook;
-    nextCurrentHook = currentHook !== null ? currentHook.next : null;
   } else {
     // Clone from the current hook.
+
     invariant(
       nextCurrentHook !== null,
       'Rendered more hooks than during the previous render.',
@@ -584,20 +599,19 @@ function updateWorkInProgressHook(): Hook {
       memoizedState: currentHook.memoizedState,
 
       baseState: currentHook.baseState,
+      baseQueue: currentHook.baseQueue,
       queue: currentHook.queue,
-      baseUpdate: currentHook.baseUpdate,
 
       next: null,
     };
 
     if (workInProgressHook === null) {
       // This is the first hook in the list.
-      workInProgressHook = firstWorkInProgressHook = newHook;
+      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
     } else {
       // Append to the end of the list.
       workInProgressHook = workInProgressHook.next = newHook;
     }
-    nextCurrentHook = currentHook.next;
   }
   return workInProgressHook;
 }
@@ -626,15 +640,14 @@ function mountReducer<S, I, A>(
   }
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
-    last: null,
+    pending: null,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
   });
   const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
     null,
-    // Flow doesn't know this is non-null, but we do.
-    ((currentlyRenderingFiber: any): Fiber),
+    currentlyRenderingFiber,
     queue,
   ): any));
   return [hook.memoizedState, dispatch];
@@ -654,93 +667,76 @@ function updateReducer<S, I, A>(
 
   queue.lastRenderedReducer = reducer;
 
-  if (numberOfReRenders > 0) {
-    // This is a re-render. Apply the new render phase updates to the previous
-    // work-in-progress hook.
-    const dispatch: Dispatch<A> = (queue.dispatch: any);
-    if (renderPhaseUpdates !== null) {
-      // Render phase updates are stored in a map of queue -> linked list
-      const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
-      if (firstRenderPhaseUpdate !== undefined) {
-        renderPhaseUpdates.delete(queue);
-        let newState = hook.memoizedState;
-        let update = firstRenderPhaseUpdate;
-        do {
-          // Process this render phase update. We don't have to check the
-          // priority because it will always be the same as the current
-          // render's.
-          const action = update.action;
-          newState = reducer(newState, action);
-          update = update.next;
-        } while (update !== null);
-
-        // Mark that the fiber performed work, but only if the new state is
-        // different from the current state.
-        if (!is(newState, hook.memoizedState)) {
-          markWorkInProgressReceivedUpdate();
-        }
-
-        hook.memoizedState = newState;
-        // Don't persist the state accumlated from the render phase updates to
-        // the base state unless the queue is empty.
-        // TODO: Not sure if this is the desired semantics, but it's what we
-        // do for gDSFP. I can't remember why.
-        if (hook.baseUpdate === queue.last) {
-          hook.baseState = newState;
-        }
-
-        queue.lastRenderedState = newState;
-
-        return [newState, dispatch];
-      }
+  const current: Hook = (currentHook: any);
+
+  // The last rebase update that is NOT part of the base state.
+  let baseQueue = current.baseQueue;
+
+  // The last pending update that hasn't been processed yet.
+  let pendingQueue = queue.pending;
+  if (pendingQueue !== null) {
+    // We have new updates that haven't been processed yet.
+    // We'll add them to the base queue.
+    if (baseQueue !== null) {
+      // Merge the pending queue and the base queue.
+      let baseFirst = baseQueue.next;
+      let pendingFirst = pendingQueue.next;
+      baseQueue.next = pendingFirst;
+      pendingQueue.next = baseFirst;
     }
-    return [hook.memoizedState, dispatch];
+    current.baseQueue = baseQueue = pendingQueue;
+    queue.pending = null;
   }
 
-  // The last update in the entire queue
-  const last = queue.last;
-  // The last update that is part of the base state.
-  const baseUpdate = hook.baseUpdate;
-  const baseState = hook.baseState;
-
-  // Find the first unprocessed update.
-  let first;
-  if (baseUpdate !== null) {
-    if (last !== null) {
-      // For the first update, the queue is a circular linked list where
-      // `queue.last.next = queue.first`. Once the first update commits, and
-      // the `baseUpdate` is no longer empty, we can unravel the list.
-      last.next = null;
-    }
-    first = baseUpdate.next;
-  } else {
-    first = last !== null ? last.next : null;
-  }
-  if (first !== null) {
-    let newState = baseState;
+  if (baseQueue !== null) {
+    // We have a queue to process.
+    let first = baseQueue.next;
+    let newState = current.baseState;
+
     let newBaseState = null;
-    let newBaseUpdate = null;
-    let prevUpdate = baseUpdate;
+    let newBaseQueueFirst = null;
+    let newBaseQueueLast = null;
     let update = first;
-    let didSkip = false;
     do {
       const updateExpirationTime = update.expirationTime;
       if (updateExpirationTime < renderExpirationTime) {
         // Priority is insufficient. Skip this update. If this is the first
         // skipped update, the previous update/state is the new base
         // update/state.
-        if (!didSkip) {
-          didSkip = true;
-          newBaseUpdate = prevUpdate;
+        const clone: Update<S, A> = {
+          expirationTime: update.expirationTime,
+          suspenseConfig: update.suspenseConfig,
+          action: update.action,
+          eagerReducer: update.eagerReducer,
+          eagerState: update.eagerState,
+          next: (null: any),
+        };
+        if (newBaseQueueLast === null) {
+          newBaseQueueFirst = newBaseQueueLast = clone;
           newBaseState = newState;
+        } else {
+          newBaseQueueLast = newBaseQueueLast.next = clone;
         }
         // Update the remaining priority in the queue.
-        if (updateExpirationTime > remainingExpirationTime) {
-          remainingExpirationTime = updateExpirationTime;
+        if (updateExpirationTime > currentlyRenderingFiber.expirationTime) {
+          currentlyRenderingFiber.expirationTime = updateExpirationTime;
+          markUnprocessedUpdateTime(updateExpirationTime);
         }
       } else {
         // This update does have sufficient priority.
 
+        if (newBaseQueueLast !== null) {
+          const clone: Update<S, A> = {
+            expirationTime: Sync, // This update is going to be committed so we never want uncommit it.
+            suspenseConfig: update.suspenseConfig,
+            action: update.action,
+            eagerReducer: update.eagerReducer,
+            eagerState: update.eagerState,
+            next: (null: any),
+          };
+          newBaseQueueLast = newBaseQueueLast.next = clone;
+        }
+
         // Mark the event time of this update as relevant to this render pass.
         // TODO: This should ideally use the true event time of this update rather than
         // its priority which is a derived and not reverseable value.
@@ -762,13 +758,13 @@ function updateReducer<S, I, A>(
           newState = reducer(newState, action);
         }
       }
-      prevUpdate = update;
       update = update.next;
     } while (update !== null && update !== first);
 
-    if (!didSkip) {
-      newBaseUpdate = prevUpdate;
+    if (newBaseQueueLast === null) {
       newBaseState = newState;
+    } else {
+      newBaseQueueLast.next = (newBaseQueueFirst: any);
     }
 
     // Mark that the fiber performed work, but only if the new state is
@@ -778,8 +774,8 @@ function updateReducer<S, I, A>(
     }
 
     hook.memoizedState = newState;
-    hook.baseUpdate = newBaseUpdate;
     hook.baseState = newBaseState;
+    hook.baseQueue = newBaseQueueLast;
 
     queue.lastRenderedState = newState;
   }
@@ -788,6 +784,60 @@ function updateReducer<S, I, A>(
   return [hook.memoizedState, dispatch];
 }
 
+function rerenderReducer<S, I, A>(
+  reducer: (S, A) => S,
+  initialArg: I,
+  init?: I => S,
+): [S, Dispatch<A>] {
+  const hook = updateWorkInProgressHook();
+  const queue = hook.queue;
+  invariant(
+    queue !== null,
+    'Should have a queue. This is likely a bug in React. Please file an issue.',
+  );
+
+  queue.lastRenderedReducer = reducer;
+
+  // This is a re-render. Apply the new render phase updates to the previous
+  // work-in-progress hook.
+  const dispatch: Dispatch<A> = (queue.dispatch: any);
+  const lastRenderPhaseUpdate = queue.pending;
+  let newState = hook.memoizedState;
+  if (lastRenderPhaseUpdate !== null) {
+    // The queue doesn't persist past this render pass.
+    queue.pending = null;
+
+    const firstRenderPhaseUpdate = lastRenderPhaseUpdate.next;
+    let update = firstRenderPhaseUpdate;
+    do {
+      // Process this render phase update. We don't have to check the
+      // priority because it will always be the same as the current
+      // render's.
+      const action = update.action;
+      newState = reducer(newState, action);
+      update = update.next;
+    } while (update !== firstRenderPhaseUpdate);
+
+    // Mark that the fiber performed work, but only if the new state is
+    // different from the current state.
+    if (!is(newState, hook.memoizedState)) {
+      markWorkInProgressReceivedUpdate();
+    }
+
+    hook.memoizedState = newState;
+    // Don't persist the state accumulated from the render phase updates to
+    // the base state unless the queue is empty.
+    // TODO: Not sure if this is the desired semantics, but it's what we
+    // do for gDSFP. I can't remember why.
+    if (hook.baseQueue === null) {
+      hook.baseState = newState;
+    }
+
+    queue.lastRenderedState = newState;
+  }
+  return [newState, dispatch];
+}
+
 function mountState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -797,7 +847,7 @@ function mountState<S>(
   }
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
-    last: null,
+    pending: null,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
@@ -806,8 +856,7 @@ function mountState<S>(
     BasicStateAction<S>,
   > = (queue.dispatch = (dispatchAction.bind(
     null,
-    // Flow doesn't know this is non-null, but we do.
-    ((currentlyRenderingFiber: any): Fiber),
+    currentlyRenderingFiber,
     queue,
   ): any));
   return [hook.memoizedState, dispatch];
@@ -819,6 +868,12 @@ function updateState<S>(
   return updateReducer(basicStateReducer, (initialState: any));
 }
 
+function rerenderState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  return rerenderReducer(basicStateReducer, (initialState: any));
+}
+
 function pushEffect(tag, create, destroy, deps) {
   const effect: Effect = {
     tag,
@@ -828,8 +883,10 @@ function pushEffect(tag, create, destroy, deps) {
     // Circular
     next: (null: any),
   };
+  let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
   if (componentUpdateQueue === null) {
     componentUpdateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
     componentUpdateQueue.lastEffect = effect.next = effect;
   } else {
     const lastEffect = componentUpdateQueue.lastEffect;
@@ -845,7 +902,7 @@ function pushEffect(tag, create, destroy, deps) {
   return effect;
 }
 
-function mountRef<T>(initialValue: T): {current: T} {
+function mountRef<T>(initialValue: T): {|current: T|} {
   const hook = mountWorkInProgressHook();
   const ref = {current: initialValue};
   if (__DEV__) {
@@ -855,7 +912,7 @@ function mountRef<T>(initialValue: T): {current: T} {
   return ref;
 }
 
-function updateRef<T>(initialValue: T): {current: T} {
+function updateRef<T>(initialValue: T): {|current: T|} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
 }
@@ -863,7 +920,7 @@ function updateRef<T>(initialValue: T): {current: T} {
 function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
   const hook = mountWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
-  sideEffectTag |= fiberEffectTag;
+  currentlyRenderingFiber.effectTag |= fiberEffectTag;
   hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
 }
 
@@ -884,7 +941,8 @@ function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
     }
   }
 
-  sideEffectTag |= fiberEffectTag;
+  currentlyRenderingFiber.effectTag |= fiberEffectTag;
+
   hook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextDeps);
 }
 
@@ -892,6 +950,12 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
+  if (__DEV__) {
+    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+    if ('undefined' !== typeof jest) {
+      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
+    }
+  }
   return mountEffectImpl(
     UpdateEffect | PassiveEffect,
     UnmountPassive | MountPassive,
@@ -904,6 +968,12 @@ function updateEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
+  if (__DEV__) {
+    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+    if ('undefined' !== typeof jest) {
+      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
+    }
+  }
   return updateEffectImpl(
     UpdateEffect | PassiveEffect,
     UnmountPassive | MountPassive,
@@ -938,7 +1008,7 @@ function updateLayoutEffect(
 
 function imperativeHandleEffect<T>(
   create: () => T,
-  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
 ) {
   if (typeof ref === 'function') {
     const refCallback = ref;
@@ -950,12 +1020,13 @@ function imperativeHandleEffect<T>(
   } else if (ref !== null && ref !== undefined) {
     const refObject = ref;
     if (__DEV__) {
-      warning(
-        refObject.hasOwnProperty('current'),
-        'Expected useImperativeHandle() first argument to either be a ' +
-          'ref callback or React.createRef() object. Instead received: %s.',
-        'an object with keys {' + Object.keys(refObject).join(', ') + '}',
-      );
+      if (!refObject.hasOwnProperty('current')) {
+        console.error(
+          'Expected useImperativeHandle() first argument to either be a ' +
+            'ref callback or React.createRef() object. Instead received: %s.',
+          'an object with keys {' + Object.keys(refObject).join(', ') + '}',
+        );
+      }
     }
     const inst = create();
     refObject.current = inst;
@@ -966,17 +1037,18 @@ function imperativeHandleEffect<T>(
 }
 
 function mountImperativeHandle<T>(
-  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    warning(
-      typeof create === 'function',
-      'Expected useImperativeHandle() second argument to be a function ' +
-        'that creates a handle. Instead received: %s.',
-      create !== null ? typeof create : 'null',
-    );
+    if (typeof create !== 'function') {
+      console.error(
+        'Expected useImperativeHandle() second argument to be a function ' +
+          'that creates a handle. Instead received: %s.',
+        create !== null ? typeof create : 'null',
+      );
+    }
   }
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
@@ -992,17 +1064,18 @@ function mountImperativeHandle<T>(
 }
 
 function updateImperativeHandle<T>(
-  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    warning(
-      typeof create === 'function',
-      'Expected useImperativeHandle() second argument to be a function ' +
-        'that creates a handle. Instead received: %s.',
-      create !== null ? typeof create : 'null',
-    );
+    if (typeof create !== 'function') {
+      console.error(
+        'Expected useImperativeHandle() second argument to be a function ' +
+          'that creates a handle. Instead received: %s.',
+        create !== null ? typeof create : 'null',
+      );
+    }
   }
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
@@ -1080,26 +1153,160 @@ function updateMemo<T>(
   return nextValue;
 }
 
+function mountDeferredValue<T>(
+  value: T,
+  config: TimeoutConfig | void | null,
+): T {
+  const [prevValue, setValue] = mountState(value);
+  mountEffect(() => {
+    const previousConfig = ReactCurrentBatchConfig.suspense;
+    ReactCurrentBatchConfig.suspense = config === undefined ? null : config;
+    try {
+      setValue(value);
+    } finally {
+      ReactCurrentBatchConfig.suspense = previousConfig;
+    }
+  }, [value, config]);
+  return prevValue;
+}
+
+function updateDeferredValue<T>(
+  value: T,
+  config: TimeoutConfig | void | null,
+): T {
+  const [prevValue, setValue] = updateState(value);
+  updateEffect(() => {
+    const previousConfig = ReactCurrentBatchConfig.suspense;
+    ReactCurrentBatchConfig.suspense = config === undefined ? null : config;
+    try {
+      setValue(value);
+    } finally {
+      ReactCurrentBatchConfig.suspense = previousConfig;
+    }
+  }, [value, config]);
+  return prevValue;
+}
+
+function rerenderDeferredValue<T>(
+  value: T,
+  config: TimeoutConfig | void | null,
+): T {
+  const [prevValue, setValue] = rerenderState(value);
+  updateEffect(() => {
+    const previousConfig = ReactCurrentBatchConfig.suspense;
+    ReactCurrentBatchConfig.suspense = config === undefined ? null : config;
+    try {
+      setValue(value);
+    } finally {
+      ReactCurrentBatchConfig.suspense = previousConfig;
+    }
+  }, [value, config]);
+  return prevValue;
+}
+
+function startTransition(setPending, config, callback) {
+  const priorityLevel = getCurrentPriorityLevel();
+  runWithPriority(
+    priorityLevel < UserBlockingPriority ? UserBlockingPriority : priorityLevel,
+    () => {
+      setPending(true);
+    },
+  );
+  runWithPriority(
+    priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
+    () => {
+      const previousConfig = ReactCurrentBatchConfig.suspense;
+      ReactCurrentBatchConfig.suspense = config === undefined ? null : config;
+      try {
+        setPending(false);
+        callback();
+      } finally {
+        ReactCurrentBatchConfig.suspense = previousConfig;
+      }
+    },
+  );
+}
+
+function mountTransition(
+  config: SuspenseConfig | void | null,
+): [(() => void) => void, boolean] {
+  const [isPending, setPending] = mountState(false);
+  const start = mountCallback(startTransition.bind(null, setPending, config), [
+    setPending,
+    config,
+  ]);
+  return [start, isPending];
+}
+
+function updateTransition(
+  config: SuspenseConfig | void | null,
+): [(() => void) => void, boolean] {
+  const [isPending, setPending] = updateState(false);
+  const start = updateCallback(startTransition.bind(null, setPending, config), [
+    setPending,
+    config,
+  ]);
+  return [start, isPending];
+}
+
+function rerenderTransition(
+  config: SuspenseConfig | void | null,
+): [(() => void) => void, boolean] {
+  const [isPending, setPending] = rerenderState(false);
+  const start = updateCallback(startTransition.bind(null, setPending, config), [
+    setPending,
+    config,
+  ]);
+  return [start, isPending];
+}
+
 function dispatchAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
+  if (__DEV__) {
+    if (typeof arguments[3] === 'function') {
+      console.error(
+        "State updates from the useState() and useReducer() Hooks don't support the " +
+          'second callback argument. To execute a side effect after ' +
+          'rendering, declare it in the component body with useEffect().',
+      );
+    }
+  }
+
+  const currentTime = requestCurrentTimeForUpdate();
+  const suspenseConfig = requestCurrentSuspenseConfig();
+  const expirationTime = computeExpirationForFiber(
+    currentTime,
+    fiber,
+    suspenseConfig,
   );
 
+  const update: Update<S, A> = {
+    expirationTime,
+    suspenseConfig,
+    action,
+    eagerReducer: null,
+    eagerState: null,
+    next: (null: any),
+  };
+
   if (__DEV__) {
-    warning(
-      arguments.length <= 3,
-      "State updates from the useState() and useReducer() Hooks don't support the " +
-        'second callback argument. To execute a side effect after ' +
-        'rendering, declare it in the component body with useEffect().',
-    );
+    update.priority = getCurrentPriorityLevel();
   }
 
+  // Append the update to the end of the list.
+  const pending = queue.pending;
+  if (pending === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+  } else {
+    update.next = pending.next;
+    pending.next = update;
+  }
+  queue.pending = update;
+
   const alternate = fiber.alternate;
   if (
     fiber === currentlyRenderingFiber ||
@@ -1109,65 +1316,9 @@ function dispatchAction<S, A>(
     // queue -> linked list of updates. After this render pass, we'll restart
     // and apply the stashed updates on top of the work-in-progress hook.
     didScheduleRenderPhaseUpdate = true;
-    const update: Update<S, A> = {
-      expirationTime: renderExpirationTime,
-      suspenseConfig: null,
-      action,
-      eagerReducer: null,
-      eagerState: null,
-      next: null,
-    };
-    if (renderPhaseUpdates === null) {
-      renderPhaseUpdates = new Map();
-    }
-    const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
-    if (firstRenderPhaseUpdate === undefined) {
-      renderPhaseUpdates.set(queue, update);
-    } else {
-      // Append the update to the end of the list.
-      let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
-      while (lastRenderPhaseUpdate.next !== null) {
-        lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
-      }
-      lastRenderPhaseUpdate.next = update;
-    }
+    update.expirationTime = renderExpirationTime;
+    currentlyRenderingFiber.expirationTime = renderExpirationTime;
   } else {
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
-
-    const currentTime = requestCurrentTime();
-    const suspenseConfig = requestCurrentSuspenseConfig();
-    const expirationTime = computeExpirationForFiber(
-      currentTime,
-      fiber,
-      suspenseConfig,
-    );
-
-    const update: Update<S, A> = {
-      expirationTime,
-      suspenseConfig,
-      action,
-      eagerReducer: null,
-      eagerState: null,
-      next: null,
-    };
-
-    // Append the update to the end of the list.
-    const last = queue.last;
-    if (last === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      const first = last.next;
-      if (first !== null) {
-        // Still circular.
-        update.next = first;
-      }
-      last.next = update;
-    }
-    queue.last = update;
-
     if (
       fiber.expirationTime === NoWork &&
       (alternate === null || alternate.expirationTime === NoWork)
@@ -1231,6 +1382,9 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useRef: throwInvalidHookError,
   useState: throwInvalidHookError,
   useDebugValue: throwInvalidHookError,
+  useResponder: throwInvalidHookError,
+  useDeferredValue: throwInvalidHookError,
+  useTransition: throwInvalidHookError,
 };
 
 const HooksDispatcherOnMount: Dispatcher = {
@@ -1246,6 +1400,9 @@ const HooksDispatcherOnMount: Dispatcher = {
   useRef: mountRef,
   useState: mountState,
   useDebugValue: mountDebugValue,
+  useResponder: createDeprecatedResponderListener,
+  useDeferredValue: mountDeferredValue,
+  useTransition: mountTransition,
 };
 
 const HooksDispatcherOnUpdate: Dispatcher = {
@@ -1261,18 +1418,40 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useRef: updateRef,
   useState: updateState,
   useDebugValue: updateDebugValue,
+  useResponder: createDeprecatedResponderListener,
+  useDeferredValue: updateDeferredValue,
+  useTransition: updateTransition,
+};
+
+const HooksDispatcherOnRerender: Dispatcher = {
+  readContext,
+
+  useCallback: updateCallback,
+  useContext: readContext,
+  useEffect: updateEffect,
+  useImperativeHandle: updateImperativeHandle,
+  useLayoutEffect: updateLayoutEffect,
+  useMemo: updateMemo,
+  useReducer: rerenderReducer,
+  useRef: updateRef,
+  useState: rerenderState,
+  useDebugValue: updateDebugValue,
+  useResponder: createDeprecatedResponderListener,
+  useDeferredValue: rerenderDeferredValue,
+  useTransition: rerenderTransition,
 };
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
 let HooksDispatcherOnUpdateInDEV: Dispatcher | null = null;
+let HooksDispatcherOnRerenderInDEV: Dispatcher | null = null;
 let InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher | null = null;
+let InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher | null = null;
 
 if (__DEV__) {
   const warnInvalidContextAccess = () => {
-    warning(
-      false,
+    console.error(
       'Context can only be read while React is rendering. ' +
         'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
         'In function components, you can read it directly in the function body, but not ' +
@@ -1281,8 +1460,7 @@ if (__DEV__) {
   };
 
   const warnInvalidHookAccess = () => {
-    warning(
-      false,
+    console.error(
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
         'You can only call Hooks at the top level of your React function. ' +
         'For more information, see ' +
@@ -1322,7 +1500,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -1367,7 +1545,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {current: T} {
+    useRef<T>(initialValue: T): {|current: T|} {
       currentHookNameInDev = 'useRef';
       mountHookTypesDev();
       return mountRef(initialValue);
@@ -1390,6 +1568,26 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      mountHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      mountHookTypesDev();
+      return mountDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      mountHookTypesDev();
+      return mountTransition(config);
+    },
   };
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
@@ -1422,7 +1620,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -1464,7 +1662,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {current: T} {
+    useRef<T>(initialValue: T): {|current: T|} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return mountRef(initialValue);
@@ -1487,6 +1685,26 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      updateHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return mountDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return mountTransition(config);
+    },
   };
 
   HooksDispatcherOnUpdateInDEV = {
@@ -1519,7 +1737,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -1561,7 +1779,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {current: T} {
+    useRef<T>(initialValue: T): {|current: T|} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -1584,6 +1802,143 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDebugValue(value, formatterFn);
     },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      updateHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return updateDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return updateTransition(config);
+    },
+  };
+
+  HooksDispatcherOnRerenderInDEV = {
+    readContext<T>(
+      context: ReactContext<T>,
+      observedBits: void | number | boolean,
+    ): T {
+      return readContext(context, observedBits);
+    },
+
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(
+      context: ReactContext<T>,
+      observedBits: void | number | boolean,
+    ): T {
+      currentHookNameInDev = 'useContext';
+      updateHookTypesDev();
+      return readContext(context, observedBits);
+    },
+    useEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useEffect';
+      updateHookTypesDev();
+      return updateEffect(create, deps);
+    },
+    useImperativeHandle<T>(
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      create: () => T,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useImperativeHandle';
+      updateHookTypesDev();
+      return updateImperativeHandle(ref, create, deps);
+    },
+    useLayoutEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useLayoutEffect';
+      updateHookTypesDev();
+      return updateLayoutEffect(create, deps);
+    },
+    useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useMemo';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return rerenderReducer(reducer, initialArg, init);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useRef<T>(initialValue: T): {|current: T|} {
+      currentHookNameInDev = 'useRef';
+      updateHookTypesDev();
+      return updateRef(initialValue);
+    },
+    useState<S>(
+      initialState: (() => S) | S,
+    ): [S, Dispatch<BasicStateAction<S>>] {
+      currentHookNameInDev = 'useState';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return rerenderState(initialState);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      updateHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return rerenderDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return rerenderTransition(config);
+    },
   };
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
@@ -1620,7 +1975,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -1666,7 +2021,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {current: T} {
+    useRef<T>(initialValue: T): {|current: T|} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -1692,6 +2047,29 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountTransition(config);
+    },
   };
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
@@ -1728,7 +2106,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -1774,7 +2152,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {current: T} {
+    useRef<T>(initialValue: T): {|current: T|} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -1800,5 +2178,159 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDebugValue(value, formatterFn);
     },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateTransition(config);
+    },
+  };
+
+  InvalidNestedHooksDispatcherOnRerenderInDEV = {
+    readContext<T>(
+      context: ReactContext<T>,
+      observedBits: void | number | boolean,
+    ): T {
+      warnInvalidContextAccess();
+      return readContext(context, observedBits);
+    },
+
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(
+      context: ReactContext<T>,
+      observedBits: void | number | boolean,
+    ): T {
+      currentHookNameInDev = 'useContext';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return readContext(context, observedBits);
+    },
+    useEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useEffect';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEffect(create, deps);
+    },
+    useImperativeHandle<T>(
+      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      create: () => T,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useImperativeHandle';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateImperativeHandle(ref, create, deps);
+    },
+    useLayoutEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useLayoutEffect';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateLayoutEffect(create, deps);
+    },
+    useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useMemo';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return rerenderReducer(reducer, initialArg, init);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useRef<T>(initialValue: T): {|current: T|} {
+      currentHookNameInDev = 'useRef';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateRef(initialValue);
+    },
+    useState<S>(
+      initialState: (() => S) | S,
+    ): [S, Dispatch<BasicStateAction<S>>] {
+      currentHookNameInDev = 'useState';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return rerenderState(initialState);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useResponder<E, C>(
+      responder: ReactEventResponder<E, C>,
+      props,
+    ): ReactEventResponderListener<E, C> {
+      currentHookNameInDev = 'useResponder';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return createDeprecatedResponderListener(responder, props);
+    },
+    useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderDeferredValue(value, config);
+    },
+    useTransition(
+      config: SuspenseConfig | void | null,
+    ): [(() => void) => void, boolean] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderTransition(config);
+    },
   };
 }
diff --git a/packages/react-reconciler/src/ReactFiberHostConfig.js b/packages/react-reconciler/src/ReactFiberHostConfig.js
index 6b4d9f24fcdc7..49c9752540528 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfig.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfig.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 import invariant from 'shared/invariant';
 
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.js b/packages/react-reconciler/src/ReactFiberHostContext.js
index 18171896f004e..6b7eed3dd52db 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.js
@@ -13,12 +13,7 @@ import type {Container, HostContext} from './ReactFiberHostConfig';
 
 import invariant from 'shared/invariant';
 
-import {
-  getChildHostContext,
-  getRootHostContext,
-  getChildHostContextForEventComponent,
-  getChildHostContextForEventTarget,
-} from './ReactFiberHostConfig';
+import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 
 declare class NoContextT {}
@@ -97,40 +92,6 @@ function pushHostContext(fiber: Fiber): void {
   push(contextStackCursor, nextContext, fiber);
 }
 
-function pushHostContextForEventComponent(fiber: Fiber): void {
-  const context: HostContext = requiredContext(contextStackCursor.current);
-  const nextContext = getChildHostContextForEventComponent(context);
-
-  // Don't push this Fiber's context unless it's unique.
-  if (context === nextContext) {
-    return;
-  }
-
-  // Track the context and the Fiber that provided it.
-  // This enables us to pop only Fibers that provide unique contexts.
-  push(contextFiberStackCursor, fiber, fiber);
-  push(contextStackCursor, nextContext, fiber);
-}
-
-function pushHostContextForEventTarget(fiber: Fiber): void {
-  const context: HostContext = requiredContext(contextStackCursor.current);
-  const eventTargetType = fiber.type.type;
-  const nextContext = getChildHostContextForEventTarget(
-    context,
-    eventTargetType,
-  );
-
-  // Don't push this Fiber's context unless it's unique.
-  if (context === nextContext) {
-    return;
-  }
-
-  // Track the context and the Fiber that provided it.
-  // This enables us to pop only Fibers that provide unique contexts.
-  push(contextFiberStackCursor, fiber, fiber);
-  push(contextStackCursor, nextContext, fiber);
-}
-
 function popHostContext(fiber: Fiber): void {
   // Do not pop unless this Fiber provided the current context.
   // pushHostContext() only pushes Fibers that provide unique contexts.
@@ -149,6 +110,4 @@ export {
   popHostContext,
   pushHostContainer,
   pushHostContext,
-  pushHostContextForEventComponent,
-  pushHostContextForEventTarget,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
index 56b6365d3d7b3..ec280e96567c7 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -10,16 +10,24 @@
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
+import type {Instance} from './ReactFiberHostConfig';
+import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {
   flushSync,
   scheduleWork,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop';
+import {updateContainer, syncUpdates} from './ReactFiberReconciler';
+import {emptyContextObject} from './ReactFiberContext';
 import {Sync} from './ReactFiberExpirationTime';
 import {
+  ClassComponent,
   FunctionComponent,
   ForwardRef,
+  HostComponent,
+  HostPortal,
+  HostRoot,
   MemoComponent,
   SimpleMemoComponent,
 } from 'shared/ReactWorkTags';
@@ -33,23 +41,40 @@ export type Family = {|
   current: any,
 |};
 
-export type HotUpdate = {|
-  familiesByType: WeakMap<any, Family>,
+export type RefreshUpdate = {|
   staleFamilies: Set<Family>,
   updatedFamilies: Set<Family>,
 |};
 
-let familiesByType: WeakMap<any, Family> | null = null;
+// Resolves type to a family.
+type RefreshHandler = any => Family | void;
+
+// Used by React Refresh runtime through DevTools Global Hook.
+export type SetRefreshHandler = (handler: RefreshHandler | null) => void;
+export type ScheduleRefresh = (root: FiberRoot, update: RefreshUpdate) => void;
+export type ScheduleRoot = (root: FiberRoot, element: ReactNodeList) => void;
+export type FindHostInstancesForRefresh = (
+  root: FiberRoot,
+  families: Array<Family>,
+) => Set<Instance>;
+
+let resolveFamily: RefreshHandler | null = null;
 // $FlowFixMe Flow gets confused by a WeakSet feature check below.
 let failedBoundaries: WeakSet<Fiber> | null = null;
 
+export let setRefreshHandler = (handler: RefreshHandler | null): void => {
+  if (__DEV__) {
+    resolveFamily = handler;
+  }
+};
+
 export function resolveFunctionForHotReloading(type: any): any {
   if (__DEV__) {
-    if (familiesByType === null) {
+    if (resolveFamily === null) {
       // Hot reloading is disabled.
       return type;
     }
-    let family = familiesByType.get(type);
+    let family = resolveFamily(type);
     if (family === undefined) {
       return type;
     }
@@ -60,13 +85,18 @@ export function resolveFunctionForHotReloading(type: any): any {
   }
 }
 
+export function resolveClassForHotReloading(type: any): any {
+  // No implementation differences.
+  return resolveFunctionForHotReloading(type);
+}
+
 export function resolveForwardRefForHotReloading(type: any): any {
   if (__DEV__) {
-    if (familiesByType === null) {
+    if (resolveFamily === null) {
       // Hot reloading is disabled.
       return type;
     }
-    let family = familiesByType.get(type);
+    let family = resolveFamily(type);
     if (family === undefined) {
       // Check if we're dealing with a real forwardRef. Don't want to crash early.
       if (
@@ -103,7 +133,7 @@ export function isCompatibleFamilyForHotReloading(
   element: ReactElement,
 ): boolean {
   if (__DEV__) {
-    if (familiesByType === null) {
+    if (resolveFamily === null) {
       // Hot reloading is disabled.
       return false;
     }
@@ -120,6 +150,12 @@ export function isCompatibleFamilyForHotReloading(
         : null;
 
     switch (fiber.tag) {
+      case ClassComponent: {
+        if (typeof nextType === 'function') {
+          needsCompareFamilies = true;
+        }
+        break;
+      }
       case FunctionComponent: {
         if (typeof nextType === 'function') {
           needsCompareFamilies = true;
@@ -162,11 +198,8 @@ export function isCompatibleFamilyForHotReloading(
       // If we unwrapped and compared the inner types for wrappers instead,
       // then we would risk falsely saying two separate memo(Foo)
       // calls are equivalent because they wrap the same Foo function.
-      const prevFamily = familiesByType.get(prevType);
-      if (
-        prevFamily !== undefined &&
-        prevFamily === familiesByType.get(nextType)
-      ) {
+      const prevFamily = resolveFamily(prevType);
+      if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) {
         return true;
       }
     }
@@ -178,8 +211,8 @@ export function isCompatibleFamilyForHotReloading(
 
 export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
   if (__DEV__) {
-    if (familiesByType === null) {
-      // Not hot reloading.
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
       return;
     }
     if (typeof WeakSet !== 'function') {
@@ -192,12 +225,16 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
   }
 }
 
-export function scheduleHotUpdate(root: FiberRoot, hotUpdate: HotUpdate): void {
+export let scheduleRefresh: ScheduleRefresh = (
+  root: FiberRoot,
+  update: RefreshUpdate,
+): void => {
   if (__DEV__) {
-    // TODO: warn if its identity changes over time?
-    familiesByType = hotUpdate.familiesByType;
-
-    const {staleFamilies, updatedFamilies} = hotUpdate;
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return;
+    }
+    const {staleFamilies, updatedFamilies} = update;
     flushPassiveEffects();
     flushSync(() => {
       scheduleFibersWithFamiliesRecursively(
@@ -207,7 +244,25 @@ export function scheduleHotUpdate(root: FiberRoot, hotUpdate: HotUpdate): void {
       );
     });
   }
-}
+};
+
+export let scheduleRoot: ScheduleRoot = (
+  root: FiberRoot,
+  element: ReactNodeList,
+): void => {
+  if (__DEV__) {
+    if (root.context !== emptyContextObject) {
+      // Super edge case: root has a legacy _renderSubtree context
+      // but we don't know the parentComponent so we can't pass it.
+      // Just ignore. We'll delete this with _renderSubtree code path later.
+      return;
+    }
+    flushPassiveEffects();
+    syncUpdates(() => {
+      updateContainer(element, root, null, null);
+    });
+  }
+};
 
 function scheduleFibersWithFamiliesRecursively(
   fiber: Fiber,
@@ -221,6 +276,7 @@ function scheduleFibersWithFamiliesRecursively(
     switch (tag) {
       case FunctionComponent:
       case SimpleMemoComponent:
+      case ClassComponent:
         candidateType = type;
         break;
       case ForwardRef:
@@ -230,19 +286,23 @@ function scheduleFibersWithFamiliesRecursively(
         break;
     }
 
-    if (familiesByType === null) {
-      throw new Error('Expected familiesByType to be set during hot reload.');
+    if (resolveFamily === null) {
+      throw new Error('Expected resolveFamily to be set during hot reload.');
     }
 
     let needsRender = false;
     let needsRemount = false;
     if (candidateType !== null) {
-      const family = familiesByType.get(candidateType);
+      const family = resolveFamily(candidateType);
       if (family !== undefined) {
         if (staleFamilies.has(family)) {
           needsRemount = true;
         } else if (updatedFamilies.has(family)) {
-          needsRender = true;
+          if (tag === ClassComponent) {
+            needsRemount = true;
+          } else {
+            needsRender = true;
+          }
         }
       }
     }
@@ -277,3 +337,146 @@ function scheduleFibersWithFamiliesRecursively(
     }
   }
 }
+
+export let findHostInstancesForRefresh: FindHostInstancesForRefresh = (
+  root: FiberRoot,
+  families: Array<Family>,
+): Set<Instance> => {
+  if (__DEV__) {
+    const hostInstances = new Set();
+    const types = new Set(families.map(family => family.current));
+    findHostInstancesForMatchingFibersRecursively(
+      root.current,
+      types,
+      hostInstances,
+    );
+    return hostInstances;
+  } else {
+    throw new Error(
+      'Did not expect findHostInstancesForRefresh to be called in production.',
+    );
+  }
+};
+
+function findHostInstancesForMatchingFibersRecursively(
+  fiber: Fiber,
+  types: Set<any>,
+  hostInstances: Set<Instance>,
+) {
+  if (__DEV__) {
+    const {child, sibling, tag, type} = fiber;
+
+    let candidateType = null;
+    switch (tag) {
+      case FunctionComponent:
+      case SimpleMemoComponent:
+      case ClassComponent:
+        candidateType = type;
+        break;
+      case ForwardRef:
+        candidateType = type.render;
+        break;
+      default:
+        break;
+    }
+
+    let didMatch = false;
+    if (candidateType !== null) {
+      if (types.has(candidateType)) {
+        didMatch = true;
+      }
+    }
+
+    if (didMatch) {
+      // We have a match. This only drills down to the closest host components.
+      // There's no need to search deeper because for the purpose of giving
+      // visual feedback, "flashing" outermost parent rectangles is sufficient.
+      findHostInstancesForFiberShallowly(fiber, hostInstances);
+    } else {
+      // If there's no match, maybe there will be one further down in the child tree.
+      if (child !== null) {
+        findHostInstancesForMatchingFibersRecursively(
+          child,
+          types,
+          hostInstances,
+        );
+      }
+    }
+
+    if (sibling !== null) {
+      findHostInstancesForMatchingFibersRecursively(
+        sibling,
+        types,
+        hostInstances,
+      );
+    }
+  }
+}
+
+function findHostInstancesForFiberShallowly(
+  fiber: Fiber,
+  hostInstances: Set<Instance>,
+): void {
+  if (__DEV__) {
+    const foundHostInstances = findChildHostInstancesForFiberShallowly(
+      fiber,
+      hostInstances,
+    );
+    if (foundHostInstances) {
+      return;
+    }
+    // If we didn't find any host children, fallback to closest host parent.
+    let node = fiber;
+    while (true) {
+      switch (node.tag) {
+        case HostComponent:
+          hostInstances.add(node.stateNode);
+          return;
+        case HostPortal:
+          hostInstances.add(node.stateNode.containerInfo);
+          return;
+        case HostRoot:
+          hostInstances.add(node.stateNode.containerInfo);
+          return;
+      }
+      if (node.return === null) {
+        throw new Error('Expected to reach root first.');
+      }
+      node = node.return;
+    }
+  }
+}
+
+function findChildHostInstancesForFiberShallowly(
+  fiber: Fiber,
+  hostInstances: Set<Instance>,
+): boolean {
+  if (__DEV__) {
+    let node: Fiber = fiber;
+    let foundHostInstances = false;
+    while (true) {
+      if (node.tag === HostComponent) {
+        // We got a match.
+        foundHostInstances = true;
+        hostInstances.add(node.stateNode);
+        // There may still be more, so keep searching.
+      } else if (node.child !== null) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === fiber) {
+        return foundHostInstances;
+      }
+      while (node.sibling === null) {
+        if (node.return === null || node.return === fiber) {
+          return foundHostInstances;
+        }
+        node = node.return;
+      }
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 07647d523c4e3..0cc2c41ff6bed 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -16,18 +16,21 @@ import type {
   Container,
   HostContext,
 } from './ReactFiberHostConfig';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
 
 import {
   HostComponent,
   HostText,
   HostRoot,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
 } from 'shared/ReactWorkTags';
-import {Deletion, Placement} from 'shared/ReactSideEffectTags';
+import {Deletion, Placement, Hydrating} from 'shared/ReactSideEffectTags';
 import invariant from 'shared/invariant';
 
-import {createFiberFromHostInstanceForDeletion} from './ReactFiber';
+import {
+  createFiberFromHostInstanceForDeletion,
+  createFiberFromDehydratedFragment,
+} from './ReactFiber';
 import {
   shouldSetTextContent,
   supportsHydration,
@@ -38,6 +41,7 @@ import {
   getFirstHydratableChild,
   hydrateInstance,
   hydrateTextInstance,
+  hydrateSuspenseInstance,
   getNextHydratableInstanceAfterSuspenseInstance,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
@@ -51,6 +55,7 @@ import {
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {Never} from './ReactFiberExpirationTime';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -58,6 +63,16 @@ let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
 
+function warnIfHydrating() {
+  if (__DEV__) {
+    if (isHydrating) {
+      console.error(
+        'We should not be hydrating here. This is a bug in React. Please file a bug.',
+      );
+    }
+  }
+}
+
 function enterHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
@@ -72,12 +87,11 @@ function enterHydrationState(fiber: Fiber): boolean {
 
 function reenterHydrationStateFromDehydratedSuspenseInstance(
   fiber: Fiber,
+  suspenseInstance: SuspenseInstance,
 ): boolean {
   if (!supportsHydration) {
     return false;
   }
-
-  const suspenseInstance = fiber.stateNode;
   nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
   popToNextHostParent(fiber);
   isHydrating = true;
@@ -126,7 +140,7 @@ function deleteHydratableInstance(
 }
 
 function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
-  fiber.effectTag |= Placement;
+  fiber.effectTag = (fiber.effectTag & ~Hydrating) | Placement;
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot: {
@@ -211,11 +225,24 @@ function tryHydrate(fiber, nextInstance) {
     }
     case SuspenseComponent: {
       if (enableSuspenseServerRenderer) {
-        const suspenseInstance = canHydrateSuspenseInstance(nextInstance);
+        const suspenseInstance: null | SuspenseInstance = canHydrateSuspenseInstance(
+          nextInstance,
+        );
         if (suspenseInstance !== null) {
-          // Downgrade the tag to a dehydrated component until we've hydrated it.
-          fiber.tag = DehydratedSuspenseComponent;
-          fiber.stateNode = (suspenseInstance: SuspenseInstance);
+          const suspenseState: SuspenseState = {
+            dehydrated: suspenseInstance,
+            retryTime: Never,
+          };
+          fiber.memoizedState = suspenseState;
+          // Store the dehydrated fragment as a child fiber.
+          // This simplifies the code for getHostSibling and deleting nodes,
+          // since it doesn't have to consider all Suspense boundaries and
+          // check if they're dehydrated ones or not.
+          const dehydratedFragment = createFiberFromDehydratedFragment(
+            suspenseInstance,
+          );
+          dehydratedFragment.return = fiber;
+          fiber.child = dehydratedFragment;
           return true;
         }
       }
@@ -344,23 +371,45 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   return shouldUpdate;
 }
 
-function skipPastDehydratedSuspenseInstance(fiber: Fiber): void {
+function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
     invariant(
       false,
-      'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
+      'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
   }
-  let suspenseInstance = fiber.stateNode;
+
+  let suspenseState: null | SuspenseState = fiber.memoizedState;
+  let suspenseInstance: null | SuspenseInstance =
+    suspenseState !== null ? suspenseState.dehydrated : null;
   invariant(
     suspenseInstance,
     'Expected to have a hydrated suspense instance. ' +
       'This error is likely caused by a bug in React. Please file an issue.',
   );
-  nextHydratableInstance = getNextHydratableInstanceAfterSuspenseInstance(
+  hydrateSuspenseInstance(suspenseInstance, fiber);
+}
+
+function skipPastDehydratedSuspenseInstance(
+  fiber: Fiber,
+): null | HydratableInstance {
+  if (!supportsHydration) {
+    invariant(
+      false,
+      'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+  let suspenseState: null | SuspenseState = fiber.memoizedState;
+  let suspenseInstance: null | SuspenseInstance =
+    suspenseState !== null ? suspenseState.dehydrated : null;
+  invariant(
     suspenseInstance,
+    'Expected to have a hydrated suspense instance. ' +
+      'This error is likely caused by a bug in React. Please file an issue.',
   );
+  return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }
 
 function popToNextHostParent(fiber: Fiber): void {
@@ -369,7 +418,7 @@ function popToNextHostParent(fiber: Fiber): void {
     parent !== null &&
     parent.tag !== HostComponent &&
     parent.tag !== HostRoot &&
-    parent.tag !== DehydratedSuspenseComponent
+    parent.tag !== SuspenseComponent
   ) {
     parent = parent.return;
   }
@@ -415,9 +464,13 @@ function popHydrationState(fiber: Fiber): boolean {
   }
 
   popToNextHostParent(fiber);
-  nextHydratableInstance = hydrationParentFiber
-    ? getNextHydratableSibling(fiber.stateNode)
-    : null;
+  if (fiber.tag === SuspenseComponent) {
+    nextHydratableInstance = skipPastDehydratedSuspenseInstance(fiber);
+  } else {
+    nextHydratableInstance = hydrationParentFiber
+      ? getNextHydratableSibling(fiber.stateNode)
+      : null;
+  }
   return true;
 }
 
@@ -431,13 +484,19 @@ function resetHydrationState(): void {
   isHydrating = false;
 }
 
+function getIsHydrating(): boolean {
+  return isHydrating;
+}
+
 export {
+  warnIfHydrating,
   enterHydrationState,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
   tryToClaimNextHydratableInstance,
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
-  skipPastDehydratedSuspenseInstance,
+  prepareToHydrateHostSuspenseInstance,
   popHydrationState,
+  getIsHydrating,
 };
diff --git a/packages/react-reconciler/src/ReactFiberInstrumentation.js b/packages/react-reconciler/src/ReactFiberInstrumentation.js
deleted file mode 100644
index 3084de928c969..0000000000000
--- a/packages/react-reconciler/src/ReactFiberInstrumentation.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-// This lets us hook into Fiber to debug what it's doing.
-// See https://github.com/facebook/react/pull/8033.
-// This is not part of the public API, not even for React DevTools.
-// You may only inject a debugTool if you work on React Fiber itself.
-const ReactFiberInstrumentation = {
-  debugTool: null,
-};
-
-module.exports = ReactFiberInstrumentation;
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/packages/react-reconciler/src/ReactFiberLazyComponent.js
index 1db5ecd35cab2..290458eb96928 100644
--- a/packages/react-reconciler/src/ReactFiberLazyComponent.js
+++ b/packages/react-reconciler/src/ReactFiberLazyComponent.js
@@ -7,10 +7,9 @@
  * @flow
  */
 
-import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';
+import type {LazyComponent} from 'shared/ReactLazyComponent';
 
-import {Resolved, Rejected, Pending} from 'shared/ReactLazyComponent';
-import warning from 'shared/warning';
+import {Resolved, initializeLazyComponentType} from 'shared/ReactLazyComponent';
 
 export function resolveDefaultProps(Component: any, baseProps: Object): Object {
   if (Component && Component.defaultProps) {
@@ -28,60 +27,9 @@ export function resolveDefaultProps(Component: any, baseProps: Object): Object {
 }
 
 export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
-  const status = lazyComponent._status;
-  const result = lazyComponent._result;
-  switch (status) {
-    case Resolved: {
-      const Component: T = result;
-      return Component;
-    }
-    case Rejected: {
-      const error: mixed = result;
-      throw error;
-    }
-    case Pending: {
-      const thenable: Thenable<T, mixed> = result;
-      throw thenable;
-    }
-    default: {
-      lazyComponent._status = Pending;
-      const ctor = lazyComponent._ctor;
-      const thenable = ctor();
-      thenable.then(
-        moduleObject => {
-          if (lazyComponent._status === Pending) {
-            const defaultExport = moduleObject.default;
-            if (__DEV__) {
-              if (defaultExport === undefined) {
-                warning(
-                  false,
-                  'lazy: Expected the result of a dynamic import() call. ' +
-                    'Instead received: %s\n\nYour code should look like: \n  ' +
-                    "const MyComponent = lazy(() => import('./MyComponent'))",
-                  moduleObject,
-                );
-              }
-            }
-            lazyComponent._status = Resolved;
-            lazyComponent._result = defaultExport;
-          }
-        },
-        error => {
-          if (lazyComponent._status === Pending) {
-            lazyComponent._status = Rejected;
-            lazyComponent._result = error;
-          }
-        },
-      );
-      // Handle synchronous thenables.
-      switch (lazyComponent._status) {
-        case Resolved:
-          return lazyComponent._result;
-        case Rejected:
-          throw lazyComponent._result;
-      }
-      lazyComponent._result = thenable;
-      throw thenable;
-    }
+  initializeLazyComponentType(lazyComponent);
+  if (lazyComponent._status !== Resolved) {
+    throw lazyComponent._result;
   }
+  return lazyComponent._result;
 }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.js b/packages/react-reconciler/src/ReactFiberNewContext.js
index c0b10fabbd5fb..510c1eb674ad1 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.js
@@ -12,29 +12,23 @@ import type {Fiber} from './ReactFiber';
 import type {StackCursor} from './ReactFiberStack';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 
-export type ContextDependencyList = {
-  first: ContextDependency<mixed>,
-  expirationTime: ExpirationTime,
-};
-
-type ContextDependency<T> = {
+export type ContextDependency<T> = {
   context: ReactContext<T>,
   observedBits: number,
   next: ContextDependency<mixed> | null,
+  ...
 };
 
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 import MAX_SIGNED_31_BIT_INT from './maxSigned31BitInt';
 import {
   ContextProvider,
   ClassComponent,
-  DehydratedSuspenseComponent,
+  DehydratedFragment,
 } from 'shared/ReactWorkTags';
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 import is from 'shared/objectIs';
 import {
   createUpdate,
@@ -90,13 +84,16 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
 
     context._currentValue = nextValue;
     if (__DEV__) {
-      warningWithoutStack(
-        context._currentRenderer === undefined ||
-          context._currentRenderer === null ||
-          context._currentRenderer === rendererSigil,
-        'Detected multiple renderers concurrently rendering the ' +
-          'same context provider. This is currently unsupported.',
-      );
+      if (
+        context._currentRenderer !== undefined &&
+        context._currentRenderer !== null &&
+        context._currentRenderer !== rendererSigil
+      ) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same context provider. This is currently unsupported.',
+        );
+      }
       context._currentRenderer = rendererSigil;
     }
   } else {
@@ -104,13 +101,16 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
 
     context._currentValue2 = nextValue;
     if (__DEV__) {
-      warningWithoutStack(
-        context._currentRenderer2 === undefined ||
-          context._currentRenderer2 === null ||
-          context._currentRenderer2 === rendererSigil,
-        'Detected multiple renderers concurrently rendering the ' +
-          'same context provider. This is currently unsupported.',
-      );
+      if (
+        context._currentRenderer2 !== undefined &&
+        context._currentRenderer2 !== null &&
+        context._currentRenderer2 !== rendererSigil
+      ) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same context provider. This is currently unsupported.',
+        );
+      }
       context._currentRenderer2 = rendererSigil;
     }
   }
@@ -144,18 +144,19 @@ export function calculateChangedBits<T>(
         : MAX_SIGNED_31_BIT_INT;
 
     if (__DEV__) {
-      warning(
-        (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,
-        'calculateChangedBits: Expected the return value to be a ' +
-          '31-bit integer. Instead received: %s',
-        changedBits,
-      );
+      if ((changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits) {
+        console.error(
+          'calculateChangedBits: Expected the return value to be a ' +
+            '31-bit integer. Instead received: %s',
+          changedBits,
+        );
+      }
     }
     return changedBits | 0;
   }
 }
 
-function scheduleWorkOnParentPath(
+export function scheduleWorkOnParentPath(
   parent: Fiber | null,
   renderExpirationTime: ExpirationTime,
 ) {
@@ -201,11 +202,11 @@ export function propagateContextChange(
     let nextFiber;
 
     // Visit this fiber.
-    const list = fiber.contextDependencies;
+    const list = fiber.dependencies;
     if (list !== null) {
       nextFiber = fiber.child;
 
-      let dependency = list.first;
+      let dependency = list.firstContext;
       while (dependency !== null) {
         // Check if the context matches.
         if (
@@ -254,15 +255,20 @@ export function propagateContextChange(
       nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
     } else if (
       enableSuspenseServerRenderer &&
-      fiber.tag === DehydratedSuspenseComponent
+      fiber.tag === DehydratedFragment
     ) {
-      // If a dehydrated suspense component is in this subtree, we don't know
+      // If a dehydrated suspense bounudary is in this subtree, we don't know
       // if it will have any context consumers in it. The best we can do is
-      // mark it as having updates on its children.
-      if (fiber.expirationTime < renderExpirationTime) {
-        fiber.expirationTime = renderExpirationTime;
+      // mark it as having updates.
+      let parentSuspense = fiber.return;
+      invariant(
+        parentSuspense !== null,
+        'We just came from a parent so we must have had a parent. This is a bug in React.',
+      );
+      if (parentSuspense.expirationTime < renderExpirationTime) {
+        parentSuspense.expirationTime = renderExpirationTime;
       }
-      let alternate = fiber.alternate;
+      let alternate = parentSuspense.alternate;
       if (
         alternate !== null &&
         alternate.expirationTime < renderExpirationTime
@@ -273,7 +279,7 @@ export function propagateContextChange(
       // because we want to schedule this fiber as having work
       // on its children. We'll use the childExpirationTime on
       // this fiber to indicate that a context has changed.
-      scheduleWorkOnParentPath(fiber, renderExpirationTime);
+      scheduleWorkOnParentPath(parentSuspense, renderExpirationTime);
       nextFiber = fiber.sibling;
     } else {
       // Traverse down.
@@ -315,17 +321,18 @@ export function prepareToReadContext(
   lastContextDependency = null;
   lastContextWithAllBitsObserved = null;
 
-  const currentDependencies = workInProgress.contextDependencies;
-  if (
-    currentDependencies !== null &&
-    currentDependencies.expirationTime >= renderExpirationTime
-  ) {
-    // Context list has a pending update. Mark that this fiber performed work.
-    markWorkInProgressReceivedUpdate();
+  const dependencies = workInProgress.dependencies;
+  if (dependencies !== null) {
+    const firstContext = dependencies.firstContext;
+    if (firstContext !== null) {
+      if (dependencies.expirationTime >= renderExpirationTime) {
+        // Context list has a pending update. Mark that this fiber performed work.
+        markWorkInProgressReceivedUpdate();
+      }
+      // Reset the work-in-progress list
+      dependencies.firstContext = null;
+    }
   }
-
-  // Reset the work-in-progress list
-  workInProgress.contextDependencies = null;
 }
 
 export function readContext<T>(
@@ -335,13 +342,14 @@ export function readContext<T>(
   if (__DEV__) {
     // This warning would fire if you read context inside a Hook like useMemo.
     // Unlike the class check below, it's not enforced in production for perf.
-    warning(
-      !isDisallowedContextReadInDEV,
-      'Context can only be read while React is rendering. ' +
-        'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-        'In function components, you can read it directly in the function body, but not ' +
-        'inside Hooks like useReducer() or useMemo().',
-    );
+    if (isDisallowedContextReadInDEV) {
+      console.error(
+        'Context can only be read while React is rendering. ' +
+          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+          'In function components, you can read it directly in the function body, but not ' +
+          'inside Hooks like useReducer() or useMemo().',
+      );
+    }
   }
 
   if (lastContextWithAllBitsObserved === context) {
@@ -378,9 +386,10 @@ export function readContext<T>(
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
-      currentlyRenderingFiber.contextDependencies = {
-        first: contextItem,
+      currentlyRenderingFiber.dependencies = {
         expirationTime: NoWork,
+        firstContext: contextItem,
+        responders: null,
       };
     } else {
       // Append a new context item.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index de84dd7b67244..fb46524645aee 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -16,19 +16,27 @@ import type {
   Container,
   PublicInstance,
 } from './ReactFiberHostConfig';
+import {FundamentalComponent} from 'shared/ReactWorkTags';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
-import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
+import type {
+  SuspenseHydrationCallbacks,
+  SuspenseState,
+} from './ReactFiberSuspenseComponent';
 
 import {
   findCurrentHostFiber,
   findCurrentHostFiberWithNoPortals,
 } from 'react-reconciler/reflection';
 import {get as getInstance} from 'shared/ReactInstanceMap';
-import {HostComponent, ClassComponent} from 'shared/ReactWorkTags';
+import {
+  HostComponent,
+  ClassComponent,
+  HostRoot,
+  SuspenseComponent,
+} from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -39,10 +47,9 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext';
 import {createFiberRoot} from './ReactFiberRoot';
-import {injectInternals} from './ReactFiberDevToolsHook';
+import {injectInternals, onScheduleRoot} from './ReactFiberDevToolsHook';
 import {
-  computeUniqueAsyncExpiration,
-  requestCurrentTime,
+  requestCurrentTimeForUpdate,
   computeExpirationForFiber,
   scheduleWork,
   flushRoot,
@@ -57,20 +64,28 @@ import {
   flushDiscreteUpdates,
   flushPassiveEffects,
   warnIfNotScopedWithMatchingAct,
-  ReactActingRendererSigil,
+  warnIfUnmockedScheduler,
+  IsThisRendererActing,
 } from './ReactFiberWorkLoop';
 import {createUpdate, enqueueUpdate} from './ReactUpdateQueue';
-import ReactFiberInstrumentation from './ReactFiberInstrumentation';
 import {
   getStackByFiberInDevAndProd,
   phase as ReactCurrentFiberPhase,
   current as ReactCurrentFiberCurrent,
 } from './ReactCurrentFiber';
 import {StrictMode} from './ReactTypeOfMode';
-import {Sync} from './ReactFiberExpirationTime';
-import {revertPassiveEffectsChange} from 'shared/ReactFeatureFlags';
+import {
+  Sync,
+  computeInteractiveExpiration,
+  computeContinuousHydrationExpiration,
+} from './ReactFiberExpirationTime';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
-import {scheduleHotUpdate} from './ReactFiberHotReloading';
+import {
+  scheduleRefresh,
+  scheduleRoot,
+  setRefreshHandler,
+  findHostInstancesForRefresh,
+} from './ReactFiberHotReloading';
 
 type OpaqueRoot = FiberRoot;
 
@@ -119,95 +134,6 @@ function getContextForSubtree(
   return parentContext;
 }
 
-function scheduleRootUpdate(
-  current: Fiber,
-  element: ReactNodeList,
-  expirationTime: ExpirationTime,
-  suspenseConfig: null | SuspenseConfig,
-  callback: ?Function,
-) {
-  if (__DEV__) {
-    if (
-      ReactCurrentFiberPhase === 'render' &&
-      ReactCurrentFiberCurrent !== null &&
-      !didWarnAboutNestedUpdates
-    ) {
-      didWarnAboutNestedUpdates = true;
-      warningWithoutStack(
-        false,
-        'Render methods should be a pure function of props and state; ' +
-          'triggering nested component updates from render is not allowed. ' +
-          'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
-          'Check the render method of %s.',
-        getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
-      );
-    }
-  }
-
-  const update = createUpdate(expirationTime, suspenseConfig);
-  // Caution: React DevTools currently depends on this property
-  // being called "element".
-  update.payload = {element};
-
-  callback = callback === undefined ? null : callback;
-  if (callback !== null) {
-    warningWithoutStack(
-      typeof callback === 'function',
-      'render(...): Expected the last optional `callback` argument to be a ' +
-        'function. Instead received: %s.',
-      callback,
-    );
-    update.callback = callback;
-  }
-
-  if (revertPassiveEffectsChange) {
-    flushPassiveEffects();
-  }
-  enqueueUpdate(current, update);
-  scheduleWork(current, expirationTime);
-
-  return expirationTime;
-}
-
-export function updateContainerAtExpirationTime(
-  element: ReactNodeList,
-  container: OpaqueRoot,
-  parentComponent: ?React$Component<any, any>,
-  expirationTime: ExpirationTime,
-  suspenseConfig: null | SuspenseConfig,
-  callback: ?Function,
-) {
-  // TODO: If this is a nested container, this won't be the root.
-  const current = container.current;
-
-  if (__DEV__) {
-    if (ReactFiberInstrumentation.debugTool) {
-      if (current.alternate === null) {
-        ReactFiberInstrumentation.debugTool.onMountContainer(container);
-      } else if (element === null) {
-        ReactFiberInstrumentation.debugTool.onUnmountContainer(container);
-      } else {
-        ReactFiberInstrumentation.debugTool.onUpdateContainer(container);
-      }
-    }
-  }
-
-  const context = getContextForSubtree(parentComponent);
-  if (container.context === null) {
-    container.context = context;
-  } else {
-    container.pendingContext = context;
-  }
-
-  return scheduleRootUpdate(
-    current,
-    element,
-    expirationTime,
-    suspenseConfig,
-    callback,
-  );
-}
-
 function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
@@ -254,28 +180,24 @@ function findHostInstanceWithWarning(
       if (!didWarnAboutFindNodeInStrictMode[componentName]) {
         didWarnAboutFindNodeInStrictMode[componentName] = true;
         if (fiber.mode & StrictMode) {
-          warningWithoutStack(
-            false,
+          console.error(
             '%s is deprecated in StrictMode. ' +
               '%s was passed an instance of %s which is inside StrictMode. ' +
-              'Instead, add a ref directly to the element you want to reference.' +
-              '\n%s' +
-              '\n\nLearn more about using refs safely here:' +
-              '\nhttps://fb.me/react-strict-mode-find-node',
+              'Instead, add a ref directly to the element you want to reference. ' +
+              'Learn more about using refs safely here: ' +
+              'https://fb.me/react-strict-mode-find-node%s',
             methodName,
             methodName,
             componentName,
             getStackByFiberInDevAndProd(hostFiber),
           );
         } else {
-          warningWithoutStack(
-            false,
+          console.error(
             '%s is deprecated in StrictMode. ' +
               '%s was passed an instance of %s which renders StrictMode children. ' +
-              'Instead, add a ref directly to the element you want to reference.' +
-              '\n%s' +
-              '\n\nLearn more about using refs safely here:' +
-              '\nhttps://fb.me/react-strict-mode-find-node',
+              'Instead, add a ref directly to the element you want to reference. ' +
+              'Learn more about using refs safely here: ' +
+              'https://fb.me/react-strict-mode-find-node%s',
             methodName,
             methodName,
             componentName,
@@ -293,8 +215,9 @@ export function createContainer(
   containerInfo: Container,
   tag: RootTag,
   hydrate: boolean,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
 ): OpaqueRoot {
-  return createFiberRoot(containerInfo, tag, hydrate);
+  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
 }
 
 export function updateContainer(
@@ -303,11 +226,15 @@ export function updateContainer(
   parentComponent: ?React$Component<any, any>,
   callback: ?Function,
 ): ExpirationTime {
+  if (__DEV__) {
+    onScheduleRoot(container, element);
+  }
   const current = container.current;
-  const currentTime = requestCurrentTime();
+  const currentTime = requestCurrentTimeForUpdate();
   if (__DEV__) {
     // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
     if ('undefined' !== typeof jest) {
+      warnIfUnmockedScheduler(current);
       warnIfNotScopedWithMatchingAct(current);
     }
   }
@@ -317,19 +244,57 @@ export function updateContainer(
     current,
     suspenseConfig,
   );
-  return updateContainerAtExpirationTime(
-    element,
-    container,
-    parentComponent,
-    expirationTime,
-    suspenseConfig,
-    callback,
-  );
+
+  const context = getContextForSubtree(parentComponent);
+  if (container.context === null) {
+    container.context = context;
+  } else {
+    container.pendingContext = context;
+  }
+
+  if (__DEV__) {
+    if (
+      ReactCurrentFiberPhase === 'render' &&
+      ReactCurrentFiberCurrent !== null &&
+      !didWarnAboutNestedUpdates
+    ) {
+      didWarnAboutNestedUpdates = true;
+      console.error(
+        'Render methods should be a pure function of props and state; ' +
+          'triggering nested component updates from render is not allowed. ' +
+          'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
+          'Check the render method of %s.',
+        getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
+      );
+    }
+  }
+
+  const update = createUpdate(expirationTime, suspenseConfig);
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element};
+
+  callback = callback === undefined ? null : callback;
+  if (callback !== null) {
+    if (__DEV__) {
+      if (typeof callback !== 'function') {
+        console.error(
+          'render(...): Expected the last optional `callback` argument to be a ' +
+            'function. Instead received: %s.',
+          callback,
+        );
+      }
+    }
+    update.callback = callback;
+  }
+
+  enqueueUpdate(current, update);
+  scheduleWork(current, expirationTime);
+
+  return expirationTime;
 }
 
 export {
-  flushRoot,
-  computeUniqueAsyncExpiration,
   batchedEventUpdates,
   batchedUpdates,
   unbatchedUpdates,
@@ -340,7 +305,7 @@ export {
   flushControlled,
   flushSync,
   flushPassiveEffects,
-  ReactActingRendererSigil,
+  IsThisRendererActing,
 };
 
 export function getPublicRootInstance(
@@ -358,6 +323,86 @@ export function getPublicRootInstance(
   }
 }
 
+export function attemptSynchronousHydration(fiber: Fiber): void {
+  switch (fiber.tag) {
+    case HostRoot:
+      let root: FiberRoot = fiber.stateNode;
+      if (root.hydrate) {
+        // Flush the first scheduled "update".
+        flushRoot(root, root.firstPendingTime);
+      }
+      break;
+    case SuspenseComponent:
+      flushSync(() => scheduleWork(fiber, Sync));
+      // If we're still blocked after this, we need to increase
+      // the priority of any promises resolving within this
+      // boundary so that they next attempt also has higher pri.
+      let retryExpTime = computeInteractiveExpiration(
+        requestCurrentTimeForUpdate(),
+      );
+      markRetryTimeIfNotHydrated(fiber, retryExpTime);
+      break;
+  }
+}
+
+function markRetryTimeImpl(fiber: Fiber, retryTime: ExpirationTime) {
+  let suspenseState: null | SuspenseState = fiber.memoizedState;
+  if (suspenseState !== null && suspenseState.dehydrated !== null) {
+    if (suspenseState.retryTime < retryTime) {
+      suspenseState.retryTime = retryTime;
+    }
+  }
+}
+
+// Increases the priority of thennables when they resolve within this boundary.
+function markRetryTimeIfNotHydrated(fiber: Fiber, retryTime: ExpirationTime) {
+  markRetryTimeImpl(fiber, retryTime);
+  let alternate = fiber.alternate;
+  if (alternate) {
+    markRetryTimeImpl(alternate, retryTime);
+  }
+}
+
+export function attemptUserBlockingHydration(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority and they should not suspend on I/O,
+    // since you have to wrap anything that might suspend in
+    // Suspense.
+    return;
+  }
+  let expTime = computeInteractiveExpiration(requestCurrentTimeForUpdate());
+  scheduleWork(fiber, expTime);
+  markRetryTimeIfNotHydrated(fiber, expTime);
+}
+
+export function attemptContinuousHydration(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority and they should not suspend on I/O,
+    // since you have to wrap anything that might suspend in
+    // Suspense.
+    return;
+  }
+  let expTime = computeContinuousHydrationExpiration(
+    requestCurrentTimeForUpdate(),
+  );
+  scheduleWork(fiber, expTime);
+  markRetryTimeIfNotHydrated(fiber, expTime);
+}
+
+export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority other than synchronously flush it.
+    return;
+  }
+  const currentTime = requestCurrentTimeForUpdate();
+  const expTime = computeExpirationForFiber(currentTime, fiber, null);
+  scheduleWork(fiber, expTime);
+  markRetryTimeIfNotHydrated(fiber, expTime);
+}
+
 export {findHostInstance};
 
 export {findHostInstanceWithWarning};
@@ -369,6 +414,9 @@ export function findHostInstanceWithNoPortals(
   if (hostFiber === null) {
     return null;
   }
+  if (hostFiber.tag === FundamentalComponent) {
+    return hostFiber.stateNode.instance;
+  }
   return hostFiber.stateNode;
 }
 
@@ -423,10 +471,6 @@ if (__DEV__) {
       id--;
     }
     if (currentHook !== null) {
-      if (revertPassiveEffectsChange) {
-        flushPassiveEffects();
-      }
-
       const newState = copyWithSet(currentHook.memoizedState, path, value);
       currentHook.memoizedState = newState;
       currentHook.baseState = newState;
@@ -444,9 +488,6 @@ if (__DEV__) {
 
   // Support DevTools props for function components, forwardRef, memo, host components, etc.
   overrideProps = (fiber: Fiber, path: Array<string | number>, value: any) => {
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
     fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
@@ -455,9 +496,6 @@ if (__DEV__) {
   };
 
   scheduleUpdate = (fiber: Fiber) => {
-    if (revertPassiveEffectsChange) {
-      flushPassiveEffects();
-    }
     scheduleWork(fiber, Sync);
   };
 
@@ -472,7 +510,6 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
 
   return injectInternals({
     ...devToolsConfig,
-    scheduleHotUpdate: __DEV__ ? scheduleHotUpdate : null,
     overrideHookState,
     overrideProps,
     setSuspenseHandler,
@@ -492,5 +529,12 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
       }
       return findFiberByHostInstance(instance);
     },
+    // React Refresh
+    findHostInstancesForRefresh: __DEV__ ? findHostInstancesForRefresh : null,
+    scheduleRefresh: __DEV__ ? scheduleRefresh : null,
+    scheduleRoot: __DEV__ ? scheduleRoot : null,
+    setRefreshHandler: __DEV__ ? setRefreshHandler : null,
+    // Enables DevTools to append owner stacks to error messages in DEV mode.
+    getCurrentFiber: __DEV__ ? () => ReactCurrentFiberCurrent : null,
   });
 }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.js b/packages/react-reconciler/src/ReactFiberRoot.js
index 148ff8a8e9a69..e0de5ecfd8970 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.js
@@ -13,20 +13,19 @@ import type {RootTag} from 'shared/ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Thenable} from './ReactFiberWorkLoop';
 import type {Interaction} from 'scheduler/src/Tracing';
+import type {SuspenseHydrationCallbacks} from './ReactFiberSuspenseComponent';
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 
 import {noTimeout} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber';
 import {NoWork} from './ReactFiberExpirationTime';
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
+import {
+  enableSchedulerTracing,
+  enableSuspenseCallback,
+} from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
-
-// TODO: This should be lifted into the renderer.
-export type Batch = {
-  _defer: boolean,
-  _expirationTime: ExpirationTime,
-  _onComplete: () => mixed,
-  _next: Batch | null,
-};
+import {NoPriority} from './SchedulerWithReactIntegration';
+import {initializeUpdateQueue} from './ReactUpdateQueue';
 
 export type PendingInteractionMap = Map<ExpirationTime, Set<Interaction>>;
 
@@ -57,20 +56,24 @@ type BaseFiberRootProperties = {|
   pendingContext: Object | null,
   // Determines if we should attempt to hydrate on the initial mount
   +hydrate: boolean,
-  // List of top-level batches. This list indicates whether a commit should be
-  // deferred. Also contains completion callbacks.
-  // TODO: Lift this into the renderer
-  firstBatch: Batch | null,
   // Node returned by Scheduler.scheduleCallback
   callbackNode: *,
   // Expiration of the callback associated with this root
   callbackExpirationTime: ExpirationTime,
+  // Priority of the callback associated with this root
+  callbackPriority: ReactPriorityLevel,
   // The earliest pending expiration time that exists in the tree
   firstPendingTime: ExpirationTime,
-  // The latest pending expiration time that exists in the tree
-  lastPendingTime: ExpirationTime,
-  // The time at which a suspended component pinged the root to render again
-  pingTime: ExpirationTime,
+  // The earliest suspended expiration time that exists in the tree
+  firstSuspendedTime: ExpirationTime,
+  // The latest suspended expiration time that exists in the tree
+  lastSuspendedTime: ExpirationTime,
+  // The next known expiration time after the suspended range
+  nextKnownPendingLevel: ExpirationTime,
+  // The latest time at which a suspended component pinged the root to
+  // render again
+  lastPingedTime: ExpirationTime,
+  lastExpiredTime: ExpirationTime,
 |};
 
 // The following attributes are only used by interaction tracing builds.
@@ -83,6 +86,11 @@ type ProfilingOnlyFiberRootProperties = {|
   pendingInteractionMap: PendingInteractionMap,
 |};
 
+// The follow fields are only used by enableSuspenseCallback for hydration.
+type SuspenseCallbackOnlyFiberRootProperties = {|
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+|};
+
 // Exported FiberRoot type includes all properties,
 // To avoid requiring potentially error-prone :any casts throughout the project.
 // Profiling properties are only safe to access in profiling builds (when enableSchedulerTracing is true).
@@ -91,6 +99,8 @@ type ProfilingOnlyFiberRootProperties = {|
 export type FiberRoot = {
   ...BaseFiberRootProperties,
   ...ProfilingOnlyFiberRootProperties,
+  ...SuspenseCallbackOnlyFiberRootProperties,
+  ...
 };
 
 function FiberRootNode(containerInfo, tag, hydrate) {
@@ -105,26 +115,35 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.context = null;
   this.pendingContext = null;
   this.hydrate = hydrate;
-  this.firstBatch = null;
   this.callbackNode = null;
-  this.callbackExpirationTime = NoWork;
+  this.callbackPriority = NoPriority;
   this.firstPendingTime = NoWork;
-  this.lastPendingTime = NoWork;
-  this.pingTime = NoWork;
+  this.firstSuspendedTime = NoWork;
+  this.lastSuspendedTime = NoWork;
+  this.nextKnownPendingLevel = NoWork;
+  this.lastPingedTime = NoWork;
+  this.lastExpiredTime = NoWork;
 
   if (enableSchedulerTracing) {
     this.interactionThreadID = unstable_getThreadID();
     this.memoizedInteractions = new Set();
     this.pendingInteractionMap = new Map();
   }
+  if (enableSuspenseCallback) {
+    this.hydrationCallbacks = null;
+  }
 }
 
 export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
+  if (enableSuspenseCallback) {
+    root.hydrationCallbacks = hydrationCallbacks;
+  }
 
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
@@ -132,5 +151,112 @@ export function createFiberRoot(
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
+  initializeUpdateQueue(uninitializedFiber);
+
   return root;
 }
+
+export function isRootSuspendedAtTime(
+  root: FiberRoot,
+  expirationTime: ExpirationTime,
+): boolean {
+  const firstSuspendedTime = root.firstSuspendedTime;
+  const lastSuspendedTime = root.lastSuspendedTime;
+  return (
+    firstSuspendedTime !== NoWork &&
+    firstSuspendedTime >= expirationTime &&
+    lastSuspendedTime <= expirationTime
+  );
+}
+
+export function markRootSuspendedAtTime(
+  root: FiberRoot,
+  expirationTime: ExpirationTime,
+): void {
+  const firstSuspendedTime = root.firstSuspendedTime;
+  const lastSuspendedTime = root.lastSuspendedTime;
+  if (firstSuspendedTime < expirationTime) {
+    root.firstSuspendedTime = expirationTime;
+  }
+  if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {
+    root.lastSuspendedTime = expirationTime;
+  }
+
+  if (expirationTime <= root.lastPingedTime) {
+    root.lastPingedTime = NoWork;
+  }
+
+  if (expirationTime <= root.lastExpiredTime) {
+    root.lastExpiredTime = NoWork;
+  }
+}
+
+export function markRootUpdatedAtTime(
+  root: FiberRoot,
+  expirationTime: ExpirationTime,
+): void {
+  // Update the range of pending times
+  const firstPendingTime = root.firstPendingTime;
+  if (expirationTime > firstPendingTime) {
+    root.firstPendingTime = expirationTime;
+  }
+
+  // Update the range of suspended times. Treat everything lower priority or
+  // equal to this update as unsuspended.
+  const firstSuspendedTime = root.firstSuspendedTime;
+  if (firstSuspendedTime !== NoWork) {
+    if (expirationTime >= firstSuspendedTime) {
+      // The entire suspended range is now unsuspended.
+      root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;
+    } else if (expirationTime >= root.lastSuspendedTime) {
+      root.lastSuspendedTime = expirationTime + 1;
+    }
+
+    // This is a pending level. Check if it's higher priority than the next
+    // known pending level.
+    if (expirationTime > root.nextKnownPendingLevel) {
+      root.nextKnownPendingLevel = expirationTime;
+    }
+  }
+}
+
+export function markRootFinishedAtTime(
+  root: FiberRoot,
+  finishedExpirationTime: ExpirationTime,
+  remainingExpirationTime: ExpirationTime,
+): void {
+  // Update the range of pending times
+  root.firstPendingTime = remainingExpirationTime;
+
+  // Update the range of suspended times. Treat everything higher priority or
+  // equal to this update as unsuspended.
+  if (finishedExpirationTime <= root.lastSuspendedTime) {
+    // The entire suspended range is now unsuspended.
+    root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;
+  } else if (finishedExpirationTime <= root.firstSuspendedTime) {
+    // Part of the suspended range is now unsuspended. Narrow the range to
+    // include everything between the unsuspended time (non-inclusive) and the
+    // last suspended time.
+    root.firstSuspendedTime = finishedExpirationTime - 1;
+  }
+
+  if (finishedExpirationTime <= root.lastPingedTime) {
+    // Clear the pinged time
+    root.lastPingedTime = NoWork;
+  }
+
+  if (finishedExpirationTime <= root.lastExpiredTime) {
+    // Clear the expired time
+    root.lastExpiredTime = NoWork;
+  }
+}
+
+export function markRootExpiredAtTime(
+  root: FiberRoot,
+  expirationTime: ExpirationTime,
+): void {
+  const lastExpiredTime = root.lastExpiredTime;
+  if (lastExpiredTime === NoWork || lastExpiredTime > expirationTime) {
+    root.lastExpiredTime = expirationTime;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberScope.js b/packages/react-reconciler/src/ReactFiberScope.js
new file mode 100644
index 0000000000000..ef78a1398452e
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberScope.js
@@ -0,0 +1,195 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber';
+import type {
+  ReactScope,
+  ReactScopeInstance,
+  ReactScopeMethods,
+  ReactContext,
+  ReactScopeQuery,
+} from 'shared/ReactTypes';
+
+import {getPublicInstance, getInstanceFromNode} from './ReactFiberHostConfig';
+
+import {
+  HostComponent,
+  SuspenseComponent,
+  ScopeComponent,
+  ContextProvider,
+} from 'shared/ReactWorkTags';
+import {enableScopeAPI} from 'shared/ReactFeatureFlags';
+
+function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {
+  return fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
+}
+
+function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {
+  return ((((fiber.child: any): Fiber).sibling: any): Fiber).child;
+}
+
+const emptyObject = {};
+
+function collectScopedNodes(
+  node: Fiber,
+  fn: ReactScopeQuery,
+  scopedNodes: Array<any>,
+): void {
+  if (enableScopeAPI) {
+    if (node.tag === HostComponent) {
+      const {type, memoizedProps, stateNode} = node;
+      const instance = getPublicInstance(stateNode);
+      if (
+        instance !== null &&
+        fn(type, memoizedProps || emptyObject, instance) === true
+      ) {
+        scopedNodes.push(instance);
+      }
+    }
+    let child = node.child;
+
+    if (isFiberSuspenseAndTimedOut(node)) {
+      child = getSuspenseFallbackChild(node);
+    }
+    if (child !== null) {
+      collectScopedNodesFromChildren(child, fn, scopedNodes);
+    }
+  }
+}
+
+function collectFirstScopedNode(
+  node: Fiber,
+  fn: ReactScopeQuery,
+): null | Object {
+  if (enableScopeAPI) {
+    if (node.tag === HostComponent) {
+      const {type, memoizedProps, stateNode} = node;
+      const instance = getPublicInstance(stateNode);
+      if (instance !== null && fn(type, memoizedProps, instance) === true) {
+        return instance;
+      }
+    }
+    let child = node.child;
+
+    if (isFiberSuspenseAndTimedOut(node)) {
+      child = getSuspenseFallbackChild(node);
+    }
+    if (child !== null) {
+      return collectFirstScopedNodeFromChildren(child, fn);
+    }
+  }
+  return null;
+}
+
+function collectScopedNodesFromChildren(
+  startingChild: Fiber,
+  fn: ReactScopeQuery,
+  scopedNodes: Array<any>,
+): void {
+  let child = startingChild;
+  while (child !== null) {
+    collectScopedNodes(child, fn, scopedNodes);
+    child = child.sibling;
+  }
+}
+
+function collectFirstScopedNodeFromChildren(
+  startingChild: Fiber,
+  fn: ReactScopeQuery,
+): Object | null {
+  let child = startingChild;
+  while (child !== null) {
+    const scopedNode = collectFirstScopedNode(child, fn);
+    if (scopedNode !== null) {
+      return scopedNode;
+    }
+    child = child.sibling;
+  }
+  return null;
+}
+
+function collectNearestContextValues<T>(
+  node: Fiber,
+  context: ReactContext<T>,
+  childContextValues: Array<T>,
+): void {
+  if (node.tag === ContextProvider && node.type._context === context) {
+    const contextValue = node.memoizedProps.value;
+    childContextValues.push(contextValue);
+  } else {
+    let child = node.child;
+
+    if (isFiberSuspenseAndTimedOut(node)) {
+      child = getSuspenseFallbackChild(node);
+    }
+    if (child !== null) {
+      collectNearestChildContextValues(child, context, childContextValues);
+    }
+  }
+}
+
+function collectNearestChildContextValues<T>(
+  startingChild: Fiber | null,
+  context: ReactContext<T>,
+  childContextValues: Array<T>,
+): void {
+  let child = startingChild;
+  while (child !== null) {
+    collectNearestContextValues(child, context, childContextValues);
+    child = child.sibling;
+  }
+}
+
+export function createScopeMethods(
+  scope: ReactScope,
+  instance: ReactScopeInstance,
+): ReactScopeMethods {
+  return {
+    DO_NOT_USE_queryAllNodes(fn: ReactScopeQuery): null | Array<Object> {
+      const currentFiber = ((instance.fiber: any): Fiber);
+      const child = currentFiber.child;
+      const scopedNodes = [];
+      if (child !== null) {
+        collectScopedNodesFromChildren(child, fn, scopedNodes);
+      }
+      return scopedNodes.length === 0 ? null : scopedNodes;
+    },
+    DO_NOT_USE_queryFirstNode(fn: ReactScopeQuery): null | Object {
+      const currentFiber = ((instance.fiber: any): Fiber);
+      const child = currentFiber.child;
+      if (child !== null) {
+        return collectFirstScopedNodeFromChildren(child, fn);
+      }
+      return null;
+    },
+    containsNode(node: Object): boolean {
+      let fiber = getInstanceFromNode(node);
+      while (fiber !== null) {
+        if (
+          fiber.tag === ScopeComponent &&
+          fiber.type === scope &&
+          fiber.stateNode === instance
+        ) {
+          return true;
+        }
+        fiber = fiber.return;
+      }
+      return false;
+    },
+    getChildContextValues<T>(context: ReactContext<T>): Array<T> {
+      const currentFiber = ((instance.fiber: any): Fiber);
+      const child = currentFiber.child;
+      const childContextValues = [];
+      if (child !== null) {
+        collectNearestChildContextValues(child, context, childContextValues);
+      }
+      return childContextValues;
+    },
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberStack.js b/packages/react-reconciler/src/ReactFiberStack.js
index 14359007217a3..f27aeb65039be 100644
--- a/packages/react-reconciler/src/ReactFiberStack.js
+++ b/packages/react-reconciler/src/ReactFiberStack.js
@@ -9,11 +9,7 @@
 
 import type {Fiber} from './ReactFiber';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-
-export type StackCursor<T> = {
-  current: T,
-};
+export type StackCursor<T> = {|current: T|};
 
 const valueStack: Array<any> = [];
 
@@ -38,14 +34,14 @@ function isEmpty(): boolean {
 function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
   if (index < 0) {
     if (__DEV__) {
-      warningWithoutStack(false, 'Unexpected pop.');
+      console.error('Unexpected pop.');
     }
     return;
   }
 
   if (__DEV__) {
     if (fiber !== fiberStack[index]) {
-      warningWithoutStack(false, 'Unexpected Fiber popped.');
+      console.error('Unexpected Fiber popped.');
     }
   }
 
@@ -75,8 +71,7 @@ function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
 function checkThatStackIsEmpty() {
   if (__DEV__) {
     if (index !== -1) {
-      warningWithoutStack(
-        false,
+      console.error(
         'Expected an empty stack. Something was not reset properly.',
       );
     }
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js
index 40db21ebdba0d..f1c11d2f86a9e 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js
@@ -8,10 +8,59 @@
  */
 
 import type {Fiber} from './ReactFiber';
+import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import {SuspenseComponent, SuspenseListComponent} from 'shared/ReactWorkTags';
+import {NoEffect, DidCapture} from 'shared/ReactSideEffectTags';
+import {
+  isSuspenseInstancePending,
+  isSuspenseInstanceFallback,
+} from './ReactFiberHostConfig';
 
+export type SuspenseHydrationCallbacks = {
+  onHydrated?: (suspenseInstance: SuspenseInstance) => void,
+  onDeleted?: (suspenseInstance: SuspenseInstance) => void,
+  ...
+};
+
+// A null SuspenseState represents an unsuspended normal Suspense boundary.
+// A non-null SuspenseState means that it is blocked for one reason or another.
+// - A non-null dehydrated field means it's blocked pending hydration.
+//   - A non-null dehydrated field can use isSuspenseInstancePending or
+//     isSuspenseInstanceFallback to query the reason for being dehydrated.
+// - A null dehydrated field means it's blocked by something suspending and
+//   we're currently showing a fallback instead.
 export type SuspenseState = {|
-  fallbackExpirationTime: ExpirationTime,
+  // If this boundary is still dehydrated, we store the SuspenseInstance
+  // here to indicate that it is dehydrated (flag) and for quick access
+  // to check things like isSuspenseInstancePending.
+  dehydrated: null | SuspenseInstance,
+  // Represents the earliest expiration time we should attempt to hydrate
+  // a dehydrated boundary at.
+  // Never is the default for dehydrated boundaries.
+  // NoWork is the default for normal boundaries, which turns into "normal" pri.
+  retryTime: ExpirationTime,
+|};
+
+export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
+
+export type SuspenseListRenderState = {|
+  isBackwards: boolean,
+  // The currently rendering tail row.
+  rendering: null | Fiber,
+  // The absolute time when we started rendering the tail row.
+  renderingStartTime: number,
+  // The last of the already rendered children.
+  last: null | Fiber,
+  // Remaining rows on the tail of the list.
+  tail: null | Fiber,
+  // The absolute time in ms that we'll expire the tail rendering.
+  tailExpiration: number,
+  // Tail insertions setting.
+  tailMode: SuspenseListTailMode,
+  // Last Effect before we rendered the "rendering" item.
+  // Used to remove new effects added by the rendered item.
+  lastEffect: null | Fiber,
 |};
 
 export function shouldCaptureSuspense(
@@ -22,6 +71,10 @@ export function shouldCaptureSuspense(
   // fallback. Otherwise, don't capture and bubble to the next boundary.
   const nextState: SuspenseState | null = workInProgress.memoizedState;
   if (nextState !== null) {
+    if (nextState.dehydrated !== null) {
+      // A dehydrated boundary always captures.
+      return true;
+    }
     return false;
   }
   const props = workInProgress.memoizedProps;
@@ -41,3 +94,48 @@ export function shouldCaptureSuspense(
   // If the parent is not able to handle it, we must handle it.
   return true;
 }
+
+export function findFirstSuspended(row: Fiber): null | Fiber {
+  let node = row;
+  while (node !== null) {
+    if (node.tag === SuspenseComponent) {
+      const state: SuspenseState | null = node.memoizedState;
+      if (state !== null) {
+        const dehydrated: null | SuspenseInstance = state.dehydrated;
+        if (
+          dehydrated === null ||
+          isSuspenseInstancePending(dehydrated) ||
+          isSuspenseInstanceFallback(dehydrated)
+        ) {
+          return node;
+        }
+      }
+    } else if (
+      node.tag === SuspenseListComponent &&
+      // revealOrder undefined can't be trusted because it don't
+      // keep track of whether it suspended or not.
+      node.memoizedProps.revealOrder !== undefined
+    ) {
+      let didSuspend = (node.effectTag & DidCapture) !== NoEffect;
+      if (didSuspend) {
+        return node;
+      }
+    } else if (node.child !== null) {
+      node.child.return = node;
+      node = node.child;
+      continue;
+    }
+    if (node === row) {
+      return null;
+    }
+    while (node.sibling === null) {
+      if (node.return === null || node.return === row) {
+        return null;
+      }
+      node = node.return;
+    }
+    node.sibling.return = node.return;
+    node = node.sibling;
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js
index d6c57d44f833e..f56b1a04b33a3 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.js
@@ -15,14 +15,11 @@ import type {Update} from './ReactUpdateQueue';
 import type {Thenable} from './ReactFiberWorkLoop';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
-import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import getComponentName from 'shared/getComponentName';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {
   ClassComponent,
   HostRoot,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
   IncompleteClassComponent,
 } from 'shared/ReactWorkTags';
 import {
@@ -32,11 +29,7 @@ import {
   ShouldCapture,
   LifecycleEffectMask,
 } from 'shared/ReactSideEffectTags';
-import {
-  enableSchedulerTracing,
-  enableSuspenseServerRenderer,
-} from 'shared/ReactFeatureFlags';
-import {NoMode, BatchedMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode} from './ReactTypeOfMode';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent';
 
 import {createCapturedValue} from './ReactCapturedValue';
@@ -61,15 +54,11 @@ import {
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
   pingSuspendedRoot,
-  resolveRetryThenable,
   checkForWrongSuspensePriorityInDEV,
 } from './ReactFiberWorkLoop';
 
-import invariant from 'shared/invariant';
-
 import {Sync} from './ReactFiberExpirationTime';
 
-const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
 function createRootErrorUpdate(
@@ -102,6 +91,7 @@ function createClassErrorUpdate(
   if (typeof getDerivedStateFromError === 'function') {
     const error = errorInfo.value;
     update.payload = () => {
+      logError(fiber, errorInfo);
       return getDerivedStateFromError(error);
     };
   }
@@ -119,10 +109,12 @@ function createClassErrorUpdate(
         // TODO: Warn in strict mode if getDerivedStateFromError is
         // not defined.
         markLegacyErrorBoundaryAsFailed(this);
+
+        // Only log here if componentDidCatch is the only error boundary method defined
+        logError(fiber, errorInfo);
       }
       const error = errorInfo.value;
       const stack = errorInfo.stack;
-      logError(fiber, errorInfo);
       this.componentDidCatch(error, {
         componentStack: stack !== null ? stack : '',
       });
@@ -131,12 +123,13 @@ function createClassErrorUpdate(
           // If componentDidCatch is the only error boundary method defined,
           // then it needs to call setState to recover from errors.
           // If no state update is scheduled then the boundary will swallow the error.
-          warningWithoutStack(
-            fiber.expirationTime === Sync,
-            '%s: Error boundaries should implement getDerivedStateFromError(). ' +
-              'In that method, return a state update to display an error message or fallback UI.',
-            getComponentName(fiber.type) || 'Unknown',
-          );
+          if (fiber.expirationTime !== Sync) {
+            console.error(
+              '%s: Error boundaries should implement getDerivedStateFromError(). ' +
+                'In that method, return a state update to display an error message or fallback UI.',
+              getComponentName(fiber.type) || 'Unknown',
+            );
+          }
         }
       }
     };
@@ -178,9 +171,6 @@ function attachPingListener(
       thenable,
       renderExpirationTime,
     );
-    if (enableSchedulerTracing) {
-      ping = Schedule_tracing_wrap(ping);
-    }
     thenable.then(ping, ping);
   }
 }
@@ -205,6 +195,18 @@ function throwException(
     // This is a thenable.
     const thenable: Thenable = (value: any);
 
+    if ((sourceFiber.mode & BlockingMode) === NoMode) {
+      // Reset the memoizedState to what it was before we attempted
+      // to render it.
+      let currentSource = sourceFiber.alternate;
+      if (currentSource) {
+        sourceFiber.memoizedState = currentSource.memoizedState;
+        sourceFiber.expirationTime = currentSource.expirationTime;
+      } else {
+        sourceFiber.memoizedState = null;
+      }
+    }
+
     checkForWrongSuspensePriorityInDEV(sourceFiber);
 
     let hasInvisibleParentBoundary = hasSuspenseContext(
@@ -232,15 +234,15 @@ function throwException(
           thenables.add(thenable);
         }
 
-        // If the boundary is outside of batched mode, we should *not*
+        // If the boundary is outside of blocking mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a batched mode tree. If the Suspense is outside of it, we
+        // inside a blocking mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
-        if ((workInProgress.mode & BatchedMode) === NoMode) {
+        if ((workInProgress.mode & BlockingMode) === NoMode) {
           workInProgress.effectTag |= DidCapture;
 
           // We're going to commit this fiber even though it didn't complete.
@@ -257,7 +259,7 @@ function throwException(
               sourceFiber.tag = IncompleteClassComponent;
             } else {
               // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force updte to
+              // since it's known to be in an inconsistent state. Use a force update to
               // prevent a bail out.
               const update = createUpdate(Sync, null);
               update.tag = ForceUpdate;
@@ -275,42 +277,51 @@ function throwException(
 
         // Confirmed that the boundary is in a concurrent mode tree. Continue
         // with the normal suspend path.
+        //
+        // After this we'll use a set of heuristics to determine whether this
+        // render pass will run to completion or restart or "suspend" the commit.
+        // The actual logic for this is spread out in different places.
+        //
+        // This first principle is that if we're going to suspend when we complete
+        // a root, then we should also restart if we get an update or ping that
+        // might unsuspend it, and vice versa. The only reason to suspend is
+        // because you think you might want to restart before committing. However,
+        // it doesn't make sense to restart only while in the period we're suspended.
+        //
+        // Restarting too aggressively is also not good because it starves out any
+        // intermediate loading state. So we use heuristics to determine when.
 
-        attachPingListener(root, renderExpirationTime, thenable);
-
-        workInProgress.effectTag |= ShouldCapture;
-        workInProgress.expirationTime = renderExpirationTime;
+        // Suspense Heuristics
+        //
+        // If nothing threw a Promise or all the same fallbacks are already showing,
+        // then don't suspend/restart.
+        //
+        // If this is an initial render of a new tree of Suspense boundaries and
+        // those trigger a fallback, then don't suspend/restart. We want to ensure
+        // that we can show the initial loading state as quickly as possible.
+        //
+        // If we hit a "Delayed" case, such as when we'd switch from content back into
+        // a fallback, then we should always suspend/restart. SuspenseConfig applies to
+        // this case. If none is defined, JND is used instead.
+        //
+        // If we're already showing a fallback and it gets "retried", allowing us to show
+        // another level, but there's still an inner boundary that would show a fallback,
+        // then we suspend/restart for 500ms since the last time we showed a fallback
+        // anywhere in the tree. This effectively throttles progressive loading into a
+        // consistent train of commits. This also gives us an opportunity to restart to
+        // get to the completed state slightly earlier.
+        //
+        // If there's ambiguity due to batching it's resolved in preference of:
+        // 1) "delayed", 2) "initial render", 3) "retry".
+        //
+        // We want to ensure that a "busy" state doesn't get force committed. We want to
+        // ensure that new initial loading states can commit as soon as possible.
 
-        return;
-      } else if (
-        enableSuspenseServerRenderer &&
-        workInProgress.tag === DehydratedSuspenseComponent
-      ) {
         attachPingListener(root, renderExpirationTime, thenable);
 
-        // Since we already have a current fiber, we can eagerly add a retry listener.
-        let retryCache = workInProgress.memoizedState;
-        if (retryCache === null) {
-          retryCache = workInProgress.memoizedState = new PossiblyWeakSet();
-          const current = workInProgress.alternate;
-          invariant(
-            current,
-            'A dehydrated suspense boundary must commit before trying to render. ' +
-              'This is probably a bug in React.',
-          );
-          current.memoizedState = retryCache;
-        }
-        // Memoize using the boundary fiber to prevent redundant listeners.
-        if (!retryCache.has(thenable)) {
-          retryCache.add(thenable);
-          let retry = resolveRetryThenable.bind(null, workInProgress, thenable);
-          if (enableSchedulerTracing) {
-            retry = Schedule_tracing_wrap(retry);
-          }
-          thenable.then(retry, retry);
-        }
         workInProgress.effectTag |= ShouldCapture;
         workInProgress.expirationTime = renderExpirationTime;
+
         return;
       }
       // This boundary already captured during this render. Continue to the next
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 734dead68cf6f..68a6c83d577fd 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -8,9 +8,10 @@
  */
 
 import type {Fiber} from './ReactFiber';
+import type {Container, SuspenseInstance} from './ReactFiberHostConfig';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -21,29 +22,31 @@ import {
   HostRoot,
   HostPortal,
   HostText,
+  FundamentalComponent,
+  SuspenseComponent,
 } from 'shared/ReactWorkTags';
-import {NoEffect, Placement} from 'shared/ReactSideEffectTags';
+import {NoEffect, Placement, Hydrating} from 'shared/ReactSideEffectTags';
+import {enableFundamentalAPI} from 'shared/ReactFeatureFlags';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
-const MOUNTING = 1;
-const MOUNTED = 2;
-const UNMOUNTED = 3;
-
-function isFiberMountedImpl(fiber: Fiber): number {
+export function getNearestMountedFiber(fiber: Fiber): null | Fiber {
   let node = fiber;
+  let nearestMounted = fiber;
   if (!fiber.alternate) {
     // If there is no alternate, this might be a new tree that isn't inserted
     // yet. If it is, then it will have a pending insertion effect on it.
-    if ((node.effectTag & Placement) !== NoEffect) {
-      return MOUNTING;
-    }
-    while (node.return) {
-      node = node.return;
-      if ((node.effectTag & Placement) !== NoEffect) {
-        return MOUNTING;
+    let nextNode = node;
+    do {
+      node = nextNode;
+      if ((node.effectTag & (Placement | Hydrating)) !== NoEffect) {
+        // This is an insertion or in-progress hydration. The nearest possible
+        // mounted fiber is the parent but we need to continue to figure out
+        // if that one is still mounted.
+        nearestMounted = node.return;
       }
-    }
+      nextNode = node.return;
+    } while (nextNode);
   } else {
     while (node.return) {
       node = node.return;
@@ -52,15 +55,39 @@ function isFiberMountedImpl(fiber: Fiber): number {
   if (node.tag === HostRoot) {
     // TODO: Check if this was a nested HostRoot when used with
     // renderContainerIntoSubtree.
-    return MOUNTED;
+    return nearestMounted;
   }
   // If we didn't hit the root, that means that we're in an disconnected tree
   // that has been unmounted.
-  return UNMOUNTED;
+  return null;
+}
+
+export function getSuspenseInstanceFromFiber(
+  fiber: Fiber,
+): null | SuspenseInstance {
+  if (fiber.tag === SuspenseComponent) {
+    let suspenseState: SuspenseState | null = fiber.memoizedState;
+    if (suspenseState === null) {
+      const current = fiber.alternate;
+      if (current !== null) {
+        suspenseState = current.memoizedState;
+      }
+    }
+    if (suspenseState !== null) {
+      return suspenseState.dehydrated;
+    }
+  }
+  return null;
+}
+
+export function getContainerFromFiber(fiber: Fiber): null | Container {
+  return fiber.tag === HostRoot
+    ? (fiber.stateNode.containerInfo: Container)
+    : null;
 }
 
 export function isFiberMounted(fiber: Fiber): boolean {
-  return isFiberMountedImpl(fiber) === MOUNTED;
+  return getNearestMountedFiber(fiber) === fiber;
 }
 
 export function isMounted(component: React$Component<any, any>): boolean {
@@ -69,15 +96,16 @@ export function isMounted(component: React$Component<any, any>): boolean {
     if (owner !== null && owner.tag === ClassComponent) {
       const ownerFiber: Fiber = owner;
       const instance = ownerFiber.stateNode;
-      warningWithoutStack(
-        instance._warnedAboutRefsInRender,
-        '%s is accessing isMounted inside its render() function. ' +
-          'render() should be a pure function of props and state. It should ' +
-          'never access something that requires stale data from the previous ' +
-          'render, such as refs. Move this logic to componentDidMount and ' +
-          'componentDidUpdate instead.',
-        getComponentName(ownerFiber.type) || 'A component',
-      );
+      if (!instance._warnedAboutRefsInRender) {
+        console.error(
+          '%s is accessing isMounted inside its render() function. ' +
+            'render() should be a pure function of props and state. It should ' +
+            'never access something that requires stale data from the previous ' +
+            'render, such as refs. Move this logic to componentDidMount and ' +
+            'componentDidUpdate instead.',
+          getComponentName(ownerFiber.type) || 'A component',
+        );
+      }
       instance._warnedAboutRefsInRender = true;
     }
   }
@@ -86,12 +114,12 @@ export function isMounted(component: React$Component<any, any>): boolean {
   if (!fiber) {
     return false;
   }
-  return isFiberMountedImpl(fiber) === MOUNTED;
+  return getNearestMountedFiber(fiber) === fiber;
 }
 
 function assertIsMounted(fiber) {
   invariant(
-    isFiberMountedImpl(fiber) === MOUNTED,
+    getNearestMountedFiber(fiber) === fiber,
     'Unable to find node on an unmounted component.',
   );
 }
@@ -100,12 +128,12 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
   let alternate = fiber.alternate;
   if (!alternate) {
     // If there is no alternate, then we only need to check if it is mounted.
-    const state = isFiberMountedImpl(fiber);
+    const nearestMounted = getNearestMountedFiber(fiber);
     invariant(
-      state !== UNMOUNTED,
+      nearestMounted !== null,
       'Unable to find node on an unmounted component.',
     );
-    if (state === MOUNTING) {
+    if (nearestMounted !== fiber) {
       return null;
     }
     return fiber;
@@ -277,7 +305,11 @@ export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {
   // Next we'll drill down this component to find the first HostComponent/Text.
   let node: Fiber = currentParent;
   while (true) {
-    if (node.tag === HostComponent || node.tag === HostText) {
+    if (
+      node.tag === HostComponent ||
+      node.tag === HostText ||
+      (enableFundamentalAPI && node.tag === FundamentalComponent)
+    ) {
       return node;
     } else if (node.child && node.tag !== HostPortal) {
       node.child.return = node;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js
index 111a9d786ba04..8ce3870468bed 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.js
@@ -9,6 +9,7 @@
 
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
 
 import {
   ClassComponent,
@@ -17,18 +18,14 @@ import {
   HostPortal,
   ContextProvider,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
-  EventComponent,
-  EventTarget,
+  SuspenseListComponent,
 } from 'shared/ReactWorkTags';
 import {DidCapture, NoEffect, ShouldCapture} from 'shared/ReactSideEffectTags';
-import {
-  enableSuspenseServerRenderer,
-  enableEventAPI,
-} from 'shared/ReactFeatureFlags';
+import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext';
 import {popSuspenseContext} from './ReactFiberSuspenseContext';
+import {resetHydrationState} from './ReactFiberHydrationContext';
 import {
   isContextProvider as isLegacyContextProvider,
   popContext as popLegacyContext,
@@ -74,6 +71,18 @@ function unwindWork(
     }
     case SuspenseComponent: {
       popSuspenseContext(workInProgress);
+      if (enableSuspenseServerRenderer) {
+        const suspenseState: null | SuspenseState =
+          workInProgress.memoizedState;
+        if (suspenseState !== null && suspenseState.dehydrated !== null) {
+          invariant(
+            workInProgress.alternate !== null,
+            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+              'React. Please file an issue.',
+          );
+          resetHydrationState();
+        }
+      }
       const effectTag = workInProgress.effectTag;
       if (effectTag & ShouldCapture) {
         workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
@@ -82,17 +91,10 @@ function unwindWork(
       }
       return null;
     }
-    case DehydratedSuspenseComponent: {
-      if (enableSuspenseServerRenderer) {
-        // TODO: popHydrationState
-        popSuspenseContext(workInProgress);
-        const effectTag = workInProgress.effectTag;
-        if (effectTag & ShouldCapture) {
-          workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
-          // Captured a suspense effect. Re-render the boundary.
-          return workInProgress;
-        }
-      }
+    case SuspenseListComponent: {
+      popSuspenseContext(workInProgress);
+      // SuspenseList doesn't actually catch anything. It should've been
+      // caught by a nested boundary. If not, it should bubble through.
       return null;
     }
     case HostPortal:
@@ -101,12 +103,6 @@ function unwindWork(
     case ContextProvider:
       popProvider(workInProgress);
       return null;
-    case EventComponent:
-    case EventTarget:
-      if (enableEventAPI) {
-        popHostContext(workInProgress);
-      }
-      return null;
     default:
       return null;
   }
@@ -136,21 +132,12 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
     case SuspenseComponent:
       popSuspenseContext(interruptedWork);
       break;
-    case DehydratedSuspenseComponent:
-      if (enableSuspenseServerRenderer) {
-        // TODO: popHydrationState
-        popSuspenseContext(interruptedWork);
-      }
+    case SuspenseListComponent:
+      popSuspenseContext(interruptedWork);
       break;
     case ContextProvider:
       popProvider(interruptedWork);
       break;
-    case EventComponent:
-    case EventTarget:
-      if (enableEventAPI) {
-        popHostContext(interruptedWork);
-      }
-      break;
     default:
       break;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 270299d5f731f..a4664613ac224 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -10,12 +10,11 @@
 import type {Fiber} from './ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
-import type {
-  ReactPriorityLevel,
-  SchedulerCallback,
-} from './SchedulerWithReactIntegration';
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+import type {Hook} from './ReactFiberHooks';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -23,13 +22,14 @@ import {
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
-  disableYielding,
   enableSchedulerTracing,
-  revertPassiveEffectsChange,
+  warnAboutUnmockedScheduler,
+  flushSuspenseFallbacksInTests,
+  disableSchedulerTimeoutBasedOnReactExpirationTime,
+  enableTrainModelFix,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 
 import {
   scheduleCallback,
@@ -37,7 +37,9 @@ import {
   getCurrentPriorityLevel,
   runWithPriority,
   shouldYield,
+  requestPaint,
   now,
+  NoPriority,
   ImmediatePriority,
   UserBlockingPriority,
   NormalPriority,
@@ -47,6 +49,9 @@ import {
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration';
 
+// The scheduler is imported here *only* to detect whether it's been mocked
+import * as Scheduler from 'scheduler';
+
 import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
 
 import {
@@ -55,24 +60,34 @@ import {
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
+  warnsIfNotActing,
 } from './ReactFiberHostConfig';
 
 import {createWorkInProgress, assignFiberPropertiesInDEV} from './ReactFiber';
+import {
+  isRootSuspendedAtTime,
+  markRootSuspendedAtTime,
+  markRootFinishedAtTime,
+  markRootUpdatedAtTime,
+  markRootExpiredAtTime,
+} from './ReactFiberRoot';
 import {
   NoMode,
+  StrictMode,
   ProfileMode,
-  BatchedMode,
+  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
   HostRoot,
   ClassComponent,
   SuspenseComponent,
-  DehydratedSuspenseComponent,
+  SuspenseListComponent,
   FunctionComponent,
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
+  Chunk,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
@@ -88,6 +103,8 @@ import {
   Passive,
   Incomplete,
   HostEffectMask,
+  Hydrating,
+  HydratingAndUpdate,
 } from 'shared/ReactSideEffectTags';
 import {
   NoWork,
@@ -101,6 +118,7 @@ import {
   inferPriorityFromExpirationTime,
   LOW_PRIORITY_EXPIRATION,
   Batched,
+  Idle,
 } from './ReactFiberExpirationTime';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork';
 import {completeWork} from './ReactFiberCompleteWork';
@@ -123,7 +141,7 @@ import {
 } from './ReactFiberCommitWork';
 import {enqueueUpdate} from './ReactUpdateQueue';
 import {resetContextDependencies} from './ReactFiberNewContext';
-import {resetHooks, ContextOnlyDispatcher} from './ReactFiberHooks';
+import {resetHooksAfterThrow, ContextOnlyDispatcher} from './ReactFiberHooks';
 import {createCapturedValue} from './ReactCapturedValue';
 
 import {
@@ -133,7 +151,6 @@ import {
 } from './ReactProfilerTimer';
 
 // DEV stuff
-import warningWithoutStack from 'shared/warningWithoutStack';
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {
@@ -145,8 +162,6 @@ import {
 import {
   recordEffect,
   recordScheduleUpdate,
-  startRequestCallbackTimer,
-  stopRequestCallbackTimer,
   startWorkTimer,
   stopWorkTimer,
   stopFailedWorkTimer,
@@ -173,31 +188,36 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
-  ReactCurrentActingRendererSigil,
+  IsSomeRendererActing,
 } = ReactSharedInternals;
 
-type WorkPhase = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-const NotWorking = 0;
-const BatchedPhase = 1;
-const LegacyUnbatchedPhase = 2;
-const FlushSyncPhase = 3;
-const RenderPhase = 4;
-const CommitPhase = 5;
-const BatchedEventPhase = 6;
+type ExecutionContext = number;
 
-type RootExitStatus = 0 | 1 | 2 | 3 | 4;
+const NoContext = /*                    */ 0b000000;
+const BatchedContext = /*               */ 0b000001;
+const EventContext = /*                 */ 0b000010;
+const DiscreteEventContext = /*         */ 0b000100;
+const LegacyUnbatchedContext = /*       */ 0b001000;
+const RenderContext = /*                */ 0b010000;
+const CommitContext = /*                */ 0b100000;
+
+type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
-const RootErrored = 1;
-const RootSuspended = 2;
-const RootSuspendedWithDelay = 3;
-const RootCompleted = 4;
+const RootFatalErrored = 1;
+const RootErrored = 2;
+const RootSuspended = 3;
+const RootSuspendedWithDelay = 4;
+const RootCompleted = 5;
 
 export type Thenable = {
   then(resolve: () => mixed, reject?: () => mixed): Thenable | void,
+  // Special flag to opt out of tracing interactions across a Suspense boundary.
+  __reactDoNotTraceInteractions?: boolean,
+  ...
 };
 
-// The phase of work we're currently in
-let workPhase: WorkPhase = NotWorking;
+// Describes where we are in the React execution stack
+let executionContext: ExecutionContext = NoContext;
 // The root we're working on
 let workInProgressRoot: FiberRoot | null = null;
 // The fiber we're working on
@@ -206,6 +226,8 @@ let workInProgress: Fiber | null = null;
 let renderExpirationTime: ExpirationTime = NoWork;
 // Whether to root completed, errored, suspended, etc.
 let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
+// A fatal error, if one is thrown
+let workInProgressRootFatalError: mixed = null;
 // Most recent event time among processed updates during this render.
 // This is conceptually a time stamp but expressed in terms of an ExpirationTime
 // because we deal mostly with expiration times in the hot path, so this avoids
@@ -213,6 +235,18 @@ let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
 let workInProgressRootLatestProcessedExpirationTime: ExpirationTime = Sync;
 let workInProgressRootLatestSuspenseTimeout: ExpirationTime = Sync;
 let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;
+// The work left over by components that were visited during this render. Only
+// includes unprocessed updates, not work in bailed out children.
+let workInProgressRootNextUnprocessedUpdateTime: ExpirationTime = NoWork;
+
+// If we're pinged while rendering we don't always restart immediately.
+// This flag determines if it might be worthwhile to restart if an opportunity
+// happens latere.
+let workInProgressRootHasPendingPing: boolean = false;
+// The most recent time we committed a fallback. This lets us ensure a train
+// model where we don't commit new loading states in too quick succession.
+let globalMostRecentFallbackTime: number = 0;
+const FALLBACK_THROTTLE_MS: number = 500;
 
 let nextEffect: Fiber | null = null;
 let hasUncaughtError = false;
@@ -221,6 +255,7 @@ let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
 
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
+let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoPriority;
 let pendingPassiveEffectsExpirationTime: ExpirationTime = NoWork;
 
 let rootsWithPendingDiscreteUpdates: Map<
@@ -238,6 +273,12 @@ let nestedPassiveUpdateCount: number = 0;
 
 let interruptedBy: Fiber | null = null;
 
+// Marks the need to reschedule pending interactions at these expiration times
+// during the commit phase. This enables them to be traced across components
+// that spawn new work during render. E.g. hidden boundaries, suspended SSR
+// hydration or SuspenseList.
+let spawnedWorkDuringRender: null | Array<ExpirationTime> = null;
+
 // Expiration times are computed by adding to the current time (the start
 // time). However, if two updates are scheduled within the same event, we
 // should treat their start times as simultaneous, even if the actual clock
@@ -248,8 +289,8 @@ let interruptedBy: Fiber | null = null;
 // receive the same expiration time. Otherwise we get tearing.
 let currentEventTime: ExpirationTime = NoWork;
 
-export function requestCurrentTime() {
-  if (workPhase === RenderPhase || workPhase === CommitPhase) {
+export function requestCurrentTimeForUpdate() {
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
     // We're inside React, so it's fine to read the actual time.
     return msToExpirationTime(now());
   }
@@ -263,13 +304,17 @@ export function requestCurrentTime() {
   return currentEventTime;
 }
 
+export function getCurrentTime() {
+  return msToExpirationTime(now());
+}
+
 export function computeExpirationForFiber(
   currentTime: ExpirationTime,
   fiber: Fiber,
   suspenseConfig: null | SuspenseConfig,
 ): ExpirationTime {
   const mode = fiber.mode;
-  if ((mode & BatchedMode) === NoMode) {
+  if ((mode & BlockingMode) === NoMode) {
     return Sync;
   }
 
@@ -278,8 +323,9 @@ export function computeExpirationForFiber(
     return priorityLevel === ImmediatePriority ? Sync : Batched;
   }
 
-  if (workPhase === RenderPhase) {
+  if ((executionContext & RenderContext) !== NoContext) {
     // Use whatever time we're already rendering
+    // TODO: Should there be a way to opt out, like with `runWithPriority`?
     return renderExpirationTime;
   }
 
@@ -306,7 +352,7 @@ export function computeExpirationForFiber(
         expirationTime = computeAsyncExpiration(currentTime);
         break;
       case IdlePriority:
-        expirationTime = Never;
+        expirationTime = Idle;
         break;
       default:
         invariant(false, 'Expected a valid priority level');
@@ -315,6 +361,9 @@ export function computeExpirationForFiber(
 
   // If we're in the middle of rendering a tree, do not update at the same
   // expiration time that is already rendering.
+  // TODO: We shouldn't have to do this if the update is on a different root.
+  // Refactor computeExpirationForFiber + scheduleUpdate so we have access to
+  // the root when we check for this condition.
   if (workInProgressRoot !== null && expirationTime === renderExpirationTime) {
     // This is a trick to move this update into a separate batch
     expirationTime -= 1;
@@ -323,20 +372,6 @@ export function computeExpirationForFiber(
   return expirationTime;
 }
 
-let lastUniqueAsyncExpiration = NoWork;
-export function computeUniqueAsyncExpiration(): ExpirationTime {
-  const currentTime = requestCurrentTime();
-  let result = computeAsyncExpiration(currentTime);
-  if (result <= lastUniqueAsyncExpiration) {
-    // Since we assume the current time monotonically increases, we only hit
-    // this branch when computeUniqueAsyncExpiration is fired multiple times
-    // within a 200ms window (or whatever the async bucket size is).
-    result -= 1;
-  }
-  lastUniqueAsyncExpiration = result;
-  return result;
-}
-
 export function scheduleUpdateOnFiber(
   fiber: Fiber,
   expirationTime: ExpirationTime,
@@ -350,54 +385,61 @@ export function scheduleUpdateOnFiber(
     return;
   }
 
-  root.pingTime = NoWork;
-
   checkForInterruption(fiber, expirationTime);
   recordScheduleUpdate();
 
+  // TODO: computeExpirationForFiber also reads the priority. Pass the
+  // priority as an argument to that function and this one.
+  const priorityLevel = getCurrentPriorityLevel();
+
   if (expirationTime === Sync) {
-    if (workPhase === LegacyUnbatchedPhase) {
+    if (
+      // Check if we're inside unbatchedUpdates
+      (executionContext & LegacyUnbatchedContext) !== NoContext &&
+      // Check if we're not already rendering
+      (executionContext & (RenderContext | CommitContext)) === NoContext
+    ) {
       // Register pending interactions on the root to avoid losing traced interaction data.
-      schedulePendingInteraction(root, expirationTime);
+      schedulePendingInteractions(root, expirationTime);
 
       // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
       // root inside of batchedUpdates should be synchronous, but layout updates
       // should be deferred until the end of the batch.
-      let callback = renderRoot(root, Sync, true);
-      while (callback !== null) {
-        callback = callback(true);
-      }
+      performSyncWorkOnRoot(root);
     } else {
-      scheduleCallbackForRoot(root, ImmediatePriority, Sync);
-      if (workPhase === NotWorking) {
-        // Flush the synchronous work now, wnless we're already working or inside
+      ensureRootIsScheduled(root);
+      schedulePendingInteractions(root, expirationTime);
+      if (executionContext === NoContext) {
+        // Flush the synchronous work now, unless we're already working or inside
         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
         // scheduleCallbackForFiber to preserve the ability to schedule a callback
-        // without immediately flushing it. We only do this for user-initated
-        // updates, to preserve historical behavior of sync mode.
+        // without immediately flushing it. We only do this for user-initiated
+        // updates, to preserve historical behavior of legacy mode.
         flushSyncCallbackQueue();
       }
     }
   } else {
-    // TODO: computeExpirationForFiber also reads the priority. Pass the
-    // priority as an argument to that function and this one.
-    const priorityLevel = getCurrentPriorityLevel();
-    if (priorityLevel === UserBlockingPriority) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Map([[root, expirationTime]]);
-      } else {
-        const lastDiscreteTime = rootsWithPendingDiscreteUpdates.get(root);
-        if (
-          lastDiscreteTime === undefined ||
-          lastDiscreteTime > expirationTime
-        ) {
-          rootsWithPendingDiscreteUpdates.set(root, expirationTime);
-        }
+    ensureRootIsScheduled(root);
+    schedulePendingInteractions(root, expirationTime);
+  }
+
+  if (
+    (executionContext & DiscreteEventContext) !== NoContext &&
+    // Only updates at user-blocking priority or greater are considered
+    // discrete, even inside a discrete event.
+    (priorityLevel === UserBlockingPriority ||
+      priorityLevel === ImmediatePriority)
+  ) {
+    // This is the result of a discrete event. Track the lowest priority
+    // discrete update per root so we can flush them early, if needed.
+    if (rootsWithPendingDiscreteUpdates === null) {
+      rootsWithPendingDiscreteUpdates = new Map([[root, expirationTime]]);
+    } else {
+      const lastDiscreteTime = rootsWithPendingDiscreteUpdates.get(root);
+      if (lastDiscreteTime === undefined || lastDiscreteTime > expirationTime) {
+        rootsWithPendingDiscreteUpdates.set(root, expirationTime);
       }
     }
-    scheduleCallbackForRoot(root, priorityLevel, expirationTime);
   }
 }
 export const scheduleWork = scheduleUpdateOnFiber;
@@ -446,162 +488,624 @@ function markUpdateTimeFromFiberToRoot(fiber, expirationTime) {
   }
 
   if (root !== null) {
-    // Update the first and last pending expiration times in this root
-    const firstPendingTime = root.firstPendingTime;
-    if (expirationTime > firstPendingTime) {
-      root.firstPendingTime = expirationTime;
-    }
-    const lastPendingTime = root.lastPendingTime;
-    if (lastPendingTime === NoWork || expirationTime < lastPendingTime) {
-      root.lastPendingTime = expirationTime;
+    if (workInProgressRoot === root) {
+      // Received an update to a tree that's in the middle of rendering. Mark
+      // that's unprocessed work on this root.
+      markUnprocessedUpdateTime(expirationTime);
+
+      if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
+        // The root already suspended with a delay, which means this render
+        // definitely won't finish. Since we have a new update, let's mark it as
+        // suspended now, right before marking the incoming update. This has the
+        // effect of interrupting the current render and switching to the update.
+        // TODO: This happens to work when receiving an update during the render
+        // phase, because of the trick inside computeExpirationForFiber to
+        // subtract 1 from `renderExpirationTime` to move it into a
+        // separate bucket. But we should probably model it with an exception,
+        // using the same mechanism we use to force hydration of a subtree.
+        // TODO: This does not account for low pri updates that were already
+        // scheduled before the root started rendering. Need to track the next
+        // pending expiration time (perhaps by backtracking the return path) and
+        // then trigger a restart in the `renderDidSuspendDelayIfPossible` path.
+        markRootSuspendedAtTime(root, renderExpirationTime);
+      }
     }
+    // Mark that the root has a pending update.
+    markRootUpdatedAtTime(root, expirationTime);
   }
 
   return root;
 }
 
-// Use this function, along with runRootCallback, to ensure that only a single
-// callback per root is scheduled. It's still possible to call renderRoot
-// directly, but scheduling via this function helps avoid excessive callbacks.
-// It works by storing the callback node and expiration time on the root. When a
-// new callback comes in, it compares the expiration time to determine if it
-// should cancel the previous one. It also relies on commitRoot scheduling a
-// callback to render the next level, because that means we don't need a
-// separate callback per expiration time.
-function scheduleCallbackForRoot(
-  root: FiberRoot,
-  priorityLevel: ReactPriorityLevel,
-  expirationTime: ExpirationTime,
-) {
-  const existingCallbackExpirationTime = root.callbackExpirationTime;
-  if (existingCallbackExpirationTime < expirationTime) {
-    // New callback has higher priority than the existing one.
-    const existingCallbackNode = root.callbackNode;
+function getNextRootExpirationTimeToWorkOn(root: FiberRoot): ExpirationTime {
+  // Determines the next expiration time that the root should render, taking
+  // into account levels that may be suspended, or levels that may have
+  // received a ping.
+
+  const lastExpiredTime = root.lastExpiredTime;
+  if (lastExpiredTime !== NoWork) {
+    return lastExpiredTime;
+  }
+
+  // "Pending" refers to any update that hasn't committed yet, including if it
+  // suspended. The "suspended" range is therefore a subset.
+  const firstPendingTime = root.firstPendingTime;
+  if (!isRootSuspendedAtTime(root, firstPendingTime)) {
+    // The highest priority pending time is not suspended. Let's work on that.
+    return firstPendingTime;
+  }
+
+  // If the first pending time is suspended, check if there's a lower priority
+  // pending level that we know about. Or check if we received a ping. Work
+  // on whichever is higher priority.
+  const lastPingedTime = root.lastPingedTime;
+  const nextKnownPendingLevel = root.nextKnownPendingLevel;
+  const nextLevel =
+    lastPingedTime > nextKnownPendingLevel
+      ? lastPingedTime
+      : nextKnownPendingLevel;
+  if (
+    enableTrainModelFix &&
+    nextLevel <= Idle &&
+    firstPendingTime !== nextLevel
+  ) {
+    // Don't work on Idle/Never priority unless everything else is committed.
+    return NoWork;
+  }
+  return nextLevel;
+}
+
+// Use this function to schedule a task for a root. There's only one task per
+// root; if a task was already scheduled, we'll check to make sure the
+// expiration time of the existing task is the same as the expiration time of
+// the next level that the root has work on. This function is called on every
+// update, and right before exiting a task.
+function ensureRootIsScheduled(root: FiberRoot) {
+  const lastExpiredTime = root.lastExpiredTime;
+  if (lastExpiredTime !== NoWork) {
+    // Special case: Expired work should flush synchronously.
+    root.callbackExpirationTime = Sync;
+    root.callbackPriority = ImmediatePriority;
+    root.callbackNode = scheduleSyncCallback(
+      performSyncWorkOnRoot.bind(null, root),
+    );
+    return;
+  }
+
+  const expirationTime = getNextRootExpirationTimeToWorkOn(root);
+  const existingCallbackNode = root.callbackNode;
+  if (expirationTime === NoWork) {
+    // There's nothing to work on.
     if (existingCallbackNode !== null) {
-      cancelCallback(existingCallbackNode);
+      root.callbackNode = null;
+      root.callbackExpirationTime = NoWork;
+      root.callbackPriority = NoPriority;
     }
-    root.callbackExpirationTime = expirationTime;
+    return;
+  }
 
-    if (expirationTime === Sync) {
-      // Sync React callbacks are scheduled on a special internal queue
-      root.callbackNode = scheduleSyncCallback(
-        runRootCallback.bind(
-          null,
-          root,
-          renderRoot.bind(null, root, expirationTime),
-        ),
-      );
-    } else {
-      let options = null;
-      if (expirationTime !== Never) {
-        let timeout = expirationTimeToMs(expirationTime) - now();
-        options = {timeout};
+  // TODO: If this is an update, we already read the current time. Pass the
+  // time as an argument.
+  const currentTime = requestCurrentTimeForUpdate();
+  const priorityLevel = inferPriorityFromExpirationTime(
+    currentTime,
+    expirationTime,
+  );
+
+  // If there's an existing render task, confirm it has the correct priority and
+  // expiration time. Otherwise, we'll cancel it and schedule a new one.
+  if (existingCallbackNode !== null) {
+    const existingCallbackPriority = root.callbackPriority;
+    const existingCallbackExpirationTime = root.callbackExpirationTime;
+    if (
+      // Callback must have the exact same expiration time.
+      existingCallbackExpirationTime === expirationTime &&
+      // Callback must have greater or equal priority.
+      existingCallbackPriority >= priorityLevel
+    ) {
+      // Existing callback is sufficient.
+      return;
+    }
+    // Need to schedule a new task.
+    // TODO: Instead of scheduling a new task, we should be able to change the
+    // priority of the existing one.
+    cancelCallback(existingCallbackNode);
+  }
+
+  root.callbackExpirationTime = expirationTime;
+  root.callbackPriority = priorityLevel;
+
+  let callbackNode;
+  if (expirationTime === Sync) {
+    // Sync React callbacks are scheduled on a special internal queue
+    callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+  } else if (disableSchedulerTimeoutBasedOnReactExpirationTime) {
+    callbackNode = scheduleCallback(
+      priorityLevel,
+      performConcurrentWorkOnRoot.bind(null, root),
+    );
+  } else {
+    callbackNode = scheduleCallback(
+      priorityLevel,
+      performConcurrentWorkOnRoot.bind(null, root),
+      // Compute a task timeout based on the expiration time. This also affects
+      // ordering because tasks are processed in timeout order.
+      {timeout: expirationTimeToMs(expirationTime) - now()},
+    );
+  }
+
+  root.callbackNode = callbackNode;
+}
+
+// This is the entry point for every concurrent task, i.e. anything that
+// goes through Scheduler.
+function performConcurrentWorkOnRoot(root, didTimeout) {
+  // Since we know we're in a React event, we can clear the current
+  // event time. The next update will compute a new event time.
+  currentEventTime = NoWork;
+
+  if (didTimeout) {
+    // The render task took too long to complete. Mark the current time as
+    // expired to synchronously render all expired work in a single batch.
+    const currentTime = requestCurrentTimeForUpdate();
+    markRootExpiredAtTime(root, currentTime);
+    // This will schedule a synchronous callback.
+    ensureRootIsScheduled(root);
+    return null;
+  }
+
+  // Determine the next expiration time to work on, using the fields stored
+  // on the root.
+  const expirationTime = getNextRootExpirationTimeToWorkOn(root);
+  if (expirationTime !== NoWork) {
+    const originalCallbackNode = root.callbackNode;
+    invariant(
+      (executionContext & (RenderContext | CommitContext)) === NoContext,
+      'Should not already be working.',
+    );
+
+    flushPassiveEffects();
+
+    // If the root or expiration time have changed, throw out the existing stack
+    // and prepare a fresh one. Otherwise we'll continue where we left off.
+    if (
+      root !== workInProgressRoot ||
+      expirationTime !== renderExpirationTime
+    ) {
+      prepareFreshStack(root, expirationTime);
+      startWorkOnPendingInteractions(root, expirationTime);
+    }
+
+    // If we have a work-in-progress fiber, it means there's still work to do
+    // in this root.
+    if (workInProgress !== null) {
+      const prevExecutionContext = executionContext;
+      executionContext |= RenderContext;
+      const prevDispatcher = pushDispatcher(root);
+      const prevInteractions = pushInteractions(root);
+      startWorkLoopTimer(workInProgress);
+      do {
+        try {
+          workLoopConcurrent();
+          break;
+        } catch (thrownValue) {
+          handleError(root, thrownValue);
+        }
+      } while (true);
+      resetContextDependencies();
+      executionContext = prevExecutionContext;
+      popDispatcher(prevDispatcher);
+      if (enableSchedulerTracing) {
+        popInteractions(((prevInteractions: any): Set<Interaction>));
       }
 
-      root.callbackNode = scheduleCallback(
-        priorityLevel,
-        runRootCallback.bind(
-          null,
+      if (workInProgressRootExitStatus === RootFatalErrored) {
+        const fatalError = workInProgressRootFatalError;
+        stopInterruptedWorkLoopTimer();
+        prepareFreshStack(root, expirationTime);
+        markRootSuspendedAtTime(root, expirationTime);
+        ensureRootIsScheduled(root);
+        throw fatalError;
+      }
+
+      if (workInProgress !== null) {
+        // There's still work left over. Exit without committing.
+        stopInterruptedWorkLoopTimer();
+      } else {
+        // We now have a consistent tree. The next step is either to commit it,
+        // or, if something suspended, wait to commit it after a timeout.
+        stopFinishedWorkLoopTimer();
+
+        const finishedWork: Fiber = ((root.finishedWork =
+          root.current.alternate): any);
+        root.finishedExpirationTime = expirationTime;
+        finishConcurrentRender(
           root,
-          renderRoot.bind(null, root, expirationTime),
-        ),
-        options,
+          finishedWork,
+          workInProgressRootExitStatus,
+          expirationTime,
+        );
+      }
+
+      ensureRootIsScheduled(root);
+      if (root.callbackNode === originalCallbackNode) {
+        // The task node scheduled for this root is the same one that's
+        // currently executed. Need to return a continuation.
+        return performConcurrentWorkOnRoot.bind(null, root);
+      }
+    }
+  }
+  return null;
+}
+
+function finishConcurrentRender(
+  root,
+  finishedWork,
+  exitStatus,
+  expirationTime,
+) {
+  // Set this to null to indicate there's no in-progress render.
+  workInProgressRoot = null;
+
+  switch (exitStatus) {
+    case RootIncomplete:
+    case RootFatalErrored: {
+      invariant(false, 'Root did not complete. This is a bug in React.');
+    }
+    // Flow knows about invariant, so it complains if I add a break
+    // statement, but eslint doesn't know about invariant, so it complains
+    // if I do. eslint-disable-next-line no-fallthrough
+    case RootErrored: {
+      // If this was an async render, the error may have happened due to
+      // a mutation in a concurrent event. Try rendering one more time,
+      // synchronously, to see if the error goes away. If there are
+      // lower priority updates, let's include those, too, in case they
+      // fix the inconsistency. Render at Idle to include all updates.
+      // If it was Idle or Never or some not-yet-invented time, render
+      // at that time.
+      markRootExpiredAtTime(
+        root,
+        expirationTime > Idle ? Idle : expirationTime,
       );
+      // We assume that this second render pass will be synchronous
+      // and therefore not hit this path again.
+      break;
+    }
+    case RootSuspended: {
+      markRootSuspendedAtTime(root, expirationTime);
+      const lastSuspendedTime = root.lastSuspendedTime;
+      if (expirationTime === lastSuspendedTime) {
+        root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);
+      }
+      flushSuspensePriorityWarningInDEV();
+
+      // We have an acceptable loading state. We need to figure out if we
+      // should immediately commit it or wait a bit.
+
+      // If we have processed new updates during this render, we may now
+      // have a new loading state ready. We want to ensure that we commit
+      // that as soon as possible.
+      const hasNotProcessedNewUpdates =
+        workInProgressRootLatestProcessedExpirationTime === Sync;
       if (
-        enableUserTimingAPI &&
-        expirationTime !== Sync &&
-        workPhase !== RenderPhase &&
-        workPhase !== CommitPhase
+        hasNotProcessedNewUpdates &&
+        // do not delay if we're inside an act() scope
+        !(
+          __DEV__ &&
+          flushSuspenseFallbacksInTests &&
+          IsThisRendererActing.current
+        )
       ) {
-        // Scheduled an async callback, and we're not already working. Add an
-        // entry to the flamegraph that shows we're waiting for a callback
-        // to fire.
-        startRequestCallbackTimer();
+        // If we have not processed any new updates during this pass, then
+        // this is either a retry of an existing fallback state or a
+        // hidden tree. Hidden trees shouldn't be batched with other work
+        // and after that's fixed it can only be a retry. We're going to
+        // throttle committing retries so that we don't show too many
+        // loading states too quickly.
+        let msUntilTimeout =
+          globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();
+        // Don't bother with a very short suspense time.
+        if (msUntilTimeout > 10) {
+          if (workInProgressRootHasPendingPing) {
+            const lastPingedTime = root.lastPingedTime;
+            if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {
+              // This render was pinged but we didn't get to restart
+              // earlier so try restarting now instead.
+              root.lastPingedTime = expirationTime;
+              prepareFreshStack(root, expirationTime);
+              break;
+            }
+          }
+
+          const nextTime = getNextRootExpirationTimeToWorkOn(root);
+          if (nextTime !== NoWork && nextTime !== expirationTime) {
+            // There's additional work on this root.
+            break;
+          }
+          if (
+            lastSuspendedTime !== NoWork &&
+            lastSuspendedTime !== expirationTime
+          ) {
+            // We should prefer to render the fallback of at the last
+            // suspended level. Ping the last suspended level to try
+            // rendering it again.
+            root.lastPingedTime = lastSuspendedTime;
+            break;
+          }
+
+          // The render is suspended, it hasn't timed out, and there's no
+          // lower priority work to do. Instead of committing the fallback
+          // immediately, wait for more data to arrive.
+          root.timeoutHandle = scheduleTimeout(
+            commitRoot.bind(null, root),
+            msUntilTimeout,
+          );
+          break;
+        }
       }
+      // The work expired. Commit immediately.
+      commitRoot(root);
+      break;
     }
-  }
+    case RootSuspendedWithDelay: {
+      markRootSuspendedAtTime(root, expirationTime);
+      const lastSuspendedTime = root.lastSuspendedTime;
+      if (expirationTime === lastSuspendedTime) {
+        root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);
+      }
+      flushSuspensePriorityWarningInDEV();
 
-  // Add the current set of interactions to the pending set associated with
-  // this root.
-  schedulePendingInteraction(root, expirationTime);
-}
+      if (
+        // do not delay if we're inside an act() scope
+        !(
+          __DEV__ &&
+          flushSuspenseFallbacksInTests &&
+          IsThisRendererActing.current
+        )
+      ) {
+        // We're suspended in a state that should be avoided. We'll try to
+        // avoid committing it for as long as the timeouts let us.
+        if (workInProgressRootHasPendingPing) {
+          const lastPingedTime = root.lastPingedTime;
+          if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {
+            // This render was pinged but we didn't get to restart earlier
+            // so try restarting now instead.
+            root.lastPingedTime = expirationTime;
+            prepareFreshStack(root, expirationTime);
+            break;
+          }
+        }
 
-function runRootCallback(root, callback, isSync) {
-  const prevCallbackNode = root.callbackNode;
-  let continuation = null;
-  try {
-    continuation = callback(isSync);
-    if (continuation !== null) {
-      return runRootCallback.bind(null, root, continuation);
-    } else {
-      return null;
+        const nextTime = getNextRootExpirationTimeToWorkOn(root);
+        if (nextTime !== NoWork && nextTime !== expirationTime) {
+          // There's additional work on this root.
+          break;
+        }
+        if (
+          lastSuspendedTime !== NoWork &&
+          lastSuspendedTime !== expirationTime
+        ) {
+          // We should prefer to render the fallback of at the last
+          // suspended level. Ping the last suspended level to try
+          // rendering it again.
+          root.lastPingedTime = lastSuspendedTime;
+          break;
+        }
+
+        let msUntilTimeout;
+        if (workInProgressRootLatestSuspenseTimeout !== Sync) {
+          // We have processed a suspense config whose expiration time we
+          // can use as the timeout.
+          msUntilTimeout =
+            expirationTimeToMs(workInProgressRootLatestSuspenseTimeout) - now();
+        } else if (workInProgressRootLatestProcessedExpirationTime === Sync) {
+          // This should never normally happen because only new updates
+          // cause delayed states, so we should have processed something.
+          // However, this could also happen in an offscreen tree.
+          msUntilTimeout = 0;
+        } else {
+          // If we don't have a suspense config, we're going to use a
+          // heuristic to determine how long we can suspend.
+          const eventTimeMs: number = inferTimeFromExpirationTime(
+            workInProgressRootLatestProcessedExpirationTime,
+          );
+          const currentTimeMs = now();
+          const timeUntilExpirationMs =
+            expirationTimeToMs(expirationTime) - currentTimeMs;
+          let timeElapsed = currentTimeMs - eventTimeMs;
+          if (timeElapsed < 0) {
+            // We get this wrong some time since we estimate the time.
+            timeElapsed = 0;
+          }
+
+          msUntilTimeout = jnd(timeElapsed) - timeElapsed;
+
+          // Clamp the timeout to the expiration time. TODO: Once the
+          // event time is exact instead of inferred from expiration time
+          // we don't need this.
+          if (timeUntilExpirationMs < msUntilTimeout) {
+            msUntilTimeout = timeUntilExpirationMs;
+          }
+        }
+
+        // Don't bother with a very short suspense time.
+        if (msUntilTimeout > 10) {
+          // The render is suspended, it hasn't timed out, and there's no
+          // lower priority work to do. Instead of committing the fallback
+          // immediately, wait for more data to arrive.
+          root.timeoutHandle = scheduleTimeout(
+            commitRoot.bind(null, root),
+            msUntilTimeout,
+          );
+          break;
+        }
+      }
+      // The work expired. Commit immediately.
+      commitRoot(root);
+      break;
     }
-  } finally {
-    // If the callback exits without returning a continuation, remove the
-    // corresponding callback node from the root. Unless the callback node
-    // has changed, which implies that it was already cancelled by a high
-    // priority update.
-    if (continuation === null && prevCallbackNode === root.callbackNode) {
-      root.callbackNode = null;
-      root.callbackExpirationTime = NoWork;
+    case RootCompleted: {
+      // The work completed. Ready to commit.
+      if (
+        // do not delay if we're inside an act() scope
+        !(
+          __DEV__ &&
+          flushSuspenseFallbacksInTests &&
+          IsThisRendererActing.current
+        ) &&
+        workInProgressRootLatestProcessedExpirationTime !== Sync &&
+        workInProgressRootCanSuspendUsingConfig !== null
+      ) {
+        // If we have exceeded the minimum loading delay, which probably
+        // means we have shown a spinner already, we might have to suspend
+        // a bit longer to ensure that the spinner is shown for
+        // enough time.
+        const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(
+          workInProgressRootLatestProcessedExpirationTime,
+          expirationTime,
+          workInProgressRootCanSuspendUsingConfig,
+        );
+        if (msUntilTimeout > 10) {
+          markRootSuspendedAtTime(root, expirationTime);
+          root.timeoutHandle = scheduleTimeout(
+            commitRoot.bind(null, root),
+            msUntilTimeout,
+          );
+          break;
+        }
+      }
+      commitRoot(root);
+      break;
+    }
+    default: {
+      invariant(false, 'Unknown root exit status.');
     }
   }
 }
 
-export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {
-  if (workPhase === RenderPhase || workPhase === CommitPhase) {
-    invariant(
-      false,
-      'work.commit(): Cannot commit while already rendering. This likely ' +
-        'means you attempted to commit from inside a lifecycle method.',
-    );
-  }
-  scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));
-  flushSyncCallbackQueue();
-}
+// This is the entry point for synchronous tasks that don't go
+// through Scheduler
+function performSyncWorkOnRoot(root) {
+  // Check if there's expired work on this root. Otherwise, render at Sync.
+  const lastExpiredTime = root.lastExpiredTime;
+  const expirationTime = lastExpiredTime !== NoWork ? lastExpiredTime : Sync;
+  invariant(
+    (executionContext & (RenderContext | CommitContext)) === NoContext,
+    'Should not already be working.',
+  );
 
-export function flushDiscreteUpdates() {
-  // TODO: we ideally do not want to early reurn for BatchedPhase here either.
-  // Removing this causes act() tests to fail, so we should follow up.
-  if (workPhase === CommitPhase || workPhase === BatchedPhase) {
-    // We're inside the commit phase or batched phase, so we can't
-    // synchronously flush pending work. This is probably a nested event
-    // dispatch triggered by a lifecycle/effect, like `el.focus()`. Exit.
-    return;
+  flushPassiveEffects();
+
+  // If the root or expiration time have changed, throw out the existing stack
+  // and prepare a fresh one. Otherwise we'll continue where we left off.
+  if (root !== workInProgressRoot || expirationTime !== renderExpirationTime) {
+    prepareFreshStack(root, expirationTime);
+    startWorkOnPendingInteractions(root, expirationTime);
   }
-  if (workPhase === RenderPhase) {
-    if (__DEV__) {
-      warning(
+
+  // If we have a work-in-progress fiber, it means there's still work to do
+  // in this root.
+  if (workInProgress !== null) {
+    const prevExecutionContext = executionContext;
+    executionContext |= RenderContext;
+    const prevDispatcher = pushDispatcher(root);
+    const prevInteractions = pushInteractions(root);
+    startWorkLoopTimer(workInProgress);
+
+    do {
+      try {
+        workLoopSync();
+        break;
+      } catch (thrownValue) {
+        handleError(root, thrownValue);
+      }
+    } while (true);
+    resetContextDependencies();
+    executionContext = prevExecutionContext;
+    popDispatcher(prevDispatcher);
+    if (enableSchedulerTracing) {
+      popInteractions(((prevInteractions: any): Set<Interaction>));
+    }
+
+    if (workInProgressRootExitStatus === RootFatalErrored) {
+      const fatalError = workInProgressRootFatalError;
+      stopInterruptedWorkLoopTimer();
+      prepareFreshStack(root, expirationTime);
+      markRootSuspendedAtTime(root, expirationTime);
+      ensureRootIsScheduled(root);
+      throw fatalError;
+    }
+
+    if (workInProgress !== null) {
+      // This is a sync render, so we should have finished the whole tree.
+      invariant(
         false,
-        'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
-          'already rendering.',
+        'Cannot commit an incomplete root. This error is likely caused by a ' +
+          'bug in React. Please file an issue.',
       );
+    } else {
+      // We now have a consistent tree. Because this is a sync render, we
+      // will commit it even if something suspended.
+      stopFinishedWorkLoopTimer();
+      root.finishedWork = (root.current.alternate: any);
+      root.finishedExpirationTime = expirationTime;
+      finishSyncRender(root, workInProgressRootExitStatus, expirationTime);
     }
-    return;
+
+    // Before exiting, make sure there's a callback scheduled for the next
+    // pending level.
+    ensureRootIsScheduled(root);
   }
-  flushPendingDiscreteUpdates();
-  if (!revertPassiveEffectsChange) {
-    // If the discrete updates scheduled passive effects, flush them now so that
-    // they fire before the next serial event.
-    flushPassiveEffects();
+
+  return null;
+}
+
+function finishSyncRender(root, exitStatus, expirationTime) {
+  // Set this to null to indicate there's no in-progress render.
+  workInProgressRoot = null;
+
+  if (__DEV__) {
+    if (exitStatus === RootSuspended || exitStatus === RootSuspendedWithDelay) {
+      flushSuspensePriorityWarningInDEV();
+    }
+  }
+  commitRoot(root);
+}
+
+export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {
+  markRootExpiredAtTime(root, expirationTime);
+  ensureRootIsScheduled(root);
+  if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+    flushSyncCallbackQueue();
   }
 }
 
-function resolveLocksOnRoot(root: FiberRoot, expirationTime: ExpirationTime) {
-  const firstBatch = root.firstBatch;
+export function flushDiscreteUpdates() {
+  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
+  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
+  // those two cases. Need to fix this before exposing flushDiscreteUpdates
+  // as a public API.
   if (
-    firstBatch !== null &&
-    firstBatch._defer &&
-    firstBatch._expirationTime >= expirationTime
+    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
+    NoContext
   ) {
-    scheduleCallback(NormalPriority, () => {
-      firstBatch._onComplete();
-      return null;
-    });
-    return true;
-  } else {
-    return false;
+    if (__DEV__) {
+      if ((executionContext & RenderContext) !== NoContext) {
+        console.error(
+          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
+            'already rendering.',
+        );
+      }
+    }
+    // We're already rendering, so we can't synchronously flush pending work.
+    // This is probably a nested event dispatch triggered by a lifecycle/effect,
+    // like `el.focus()`. Exit.
+    return;
   }
+  flushPendingDiscreteUpdates();
+  // If the discrete updates scheduled passive effects, flush them now so that
+  // they fire before the next serial event.
+  flushPassiveEffects();
 }
 
 export function deferredUpdates<A>(fn: () => A): A {
@@ -609,15 +1113,6 @@ export function deferredUpdates<A>(fn: () => A): A {
   return runWithPriority(NormalPriority, fn);
 }
 
-export function discreteUpdates<A, B, C, R>(
-  fn: (A, B, C) => R,
-  a: A,
-  b: B,
-  c: C,
-): R {
-  return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));
-}
-
 export function syncUpdates<A, B, C, R>(
   fn: (A, B, C) => R,
   a: A,
@@ -634,7 +1129,8 @@ function flushPendingDiscreteUpdates() {
     const roots = rootsWithPendingDiscreteUpdates;
     rootsWithPendingDiscreteUpdates = null;
     roots.forEach((expirationTime, root) => {
-      scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));
+      markRootExpiredAtTime(root, expirationTime);
+      ensureRootIsScheduled(root);
     });
     // Now flush the immediate queue.
     flushSyncCallbackQueue();
@@ -642,69 +1138,82 @@ function flushPendingDiscreteUpdates() {
 }
 
 export function batchedUpdates<A, R>(fn: A => R, a: A): R {
-  if (workPhase !== NotWorking) {
-    // We're already working, or inside a batch, so batchedUpdates is a no-op.
-    return fn(a);
-  }
-  workPhase = BatchedPhase;
+  const prevExecutionContext = executionContext;
+  executionContext |= BatchedContext;
   try {
     return fn(a);
   } finally {
-    workPhase = NotWorking;
-    // Flush the immediate callbacks that were scheduled during this batch
-    flushSyncCallbackQueue();
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      flushSyncCallbackQueue();
+    }
   }
 }
 
 export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
-  if (workPhase !== NotWorking) {
-    // We're already working, or inside a batch, so batchedUpdates is a no-op.
+  const prevExecutionContext = executionContext;
+  executionContext |= EventContext;
+  try {
     return fn(a);
+  } finally {
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      flushSyncCallbackQueue();
+    }
   }
-  const prevWorkPhase = workPhase;
-  workPhase = BatchedEventPhase;
+}
+
+export function discreteUpdates<A, B, C, R>(
+  fn: (A, B, C) => R,
+  a: A,
+  b: B,
+  c: C,
+): R {
+  const prevExecutionContext = executionContext;
+  executionContext |= DiscreteEventContext;
   try {
-    return fn(a);
+    // Should this
+    return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));
   } finally {
-    workPhase = prevWorkPhase;
-    // Flush the immediate callbacks that were scheduled during this batch
-    flushSyncCallbackQueue();
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      flushSyncCallbackQueue();
+    }
   }
 }
 
 export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
-  if (
-    workPhase !== BatchedPhase &&
-    workPhase !== FlushSyncPhase &&
-    workPhase !== BatchedEventPhase
-  ) {
-    // We're not inside batchedUpdates or flushSync, so unbatchedUpdates is
-    // a no-op.
-    return fn(a);
-  }
-  const prevWorkPhase = workPhase;
-  workPhase = LegacyUnbatchedPhase;
+  const prevExecutionContext = executionContext;
+  executionContext &= ~BatchedContext;
+  executionContext |= LegacyUnbatchedContext;
   try {
     return fn(a);
   } finally {
-    workPhase = prevWorkPhase;
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      flushSyncCallbackQueue();
+    }
   }
 }
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
-  if (workPhase === RenderPhase || workPhase === CommitPhase) {
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
     invariant(
       false,
       'flushSync was called from inside a lifecycle method. It cannot be ' +
         'called when React is already rendering.',
     );
   }
-  const prevWorkPhase = workPhase;
-  workPhase = FlushSyncPhase;
+  const prevExecutionContext = executionContext;
+  executionContext |= BatchedContext;
   try {
     return runWithPriority(ImmediatePriority, fn.bind(null, a));
   } finally {
-    workPhase = prevWorkPhase;
+    executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
@@ -713,13 +1222,13 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 }
 
 export function flushControlled(fn: () => mixed): void {
-  const prevWorkPhase = workPhase;
-  workPhase = BatchedPhase;
+  const prevExecutionContext = executionContext;
+  executionContext |= BatchedContext;
   try {
     runWithPriority(ImmediatePriority, fn);
   } finally {
-    workPhase = prevWorkPhase;
-    if (workPhase === NotWorking) {
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       flushSyncCallbackQueue();
     }
@@ -750,289 +1259,116 @@ function prepareFreshStack(root, expirationTime) {
   workInProgress = createWorkInProgress(root.current, null, expirationTime);
   renderExpirationTime = expirationTime;
   workInProgressRootExitStatus = RootIncomplete;
+  workInProgressRootFatalError = null;
   workInProgressRootLatestProcessedExpirationTime = Sync;
   workInProgressRootLatestSuspenseTimeout = Sync;
   workInProgressRootCanSuspendUsingConfig = null;
+  workInProgressRootNextUnprocessedUpdateTime = NoWork;
+  workInProgressRootHasPendingPing = false;
+
+  if (enableSchedulerTracing) {
+    spawnedWorkDuringRender = null;
+  }
 
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
-    componentsWithSuspendedDiscreteUpdates = null;
+    componentsThatTriggeredHighPriSuspend = null;
   }
 }
 
-function renderRoot(
-  root: FiberRoot,
-  expirationTime: ExpirationTime,
-  isSync: boolean,
-): SchedulerCallback | null {
-  invariant(
-    workPhase !== RenderPhase && workPhase !== CommitPhase,
-    'Should not already be working.',
-  );
-
-  if (enableUserTimingAPI && expirationTime !== Sync) {
-    const didExpire = isSync;
-    stopRequestCallbackTimer(didExpire);
-  }
-
-  if (root.firstPendingTime < expirationTime) {
-    // If there's no work left at this expiration time, exit immediately. This
-    // happens when multiple callbacks are scheduled for a single root, but an
-    // earlier callback flushes the work of a later one.
-    return null;
-  }
-
-  if (root.finishedExpirationTime === expirationTime) {
-    // There's already a pending commit at this expiration time.
-    return commitRoot.bind(null, root);
-  }
-
-  flushPassiveEffects();
-
-  // If the root or expiration time have changed, throw out the existing stack
-  // and prepare a fresh one. Otherwise we'll continue where we left off.
-  if (root !== workInProgressRoot || expirationTime !== renderExpirationTime) {
-    prepareFreshStack(root, expirationTime);
-    startWorkOnPendingInteraction(root, expirationTime);
-  }
-
-  // If we have a work-in-progress fiber, it means there's still work to do
-  // in this root.
-  if (workInProgress !== null) {
-    const prevWorkPhase = workPhase;
-    workPhase = RenderPhase;
-    let prevDispatcher = ReactCurrentDispatcher.current;
-    if (prevDispatcher === null) {
-      // The React isomorphic package does not include a default dispatcher.
-      // Instead the first renderer will lazily attach one, in order to give
-      // nicer error messages.
-      prevDispatcher = ContextOnlyDispatcher;
-    }
-    ReactCurrentDispatcher.current = ContextOnlyDispatcher;
-    let prevInteractions: Set<Interaction> | null = null;
-    if (enableSchedulerTracing) {
-      prevInteractions = __interactionsRef.current;
-      __interactionsRef.current = root.memoizedInteractions;
-    }
-
-    startWorkLoopTimer(workInProgress);
-
-    // TODO: Fork renderRoot into renderRootSync and renderRootAsync
-    if (isSync) {
-      if (expirationTime !== Sync) {
-        // An async update expired. There may be other expired updates on
-        // this root. We should render all the expired work in a
-        // single batch.
-        const currentTime = requestCurrentTime();
-        if (currentTime < expirationTime) {
-          // Restart at the current time.
-          workPhase = prevWorkPhase;
-          resetContextDependencies();
-          ReactCurrentDispatcher.current = prevDispatcher;
-          if (enableSchedulerTracing) {
-            __interactionsRef.current = ((prevInteractions: any): Set<
-              Interaction,
-            >);
-          }
-          return renderRoot.bind(null, root, currentTime);
-        }
-      }
-    } else {
-      // Since we know we're in a React event, we can clear the current
-      // event time. The next update will compute a new event time.
-      currentEventTime = NoWork;
-    }
-
-    do {
-      try {
-        if (isSync) {
-          workLoopSync();
-        } else {
-          workLoop();
-        }
-        break;
-      } catch (thrownValue) {
-        // Reset module-level state that was set during the render phase.
-        resetContextDependencies();
-        resetHooks();
-
-        const sourceFiber = workInProgress;
-        if (sourceFiber === null || sourceFiber.return === null) {
-          // Expected to be working on a non-root fiber. This is a fatal error
-          // because there's no ancestor that can handle it; the root is
-          // supposed to capture all errors that weren't caught by an error
-          // boundary.
-          prepareFreshStack(root, expirationTime);
-          workPhase = prevWorkPhase;
-          throw thrownValue;
-        }
+function handleError(root, thrownValue) {
+  do {
+    try {
+      // Reset module-level state that was set during the render phase.
+      resetContextDependencies();
+      resetHooksAfterThrow();
+      resetCurrentDebugFiberInDEV();
 
-        if (enableProfilerTimer && sourceFiber.mode & ProfileMode) {
-          // Record the time spent rendering before an error was thrown. This
-          // avoids inaccurate Profiler durations in the case of a
-          // suspended render.
-          stopProfilerTimerIfRunningAndRecordDelta(sourceFiber, true);
-        }
+      if (workInProgress === null || workInProgress.return === null) {
+        // Expected to be working on a non-root fiber. This is a fatal error
+        // because there's no ancestor that can handle it; the root is
+        // supposed to capture all errors that weren't caught by an error
+        // boundary.
+        workInProgressRootExitStatus = RootFatalErrored;
+        workInProgressRootFatalError = thrownValue;
+        return null;
+      }
 
-        const returnFiber = sourceFiber.return;
-        throwException(
-          root,
-          returnFiber,
-          sourceFiber,
-          thrownValue,
-          renderExpirationTime,
-        );
-        workInProgress = completeUnitOfWork(sourceFiber);
+      if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
+        // Record the time spent rendering before an error was thrown. This
+        // avoids inaccurate Profiler durations in the case of a
+        // suspended render.
+        stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
       }
-    } while (true);
 
-    workPhase = prevWorkPhase;
-    resetContextDependencies();
-    ReactCurrentDispatcher.current = prevDispatcher;
-    if (enableSchedulerTracing) {
-      __interactionsRef.current = ((prevInteractions: any): Set<Interaction>);
+      throwException(
+        root,
+        workInProgress.return,
+        workInProgress,
+        thrownValue,
+        renderExpirationTime,
+      );
+      workInProgress = completeUnitOfWork(workInProgress);
+    } catch (yetAnotherThrownValue) {
+      // Something in the return path also threw.
+      thrownValue = yetAnotherThrownValue;
+      continue;
     }
+    // Return to the normal work loop.
+    return;
+  } while (true);
+}
 
-    if (workInProgress !== null) {
-      // There's still work left over. Return a continuation.
-      stopInterruptedWorkLoopTimer();
-      if (expirationTime !== Sync) {
-        startRequestCallbackTimer();
-      }
-      return renderRoot.bind(null, root, expirationTime);
-    }
+function pushDispatcher(root) {
+  const prevDispatcher = ReactCurrentDispatcher.current;
+  ReactCurrentDispatcher.current = ContextOnlyDispatcher;
+  if (prevDispatcher === null) {
+    // The React isomorphic package does not include a default dispatcher.
+    // Instead the first renderer will lazily attach one, in order to give
+    // nicer error messages.
+    return ContextOnlyDispatcher;
+  } else {
+    return prevDispatcher;
   }
+}
 
-  // We now have a consistent tree. The next step is either to commit it, or, if
-  // something suspended, wait to commit it after a timeout.
-  stopFinishedWorkLoopTimer();
-
-  root.finishedWork = root.current.alternate;
-  root.finishedExpirationTime = expirationTime;
+function popDispatcher(prevDispatcher) {
+  ReactCurrentDispatcher.current = prevDispatcher;
+}
 
-  const isLocked = resolveLocksOnRoot(root, expirationTime);
-  if (isLocked) {
-    // This root has a lock that prevents it from committing. Exit. If we begin
-    // work on the root again, without any intervening updates, it will finish
-    // without doing additional work.
-    return null;
+function pushInteractions(root) {
+  if (enableSchedulerTracing) {
+    const prevInteractions: Set<Interaction> | null = __interactionsRef.current;
+    __interactionsRef.current = root.memoizedInteractions;
+    return prevInteractions;
   }
+  return null;
+}
 
-  // Set this to null to indicate there's no in-progress render.
-  workInProgressRoot = null;
-
-  switch (workInProgressRootExitStatus) {
-    case RootIncomplete: {
-      invariant(false, 'Should have a work-in-progress.');
-    }
-    // Flow knows about invariant, so it compains if I add a break statement,
-    // but eslint doesn't know about invariant, so it complains if I do.
-    // eslint-disable-next-line no-fallthrough
-    case RootErrored: {
-      // An error was thrown. First check if there is lower priority work
-      // scheduled on this root.
-      const lastPendingTime = root.lastPendingTime;
-      if (root.lastPendingTime < expirationTime) {
-        // There's lower priority work. Before raising the error, try rendering
-        // at the lower priority to see if it fixes it. Use a continuation to
-        // maintain the existing priority and position in the queue.
-        return renderRoot.bind(null, root, lastPendingTime);
-      }
-      if (!isSync) {
-        // If we're rendering asynchronously, it's possible the error was
-        // caused by tearing due to a mutation during an event. Try rendering
-        // one more time without yiedling to events.
-        prepareFreshStack(root, expirationTime);
-        scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));
-        return null;
-      }
-      // If we're already rendering synchronously, commit the root in its
-      // errored state.
-      return commitRoot.bind(null, root);
-    }
-    case RootSuspended:
-    case RootSuspendedWithDelay: {
-      if (!isSync) {
-        const lastPendingTime = root.lastPendingTime;
-        if (root.lastPendingTime < expirationTime) {
-          // There's lower priority work. It might be unsuspended. Try rendering
-          // at that level.
-          return renderRoot.bind(null, root, lastPendingTime);
-        }
-        // If workInProgressRootLatestProcessedExpirationTime is Sync, that means we didn't
-        // track any event times. That can happen if we retried but nothing switched
-        // from fallback to content. There's no reason to delay doing no work.
-        if (workInProgressRootLatestProcessedExpirationTime !== Sync) {
-          let shouldDelay =
-            workInProgressRootExitStatus === RootSuspendedWithDelay;
-          let msUntilTimeout = computeMsUntilTimeout(
-            workInProgressRootLatestProcessedExpirationTime,
-            workInProgressRootLatestSuspenseTimeout,
-            expirationTime,
-            workInProgressRootCanSuspendUsingConfig,
-            shouldDelay,
-          );
-          // Don't bother with a very short suspense time.
-          if (msUntilTimeout > 10) {
-            // The render is suspended, it hasn't timed out, and there's no lower
-            // priority work to do. Instead of committing the fallback
-            // immediately, wait for more data to arrive.
-            root.timeoutHandle = scheduleTimeout(
-              commitRoot.bind(null, root),
-              msUntilTimeout,
-            );
-            return null;
-          }
-        }
-      }
-      // The work expired. Commit immediately.
-      return commitRoot.bind(null, root);
-    }
-    case RootCompleted: {
-      // The work completed. Ready to commit.
-      if (
-        !isSync &&
-        workInProgressRootLatestProcessedExpirationTime !== Sync &&
-        workInProgressRootCanSuspendUsingConfig !== null
-      ) {
-        // If we have exceeded the minimum loading delay, which probably
-        // means we have shown a spinner already, we might have to suspend
-        // a bit longer to ensure that the spinner is shown for enough time.
-        const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(
-          workInProgressRootLatestProcessedExpirationTime,
-          expirationTime,
-          workInProgressRootCanSuspendUsingConfig,
-        );
-        if (msUntilTimeout > 10) {
-          root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root),
-            msUntilTimeout,
-          );
-          return null;
-        }
-      }
-      return commitRoot.bind(null, root);
-    }
-    default: {
-      invariant(false, 'Unknown root exit status.');
-    }
+function popInteractions(prevInteractions) {
+  if (enableSchedulerTracing) {
+    __interactionsRef.current = prevInteractions;
   }
 }
 
+export function markCommitTimeOfFallback() {
+  globalMostRecentFallbackTime = now();
+}
+
 export function markRenderEventTimeAndConfig(
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
 ): void {
   if (
     expirationTime < workInProgressRootLatestProcessedExpirationTime &&
-    expirationTime > Never
+    expirationTime > Idle
   ) {
     workInProgressRootLatestProcessedExpirationTime = expirationTime;
   }
   if (suspenseConfig !== null) {
     if (
       expirationTime < workInProgressRootLatestSuspenseTimeout &&
-      expirationTime > Never
+      expirationTime > Idle
     ) {
       workInProgressRootLatestSuspenseTimeout = expirationTime;
       // Most of the time we only have one config and getting wrong is not bad.
@@ -1041,6 +1377,14 @@ export function markRenderEventTimeAndConfig(
   }
 }
 
+export function markUnprocessedUpdateTime(
+  expirationTime: ExpirationTime,
+): void {
+  if (expirationTime > workInProgressRootNextUnprocessedUpdateTime) {
+    workInProgressRootNextUnprocessedUpdateTime = expirationTime;
+  }
+}
+
 export function renderDidSuspend(): void {
   if (workInProgressRootExitStatus === RootIncomplete) {
     workInProgressRootExitStatus = RootSuspended;
@@ -1054,6 +1398,22 @@ export function renderDidSuspendDelayIfPossible(): void {
   ) {
     workInProgressRootExitStatus = RootSuspendedWithDelay;
   }
+
+  // Check if there's a lower priority update somewhere else in the tree.
+  if (
+    workInProgressRootNextUnprocessedUpdateTime !== NoWork &&
+    workInProgressRoot !== null
+  ) {
+    // Mark the current render as suspended, and then mark that there's a
+    // pending update.
+    // TODO: This should immediately interrupt the current render, instead
+    // of waiting until the next time we yield.
+    markRootSuspendedAtTime(workInProgressRoot, renderExpirationTime);
+    markRootUpdatedAtTime(
+      workInProgressRoot,
+      workInProgressRootNextUnprocessedUpdateTime,
+    );
+  }
 }
 
 export function renderDidError() {
@@ -1062,21 +1422,37 @@ export function renderDidError() {
   }
 }
 
-function inferTimeFromExpirationTime(
+// Called during render to determine if anything has suspended.
+// Returns false if we're not sure.
+export function renderHasNotSuspendedYet(): boolean {
+  // If something errored or completed, we can't really be sure,
+  // so those are false.
+  return workInProgressRootExitStatus === RootIncomplete;
+}
+
+function inferTimeFromExpirationTime(expirationTime: ExpirationTime): number {
+  // We don't know exactly when the update was scheduled, but we can infer an
+  // approximate start time from the expiration time.
+  const earliestExpirationTimeMs = expirationTimeToMs(expirationTime);
+  return earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION;
+}
+
+function inferTimeFromExpirationTimeWithSuspenseConfig(
   expirationTime: ExpirationTime,
-  suspenseConfig: null | SuspenseConfig,
+  suspenseConfig: SuspenseConfig,
 ): number {
   // We don't know exactly when the update was scheduled, but we can infer an
-  // approximate start time from the expiration time.
+  // approximate start time from the expiration time by subtracting the timeout
+  // that was added to the event time.
   const earliestExpirationTimeMs = expirationTimeToMs(expirationTime);
   return (
     earliestExpirationTimeMs -
-    (suspenseConfig !== null
-      ? suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION
-      : LOW_PRIORITY_EXPIRATION)
+    (suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION)
   );
 }
 
+// The work loop is an extremely hot path. Tell Closure not to inline it.
+/** @noinline */
 function workLoopSync() {
   // Already timed out, so perform work without checking if we need to yield.
   while (workInProgress !== null) {
@@ -1084,7 +1460,8 @@ function workLoopSync() {
   }
 }
 
-function workLoop() {
+/** @noinline */
+function workLoopConcurrent() {
   // Perform work until Scheduler asks us to yield
   while (workInProgress !== null && !shouldYield()) {
     workInProgress = performUnitOfWork(workInProgress);
@@ -1254,6 +1631,14 @@ function completeUnitOfWork(unitOfWork: Fiber): Fiber | null {
   return null;
 }
 
+function getRemainingExpirationTime(fiber: Fiber) {
+  const updateExpirationTime = fiber.expirationTime;
+  const childExpirationTime = fiber.childExpirationTime;
+  return updateExpirationTime > childExpirationTime
+    ? updateExpirationTime
+    : childExpirationTime;
+}
+
 function resetChildExpirationTime(completedWork: Fiber) {
   if (
     renderExpirationTime !== Never &&
@@ -1321,26 +1706,28 @@ function resetChildExpirationTime(completedWork: Fiber) {
 }
 
 function commitRoot(root) {
-  runWithPriority(ImmediatePriority, commitRootImpl.bind(null, root));
-  // If there are passive effects, schedule a callback to flush them. This goes
-  // outside commitRootImpl so that it inherits the priority of the render.
-  if (rootWithPendingPassiveEffects !== null) {
-    const priorityLevel = getCurrentPriorityLevel();
-    scheduleCallback(priorityLevel, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
+  const renderPriorityLevel = getCurrentPriorityLevel();
+  runWithPriority(
+    ImmediatePriority,
+    commitRootImpl.bind(null, root, renderPriorityLevel),
+  );
   return null;
 }
 
-function commitRootImpl(root) {
-  flushPassiveEffects();
+function commitRootImpl(root, renderPriorityLevel) {
+  do {
+    // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
+    // means `flushPassiveEffects` will sometimes result in additional
+    // passive effects. So we need to keep flushing in a loop until there are
+    // no more pending effects.
+    // TODO: Might be better if `flushPassiveEffects` did not automatically
+    // flush synchronous work at the end, to avoid factoring hazards like this.
+    flushPassiveEffects();
+  } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
-  flushSuspensePriorityWarningInDEV();
 
   invariant(
-    workPhase !== RenderPhase && workPhase !== CommitPhase,
+    (executionContext & (RenderContext | CommitContext)) === NoContext,
     'Should not already be working.',
   );
 
@@ -1362,23 +1749,21 @@ function commitRootImpl(root) {
   // So we can clear these now to allow a new callback to be scheduled.
   root.callbackNode = null;
   root.callbackExpirationTime = NoWork;
+  root.callbackPriority = NoPriority;
+  root.nextKnownPendingLevel = NoWork;
 
   startCommitTimer();
 
   // Update the first and last pending times on this root. The new first
   // pending time is whatever is left on the root fiber.
-  const updateExpirationTimeBeforeCommit = finishedWork.expirationTime;
-  const childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;
-  const firstPendingTimeBeforeCommit =
-    childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit
-      ? childExpirationTimeBeforeCommit
-      : updateExpirationTimeBeforeCommit;
-  root.firstPendingTime = firstPendingTimeBeforeCommit;
-  if (firstPendingTimeBeforeCommit < root.lastPendingTime) {
-    // This usually means we've finished all the work, but it can also happen
-    // when something gets downprioritized during render, like a hidden tree.
-    root.lastPendingTime = firstPendingTimeBeforeCommit;
-  }
+  const remainingExpirationTimeBeforeCommit = getRemainingExpirationTime(
+    finishedWork,
+  );
+  markRootFinishedAtTime(
+    root,
+    expirationTime,
+    remainingExpirationTimeBeforeCommit,
+  );
 
   if (root === workInProgressRoot) {
     // We can reset these now that they are finished.
@@ -1410,13 +1795,9 @@ function commitRootImpl(root) {
   }
 
   if (firstEffect !== null) {
-    const prevWorkPhase = workPhase;
-    workPhase = CommitPhase;
-    let prevInteractions: Set<Interaction> | null = null;
-    if (enableSchedulerTracing) {
-      prevInteractions = __interactionsRef.current;
-      __interactionsRef.current = root.memoizedInteractions;
-    }
+    const prevExecutionContext = executionContext;
+    executionContext |= CommitContext;
+    const prevInteractions = pushInteractions(root);
 
     // Reset this to null before calling lifecycles
     ReactCurrentOwner.current = null;
@@ -1463,7 +1844,13 @@ function commitRootImpl(root) {
     nextEffect = firstEffect;
     do {
       if (__DEV__) {
-        invokeGuardedCallback(null, commitMutationEffects, null);
+        invokeGuardedCallback(
+          null,
+          commitMutationEffects,
+          null,
+          root,
+          renderPriorityLevel,
+        );
         if (hasCaughtError()) {
           invariant(nextEffect !== null, 'Should be working on an effect.');
           const error = clearCaughtError();
@@ -1472,7 +1859,7 @@ function commitRootImpl(root) {
         }
       } else {
         try {
-          commitMutationEffects();
+          commitMutationEffects(root, renderPriorityLevel);
         } catch (error) {
           invariant(nextEffect !== null, 'Should be working on an effect.');
           captureCommitPhaseError(nextEffect, error);
@@ -1523,10 +1910,14 @@ function commitRootImpl(root) {
 
     nextEffect = null;
 
+    // Tell Scheduler to yield at the end of the frame, so the browser has an
+    // opportunity to paint.
+    requestPaint();
+
     if (enableSchedulerTracing) {
-      __interactionsRef.current = ((prevInteractions: any): Set<Interaction>);
+      popInteractions(((prevInteractions: any): Set<Interaction>));
     }
-    workPhase = prevWorkPhase;
+    executionContext = prevExecutionContext;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -1546,37 +1937,59 @@ function commitRootImpl(root) {
 
   stopCommitTimer();
 
+  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
+
   if (rootDoesHavePassiveEffects) {
     // This commit has passive effects. Stash a reference to them. But don't
     // schedule a callback until after flushing layout work.
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsExpirationTime = expirationTime;
+    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
   } else {
-    if (enableSchedulerTracing) {
-      // If there are no passive effects, then we can complete the pending
-      // interactions. Otherwise, we'll wait until after the passive effects
-      // are flushed.
-      finishPendingInteractions(root, expirationTime);
+    // We are done with the effect chain at this point so let's clear the
+    // nextEffect pointers to assist with GC. If we have passive effects, we'll
+    // clear this in flushPassiveEffects.
+    nextEffect = firstEffect;
+    while (nextEffect !== null) {
+      const nextNextEffect = nextEffect.nextEffect;
+      nextEffect.nextEffect = null;
+      nextEffect = nextNextEffect;
     }
   }
 
   // Check if there's remaining work on this root
   const remainingExpirationTime = root.firstPendingTime;
   if (remainingExpirationTime !== NoWork) {
-    const currentTime = requestCurrentTime();
-    const priorityLevel = inferPriorityFromExpirationTime(
-      currentTime,
-      remainingExpirationTime,
-    );
-    scheduleCallbackForRoot(root, priorityLevel, remainingExpirationTime);
+    if (enableSchedulerTracing) {
+      if (spawnedWorkDuringRender !== null) {
+        const expirationTimes = spawnedWorkDuringRender;
+        spawnedWorkDuringRender = null;
+        for (let i = 0; i < expirationTimes.length; i++) {
+          scheduleInteractions(
+            root,
+            expirationTimes[i],
+            root.memoizedInteractions,
+          );
+        }
+      }
+      schedulePendingInteractions(root, remainingExpirationTime);
+    }
   } else {
     // If there's no remaining work, we can clear the set of already failed
     // error boundaries.
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
-  onCommitRoot(finishedWork.stateNode, expirationTime);
+  if (enableSchedulerTracing) {
+    if (!rootDidHavePassiveEffects) {
+      // If there are no passive effects, then we can complete the pending interactions.
+      // Otherwise, we'll wait until after the passive effects are flushed.
+      // Wait to do this until after remaining work has been scheduled,
+      // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.
+      finishPendingInteractions(root, expirationTime);
+    }
+  }
 
   if (remainingExpirationTime === Sync) {
     // Count the number of times the root synchronously re-renders without
@@ -1591,6 +2004,12 @@ function commitRootImpl(root) {
     nestedUpdateCount = 0;
   }
 
+  onCommitRoot(finishedWork.stateNode, expirationTime);
+
+  // Always call this before exiting `commitRoot`, to ensure that any
+  // additional work on this root is scheduled.
+  ensureRootIsScheduled(root);
+
   if (hasUncaughtError) {
     hasUncaughtError = false;
     const error = firstUncaughtError;
@@ -1598,7 +2017,7 @@ function commitRootImpl(root) {
     throw error;
   }
 
-  if (workPhase === LegacyUnbatchedPhase) {
+  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
     // This is a legacy edge case. We just committed the initial mount of
     // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
     // synchronously, but layout updates should be deferred until the end
@@ -1613,7 +2032,8 @@ function commitRootImpl(root) {
 
 function commitBeforeMutationEffects() {
   while (nextEffect !== null) {
-    if ((nextEffect.effectTag & Snapshot) !== NoEffect) {
+    const effectTag = nextEffect.effectTag;
+    if ((effectTag & Snapshot) !== NoEffect) {
       setCurrentDebugFiberInDEV(nextEffect);
       recordEffect();
 
@@ -1622,11 +2042,22 @@ function commitBeforeMutationEffects() {
 
       resetCurrentDebugFiberInDEV();
     }
+    if ((effectTag & Passive) !== NoEffect) {
+      // If there are passive effects, schedule a callback to flush at
+      // the earliest opportunity.
+      if (!rootDoesHavePassiveEffects) {
+        rootDoesHavePassiveEffects = true;
+        scheduleCallback(NormalPriority, () => {
+          flushPassiveEffects();
+          return null;
+        });
+      }
+    }
     nextEffect = nextEffect.nextEffect;
   }
 }
 
-function commitMutationEffects() {
+function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -1648,7 +2079,8 @@ function commitMutationEffects() {
     // updates, and deletions. To avoid needing to add a case for every possible
     // bitmap value, we remove the secondary effects from the effect tag and
     // switch on that value.
-    let primaryEffectTag = effectTag & (Placement | Update | Deletion);
+    let primaryEffectTag =
+      effectTag & (Placement | Update | Deletion | Hydrating);
     switch (primaryEffectTag) {
       case Placement: {
         commitPlacement(nextEffect);
@@ -1671,13 +2103,25 @@ function commitMutationEffects() {
         commitWork(current, nextEffect);
         break;
       }
+      case Hydrating: {
+        nextEffect.effectTag &= ~Hydrating;
+        break;
+      }
+      case HydratingAndUpdate: {
+        nextEffect.effectTag &= ~Hydrating;
+
+        // Update
+        const current = nextEffect.alternate;
+        commitWork(current, nextEffect);
+        break;
+      }
       case Update: {
         const current = nextEffect.alternate;
         commitWork(current, nextEffect);
         break;
       }
       case Deletion: {
-        commitDeletion(nextEffect);
+        commitDeletion(root, nextEffect, renderPriorityLevel);
         break;
       }
     }
@@ -1716,16 +2160,23 @@ function commitLayoutEffects(
       commitAttachRef(nextEffect);
     }
 
-    if (effectTag & Passive) {
-      rootDoesHavePassiveEffects = true;
-    }
-
     resetCurrentDebugFiberInDEV();
     nextEffect = nextEffect.nextEffect;
   }
 }
 
 export function flushPassiveEffects() {
+  if (pendingPassiveEffectsRenderPriority !== NoPriority) {
+    const priorityLevel =
+      pendingPassiveEffectsRenderPriority > NormalPriority
+        ? NormalPriority
+        : pendingPassiveEffectsRenderPriority;
+    pendingPassiveEffectsRenderPriority = NoPriority;
+    return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+  }
+}
+
+function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;
   }
@@ -1734,18 +2185,13 @@ export function flushPassiveEffects() {
   rootWithPendingPassiveEffects = null;
   pendingPassiveEffectsExpirationTime = NoWork;
 
-  let prevInteractions: Set<Interaction> | null = null;
-  if (enableSchedulerTracing) {
-    prevInteractions = __interactionsRef.current;
-    __interactionsRef.current = root.memoizedInteractions;
-  }
-
   invariant(
-    workPhase !== RenderPhase && workPhase !== CommitPhase,
+    (executionContext & (RenderContext | CommitContext)) === NoContext,
     'Cannot flush passive effects while already rendering.',
   );
-  const prevWorkPhase = workPhase;
-  workPhase = CommitPhase;
+  const prevExecutionContext = executionContext;
+  executionContext |= CommitContext;
+  const prevInteractions = pushInteractions(root);
 
   // Note: This currently assumes there are no passive effects on the root
   // fiber, because the root is not part of its own effect list. This could
@@ -1769,15 +2215,19 @@ export function flushPassiveEffects() {
         captureCommitPhaseError(effect, error);
       }
     }
-    effect = effect.nextEffect;
+    const nextNextEffect = effect.nextEffect;
+    // Remove nextEffect pointer to assist GC
+    effect.nextEffect = null;
+    effect = nextNextEffect;
   }
 
   if (enableSchedulerTracing) {
-    __interactionsRef.current = ((prevInteractions: any): Set<Interaction>);
+    popInteractions(((prevInteractions: any): Set<Interaction>));
     finishPendingInteractions(root, expirationTime);
   }
 
-  workPhase = prevWorkPhase;
+  executionContext = prevExecutionContext;
+
   flushSyncCallbackQueue();
 
   // If additional passive effects were scheduled, increment a counter. If this
@@ -1821,7 +2271,8 @@ function captureCommitPhaseErrorOnRoot(
   enqueueUpdate(rootFiber, update);
   const root = markUpdateTimeFromFiberToRoot(rootFiber, Sync);
   if (root !== null) {
-    scheduleCallbackForRoot(root, ImmediatePriority, Sync);
+    ensureRootIsScheduled(root);
+    schedulePendingInteractions(root, Sync);
   }
 }
 
@@ -1856,7 +2307,8 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
         enqueueUpdate(fiber, update);
         const root = markUpdateTimeFromFiberToRoot(fiber, Sync);
         if (root !== null) {
-          scheduleCallbackForRoot(root, ImmediatePriority, Sync);
+          ensureRootIsScheduled(root);
+          schedulePendingInteractions(root, Sync);
         }
         return;
       }
@@ -1879,70 +2331,107 @@ export function pingSuspendedRoot(
 
   if (workInProgressRoot === root && renderExpirationTime === suspendedTime) {
     // Received a ping at the same priority level at which we're currently
-    // rendering. Restart from the root. Don't need to schedule a ping because
-    // we're already working on this tree.
-    prepareFreshStack(root, renderExpirationTime);
+    // rendering. We might want to restart this render. This should mirror
+    // the logic of whether or not a root suspends once it completes.
+
+    // TODO: If we're rendering sync either due to Sync, Batched or expired,
+    // we should probably never restart.
+
+    // If we're suspended with delay, we'll always suspend so we can always
+    // restart. If we're suspended without any updates, it might be a retry.
+    // If it's early in the retry we can restart. We can't know for sure
+    // whether we'll eventually process an update during this render pass,
+    // but it's somewhat unlikely that we get to a ping before that, since
+    // getting to the root most update is usually very fast.
+    if (
+      workInProgressRootExitStatus === RootSuspendedWithDelay ||
+      (workInProgressRootExitStatus === RootSuspended &&
+        workInProgressRootLatestProcessedExpirationTime === Sync &&
+        now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS)
+    ) {
+      // Restart from the root. Don't need to schedule a ping because
+      // we're already working on this tree.
+      prepareFreshStack(root, renderExpirationTime);
+    } else {
+      // Even though we can't restart right now, we might get an
+      // opportunity later. So we mark this render as having a ping.
+      workInProgressRootHasPendingPing = true;
+    }
     return;
   }
 
-  const lastPendingTime = root.lastPendingTime;
-  if (lastPendingTime < suspendedTime) {
+  if (!isRootSuspendedAtTime(root, suspendedTime)) {
     // The root is no longer suspended at this time.
     return;
   }
 
-  const pingTime = root.pingTime;
-  if (pingTime !== NoWork && pingTime < suspendedTime) {
+  const lastPingedTime = root.lastPingedTime;
+  if (lastPingedTime !== NoWork && lastPingedTime < suspendedTime) {
     // There's already a lower priority ping scheduled.
     return;
   }
 
   // Mark the time at which this ping was scheduled.
-  root.pingTime = suspendedTime;
+  root.lastPingedTime = suspendedTime;
 
-  if (root.finishedExpirationTime === suspendedTime) {
+  if (!enableTrainModelFix && root.finishedExpirationTime === suspendedTime) {
     // If there's a pending fallback waiting to commit, throw it away.
     root.finishedExpirationTime = NoWork;
     root.finishedWork = null;
   }
 
-  const currentTime = requestCurrentTime();
-  const priorityLevel = inferPriorityFromExpirationTime(
-    currentTime,
-    suspendedTime,
-  );
-  scheduleCallbackForRoot(root, priorityLevel, suspendedTime);
+  ensureRootIsScheduled(root);
+  schedulePendingInteractions(root, suspendedTime);
 }
 
-export function retryTimedOutBoundary(boundaryFiber: Fiber) {
-  // The boundary fiber (a Suspense component) previously timed out and was
-  // rendered in its fallback state. One of the promises that suspended it has
-  // resolved, which means at least part of the tree was likely unblocked. Try
-  // rendering again, at a new expiration time.
-  const currentTime = requestCurrentTime();
-  const suspenseConfig = null; // Retries don't carry over the already committed update.
-  const retryTime = computeExpirationForFiber(
-    currentTime,
-    boundaryFiber,
-    suspenseConfig,
-  );
+function retryTimedOutBoundary(
+  boundaryFiber: Fiber,
+  retryTime: ExpirationTime,
+) {
+  // The boundary fiber (a Suspense component or SuspenseList component)
+  // previously was rendered in its fallback state. One of the promises that
+  // suspended it has resolved, which means at least part of the tree was
+  // likely unblocked. Try rendering again, at a new expiration time.
+  if (retryTime === NoWork) {
+    const suspenseConfig = null; // Retries don't carry over the already committed update.
+    const currentTime = requestCurrentTimeForUpdate();
+    retryTime = computeExpirationForFiber(
+      currentTime,
+      boundaryFiber,
+      suspenseConfig,
+    );
+  }
   // TODO: Special case idle priority?
-  const priorityLevel = inferPriorityFromExpirationTime(currentTime, retryTime);
   const root = markUpdateTimeFromFiberToRoot(boundaryFiber, retryTime);
   if (root !== null) {
-    scheduleCallbackForRoot(root, priorityLevel, retryTime);
+    ensureRootIsScheduled(root);
+    schedulePendingInteractions(root, retryTime);
+  }
+}
+
+export function retryDehydratedSuspenseBoundary(boundaryFiber: Fiber) {
+  const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
+  let retryTime = NoWork;
+  if (suspenseState !== null) {
+    retryTime = suspenseState.retryTime;
   }
+  retryTimedOutBoundary(boundaryFiber, retryTime);
 }
 
 export function resolveRetryThenable(boundaryFiber: Fiber, thenable: Thenable) {
+  let retryTime = NoWork; // Default
   let retryCache: WeakSet<Thenable> | Set<Thenable> | null;
   if (enableSuspenseServerRenderer) {
     switch (boundaryFiber.tag) {
       case SuspenseComponent:
         retryCache = boundaryFiber.stateNode;
+        const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
+        if (suspenseState !== null) {
+          retryTime = suspenseState.retryTime;
+        }
         break;
-      case DehydratedSuspenseComponent:
-        retryCache = boundaryFiber.memoizedState;
+      case SuspenseListComponent:
+        retryCache = boundaryFiber.stateNode;
         break;
       default:
         invariant(
@@ -1961,7 +2450,7 @@ export function resolveRetryThenable(boundaryFiber: Fiber, thenable: Thenable) {
     retryCache.delete(thenable);
   }
 
-  retryTimedOutBoundary(boundaryFiber);
+  retryTimedOutBoundary(boundaryFiber, retryTime);
 }
 
 // Computes the next Just Noticeable Difference (JND) boundary.
@@ -1977,16 +2466,16 @@ function jnd(timeElapsed: number) {
   return timeElapsed < 120
     ? 120
     : timeElapsed < 480
-      ? 480
-      : timeElapsed < 1080
-        ? 1080
-        : timeElapsed < 1920
-          ? 1920
-          : timeElapsed < 3000
-            ? 3000
-            : timeElapsed < 4320
-              ? 4320
-              : ceil(timeElapsed / 1960) * 1960;
+    ? 480
+    : timeElapsed < 1080
+    ? 1080
+    : timeElapsed < 1920
+    ? 1920
+    : timeElapsed < 3000
+    ? 3000
+    : timeElapsed < 4320
+    ? 4320
+    : ceil(timeElapsed / 1960) * 1960;
 }
 
 function computeMsUntilSuspenseLoadingDelay(
@@ -1994,11 +2483,6 @@ function computeMsUntilSuspenseLoadingDelay(
   committedExpirationTime: ExpirationTime,
   suspenseConfig: SuspenseConfig,
 ) {
-  if (disableYielding) {
-    // Timeout immediately when yielding is disabled.
-    return 0;
-  }
-
   const busyMinDurationMs = (suspenseConfig.busyMinDurationMs: any) | 0;
   if (busyMinDurationMs <= 0) {
     return 0;
@@ -2007,7 +2491,7 @@ function computeMsUntilSuspenseLoadingDelay(
 
   // Compute the time until this render pass would expire.
   const currentTimeMs: number = now();
-  const eventTimeMs: number = inferTimeFromExpirationTime(
+  const eventTimeMs: number = inferTimeFromExpirationTimeWithSuspenseConfig(
     mostRecentEventTime,
     suspenseConfig,
   );
@@ -2022,52 +2506,6 @@ function computeMsUntilSuspenseLoadingDelay(
   return msUntilTimeout;
 }
 
-function computeMsUntilTimeout(
-  mostRecentEventTime: ExpirationTime,
-  suspenseTimeout: ExpirationTime,
-  committedExpirationTime: ExpirationTime,
-  suspenseConfig: null | SuspenseConfig,
-  shouldDelay: boolean,
-) {
-  if (disableYielding) {
-    // Timeout immediately when yielding is disabled.
-    return 0;
-  }
-
-  // Compute the time until this render pass would expire.
-  const currentTimeMs: number = now();
-
-  if (suspenseTimeout !== Sync && shouldDelay) {
-    const timeUntilTimeoutMs =
-      expirationTimeToMs(suspenseTimeout) - currentTimeMs;
-    return timeUntilTimeoutMs;
-  }
-
-  const eventTimeMs: number = inferTimeFromExpirationTime(
-    mostRecentEventTime,
-    suspenseConfig,
-  );
-  const timeUntilExpirationMs =
-    expirationTimeToMs(committedExpirationTime) - currentTimeMs;
-  let timeElapsed = currentTimeMs - eventTimeMs;
-  if (timeElapsed < 0) {
-    // We get this wrong some time since we estimate the time.
-    timeElapsed = 0;
-  }
-
-  let msUntilTimeout = jnd(timeElapsed) - timeElapsed;
-
-  // Clamp the timeout to the expiration time.
-  // TODO: Once the event time is exact instead of inferred from expiration time
-  // we don't need this.
-  if (timeUntilExpirationMs < msUntilTimeout) {
-    msUntilTimeout = timeUntilExpirationMs;
-  }
-
-  // This is the value that is passed to `setTimeout`.
-  return msUntilTimeout;
-}
-
 function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
@@ -2084,8 +2522,7 @@ function checkForNestedUpdates() {
   if (__DEV__) {
     if (nestedPassiveUpdateCount > NESTED_PASSIVE_UPDATE_LIMIT) {
       nestedPassiveUpdateCount = 0;
-      warning(
-        false,
+      console.error(
         'Maximum update depth exceeded. This can happen when a component ' +
           "calls setState inside useEffect, but useEffect either doesn't " +
           'have a dependency array, or one of the dependencies changes on ' +
@@ -2097,11 +2534,10 @@ function checkForNestedUpdates() {
 
 function flushRenderPhaseStrictModeWarningsInDEV() {
   if (__DEV__) {
-    ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
     ReactStrictModeWarnings.flushLegacyContextWarning();
 
     if (warnAboutDeprecatedLifecycles) {
-      ReactStrictModeWarnings.flushPendingDeprecationWarnings();
+      ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
     }
   }
 }
@@ -2142,7 +2578,8 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       tag !== FunctionComponent &&
       tag !== ForwardRef &&
       tag !== MemoComponent &&
-      tag !== SimpleMemoComponent
+      tag !== SimpleMemoComponent &&
+      tag !== Chunk
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
@@ -2158,8 +2595,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     } else {
       didWarnStateUpdateForUnmountedComponent = new Set([componentName]);
     }
-    warningWithoutStack(
-      false,
+    console.error(
       "Can't perform a React state update on an unmounted component. This " +
         'is a no-op, but it indicates a memory leak in your application. To ' +
         'fix, cancel all subscriptions and asynchronous tasks in %s.%s',
@@ -2197,10 +2633,12 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         throw originalError;
       }
 
-      // Keep this code in sync with renderRoot; any changes here must have
+      // Keep this code in sync with handleError; any changes here must have
       // corresponding changes there.
       resetContextDependencies();
-      resetHooks();
+      resetHooksAfterThrow();
+      // Don't reset current debug fiber, since we're about to work on the
+      // same fiber again.
 
       // Unwind the failed stack frame
       unwindInterruptedWork(unitOfWork);
@@ -2248,8 +2686,7 @@ function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
           if (didWarnAboutUpdateInGetChildContext) {
             return;
           }
-          warningWithoutStack(
-            false,
+          console.error(
             'setState(...): Cannot call setState() inside getChildContext()',
           );
           didWarnAboutUpdateInGetChildContext = true;
@@ -2258,8 +2695,7 @@ function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
           if (didWarnAboutUpdateInRender) {
             return;
           }
-          warningWithoutStack(
-            false,
+          console.error(
             'Cannot update during an existing state transition (such as ' +
               'within `render`). Render methods should be a pure function of ' +
               'props and state.',
@@ -2271,33 +2707,27 @@ function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
   }
 }
 
-// We export a simple object here to be used by a renderer/test-utils
-// as the value of ReactCurrentActingRendererSigil.current
-// This identity lets us identify (ha!) when the wrong renderer's act()
-// wraps anothers' updates/effects
-export const ReactActingRendererSigil = {};
+// a 'shared' variable that changes when act() opens/closes in tests.
+export const IsThisRendererActing = {current: (false: boolean)};
 
 export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      ReactCurrentActingRendererSigil.current !== null &&
-      // use the function flushPassiveEffects directly as the sigil
-      // so this comparison is expected here
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      warnsIfNotActing === true &&
+      IsSomeRendererActing.current === true &&
+      IsThisRendererActing.current !== true
     ) {
-      // it looks like we're using the wrong matching act(), so log a warning
-      warningWithoutStack(
-        false,
+      console.error(
         "It looks like you're using the wrong act() around your test interactions.\n" +
           'Be sure to use the matching version of act() corresponding to your renderer:\n\n' +
           '// for react-dom:\n' +
-          "import {act} from 'react-test-utils';\n" +
-          '//...\n' +
+          "import {act} from 'react-dom/test-utils';\n" +
+          '// ...\n' +
           'act(() => ...);\n\n' +
           '// for react-test-renderer:\n' +
           "import TestRenderer from 'react-test-renderer';\n" +
           'const {act} = TestRenderer;\n' +
-          '//...\n' +
+          '// ...\n' +
           'act(() => ...);' +
           '%s',
         getStackByFiberInDevAndProd(fiber),
@@ -2306,14 +2736,42 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   }
 }
 
+export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    if (
+      warnsIfNotActing === true &&
+      (fiber.mode & StrictMode) !== NoMode &&
+      IsSomeRendererActing.current === false &&
+      IsThisRendererActing.current === false
+    ) {
+      console.error(
+        'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
+          'When testing, code that causes React state updates should be ' +
+          'wrapped into act(...):\n\n' +
+          'act(() => {\n' +
+          '  /* fire events that update state */\n' +
+          '});\n' +
+          '/* assert on the output */\n\n' +
+          "This ensures that you're testing the behavior the user would see " +
+          'in the browser.' +
+          ' Learn more at https://fb.me/react-wrap-tests-with-act' +
+          '%s',
+        getComponentName(fiber.type),
+        getStackByFiberInDevAndProd(fiber),
+      );
+    }
+  }
+}
+
 function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      workPhase === NotWorking &&
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      warnsIfNotActing === true &&
+      executionContext === NoContext &&
+      IsSomeRendererActing.current === false &&
+      IsThisRendererActing.current === false
     ) {
-      warningWithoutStack(
-        false,
+      console.error(
         'An update to %s inside a test was not wrapped in act(...).\n\n' +
           'When testing, code that causes React state updates should be ' +
           'wrapped into act(...):\n\n' +
@@ -2334,37 +2792,126 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
 
 export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
 
-let componentsWithSuspendedDiscreteUpdates = null;
+// In tests, we want to enforce a mocked scheduler.
+let didWarnAboutUnmockedScheduler = false;
+// TODO Before we release concurrent mode, revisit this and decide whether a mocked
+// scheduler is the actual recommendation. The alternative could be a testing build,
+// a new lib, or whatever; we dunno just yet. This message is for early adopters
+// to get their tests right.
+
+export function warnIfUnmockedScheduler(fiber: Fiber) {
+  if (__DEV__) {
+    if (
+      didWarnAboutUnmockedScheduler === false &&
+      Scheduler.unstable_flushAllWithoutAsserting === undefined
+    ) {
+      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
+        didWarnAboutUnmockedScheduler = true;
+        console.error(
+          'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
+            'to guarantee consistent behaviour across tests and browsers. ' +
+            'For example, with jest: \n' +
+            "jest.mock('scheduler', () => require('scheduler/unstable_mock'));\n\n" +
+            'For more info, visit https://fb.me/react-mock-scheduler',
+        );
+      } else if (warnAboutUnmockedScheduler === true) {
+        didWarnAboutUnmockedScheduler = true;
+        console.error(
+          'Starting from React v17, the "scheduler" module will need to be mocked ' +
+            'to guarantee consistent behaviour across tests and browsers. ' +
+            'For example, with jest: \n' +
+            "jest.mock('scheduler', () => require('scheduler/unstable_mock'));\n\n" +
+            'For more info, visit https://fb.me/react-mock-scheduler',
+        );
+      }
+    }
+  }
+}
+
+let componentsThatTriggeredHighPriSuspend = null;
 export function checkForWrongSuspensePriorityInDEV(sourceFiber: Fiber) {
   if (__DEV__) {
+    const currentPriorityLevel = getCurrentPriorityLevel();
     if (
       (sourceFiber.mode & ConcurrentMode) !== NoEffect &&
-      // Check if we're currently rendering a discrete update. Ideally, all we
-      // would need to do is check the current priority level. But we currently
-      // have no rigorous way to distinguish work that was scheduled at user-
-      // blocking priority from work that expired a bit and was "upgraded" to
-      // a higher priority. That's because we don't schedule separate callbacks
-      // for every level, only the highest priority level per root. The priority
-      // of subsequent levels is inferred from the expiration time, but this is
-      // an imprecise heuristic.
-      //
-      // However, we do store the last discrete pending update per root. So we
-      // can reliably compare to that one. (If we broaden this warning to include
-      // high pri updates that aren't discrete, then this won't be sufficient.)
-      //
-      // My rationale is that it's better for this warning to have false
-      // negatives than false positives.
-      rootsWithPendingDiscreteUpdates !== null &&
-      workInProgressRoot !== null &&
-      renderExpirationTime ===
-        rootsWithPendingDiscreteUpdates.get(workInProgressRoot)
+      (currentPriorityLevel === UserBlockingPriority ||
+        currentPriorityLevel === ImmediatePriority)
     ) {
-      // Add the component name to a set.
-      const componentName = getComponentName(sourceFiber.type);
-      if (componentsWithSuspendedDiscreteUpdates === null) {
-        componentsWithSuspendedDiscreteUpdates = new Set([componentName]);
-      } else {
-        componentsWithSuspendedDiscreteUpdates.add(componentName);
+      let workInProgressNode = sourceFiber;
+      while (workInProgressNode !== null) {
+        // Add the component that triggered the suspense
+        const current = workInProgressNode.alternate;
+        if (current !== null) {
+          // TODO: warn component that triggers the high priority
+          // suspend is the HostRoot
+          switch (workInProgressNode.tag) {
+            case ClassComponent:
+              // Loop through the component's update queue and see whether the component
+              // has triggered any high priority updates
+              const updateQueue = current.updateQueue;
+              if (updateQueue !== null) {
+                let update = updateQueue.baseQueue;
+                while (update !== null) {
+                  const priorityLevel = update.priority;
+                  if (
+                    priorityLevel === UserBlockingPriority ||
+                    priorityLevel === ImmediatePriority
+                  ) {
+                    if (componentsThatTriggeredHighPriSuspend === null) {
+                      componentsThatTriggeredHighPriSuspend = new Set([
+                        getComponentName(workInProgressNode.type),
+                      ]);
+                    } else {
+                      componentsThatTriggeredHighPriSuspend.add(
+                        getComponentName(workInProgressNode.type),
+                      );
+                    }
+                    break;
+                  }
+                  update = update.next;
+                }
+              }
+              break;
+            case FunctionComponent:
+            case ForwardRef:
+            case SimpleMemoComponent:
+            case Chunk: {
+              let firstHook: null | Hook = current.memoizedState;
+              // TODO: This just checks the first Hook. Isn't it suppose to check all Hooks?
+              if (firstHook !== null && firstHook.baseQueue !== null) {
+                let update = firstHook.baseQueue;
+                // Loop through the functional component's memoized state to see whether
+                // the component has triggered any high pri updates
+                while (update !== null) {
+                  const priority = update.priority;
+                  if (
+                    priority === UserBlockingPriority ||
+                    priority === ImmediatePriority
+                  ) {
+                    if (componentsThatTriggeredHighPriSuspend === null) {
+                      componentsThatTriggeredHighPriSuspend = new Set([
+                        getComponentName(workInProgressNode.type),
+                      ]);
+                    } else {
+                      componentsThatTriggeredHighPriSuspend.add(
+                        getComponentName(workInProgressNode.type),
+                      );
+                    }
+                    break;
+                  }
+                  if (update.next === firstHook.baseQueue) {
+                    break;
+                  }
+                  update = update.next;
+                }
+              }
+              break;
+            }
+            default:
+              break;
+          }
+        }
+        workInProgressNode = workInProgressNode.return;
       }
     }
   }
@@ -2372,34 +2919,26 @@ export function checkForWrongSuspensePriorityInDEV(sourceFiber: Fiber) {
 
 function flushSuspensePriorityWarningInDEV() {
   if (__DEV__) {
-    if (componentsWithSuspendedDiscreteUpdates !== null) {
+    if (componentsThatTriggeredHighPriSuspend !== null) {
       const componentNames = [];
-      componentsWithSuspendedDiscreteUpdates.forEach(name => {
-        componentNames.push(name);
-      });
-      componentsWithSuspendedDiscreteUpdates = null;
-
-      // TODO: A more helpful version of this message could include the names of
-      // the component that were updated, not the ones that suspended. To do
-      // that we'd need to track all the components that updated during this
-      // render, perhaps using the same mechanism as `markRenderEventTime`.
-      warningWithoutStack(
-        false,
-        'The following components suspended during a user-blocking update: %s' +
-          '\n\n' +
-          'Updates triggered by user interactions (e.g. click events) are ' +
-          'considered user-blocking by default. They should not suspend. ' +
-          'Updates that can afford to take a bit longer should be wrapped ' +
-          'with `Scheduler.next` (or an equivalent abstraction). This ' +
-          'typically includes any update that shows new content, like ' +
-          'a navigation.' +
-          '\n\n' +
-          'Generally, you should split user interactions into at least two ' +
-          'seprate updates: a user-blocking update to provide immediate ' +
-          'feedback, and another update to perform the actual change.',
-        // TODO: Add link to React docs with more information, once it exists
-        componentNames.sort().join(', '),
+      componentsThatTriggeredHighPriSuspend.forEach(name =>
+        componentNames.push(name),
       );
+      componentsThatTriggeredHighPriSuspend = null;
+
+      if (componentNames.length > 0) {
+        console.error(
+          '%s triggered a user-blocking update that suspended.' +
+            '\n\n' +
+            'The fix is to split the update into multiple parts: a user-blocking ' +
+            'update to provide immediate feedback, and another update that ' +
+            'triggers the bulk of the changes.' +
+            '\n\n' +
+            'Refer to the documentation for useTransition to learn how ' +
+            'to implement this pattern.', // TODO: Add link to React docs with more information, once it exists
+          componentNames.sort().join(', '),
+        );
+      }
     }
   }
 }
@@ -2409,14 +2948,22 @@ function computeThreadID(root, expirationTime) {
   return expirationTime * 1000 + root.interactionThreadID;
 }
 
-function schedulePendingInteraction(root, expirationTime) {
-  // This is called when work is scheduled on a root. It sets up a pending
-  // interaction, which is completed once the work commits.
+export function markSpawnedWork(expirationTime: ExpirationTime) {
+  if (!enableSchedulerTracing) {
+    return;
+  }
+  if (spawnedWorkDuringRender === null) {
+    spawnedWorkDuringRender = [expirationTime];
+  } else {
+    spawnedWorkDuringRender.push(expirationTime);
+  }
+}
+
+function scheduleInteractions(root, expirationTime, interactions) {
   if (!enableSchedulerTracing) {
     return;
   }
 
-  const interactions = __interactionsRef.current;
   if (interactions.size > 0) {
     const pendingInteractionMap = root.pendingInteractionMap;
     const pendingInteractions = pendingInteractionMap.get(expirationTime);
@@ -2446,7 +2993,18 @@ function schedulePendingInteraction(root, expirationTime) {
   }
 }
 
-function startWorkOnPendingInteraction(root, expirationTime) {
+function schedulePendingInteractions(root, expirationTime) {
+  // This is called when work is scheduled on a root.
+  // It associates the current interactions with the newly-scheduled expiration.
+  // They will be restored when that expiration is later committed.
+  if (!enableSchedulerTracing) {
+    return;
+  }
+
+  scheduleInteractions(root, expirationTime, __interactionsRef.current);
+}
+
+function startWorkOnPendingInteractions(root, expirationTime) {
   // This is called when new work is started on a root.
   if (!enableSchedulerTracing) {
     return;
@@ -2467,10 +3025,10 @@ function startWorkOnPendingInteraction(root, expirationTime) {
   );
 
   // Store the current set of interactions on the FiberRoot for a few reasons:
-  // We can re-use it in hot functions like renderRoot() without having to
-  // recalculate it. We will also use it in commitWork() to pass to any Profiler
-  // onRender() hooks. This also provides DevTools with a way to access it when
-  // the onCommitRoot() hook is called.
+  // We can re-use it in hot functions like performConcurrentWorkOnRoot()
+  // without having to recalculate it. We will also use it in commitWork() to
+  // pass to any Profiler onRender() hooks. This also provides DevTools with a
+  // way to access it when the onCommitRoot() hook is called.
   root.memoizedInteractions = interactions;
 
   if (interactions.size > 0) {
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.js b/packages/react-reconciler/src/ReactProfilerTimer.js
index 6aa1642dfe6c0..c26f66d969244 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.js
@@ -23,6 +23,7 @@ export type ProfilerTimer = {
   startProfilerTimer(fiber: Fiber): void,
   stopProfilerTimerIfRunning(fiber: Fiber): void,
   stopProfilerTimerIfRunningAndRecordDelta(fiber: Fiber): void,
+  ...
 };
 
 let commitTime: number = 0;
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js
index 143e7ebd4a7b9..29af663d90ec6 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js
@@ -13,108 +13,19 @@ import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
 
 import getComponentName from 'shared/getComponentName';
 import {StrictMode} from './ReactTypeOfMode';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
-import warningWithoutStack from 'shared/warningWithoutStack';
-
-type LIFECYCLE =
-  | 'UNSAFE_componentWillMount'
-  | 'UNSAFE_componentWillReceiveProps'
-  | 'UNSAFE_componentWillUpdate';
-type LifecycleToComponentsMap = {[lifecycle: LIFECYCLE]: Array<Fiber>};
-type FiberToLifecycleMap = Map<Fiber, LifecycleToComponentsMap>;
+
 type FiberArray = Array<Fiber>;
 type FiberToFiberComponentsMap = Map<Fiber, FiberArray>;
 
 const ReactStrictModeWarnings = {
-  discardPendingWarnings(): void {},
-  flushPendingDeprecationWarnings(): void {},
-  flushPendingUnsafeLifecycleWarnings(): void {},
-  recordDeprecationWarnings(fiber: Fiber, instance: any): void {},
   recordUnsafeLifecycleWarnings(fiber: Fiber, instance: any): void {},
+  flushPendingUnsafeLifecycleWarnings(): void {},
   recordLegacyContextWarning(fiber: Fiber, instance: any): void {},
   flushLegacyContextWarning(): void {},
+  discardPendingWarnings(): void {},
 };
 
 if (__DEV__) {
-  const LIFECYCLE_SUGGESTIONS = {
-    UNSAFE_componentWillMount: 'componentDidMount',
-    UNSAFE_componentWillReceiveProps: 'static getDerivedStateFromProps',
-    UNSAFE_componentWillUpdate: 'componentDidUpdate',
-  };
-
-  let pendingComponentWillMountWarnings: Array<Fiber> = [];
-  let pendingComponentWillReceivePropsWarnings: Array<Fiber> = [];
-  let pendingComponentWillUpdateWarnings: Array<Fiber> = [];
-  let pendingUnsafeLifecycleWarnings: FiberToLifecycleMap = new Map();
-  let pendingLegacyContextWarning: FiberToFiberComponentsMap = new Map();
-
-  // Tracks components we have already warned about.
-  const didWarnAboutDeprecatedLifecycles = new Set();
-  const didWarnAboutUnsafeLifecycles = new Set();
-  const didWarnAboutLegacyContext = new Set();
-
-  const setToSortedString = set => {
-    const array = [];
-    set.forEach(value => {
-      array.push(value);
-    });
-    return array.sort().join(', ');
-  };
-
-  ReactStrictModeWarnings.discardPendingWarnings = () => {
-    pendingComponentWillMountWarnings = [];
-    pendingComponentWillReceivePropsWarnings = [];
-    pendingComponentWillUpdateWarnings = [];
-    pendingUnsafeLifecycleWarnings = new Map();
-    pendingLegacyContextWarning = new Map();
-  };
-
-  ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = () => {
-    ((pendingUnsafeLifecycleWarnings: any): FiberToLifecycleMap).forEach(
-      (lifecycleWarningsMap, strictRoot) => {
-        const lifecyclesWarningMessages = [];
-
-        Object.keys(lifecycleWarningsMap).forEach(lifecycle => {
-          const lifecycleWarnings = lifecycleWarningsMap[lifecycle];
-          if (lifecycleWarnings.length > 0) {
-            const componentNames = new Set();
-            lifecycleWarnings.forEach(fiber => {
-              componentNames.add(getComponentName(fiber.type) || 'Component');
-              didWarnAboutUnsafeLifecycles.add(fiber.type);
-            });
-
-            const formatted = lifecycle.replace('UNSAFE_', '');
-            const suggestion = LIFECYCLE_SUGGESTIONS[lifecycle];
-            const sortedComponentNames = setToSortedString(componentNames);
-
-            lifecyclesWarningMessages.push(
-              `${formatted}: Please update the following components to use ` +
-                `${suggestion} instead: ${sortedComponentNames}`,
-            );
-          }
-        });
-
-        if (lifecyclesWarningMessages.length > 0) {
-          const strictRootComponentStack = getStackByFiberInDevAndProd(
-            strictRoot,
-          );
-
-          warningWithoutStack(
-            false,
-            'Unsafe lifecycle methods were found within a strict-mode tree:%s' +
-              '\n\n%s' +
-              '\n\nLearn more about this warning here:' +
-              '\nhttps://fb.me/react-strict-mode-warnings',
-            strictRootComponentStack,
-            lifecyclesWarningMessages.join('\n\n'),
-          );
-        }
-      },
-    );
-
-    pendingUnsafeLifecycleWarnings = new Map();
-  };
-
   const findStrictRoot = (fiber: Fiber): Fiber | null => {
     let maybeStrictRoot = null;
 
@@ -129,183 +40,261 @@ if (__DEV__) {
     return maybeStrictRoot;
   };
 
-  ReactStrictModeWarnings.flushPendingDeprecationWarnings = () => {
-    if (pendingComponentWillMountWarnings.length > 0) {
-      const uniqueNames = new Set();
-      pendingComponentWillMountWarnings.forEach(fiber => {
-        uniqueNames.add(getComponentName(fiber.type) || 'Component');
-        didWarnAboutDeprecatedLifecycles.add(fiber.type);
-      });
-
-      const sortedNames = setToSortedString(uniqueNames);
-
-      lowPriorityWarning(
-        false,
-        'componentWillMount is deprecated and will be removed in the next major version. ' +
-          'Use componentDidMount instead. As a temporary workaround, ' +
-          'you can rename to UNSAFE_componentWillMount.' +
-          '\n\nPlease update the following components: %s' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-async-component-lifecycle-hooks',
-        sortedNames,
-      );
-
-      pendingComponentWillMountWarnings = [];
-    }
-
-    if (pendingComponentWillReceivePropsWarnings.length > 0) {
-      const uniqueNames = new Set();
-      pendingComponentWillReceivePropsWarnings.forEach(fiber => {
-        uniqueNames.add(getComponentName(fiber.type) || 'Component');
-        didWarnAboutDeprecatedLifecycles.add(fiber.type);
-      });
-
-      const sortedNames = setToSortedString(uniqueNames);
-
-      lowPriorityWarning(
-        false,
-        'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
-          'Use static getDerivedStateFromProps instead.' +
-          '\n\nPlease update the following components: %s' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-async-component-lifecycle-hooks',
-        sortedNames,
-      );
-
-      pendingComponentWillReceivePropsWarnings = [];
-    }
-
-    if (pendingComponentWillUpdateWarnings.length > 0) {
-      const uniqueNames = new Set();
-      pendingComponentWillUpdateWarnings.forEach(fiber => {
-        uniqueNames.add(getComponentName(fiber.type) || 'Component');
-        didWarnAboutDeprecatedLifecycles.add(fiber.type);
-      });
-
-      const sortedNames = setToSortedString(uniqueNames);
+  const setToSortedString = set => {
+    const array = [];
+    set.forEach(value => {
+      array.push(value);
+    });
+    return array.sort().join(', ');
+  };
 
-      lowPriorityWarning(
-        false,
-        'componentWillUpdate is deprecated and will be removed in the next major version. ' +
-          'Use componentDidUpdate instead. As a temporary workaround, ' +
-          'you can rename to UNSAFE_componentWillUpdate.' +
-          '\n\nPlease update the following components: %s' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-async-component-lifecycle-hooks',
-        sortedNames,
-      );
+  let pendingComponentWillMountWarnings: Array<Fiber> = [];
+  let pendingUNSAFE_ComponentWillMountWarnings: Array<Fiber> = [];
+  let pendingComponentWillReceivePropsWarnings: Array<Fiber> = [];
+  let pendingUNSAFE_ComponentWillReceivePropsWarnings: Array<Fiber> = [];
+  let pendingComponentWillUpdateWarnings: Array<Fiber> = [];
+  let pendingUNSAFE_ComponentWillUpdateWarnings: Array<Fiber> = [];
 
-      pendingComponentWillUpdateWarnings = [];
-    }
-  };
+  // Tracks components we have already warned about.
+  const didWarnAboutUnsafeLifecycles = new Set();
 
-  ReactStrictModeWarnings.recordDeprecationWarnings = (
+  ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = (
     fiber: Fiber,
     instance: any,
   ) => {
     // Dedup strategy: Warn once per component.
-    if (didWarnAboutDeprecatedLifecycles.has(fiber.type)) {
+    if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
       return;
     }
 
-    // Don't warn about react-lifecycles-compat polyfilled components.
     if (
       typeof instance.componentWillMount === 'function' &&
+      // Don't warn about react-lifecycles-compat polyfilled components.
       instance.componentWillMount.__suppressDeprecationWarning !== true
     ) {
       pendingComponentWillMountWarnings.push(fiber);
     }
+
+    if (
+      fiber.mode & StrictMode &&
+      typeof instance.UNSAFE_componentWillMount === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillMountWarnings.push(fiber);
+    }
+
     if (
       typeof instance.componentWillReceiveProps === 'function' &&
       instance.componentWillReceiveProps.__suppressDeprecationWarning !== true
     ) {
       pendingComponentWillReceivePropsWarnings.push(fiber);
     }
+
+    if (
+      fiber.mode & StrictMode &&
+      typeof instance.UNSAFE_componentWillReceiveProps === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber);
+    }
+
     if (
       typeof instance.componentWillUpdate === 'function' &&
       instance.componentWillUpdate.__suppressDeprecationWarning !== true
     ) {
       pendingComponentWillUpdateWarnings.push(fiber);
     }
-  };
 
-  ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = (
-    fiber: Fiber,
-    instance: any,
-  ) => {
-    const strictRoot = findStrictRoot(fiber);
-    if (strictRoot === null) {
-      warningWithoutStack(
-        false,
-        'Expected to find a StrictMode component in a strict mode tree. ' +
-          'This error is likely caused by a bug in React. Please file an issue.',
-      );
-      return;
+    if (
+      fiber.mode & StrictMode &&
+      typeof instance.UNSAFE_componentWillUpdate === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber);
     }
+  };
 
-    // Dedup strategy: Warn once per component.
-    // This is difficult to track any other way since component names
-    // are often vague and are likely to collide between 3rd party libraries.
-    // An expand property is probably okay to use here since it's DEV-only,
-    // and will only be set in the event of serious warnings.
-    if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
-      return;
+  ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = () => {
+    // We do an initial pass to gather component names
+    const componentWillMountUniqueNames = new Set();
+    if (pendingComponentWillMountWarnings.length > 0) {
+      pendingComponentWillMountWarnings.forEach(fiber => {
+        componentWillMountUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+      pendingComponentWillMountWarnings = [];
     }
 
-    let warningsForRoot;
-    if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
-      warningsForRoot = {
-        UNSAFE_componentWillMount: [],
-        UNSAFE_componentWillReceiveProps: [],
-        UNSAFE_componentWillUpdate: [],
-      };
-
-      pendingUnsafeLifecycleWarnings.set(strictRoot, warningsForRoot);
-    } else {
-      warningsForRoot = pendingUnsafeLifecycleWarnings.get(strictRoot);
+    const UNSAFE_componentWillMountUniqueNames = new Set();
+    if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
+        UNSAFE_componentWillMountUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+      pendingUNSAFE_ComponentWillMountWarnings = [];
     }
 
-    const unsafeLifecycles = [];
-    if (
-      (typeof instance.componentWillMount === 'function' &&
-        instance.componentWillMount.__suppressDeprecationWarning !== true) ||
-      typeof instance.UNSAFE_componentWillMount === 'function'
-    ) {
-      unsafeLifecycles.push('UNSAFE_componentWillMount');
+    const componentWillReceivePropsUniqueNames = new Set();
+    if (pendingComponentWillReceivePropsWarnings.length > 0) {
+      pendingComponentWillReceivePropsWarnings.forEach(fiber => {
+        componentWillReceivePropsUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingComponentWillReceivePropsWarnings = [];
     }
-    if (
-      (typeof instance.componentWillReceiveProps === 'function' &&
-        instance.componentWillReceiveProps.__suppressDeprecationWarning !==
-          true) ||
-      typeof instance.UNSAFE_componentWillReceiveProps === 'function'
-    ) {
-      unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
+
+    const UNSAFE_componentWillReceivePropsUniqueNames = new Set();
+    if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
+        UNSAFE_componentWillReceivePropsUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingUNSAFE_ComponentWillReceivePropsWarnings = [];
     }
-    if (
-      (typeof instance.componentWillUpdate === 'function' &&
-        instance.componentWillUpdate.__suppressDeprecationWarning !== true) ||
-      typeof instance.UNSAFE_componentWillUpdate === 'function'
-    ) {
-      unsafeLifecycles.push('UNSAFE_componentWillUpdate');
+
+    const componentWillUpdateUniqueNames = new Set();
+    if (pendingComponentWillUpdateWarnings.length > 0) {
+      pendingComponentWillUpdateWarnings.forEach(fiber => {
+        componentWillUpdateUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingComponentWillUpdateWarnings = [];
     }
 
-    if (unsafeLifecycles.length > 0) {
-      unsafeLifecycles.forEach(lifecycle => {
-        ((warningsForRoot: any): LifecycleToComponentsMap)[lifecycle].push(
-          fiber,
+    const UNSAFE_componentWillUpdateUniqueNames = new Set();
+    if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
+        UNSAFE_componentWillUpdateUniqueNames.add(
+          getComponentName(fiber.type) || 'Component',
         );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
+
+      pendingUNSAFE_ComponentWillUpdateWarnings = [];
+    }
+
+    // Finally, we flush all the warnings
+    // UNSAFE_ ones before the deprecated ones, since they'll be 'louder'
+    if (UNSAFE_componentWillMountUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(
+        UNSAFE_componentWillMountUniqueNames,
+      );
+      console.error(
+        'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
+    }
+
+    if (UNSAFE_componentWillReceivePropsUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(
+        UNSAFE_componentWillReceivePropsUniqueNames,
+      );
+      console.error(
+        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' +
+          'and may indicate bugs in your code. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move data fetching code or side effects to componentDidUpdate.\n' +
+          "* If you're updating state whenever props change, " +
+          'refactor your code to use memoization techniques or move it to ' +
+          'static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
+    }
+
+    if (UNSAFE_componentWillUpdateUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(
+        UNSAFE_componentWillUpdateUniqueNames,
+      );
+      console.error(
+        'Using UNSAFE_componentWillUpdate in strict mode is not recommended ' +
+          'and may indicate bugs in your code. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move data fetching code or side effects to componentDidUpdate.\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
+    }
+
+    if (componentWillMountUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(componentWillMountUniqueNames);
+
+      console.warn(
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
+          '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +
+          'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' +
+          'To rename all deprecated lifecycles to their new names, you can run ' +
+          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
+    }
+
+    if (componentWillReceivePropsUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(
+        componentWillReceivePropsUniqueNames,
+      );
+
+      console.warn(
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move data fetching code or side effects to componentDidUpdate.\n' +
+          "* If you're updating state whenever props change, refactor your " +
+          'code to use memoization techniques or move it to ' +
+          'static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
+          'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' +
+          'To rename all deprecated lifecycles to their new names, you can run ' +
+          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
+    }
+
+    if (componentWillUpdateUniqueNames.size > 0) {
+      const sortedNames = setToSortedString(componentWillUpdateUniqueNames);
+
+      console.warn(
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
+          '* Move data fetching code or side effects to componentDidUpdate.\n' +
+          '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +
+          'this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ' +
+          'To rename all deprecated lifecycles to their new names, you can run ' +
+          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' +
+          '\nPlease update the following components: %s',
+        sortedNames,
+      );
     }
   };
 
+  let pendingLegacyContextWarning: FiberToFiberComponentsMap = new Map();
+
+  // Tracks components we have already warned about.
+  const didWarnAboutLegacyContext = new Set();
+
   ReactStrictModeWarnings.recordLegacyContextWarning = (
     fiber: Fiber,
     instance: any,
   ) => {
     const strictRoot = findStrictRoot(fiber);
     if (strictRoot === null) {
-      warningWithoutStack(
-        false,
+      console.error(
         'Expected to find a StrictMode component in a strict mode tree. ' +
           'This error is likely caused by a bug in React. Please file an issue.',
       );
@@ -346,18 +335,29 @@ if (__DEV__) {
           strictRoot,
         );
 
-        warningWithoutStack(
-          false,
-          'Legacy context API has been detected within a strict-mode tree: %s' +
+        console.error(
+          'Legacy context API has been detected within a strict-mode tree.' +
+            '\n\nThe old API will be supported in all 16.x releases, but applications ' +
+            'using it should migrate to the new version.' +
             '\n\nPlease update the following components: %s' +
-            '\n\nLearn more about this warning here:' +
-            '\nhttps://fb.me/react-strict-mode-warnings',
-          strictRootComponentStack,
+            '\n\nLearn more about this warning here: https://fb.me/react-legacy-context' +
+            '%s',
           sortedNames,
+          strictRootComponentStack,
         );
       },
     );
   };
+
+  ReactStrictModeWarnings.discardPendingWarnings = () => {
+    pendingComponentWillMountWarnings = [];
+    pendingUNSAFE_ComponentWillMountWarnings = [];
+    pendingComponentWillReceivePropsWarnings = [];
+    pendingUNSAFE_ComponentWillReceivePropsWarnings = [];
+    pendingComponentWillUpdateWarnings = [];
+    pendingUNSAFE_ComponentWillUpdateWarnings = [];
+    pendingLegacyContextWarning = new Map();
+  };
 }
 
 export default ReactStrictModeWarnings;
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index 2aba0d9d23cb1..4f053e5bba474 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -11,8 +11,8 @@ export type TypeOfMode = number;
 
 export const NoMode = 0b0000;
 export const StrictMode = 0b0001;
-// TODO: Remove BatchedMode and ConcurrentMode by reading from the root
+// TODO: Remove BlockingMode and ConcurrentMode by reading from the root
 // tag instead
-export const BatchedMode = 0b0010;
+export const BlockingMode = 0b0010;
 export const ConcurrentMode = 0b0100;
 export const ProfileMode = 0b1000;
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.js b/packages/react-reconciler/src/ReactUpdateQueue.js
index 2005d6aaecec1..dba13e3cf2a38 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.js
@@ -87,27 +87,27 @@
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 
-import {NoWork} from './ReactFiberExpirationTime';
+import {NoWork, Sync} from './ReactFiberExpirationTime';
 import {
   enterDisallowedContextReadInDEV,
   exitDisallowedContextReadInDEV,
 } from './ReactFiberNewContext';
 import {Callback, ShouldCapture, DidCapture} from 'shared/ReactSideEffectTags';
-import {ClassComponent} from 'shared/ReactWorkTags';
 
-import {
-  debugRenderPhaseSideEffects,
-  debugRenderPhaseSideEffectsForStrictMode,
-} from 'shared/ReactFeatureFlags';
+import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
 import {StrictMode} from './ReactTypeOfMode';
-import {markRenderEventTimeAndConfig} from './ReactFiberWorkLoop';
+import {
+  markRenderEventTimeAndConfig,
+  markUnprocessedUpdateTime,
+} from './ReactFiberWorkLoop';
 
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
+import {getCurrentPriorityLevel} from './SchedulerWithReactIntegration';
 
-export type Update<State> = {
+export type Update<State> = {|
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
 
@@ -115,25 +115,20 @@ export type Update<State> = {
   payload: any,
   callback: (() => mixed) | null,
 
-  next: Update<State> | null,
-  nextEffect: Update<State> | null,
-};
-
-export type UpdateQueue<State> = {
-  baseState: State,
-
-  firstUpdate: Update<State> | null,
-  lastUpdate: Update<State> | null,
+  next: Update<State>,
 
-  firstCapturedUpdate: Update<State> | null,
-  lastCapturedUpdate: Update<State> | null,
+  // DEV only
+  priority?: ReactPriorityLevel,
+|};
 
-  firstEffect: Update<State> | null,
-  lastEffect: Update<State> | null,
+type SharedQueue<State> = {|pending: Update<State> | null|};
 
-  firstCapturedEffect: Update<State> | null,
-  lastCapturedEffect: Update<State> | null,
-};
+export type UpdateQueue<State> = {|
+  baseState: State,
+  baseQueue: Update<State> | null,
+  shared: SharedQueue<State>,
+  effects: Array<Update<State>> | null,
+|};
 
 export const UpdateState = 0;
 export const ReplaceState = 1;
@@ -156,48 +151,41 @@ if (__DEV__) {
   };
 }
 
-export function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {
+export function initializeUpdateQueue<State>(fiber: Fiber): void {
   const queue: UpdateQueue<State> = {
-    baseState,
-    firstUpdate: null,
-    lastUpdate: null,
-    firstCapturedUpdate: null,
-    lastCapturedUpdate: null,
-    firstEffect: null,
-    lastEffect: null,
-    firstCapturedEffect: null,
-    lastCapturedEffect: null,
+    baseState: fiber.memoizedState,
+    baseQueue: null,
+    shared: {
+      pending: null,
+    },
+    effects: null,
   };
-  return queue;
+  fiber.updateQueue = queue;
 }
 
-function cloneUpdateQueue<State>(
-  currentQueue: UpdateQueue<State>,
-): UpdateQueue<State> {
-  const queue: UpdateQueue<State> = {
-    baseState: currentQueue.baseState,
-    firstUpdate: currentQueue.firstUpdate,
-    lastUpdate: currentQueue.lastUpdate,
-
-    // TODO: With resuming, if we bail out and resuse the child tree, we should
-    // keep these effects.
-    firstCapturedUpdate: null,
-    lastCapturedUpdate: null,
-
-    firstEffect: null,
-    lastEffect: null,
-
-    firstCapturedEffect: null,
-    lastCapturedEffect: null,
-  };
-  return queue;
+export function cloneUpdateQueue<State>(
+  current: Fiber,
+  workInProgress: Fiber,
+): void {
+  // Clone the update queue from current. Unless it's already a clone.
+  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
+  const currentQueue: UpdateQueue<State> = (current.updateQueue: any);
+  if (queue === currentQueue) {
+    const clone: UpdateQueue<State> = {
+      baseState: currentQueue.baseState,
+      baseQueue: currentQueue.baseQueue,
+      shared: currentQueue.shared,
+      effects: currentQueue.effects,
+    };
+    workInProgress.updateQueue = clone;
+  }
 }
 
 export function createUpdate(
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
 ): Update<*> {
-  return {
+  let update: Update<*> = {
     expirationTime,
     suspenseConfig,
 
@@ -205,90 +193,39 @@ export function createUpdate(
     payload: null,
     callback: null,
 
-    next: null,
-    nextEffect: null,
+    next: (null: any),
   };
-}
-
-function appendUpdateToQueue<State>(
-  queue: UpdateQueue<State>,
-  update: Update<State>,
-) {
-  // Append the update to the end of the list.
-  if (queue.lastUpdate === null) {
-    // Queue is empty
-    queue.firstUpdate = queue.lastUpdate = update;
-  } else {
-    queue.lastUpdate.next = update;
-    queue.lastUpdate = update;
+  update.next = update;
+  if (__DEV__) {
+    update.priority = getCurrentPriorityLevel();
   }
+  return update;
 }
 
 export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
-  // Update queues are created lazily.
-  const alternate = fiber.alternate;
-  let queue1;
-  let queue2;
-  if (alternate === null) {
-    // There's only one fiber.
-    queue1 = fiber.updateQueue;
-    queue2 = null;
-    if (queue1 === null) {
-      queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
-    }
-  } else {
-    // There are two owners.
-    queue1 = fiber.updateQueue;
-    queue2 = alternate.updateQueue;
-    if (queue1 === null) {
-      if (queue2 === null) {
-        // Neither fiber has an update queue. Create new ones.
-        queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
-        queue2 = alternate.updateQueue = createUpdateQueue(
-          alternate.memoizedState,
-        );
-      } else {
-        // Only one fiber has an update queue. Clone to create a new one.
-        queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
-      }
-    } else {
-      if (queue2 === null) {
-        // Only one fiber has an update queue. Clone to create a new one.
-        queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
-      } else {
-        // Both owners have an update queue.
-      }
-    }
+  const updateQueue = fiber.updateQueue;
+  if (updateQueue === null) {
+    // Only occurs if the fiber has been unmounted.
+    return;
   }
-  if (queue2 === null || queue1 === queue2) {
-    // There's only a single queue.
-    appendUpdateToQueue(queue1, update);
+
+  const sharedQueue = updateQueue.shared;
+  const pending = sharedQueue.pending;
+  if (pending === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
   } else {
-    // There are two queues. We need to append the update to both queues,
-    // while accounting for the persistent structure of the list — we don't
-    // want the same update to be added multiple times.
-    if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
-      // One of the queues is not empty. We must add the update to both queues.
-      appendUpdateToQueue(queue1, update);
-      appendUpdateToQueue(queue2, update);
-    } else {
-      // Both queues are non-empty. The last update is the same in both lists,
-      // because of structural sharing. So, only append to one of the lists.
-      appendUpdateToQueue(queue1, update);
-      // But we still need to update the `lastUpdate` pointer of queue2.
-      queue2.lastUpdate = update;
-    }
+    update.next = pending.next;
+    pending.next = update;
   }
+  sharedQueue.pending = update;
 
   if (__DEV__) {
     if (
-      fiber.tag === ClassComponent &&
-      (currentlyProcessingQueue === queue1 ||
-        (queue2 !== null && currentlyProcessingQueue === queue2)) &&
+      currentlyProcessingQueue === sharedQueue &&
       !didWarnUpdateInsideUpdate
     ) {
-      warningWithoutStack(
-        false,
+      console.error(
         'An update (setState, replaceState, or forceUpdate) was scheduled ' +
           'from inside an update function. Update functions should be pure, ' +
           'with zero side-effects. Consider using componentDidUpdate or a ' +
@@ -303,48 +240,25 @@ export function enqueueCapturedUpdate<State>(
   workInProgress: Fiber,
   update: Update<State>,
 ) {
-  // Captured updates go into a separate list, and only on the work-in-
-  // progress queue.
-  let workInProgressQueue = workInProgress.updateQueue;
-  if (workInProgressQueue === null) {
-    workInProgressQueue = workInProgress.updateQueue = createUpdateQueue(
-      workInProgress.memoizedState,
-    );
-  } else {
-    // TODO: I put this here rather than createWorkInProgress so that we don't
-    // clone the queue unnecessarily. There's probably a better way to
-    // structure this.
-    workInProgressQueue = ensureWorkInProgressQueueIsAClone(
-      workInProgress,
-      workInProgressQueue,
-    );
+  const current = workInProgress.alternate;
+  if (current !== null) {
+    // Ensure the work-in-progress queue is a clone
+    cloneUpdateQueue(current, workInProgress);
   }
 
+  // Captured updates go only on the work-in-progress queue.
+  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
   // Append the update to the end of the list.
-  if (workInProgressQueue.lastCapturedUpdate === null) {
-    // This is the first render phase update
-    workInProgressQueue.firstCapturedUpdate = workInProgressQueue.lastCapturedUpdate = update;
+  const last = queue.baseQueue;
+  if (last === null) {
+    queue.baseQueue = update.next = update;
+    update.next = update;
   } else {
-    workInProgressQueue.lastCapturedUpdate.next = update;
-    workInProgressQueue.lastCapturedUpdate = update;
+    update.next = last.next;
+    last.next = update;
   }
 }
 
-function ensureWorkInProgressQueueIsAClone<State>(
-  workInProgress: Fiber,
-  queue: UpdateQueue<State>,
-): UpdateQueue<State> {
-  const current = workInProgress.alternate;
-  if (current !== null) {
-    // If the work-in-progress queue is equal to the current queue,
-    // we need to clone it first.
-    if (queue === current.updateQueue) {
-      queue = workInProgress.updateQueue = cloneUpdateQueue(queue);
-    }
-  }
-  return queue;
-}
-
 function getStateFromUpdate<State>(
   workInProgress: Fiber,
   queue: UpdateQueue<State>,
@@ -361,9 +275,8 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           enterDisallowedContextReadInDEV();
           if (
-            debugRenderPhaseSideEffects ||
-            (debugRenderPhaseSideEffectsForStrictMode &&
-              workInProgress.mode & StrictMode)
+            debugRenderPhaseSideEffectsForStrictMode &&
+            workInProgress.mode & StrictMode
           ) {
             payload.call(instance, prevState, nextProps);
           }
@@ -390,9 +303,8 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           enterDisallowedContextReadInDEV();
           if (
-            debugRenderPhaseSideEffects ||
-            (debugRenderPhaseSideEffectsForStrictMode &&
-              workInProgress.mode & StrictMode)
+            debugRenderPhaseSideEffectsForStrictMode &&
+            workInProgress.mode & StrictMode
           ) {
             payload.call(instance, prevState, nextProps);
           }
@@ -422,157 +334,172 @@ function getStateFromUpdate<State>(
 
 export function processUpdateQueue<State>(
   workInProgress: Fiber,
-  queue: UpdateQueue<State>,
   props: any,
   instance: any,
   renderExpirationTime: ExpirationTime,
 ): void {
-  hasForceUpdate = false;
+  // This is always non-null on a ClassComponent or HostRoot
+  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
 
-  queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);
+  hasForceUpdate = false;
 
   if (__DEV__) {
-    currentlyProcessingQueue = queue;
+    currentlyProcessingQueue = queue.shared;
   }
 
-  // These values may change as we process the queue.
-  let newBaseState = queue.baseState;
-  let newFirstUpdate = null;
-  let newExpirationTime = NoWork;
-
-  // Iterate through the list of updates to compute the result.
-  let update = queue.firstUpdate;
-  let resultState = newBaseState;
-  while (update !== null) {
-    const updateExpirationTime = update.expirationTime;
-    if (updateExpirationTime < renderExpirationTime) {
-      // This update does not have sufficient priority. Skip it.
-      if (newFirstUpdate === null) {
-        // This is the first skipped update. It will be the first update in
-        // the new list.
-        newFirstUpdate = update;
-        // Since this is the first update that was skipped, the current result
-        // is the new base state.
-        newBaseState = resultState;
-      }
-      // Since this update will remain in the list, update the remaining
-      // expiration time.
-      if (newExpirationTime < updateExpirationTime) {
-        newExpirationTime = updateExpirationTime;
-      }
-    } else {
-      // This update does have sufficient priority.
-
-      // Mark the event time of this update as relevant to this render pass.
-      // TODO: This should ideally use the true event time of this update rather than
-      // its priority which is a derived and not reverseable value.
-      // TODO: We should skip this update if it was already committed but currently
-      // we have no way of detecting the difference between a committed and suspended
-      // update here.
-      markRenderEventTimeAndConfig(updateExpirationTime, update.suspenseConfig);
-
-      // Process it and compute a new result.
-      resultState = getStateFromUpdate(
-        workInProgress,
-        queue,
-        update,
-        resultState,
-        props,
-        instance,
-      );
-      const callback = update.callback;
-      if (callback !== null) {
-        workInProgress.effectTag |= Callback;
-        // Set this to null, in case it was mutated during an aborted render.
-        update.nextEffect = null;
-        if (queue.lastEffect === null) {
-          queue.firstEffect = queue.lastEffect = update;
-        } else {
-          queue.lastEffect.nextEffect = update;
-          queue.lastEffect = update;
-        }
+  // The last rebase update that is NOT part of the base state.
+  let baseQueue = queue.baseQueue;
+
+  // The last pending update that hasn't been processed yet.
+  let pendingQueue = queue.shared.pending;
+  if (pendingQueue !== null) {
+    // We have new updates that haven't been processed yet.
+    // We'll add them to the base queue.
+    if (baseQueue !== null) {
+      // Merge the pending queue and the base queue.
+      let baseFirst = baseQueue.next;
+      let pendingFirst = pendingQueue.next;
+      baseQueue.next = pendingFirst;
+      pendingQueue.next = baseFirst;
+    }
+
+    baseQueue = pendingQueue;
+
+    queue.shared.pending = null;
+    // TODO: Pass `current` as argument
+    const current = workInProgress.alternate;
+    if (current !== null) {
+      const currentQueue = current.updateQueue;
+      if (currentQueue !== null) {
+        currentQueue.baseQueue = pendingQueue;
       }
     }
-    // Continue to the next update.
-    update = update.next;
   }
 
-  // Separately, iterate though the list of captured updates.
-  let newFirstCapturedUpdate = null;
-  update = queue.firstCapturedUpdate;
-  while (update !== null) {
-    const updateExpirationTime = update.expirationTime;
-    if (updateExpirationTime < renderExpirationTime) {
-      // This update does not have sufficient priority. Skip it.
-      if (newFirstCapturedUpdate === null) {
-        // This is the first skipped captured update. It will be the first
-        // update in the new list.
-        newFirstCapturedUpdate = update;
-        // If this is the first update that was skipped, the current result is
-        // the new base state.
-        if (newFirstUpdate === null) {
-          newBaseState = resultState;
-        }
-      }
-      // Since this update will remain in the list, update the remaining
-      // expiration time.
-      if (newExpirationTime < updateExpirationTime) {
-        newExpirationTime = updateExpirationTime;
-      }
-    } else {
-      // This update does have sufficient priority. Process it and compute
-      // a new result.
-      resultState = getStateFromUpdate(
-        workInProgress,
-        queue,
-        update,
-        resultState,
-        props,
-        instance,
-      );
-      const callback = update.callback;
-      if (callback !== null) {
-        workInProgress.effectTag |= Callback;
-        // Set this to null, in case it was mutated during an aborted render.
-        update.nextEffect = null;
-        if (queue.lastCapturedEffect === null) {
-          queue.firstCapturedEffect = queue.lastCapturedEffect = update;
+  // These values may change as we process the queue.
+  if (baseQueue !== null) {
+    let first = baseQueue.next;
+    // Iterate through the list of updates to compute the result.
+    let newState = queue.baseState;
+    let newExpirationTime = NoWork;
+
+    let newBaseState = null;
+    let newBaseQueueFirst = null;
+    let newBaseQueueLast = null;
+
+    if (first !== null) {
+      let update = first;
+      do {
+        const updateExpirationTime = update.expirationTime;
+        if (updateExpirationTime < renderExpirationTime) {
+          // Priority is insufficient. Skip this update. If this is the first
+          // skipped update, the previous update/state is the new base
+          // update/state.
+          const clone: Update<State> = {
+            expirationTime: update.expirationTime,
+            suspenseConfig: update.suspenseConfig,
+
+            tag: update.tag,
+            payload: update.payload,
+            callback: update.callback,
+
+            next: (null: any),
+          };
+          if (newBaseQueueLast === null) {
+            newBaseQueueFirst = newBaseQueueLast = clone;
+            newBaseState = newState;
+          } else {
+            newBaseQueueLast = newBaseQueueLast.next = clone;
+          }
+          // Update the remaining priority in the queue.
+          if (updateExpirationTime > newExpirationTime) {
+            newExpirationTime = updateExpirationTime;
+          }
         } else {
-          queue.lastCapturedEffect.nextEffect = update;
-          queue.lastCapturedEffect = update;
+          // This update does have sufficient priority.
+
+          if (newBaseQueueLast !== null) {
+            const clone: Update<State> = {
+              expirationTime: Sync, // This update is going to be committed so we never want uncommit it.
+              suspenseConfig: update.suspenseConfig,
+
+              tag: update.tag,
+              payload: update.payload,
+              callback: update.callback,
+
+              next: (null: any),
+            };
+            newBaseQueueLast = newBaseQueueLast.next = clone;
+          }
+
+          // Mark the event time of this update as relevant to this render pass.
+          // TODO: This should ideally use the true event time of this update rather than
+          // its priority which is a derived and not reverseable value.
+          // TODO: We should skip this update if it was already committed but currently
+          // we have no way of detecting the difference between a committed and suspended
+          // update here.
+          markRenderEventTimeAndConfig(
+            updateExpirationTime,
+            update.suspenseConfig,
+          );
+
+          // Process this update.
+          newState = getStateFromUpdate(
+            workInProgress,
+            queue,
+            update,
+            newState,
+            props,
+            instance,
+          );
+          const callback = update.callback;
+          if (callback !== null) {
+            workInProgress.effectTag |= Callback;
+            let effects = queue.effects;
+            if (effects === null) {
+              queue.effects = [update];
+            } else {
+              effects.push(update);
+            }
+          }
         }
-      }
+        update = update.next;
+        if (update === null || update === first) {
+          pendingQueue = queue.shared.pending;
+          if (pendingQueue === null) {
+            break;
+          } else {
+            // An update was scheduled from inside a reducer. Add the new
+            // pending updates to the end of the list and keep processing.
+            update = baseQueue.next = pendingQueue.next;
+            pendingQueue.next = first;
+            queue.baseQueue = baseQueue = pendingQueue;
+            queue.shared.pending = null;
+          }
+        }
+      } while (true);
     }
-    update = update.next;
-  }
-
-  if (newFirstUpdate === null) {
-    queue.lastUpdate = null;
-  }
-  if (newFirstCapturedUpdate === null) {
-    queue.lastCapturedUpdate = null;
-  } else {
-    workInProgress.effectTag |= Callback;
-  }
-  if (newFirstUpdate === null && newFirstCapturedUpdate === null) {
-    // We processed every update, without skipping. That means the new base
-    // state is the same as the result state.
-    newBaseState = resultState;
-  }
 
-  queue.baseState = newBaseState;
-  queue.firstUpdate = newFirstUpdate;
-  queue.firstCapturedUpdate = newFirstCapturedUpdate;
+    if (newBaseQueueLast === null) {
+      newBaseState = newState;
+    } else {
+      newBaseQueueLast.next = (newBaseQueueFirst: any);
+    }
 
-  // Set the remaining expiration time to be whatever is remaining in the queue.
-  // This should be fine because the only two other things that contribute to
-  // expiration time are props and context. We're already in the middle of the
-  // begin phase by the time we start processing the queue, so we've already
-  // dealt with the props. Context in components that specify
-  // shouldComponentUpdate is tricky; but we'll have to account for
-  // that regardless.
-  workInProgress.expirationTime = newExpirationTime;
-  workInProgress.memoizedState = resultState;
+    queue.baseState = ((newBaseState: any): State);
+    queue.baseQueue = newBaseQueueLast;
+
+    // Set the remaining expiration time to be whatever is remaining in the queue.
+    // This should be fine because the only two other things that contribute to
+    // expiration time are props and context. We're already in the middle of the
+    // begin phase by the time we start processing the queue, so we've already
+    // dealt with the props. Context in components that specify
+    // shouldComponentUpdate is tricky; but we'll have to account for
+    // that regardless.
+    markUnprocessedUpdateTime(newExpirationTime);
+    workInProgress.expirationTime = newExpirationTime;
+    workInProgress.memoizedState = newState;
+  }
 
   if (__DEV__) {
     currentlyProcessingQueue = null;
@@ -603,38 +530,17 @@ export function commitUpdateQueue<State>(
   instance: any,
   renderExpirationTime: ExpirationTime,
 ): void {
-  // If the finished render included captured updates, and there are still
-  // lower priority updates left over, we need to keep the captured updates
-  // in the queue so that they are rebased and not dropped once we process the
-  // queue again at the lower priority.
-  if (finishedQueue.firstCapturedUpdate !== null) {
-    // Join the captured update list to the end of the normal list.
-    if (finishedQueue.lastUpdate !== null) {
-      finishedQueue.lastUpdate.next = finishedQueue.firstCapturedUpdate;
-      finishedQueue.lastUpdate = finishedQueue.lastCapturedUpdate;
-    }
-    // Clear the list of captured updates.
-    finishedQueue.firstCapturedUpdate = finishedQueue.lastCapturedUpdate = null;
-  }
-
   // Commit the effects
-  commitUpdateEffects(finishedQueue.firstEffect, instance);
-  finishedQueue.firstEffect = finishedQueue.lastEffect = null;
-
-  commitUpdateEffects(finishedQueue.firstCapturedEffect, instance);
-  finishedQueue.firstCapturedEffect = finishedQueue.lastCapturedEffect = null;
-}
-
-function commitUpdateEffects<State>(
-  effect: Update<State> | null,
-  instance: any,
-): void {
-  while (effect !== null) {
-    const callback = effect.callback;
-    if (callback !== null) {
-      effect.callback = null;
-      callCallback(callback, instance);
+  const effects = finishedQueue.effects;
+  finishedQueue.effects = null;
+  if (effects !== null) {
+    for (let i = 0; i < effects.length; i++) {
+      const effect = effects[i];
+      const callback = effect.callback;
+      if (callback !== null) {
+        effect.callback = null;
+        callCallback(callback, instance);
+      }
     }
-    effect = effect.nextEffect;
   }
 }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.js
index 7482b7fa9a602..71aacf4853851 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.js
@@ -11,10 +11,7 @@
 // CommonJS interop named imports.
 import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
-import {
-  disableYielding,
-  enableSchedulerTracing,
-} from 'shared/ReactFeatureFlags';
+import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 const {
@@ -22,6 +19,7 @@ const {
   unstable_scheduleCallback: Scheduler_scheduleCallback,
   unstable_cancelCallback: Scheduler_cancelCallback,
   unstable_shouldYield: Scheduler_shouldYield,
+  unstable_requestPaint: Scheduler_requestPaint,
   unstable_now: Scheduler_now,
   unstable_getCurrentPriorityLevel: Scheduler_getCurrentPriorityLevel,
   unstable_ImmediatePriority: Scheduler_ImmediatePriority,
@@ -45,12 +43,10 @@ if (enableSchedulerTracing) {
   );
 }
 
-export opaque type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
+export type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
 
-type SchedulerCallbackOptions = {
-  timeout?: number,
-};
+type SchedulerCallbackOptions = {timeout?: number, ...};
 
 const fakeCallbackNode = {};
 
@@ -65,9 +61,10 @@ export const IdlePriority: ReactPriorityLevel = 95;
 // NoPriority is the absence of priority. Also React-only.
 export const NoPriority: ReactPriorityLevel = 90;
 
-export const shouldYield = disableYielding
-  ? () => false // Never yield when `disableYielding` is on
-  : Scheduler_shouldYield;
+export const shouldYield = Scheduler_shouldYield;
+export const requestPaint =
+  // Fall back gracefully if we're running an older version of Scheduler.
+  Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : () => {};
 
 let syncQueue: Array<SchedulerCallback> | null = null;
 let immediateQueueCallbackNode: mixed | null = null;
@@ -161,7 +158,9 @@ export function cancelCallback(callbackNode: mixed) {
 
 export function flushSyncCallbackQueue() {
   if (immediateQueueCallbackNode !== null) {
-    Scheduler_cancelCallback(immediateQueueCallbackNode);
+    const node = immediateQueueCallbackNode;
+    immediateQueueCallbackNode = null;
+    Scheduler_cancelCallback(node);
   }
   flushSyncCallbackQueueImpl();
 }
@@ -173,12 +172,15 @@ function flushSyncCallbackQueueImpl() {
     let i = 0;
     try {
       const isSync = true;
-      for (; i < syncQueue.length; i++) {
-        let callback = syncQueue[i];
-        do {
-          callback = callback(isSync);
-        } while (callback !== null);
-      }
+      const queue = syncQueue;
+      runWithPriority(ImmediatePriority, () => {
+        for (; i < queue.length; i++) {
+          let callback = queue[i];
+          do {
+            callback = callback(isSync);
+          } while (callback !== null);
+        }
+      });
       syncQueue = null;
     } catch (error) {
       // If something throws, leave the remaining callbacks on the queue.
diff --git a/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js b/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
index 546494a05ebce..084a93326a7e6 100644
--- a/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
@@ -58,7 +58,7 @@ describe('ErrorBoundaryReconciliation', () => {
         </ErrorBoundary>,
         {unstable_isConcurrent: isConcurrent},
       );
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(renderer).toMatchRenderedOutput(<span prop="BrokenRender" />);
 
       expect(() => {
@@ -67,8 +67,8 @@ describe('ErrorBoundaryReconciliation', () => {
             <BrokenRender fail={true} />
           </ErrorBoundary>,
         );
-        Scheduler.flushAll();
-      }).toWarnDev(isConcurrent ? ['invalid', 'invalid'] : ['invalid']);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev(isConcurrent ? ['invalid', 'invalid'] : ['invalid']);
       const Fallback = fallbackTagName;
       expect(renderer).toMatchRenderedOutput(<Fallback prop="ErrorBoundary" />);
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
index ea33035ca37a2..1104d0bcbabea 100644
--- a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
@@ -6,7 +6,7 @@ let ReactCache;
 let Suspense;
 let TextResource;
 
-describe('ReactBatchedMode', () => {
+describe('ReactBlockingMode', () => {
   beforeEach(() => {
     jest.resetModules();
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -18,18 +18,21 @@ describe('ReactBatchedMode', () => {
     ReactCache = require('react-cache');
     Suspense = React.Suspense;
 
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      return new Promise((resolve, reject) =>
-        setTimeout(() => {
-          Scheduler.yieldValue(`Promise resolved [${text}]`);
-          resolve(text);
-        }, ms),
-      );
-    }, ([text, ms]) => text);
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+            resolve(text);
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
   });
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return props.text;
   }
 
@@ -37,27 +40,27 @@ describe('ReactBatchedMode', () => {
     const text = props.text;
     try {
       TextResource.read([props.text, props.ms]);
-      Scheduler.yieldValue(text);
+      Scheduler.unstable_yieldValue(text);
       return props.text;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend! [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error! [${text}]`);
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
       }
       throw promise;
     }
   }
 
   it('updates flush without yielding in the next event', () => {
-    const root = ReactNoop.createSyncRoot();
+    const root = ReactNoop.createBlockingRoot();
 
     root.render(
-      <React.Fragment>
+      <>
         <Text text="A" />
         <Text text="B" />
         <Text text="C" />
-      </React.Fragment>,
+      </>,
     );
 
     // Nothing should have rendered yet
@@ -73,12 +76,12 @@ describe('ReactBatchedMode', () => {
 
     function App() {
       useLayoutEffect(() => {
-        Scheduler.yieldValue('Layout effect');
+        Scheduler.unstable_yieldValue('Layout effect');
       });
       return <Text text="Hi" />;
     }
 
-    const root = ReactNoop.createSyncRoot();
+    const root = ReactNoop.createBlockingRoot();
     root.render(<App />);
     expect(root).toMatchRenderedOutput(null);
 
@@ -87,7 +90,7 @@ describe('ReactBatchedMode', () => {
   });
 
   it('uses proper Suspense semantics, not legacy ones', async () => {
-    const root = ReactNoop.createSyncRoot();
+    const root = ReactNoop.createBlockingRoot();
     root.render(
       <Suspense fallback={<Text text="Loading..." />}>
         <span>
@@ -112,17 +115,17 @@ describe('ReactBatchedMode', () => {
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
     expect(root).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span>A</span>
         <span>B</span>
         <span>C</span>
-      </React.Fragment>,
+      </>,
     );
   });
 
   it('flushSync does not flush batched work', () => {
     const {useState, forwardRef, useImperativeHandle} = React;
-    const root = ReactNoop.createSyncRoot();
+    const root = ReactNoop.createBlockingRoot();
 
     const Foo = forwardRef(({label}, ref) => {
       const [step, setStep] = useState(0);
@@ -133,10 +136,10 @@ describe('ReactBatchedMode', () => {
     const foo1 = React.createRef(null);
     const foo2 = React.createRef(null);
     root.render(
-      <React.Fragment>
+      <>
         <Foo label="A" ref={foo1} />
         <Foo label="B" ref={foo2} />
-      </React.Fragment>,
+      </>,
     );
 
     // Mount
diff --git a/packages/react-reconciler/src/__tests__/ReactChunks-test.js b/packages/react-reconciler/src/__tests__/ReactChunks-test.js
new file mode 100644
index 0000000000000..28ed482ebdb84
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactChunks-test.js
@@ -0,0 +1,200 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+let React;
+let ReactNoop;
+let useState;
+let Suspense;
+let chunk;
+let readString;
+
+describe('ReactChunks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    chunk = React.chunk;
+    useState = React.useState;
+    Suspense = React.Suspense;
+    let cache = new Map();
+    readString = function(text) {
+      let entry = cache.get(text);
+      if (!entry) {
+        entry = {
+          promise: new Promise(resolve => {
+            setTimeout(() => {
+              entry.resolved = true;
+              resolve();
+            }, 100);
+          }),
+          resolved: false,
+        };
+        cache.set(text, entry);
+      }
+      if (!entry.resolved) {
+        throw entry.promise;
+      }
+      return text;
+    };
+  });
+
+  it.experimental('renders a component with a suspending query', async () => {
+    function Query(id) {
+      return {
+        id: id,
+        name: readString('Sebastian'),
+      };
+    }
+
+    function Render(props, data) {
+      return (
+        <span>
+          {props.title}: {data.name}
+        </span>
+      );
+    }
+
+    let loadUser = chunk(Query, Render);
+
+    function App({User}) {
+      return (
+        <Suspense fallback={'Loading...'}>
+          <User title="Name" />
+        </Suspense>
+      );
+    }
+
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App User={loadUser(123)} />);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
+  });
+
+  it.experimental('supports a lazy wrapper around a chunk', async () => {
+    function Query(id) {
+      return {
+        id: id,
+        name: readString('Sebastian'),
+      };
+    }
+
+    function Render(props, data) {
+      return (
+        <span>
+          {props.title}: {data.name}
+        </span>
+      );
+    }
+
+    let loadUser = chunk(Query, Render);
+
+    function App({User}) {
+      return (
+        <Suspense fallback={'Loading...'}>
+          <User title="Name" />
+        </Suspense>
+      );
+    }
+
+    let resolveLazy;
+    let LazyUser = React.lazy(
+      () =>
+        new Promise(resolve => {
+          resolveLazy = function() {
+            resolve({
+              default: loadUser(123),
+            });
+          };
+        }),
+    );
+
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App User={LazyUser} />);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    // Resolve the component.
+    await ReactNoop.act(async () => {
+      await resolveLazy();
+    });
+
+    // We're still waiting on the data.
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
+  });
+
+  it.experimental(
+    'can receive updated data for the same component',
+    async () => {
+      function Query(firstName) {
+        return {
+          name: firstName,
+        };
+      }
+
+      function Render(props, data) {
+        let [initialName] = useState(data.name);
+        return (
+          <>
+            <span>Initial name: {initialName}</span>
+            <span>Latest name: {data.name}</span>
+          </>
+        );
+      }
+
+      let loadUser = chunk(Query, Render);
+
+      function App({User}) {
+        return (
+          <Suspense fallback={'Loading...'}>
+            <User title="Name" />
+          </Suspense>
+        );
+      }
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App User={loadUser('Sebastian')} />);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span>Initial name: Sebastian</span>
+          <span>Latest name: Sebastian</span>
+        </>,
+      );
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App User={loadUser('Dan')} />);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span>Initial name: Sebastian</span>
+          <span>Latest name: Dan</span>
+        </>,
+      );
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
new file mode 100644
index 0000000000000..83603d625fbdf
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
@@ -0,0 +1,96 @@
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let scheduleCallback;
+let NormalPriority;
+
+describe('ReactSuspenseList', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    ReactFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime = true;
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  function createAsyncText(text) {
+    let resolved = false;
+    let Component = function() {
+      if (!resolved) {
+        Scheduler.unstable_yieldValue('Suspend! [' + text + ']');
+        throw promise;
+      }
+      return <Text text={text} />;
+    };
+    let promise = new Promise(resolve => {
+      Component.resolve = function() {
+        resolved = true;
+        return resolve();
+      };
+    });
+    return Component;
+  }
+
+  it('appends rendering tasks to the end of the priority queue', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+
+    function App({show}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {show ? <A /> : null}
+          {show ? <B /> : null}
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot(null);
+
+    root.render(<App show={false} />);
+    expect(Scheduler).toFlushAndYield([]);
+
+    root.render(<App show={true} />);
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput(null);
+
+    Scheduler.unstable_advanceTime(2000);
+    expect(root).toMatchRenderedOutput(null);
+
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue('Resolve A');
+      A.resolve();
+    });
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue('Resolve B');
+      B.resolve();
+    });
+
+    // This resolves A and schedules a task for React to retry.
+    await expect(Scheduler).toFlushAndYieldThrough(['Resolve A']);
+
+    // The next task that flushes should be the one that resolves B. The render
+    // task should not jump the queue ahead of B.
+    await expect(Scheduler).toFlushAndYieldThrough(['Resolve B']);
+
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+    expect(root).toMatchRenderedOutput('AB');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js
index 4569250c48e06..3c8cbbb8809b2 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js
@@ -51,13 +51,13 @@ describe('ReactExpiration', () => {
   it('two updates of like priority in the same event always flush within the same batch', () => {
     class Text extends React.Component {
       componentDidMount() {
-        Scheduler.yieldValue(`${this.props.text} [commit]`);
+        Scheduler.unstable_yieldValue(`${this.props.text} [commit]`);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue(`${this.props.text} [commit]`);
+        Scheduler.unstable_yieldValue(`${this.props.text} [commit]`);
       }
       render() {
-        Scheduler.yieldValue(`${this.props.text} [render]`);
+        Scheduler.unstable_yieldValue(`${this.props.text} [render]`);
         return <span prop={this.props.text} />;
       }
     }
@@ -72,7 +72,7 @@ describe('ReactExpiration', () => {
     // Schedule an update.
     ReactNoop.render(<Text text="A" />);
     // Advance the timer.
-    Scheduler.advanceTime(2000);
+    Scheduler.unstable_advanceTime(2000);
     // Partially flush the the first update, then interrupt it.
     expect(Scheduler).toFlushAndYieldThrough(['A [render]']);
     interrupt();
@@ -100,7 +100,7 @@ describe('ReactExpiration', () => {
     // Now do the same thing again, except this time don't flush any work in
     // between the two updates.
     ReactNoop.render(<Text text="A" />);
-    Scheduler.advanceTime(2000);
+    Scheduler.unstable_advanceTime(2000);
     expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop.getChildren()).toEqual([span('B')]);
     // Schedule another update.
@@ -116,13 +116,13 @@ describe('ReactExpiration', () => {
     () => {
       class Text extends React.Component {
         componentDidMount() {
-          Scheduler.yieldValue(`${this.props.text} [commit]`);
+          Scheduler.unstable_yieldValue(`${this.props.text} [commit]`);
         }
         componentDidUpdate() {
-          Scheduler.yieldValue(`${this.props.text} [commit]`);
+          Scheduler.unstable_yieldValue(`${this.props.text} [commit]`);
         }
         render() {
-          Scheduler.yieldValue(`${this.props.text} [render]`);
+          Scheduler.unstable_yieldValue(`${this.props.text} [render]`);
           return <span prop={this.props.text} />;
         }
       }
@@ -137,7 +137,7 @@ describe('ReactExpiration', () => {
       // Schedule an update.
       ReactNoop.render(<Text text="A" />);
       // Advance the timer.
-      Scheduler.advanceTime(2000);
+      Scheduler.unstable_advanceTime(2000);
       // Partially flush the the first update, then interrupt it.
       expect(Scheduler).toFlushAndYieldThrough(['A [render]']);
       interrupt();
@@ -165,7 +165,7 @@ describe('ReactExpiration', () => {
       // Now do the same thing again, except this time don't flush any work in
       // between the two updates.
       ReactNoop.render(<Text text="A" />);
-      Scheduler.advanceTime(2000);
+      Scheduler.unstable_advanceTime(2000);
       expect(Scheduler).toHaveYielded([]);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
@@ -188,17 +188,17 @@ describe('ReactExpiration', () => {
       state = {text: store.text};
       componentDidMount() {
         subscribers.push(this);
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `${this.state.text} [${this.props.label}] [commit]`,
         );
       }
       componentDidUpdate() {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `${this.state.text} [${this.props.label}] [commit]`,
         );
       }
       render() {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `${this.state.text} [${this.props.label}] [render]`,
         );
         return <span prop={this.state.text} />;
@@ -207,12 +207,12 @@ describe('ReactExpiration', () => {
 
     function App() {
       return (
-        <React.Fragment>
+        <>
           <Connected label="A" />
           <Connected label="B" />
           <Connected label="C" />
           <Connected label="D" />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -255,7 +255,7 @@ describe('ReactExpiration', () => {
     // Before importing the renderer, advance the current time by a number
     // larger than the maximum allowed for bitwise operations.
     const maxSigned31BitInt = 1073741823;
-    Scheduler.advanceTime(maxSigned31BitInt * 100);
+    Scheduler.unstable_advanceTime(maxSigned31BitInt * 100);
 
     // Now import the renderer. On module initialization, it will read the
     // current time.
@@ -268,7 +268,7 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance the time some more to expire the update.
-    Scheduler.advanceTime(10000);
+    Scheduler.unstable_advanceTime(10000);
     expect(Scheduler).toFlushExpired([]);
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
@@ -279,7 +279,7 @@ describe('ReactExpiration', () => {
     // default to 0, and most tests don't advance time.
 
     // Before scheduling an update, advance the current time.
-    Scheduler.advanceTime(10000);
+    Scheduler.unstable_advanceTime(10000);
 
     ReactNoop.render('Hi');
     expect(Scheduler).toFlushExpired([]);
@@ -287,7 +287,7 @@ describe('ReactExpiration', () => {
 
     // Advancing by ~5 seconds should be sufficient to expire the update. (I
     // used a slightly larger number to allow for possible rounding.)
-    Scheduler.advanceTime(6000);
+    Scheduler.unstable_advanceTime(6000);
 
     ReactNoop.render('Hi');
     expect(Scheduler).toFlushExpired([]);
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js b/packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
deleted file mode 100644
index fc89a2e4c916b..0000000000000
--- a/packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
+++ /dev/null
@@ -1,1215 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactNoop;
-let Scheduler;
-let ReactFeatureFlags;
-let EventComponent;
-let ReactTestRenderer;
-let ReactDOM;
-let ReactDOMServer;
-let ReactTestUtils;
-let EventTarget;
-let ReactSymbols;
-
-const noOpResponder = {
-  targetEventTypes: [],
-  handleEvent() {},
-};
-
-function createReactEventComponent() {
-  return {
-    $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,
-    displayName: 'TestEventComponent',
-    props: null,
-    responder: noOpResponder,
-  };
-}
-
-function createReactEventTarget() {
-  return {
-    $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,
-    displayName: 'TestEventTarget',
-    type: Symbol.for('react.event_target.test'),
-  };
-}
-
-function init() {
-  jest.resetModules();
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableEventAPI = true;
-  React = require('react');
-  Scheduler = require('scheduler');
-  ReactSymbols = require('shared/ReactSymbols');
-}
-
-function initNoopRenderer() {
-  init();
-  ReactNoop = require('react-noop-renderer');
-}
-
-function initTestRenderer() {
-  init();
-  ReactTestRenderer = require('react-test-renderer');
-}
-
-function initReactDOM() {
-  init();
-  ReactDOM = require('react-dom');
-  ReactTestUtils = require('react-dom/test-utils');
-}
-
-function initReactDOMServer() {
-  init();
-  ReactDOMServer = require('react-dom/server');
-}
-
-// This is a new feature in Fiber so I put it in its own test file. It could
-// probably move to one of the other test files once it is official.
-describe('ReactFiberEvents', () => {
-  describe('NoopRenderer', () => {
-    beforeEach(() => {
-      initNoopRenderer();
-      EventComponent = createReactEventComponent();
-      EventTarget = createReactEventTarget();
-    });
-
-    it('should render a simple event component with a single child', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>Hello world</div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<div>Hello world</div>);
-    });
-
-    it('should warn when an event component has a direct text child', () => {
-      const Test = () => <EventComponent>Hello world</EventComponent>;
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should warn when an event component has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <ChildWrapper />
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should render a simple event component with a single event target', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            Hello world<EventTarget />
-          </div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<div>Hello world</div>);
-    });
-
-    it('should warn when an event target has a direct text child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>Hello world</EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should warn when an event target has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <ChildWrapper />
-          </EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should not warn if an event target is not a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <EventTarget />
-            <span>Child 1</span>
-          </div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(
-        <div>
-          <span>Child 1</span>
-        </div>,
-      );
-    });
-
-    it('should warn if an event target has an event component as a child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <EventComponent>
-              <span>Child 1</span>
-            </EventComponent>
-          </EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        ReactNoop.render(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should handle event components correctly with error boundaries', () => {
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error) {
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return 'Worked!';
-          }
-          return <Test />;
-        }
-      }
-
-      ReactNoop.render(<Wrapper />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput('Worked!');
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <div>
-            <Child />
-          </div>
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 0</span>
-          </div>
-        </div>,
-      );
-
-      ReactNoop.act(() => {
-        _updateCounter(counter => counter + 1);
-      });
-      expect(Scheduler).toFlushWithoutYielding();
-
-      expect(ReactNoop).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 1</span>
-          </div>
-        </div>,
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return 'Text!';
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <Child />
-        </EventComponent>
-      );
-
-      ReactNoop.render(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(
-        <div>
-          <span>Child - 0</span>
-        </div>,
-      );
-
-      expect(() => {
-        ReactNoop.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Text!" in an element.',
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return <EventTarget>123</EventTarget>;
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <div>
-          <EventComponent>
-            <Child />
-          </EventComponent>
-        </div>
-      );
-
-      ReactNoop.render(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 0</span>
-          </div>
-        </div>,
-      );
-
-      expect(() => {
-        ReactNoop.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should error with a component stack contains the names of the event components and event targets', () => {
-      let componentStackMessage;
-
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error, errMessage) {
-          componentStackMessage = errMessage.componentStack;
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return null;
-          }
-          return <Test />;
-        }
-      }
-
-      ReactNoop.render(<Wrapper />);
-      expect(Scheduler).toFlushWithoutYielding();
-
-      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
-      expect(componentStackMessage.includes('span')).toBe(true);
-      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
-      expect(componentStackMessage.includes('Test')).toBe(true);
-      expect(componentStackMessage.includes('Wrapper')).toBe(true);
-    });
-  });
-
-  describe('TestRenderer', () => {
-    beforeEach(() => {
-      initTestRenderer();
-      EventComponent = createReactEventComponent();
-      EventTarget = createReactEventTarget();
-    });
-
-    it('should render a simple event component with a single child', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>Hello world</div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<div>Hello world</div>);
-    });
-
-    it('should warn when an event component has a direct text child', () => {
-      const Test = () => <EventComponent>Hello world</EventComponent>;
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should warn when an event component has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <ChildWrapper />
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should render a simple event component with a single event target', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            Hello world<EventTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<div>Hello world</div>);
-
-      const Test2 = () => (
-        <EventComponent>
-          <EventTarget />
-          <span>I am now a span</span>
-        </EventComponent>
-      );
-
-      root.update(<Test2 />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<span>I am now a span</span>);
-    });
-
-    it('should warn when an event target has a direct text child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>Hello world</EventTarget>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should warn when an event target has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <ChildWrapper />
-          </EventTarget>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should not warn if an event target is not a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <EventTarget />
-            <span>Child 1</span>
-          </div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Test />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(
-        <div>
-          <span>Child 1</span>
-        </div>,
-      );
-    });
-
-    it('should warn if an event target has an event component as a child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <EventComponent>
-              <span>Child 1</span>
-            </EventComponent>
-          </EventTarget>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      expect(() => {
-        root.update(<Test />);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should handle event components correctly with error boundaries', () => {
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error) {
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return 'Worked!';
-          }
-          return <Test />;
-        }
-      }
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Wrapper />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput('Worked!');
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <div>
-            <Child />
-          </div>
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 0</span>
-          </div>
-        </div>,
-      );
-
-      ReactTestRenderer.act(() => {
-        _updateCounter(counter => counter + 1);
-      });
-
-      expect(root).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 1</span>
-          </div>
-        </div>,
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return 'Text!';
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <Child />
-        </EventComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(
-        <div>
-          <span>Child - 0</span>
-        </div>,
-      );
-
-      expect(() => {
-        ReactTestRenderer.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Text!" in an element.',
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return <EventTarget>123</EventTarget>;
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <div>
-          <EventComponent>
-            <Child />
-          </EventComponent>
-        </div>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Parent />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(
-        <div>
-          <div>
-            <span>Child - 0</span>
-          </div>
-        </div>,
-      );
-
-      expect(() => {
-        ReactTestRenderer.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should error with a component stack contains the names of the event components and event targets', () => {
-      let componentStackMessage;
-
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error, errMessage) {
-          componentStackMessage = errMessage.componentStack;
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return null;
-          }
-          return <Test />;
-        }
-      }
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Wrapper />);
-      expect(Scheduler).toFlushWithoutYielding();
-
-      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
-      expect(componentStackMessage.includes('span')).toBe(true);
-      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
-      expect(componentStackMessage.includes('Test')).toBe(true);
-      expect(componentStackMessage.includes('Wrapper')).toBe(true);
-    });
-
-    it('should handle unwinding event component fibers in concurrent mode', () => {
-      let resolveThenable;
-
-      const thenable = {
-        then(resolve) {
-          resolveThenable = resolve;
-        },
-      };
-
-      function Async() {
-        Scheduler.yieldValue('Suspend!');
-        throw thenable;
-      }
-
-      function Text(props) {
-        Scheduler.yieldValue(props.text);
-        return props.text;
-      }
-
-      ReactTestRenderer.create(
-        <React.Suspense fallback={<Text text="Loading..." />}>
-          <EventComponent>
-            <div>
-              <Async />
-              <Text text="Sibling" />
-            </div>
-          </EventComponent>
-        </React.Suspense>,
-        {
-          unstable_isConcurrent: true,
-        },
-      );
-
-      expect(Scheduler).toFlushAndYieldThrough(['Suspend!']);
-      resolveThenable();
-    });
-  });
-
-  describe('ReactDOM', () => {
-    beforeEach(() => {
-      initReactDOM();
-      EventComponent = createReactEventComponent();
-      EventTarget = createReactEventTarget();
-    });
-
-    it('should render a simple event component with a single child', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>Hello world</div>
-        </EventComponent>
-      );
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world</div>');
-    });
-
-    it('should warn when an event component has a direct text child', () => {
-      const Test = () => <EventComponent>Hello world</EventComponent>;
-
-      expect(() => {
-        const container = document.createElement('div');
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should warn when an event component has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <ChildWrapper />
-        </EventComponent>
-      );
-
-      expect(() => {
-        const container = document.createElement('div');
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Hello world" in an element.',
-      );
-    });
-
-    it('should render a simple event component with a single event target', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            Hello world<EventTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world</div>');
-
-      const Test2 = () => (
-        <EventComponent>
-          <EventTarget />
-          <span>I am now a span</span>
-        </EventComponent>
-      );
-
-      ReactDOM.render(<Test2 />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<span>I am now a span</span>');
-    });
-
-    it('should warn when an event target has a direct text child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>Hello world</EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        const container = document.createElement('div');
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should warn when an event target has a direct text child #2', () => {
-      const ChildWrapper = () => 'Hello world';
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <ChildWrapper />
-          </EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        const container = document.createElement('div');
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should not warn if an event target is not a direct child of an event component', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <EventTarget />
-            <span>Child 1</span>
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div><span>Child 1</span></div>');
-    });
-
-    it('should warn if an event target has an event component as a child', () => {
-      const Test = () => (
-        <EventComponent>
-          <EventTarget>
-            <EventComponent>
-              <span>Child 1</span>
-            </EventComponent>
-          </EventTarget>
-        </EventComponent>
-      );
-
-      expect(() => {
-        const container = document.createElement('div');
-        ReactDOM.render(<Test />, container);
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should handle event components correctly with error boundaries', () => {
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error) {
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return 'Worked!';
-          }
-          return <Test />;
-        }
-      }
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Wrapper />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('Worked!');
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <div>
-            <Child />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Parent />, container);
-      expect(container.innerHTML).toBe(
-        '<div><div><span>Child - 0</span></div></div>',
-      );
-
-      ReactTestUtils.act(() => {
-        _updateCounter(counter => counter + 1);
-      });
-
-      expect(container.innerHTML).toBe(
-        '<div><div><span>Child - 1</span></div></div>',
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return 'Text!';
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <EventComponent>
-          <Child />
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Parent />, container);
-      expect(container.innerHTML).toBe('<div><span>Child - 0</span></div>');
-
-      expect(() => {
-        ReactTestUtils.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev(
-        'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-          'Wrap the child text "Text!" in an element.',
-      );
-    });
-
-    it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
-      let _updateCounter;
-
-      function Child() {
-        const [counter, updateCounter] = React.useState(0);
-
-        _updateCounter = updateCounter;
-
-        if (counter === 1) {
-          return <EventTarget>123</EventTarget>;
-        }
-
-        return (
-          <div>
-            <span>Child - {counter}</span>
-          </div>
-        );
-      }
-
-      const Parent = () => (
-        <div>
-          <EventComponent>
-            <Child />
-          </EventComponent>
-        </div>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Parent />, container);
-      expect(container.innerHTML).toBe(
-        '<div><div><span>Child - 0</span></div></div>',
-      );
-
-      expect(() => {
-        ReactTestUtils.act(() => {
-          _updateCounter(counter => counter + 1);
-        });
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toWarnDev('Warning: Event targets should not have children.');
-    });
-
-    it('should error with a component stack contains the names of the event components and event targets', () => {
-      let componentStackMessage;
-
-      function ErrorComponent() {
-        throw new Error('Failed!');
-      }
-
-      const Test = () => (
-        <EventComponent>
-          <span>
-            <ErrorComponent />
-          </span>
-        </EventComponent>
-      );
-
-      class Wrapper extends React.Component {
-        state = {
-          error: null,
-        };
-
-        componentDidCatch(error, errMessage) {
-          componentStackMessage = errMessage.componentStack;
-          this.setState({
-            error,
-          });
-        }
-
-        render() {
-          if (this.state.error) {
-            return null;
-          }
-          return <Test />;
-        }
-      }
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Wrapper />, container);
-
-      expect(componentStackMessage.includes('ErrorComponent')).toBe(true);
-      expect(componentStackMessage.includes('span')).toBe(true);
-      expect(componentStackMessage.includes('TestEventComponent')).toBe(true);
-      expect(componentStackMessage.includes('Test')).toBe(true);
-      expect(componentStackMessage.includes('Wrapper')).toBe(true);
-    });
-  });
-
-  describe('ReactDOMServer', () => {
-    beforeEach(() => {
-      initReactDOMServer();
-      EventComponent = createReactEventComponent();
-      EventTarget = createReactEventTarget();
-    });
-
-    it('should render a simple event component with a single child', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>Hello world</div>
-        </EventComponent>
-      );
-      const output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe('<div>Hello world</div>');
-    });
-
-    it('should render a simple event component with a single event target', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            Hello world<EventTarget />
-          </div>
-        </EventComponent>
-      );
-
-      let output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe('<div>Hello world</div>');
-
-      const Test2 = () => (
-        <EventComponent>
-          <EventTarget>
-            <span>I am now a span</span>
-          </EventTarget>
-        </EventComponent>
-      );
-
-      output = ReactDOMServer.renderToString(<Test2 />);
-      expect(output).toBe('<span>I am now a span</span>');
-    });
-  });
-});
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js
new file mode 100644
index 0000000000000..00b00b533b95f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js
@@ -0,0 +1,225 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let ReactFeatureFlags;
+let ReactTestRenderer;
+let ReactDOM;
+let ReactDOMServer;
+
+function createReactFundamentalComponent(fundamentalImpl) {
+  return React.unstable_createFundamental(fundamentalImpl);
+}
+
+function init() {
+  jest.resetModules();
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableFundamentalAPI = true;
+  React = require('react');
+  Scheduler = require('scheduler');
+}
+
+function initNoopRenderer() {
+  init();
+  ReactNoop = require('react-noop-renderer');
+}
+
+function initTestRenderer() {
+  init();
+  ReactTestRenderer = require('react-test-renderer');
+}
+
+function initReactDOM() {
+  init();
+  ReactDOM = require('react-dom');
+}
+
+function initReactDOMServer() {
+  init();
+  ReactDOMServer = require('react-dom/server');
+}
+
+describe('ReactFiberFundamental', () => {
+  describe('NoopRenderer', () => {
+    beforeEach(() => {
+      initNoopRenderer();
+    });
+
+    it('should render a simple fundamental component with a single child', () => {
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: true,
+        getInstance(context, props, state) {
+          const instance = {
+            children: [],
+            text: null,
+            type: 'test',
+          };
+          return instance;
+        },
+      });
+
+      const Test = ({children}) => (
+        <FundamentalComponent>{children}</FundamentalComponent>
+      );
+
+      ReactNoop.render(<Test>Hello world</Test>);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(ReactNoop).toMatchRenderedOutput(<test>Hello world</test>);
+      ReactNoop.render(<Test>Hello world again</Test>);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(ReactNoop).toMatchRenderedOutput(<test>Hello world again</test>);
+      ReactNoop.render(null);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+  });
+
+  describe('NoopTestRenderer', () => {
+    beforeEach(() => {
+      initTestRenderer();
+    });
+
+    it('should render a simple fundamental component with a single child', () => {
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: true,
+        getInstance(context, props, state) {
+          const instance = {
+            children: [],
+            props,
+            type: 'test',
+            tag: 'INSTANCE',
+          };
+          return instance;
+        },
+      });
+
+      const Test = ({children}) => (
+        <FundamentalComponent>{children}</FundamentalComponent>
+      );
+
+      const root = ReactTestRenderer.create(null);
+      root.update(<Test>Hello world</Test>);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(root).toMatchRenderedOutput(<test>Hello world</test>);
+      root.update(<Test>Hello world again</Test>);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(root).toMatchRenderedOutput(<test>Hello world again</test>);
+      root.update(null);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(root).toMatchRenderedOutput(null);
+    });
+  });
+
+  describe('ReactDOM', () => {
+    beforeEach(() => {
+      initReactDOM();
+    });
+
+    it('should render a simple fundamental component with a single child', () => {
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: true,
+        getInstance(context, props, state) {
+          const instance = document.createElement('div');
+          return instance;
+        },
+      });
+
+      const Test = ({children}) => (
+        <FundamentalComponent>{children}</FundamentalComponent>
+      );
+
+      const container = document.createElement('div');
+      ReactDOM.render(<Test>Hello world</Test>, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('<div>Hello world</div>');
+      ReactDOM.render(<Test>Hello world again</Test>, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('<div>Hello world again</div>');
+      ReactDOM.render(null, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should render a simple fundamental component without reconcileChildren', () => {
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: false,
+        getInstance(context, props, state) {
+          const instance = document.createElement('div');
+          instance.textContent = 'Hello world';
+          return instance;
+        },
+      });
+
+      const Test = () => <FundamentalComponent />;
+
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('<div>Hello world</div>');
+      // Children should be ignored
+      ReactDOM.render(<Test>Hello world again</Test>, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('<div>Hello world</div>');
+      ReactDOM.render(null, container);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(container.innerHTML).toBe('');
+    });
+  });
+
+  describe('ReactDOMServer', () => {
+    beforeEach(() => {
+      initReactDOMServer();
+    });
+
+    it('should render a simple fundamental component with a single child', () => {
+      const getInstance = jest.fn();
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: true,
+        getInstance,
+        getServerSideString(context, props) {
+          return `<div>`;
+        },
+        getServerSideStringClose(context, props) {
+          return `</div>`;
+        },
+      });
+
+      const Test = ({children}) => (
+        <FundamentalComponent>{children}</FundamentalComponent>
+      );
+
+      expect(getInstance).not.toBeCalled();
+      let output = ReactDOMServer.renderToString(<Test>Hello world</Test>);
+      expect(output).toBe('<div>Hello world</div>');
+      output = ReactDOMServer.renderToString(<Test>Hello world again</Test>);
+      expect(output).toBe('<div>Hello world again</div>');
+    });
+
+    it('should render a simple fundamental component without reconcileChildren', () => {
+      const FundamentalComponent = createReactFundamentalComponent({
+        reconcileChildren: false,
+        getServerSideString(context, props) {
+          return `<div>Hello world</div>`;
+        },
+      });
+
+      const Test = () => <FundamentalComponent />;
+
+      let output = ReactDOMServer.renderToString(<Test />);
+      expect(output).toBe('<div>Hello world</div>');
+      // Children should be ignored
+      output = ReactDOMServer.renderToString(<Test>Hello world again</Test>);
+      expect(output).toBe('<div>Hello world</div>');
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 1315f9b1b38a0..6a724025abdcb 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -33,12 +33,6 @@ describe('ReactFiberHostContext', () => {
       getChildHostContext: function() {
         return null;
       },
-      getChildHostContextForEventComponent: function() {
-        return null;
-      },
-      getChildHostContextForEventTarget: function() {
-        return null;
-      },
       shouldSetTextContent: function() {
         return false;
       },
@@ -64,6 +58,7 @@ describe('ReactFiberHostContext', () => {
       /* root: */ null,
       ConcurrentRoot,
       false,
+      null,
     );
     Renderer.updateContainer(
       <a>
@@ -116,6 +111,7 @@ describe('ReactFiberHostContext', () => {
       rootContext,
       ConcurrentRoot,
       false,
+      null,
     );
     Renderer.updateContainer(
       <a>
diff --git a/packages/react-reconciler/src/__tests__/ReactFragment-test.js b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
index 5b6030da64cb6..c258b25146ac1 100644
--- a/packages/react-reconciler/src/__tests__/ReactFragment-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
@@ -23,8 +23,8 @@ describe('ReactFragment', () => {
   });
 
   function div(...children) {
-    children = children.map(
-      c => (typeof c === 'string' ? {text: c, hidden: false} : c),
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
     );
     return {type: 'div', children, prop: undefined, hidden: false};
   }
@@ -39,9 +39,9 @@ describe('ReactFragment', () => {
 
   it('should render a single child via noop renderer', () => {
     const element = (
-      <React.Fragment>
+      <>
         <span>foo</span>
-      </React.Fragment>
+      </>
     );
 
     ReactNoop.render(element);
@@ -61,9 +61,9 @@ describe('ReactFragment', () => {
 
   it('should render multiple children via noop renderer', () => {
     const element = (
-      <React.Fragment>
+      <>
         hello <span>world</span>
-      </React.Fragment>
+      </>
     );
 
     ReactNoop.render(element);
@@ -74,9 +74,7 @@ describe('ReactFragment', () => {
 
   it('should render an iterable via noop renderer', () => {
     const element = (
-      <React.Fragment>
-        {new Set([<span key="a">hi</span>, <span key="b">bye</span>])}
-      </React.Fragment>
+      <>{new Set([<span key="a">hi</span>, <span key="b">bye</span>])}</>
     );
 
     ReactNoop.render(element);
@@ -102,10 +100,10 @@ describe('ReactFragment', () => {
       return condition ? (
         <Stateful key="a" />
       ) : (
-        <React.Fragment>
+        <>
           <Stateful key="a" />
           <div key="b">World</div>
-        </React.Fragment>
+        </>
       );
     }
 
@@ -140,13 +138,13 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>
+        <>
           <Stateful />
-        </React.Fragment>
+        </>
       ) : (
-        <React.Fragment>
+        <>
           <Stateful />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -181,22 +179,22 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>
-          <React.Fragment>
-            <React.Fragment>
+        <>
+          <>
+            <>
               <Stateful key="a" />
-            </React.Fragment>
-          </React.Fragment>
-        </React.Fragment>
+            </>
+          </>
+        </>
       ) : (
-        <React.Fragment>
-          <React.Fragment>
-            <React.Fragment>
+        <>
+          <>
+            <>
               <div />
               <Stateful key="a" />
-            </React.Fragment>
-          </React.Fragment>
-        </React.Fragment>
+            </>
+          </>
+        </>
       );
     }
 
@@ -231,15 +229,15 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <Stateful key="a" />
-          </React.Fragment>
-        </React.Fragment>
+          </>
+        </>
       ) : (
-        <React.Fragment>
+        <>
           <Stateful key="a" />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -276,11 +274,11 @@ describe('ReactFragment', () => {
       return condition ? (
         <Stateful key="a" />
       ) : (
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <Stateful key="a" />
-          </React.Fragment>
-        </React.Fragment>
+          </>
+        </>
       );
     }
 
@@ -317,12 +315,12 @@ describe('ReactFragment', () => {
       return condition ? (
         <Stateful key="a" />
       ) : (
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <Stateful key="a" />
-          </React.Fragment>
+          </>
           <div />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -357,11 +355,11 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>
+        <>
           <Stateful key="a" />
-        </React.Fragment>
+        </>
       ) : (
-        <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
+        <>{[<Stateful key="a" />]}</>
       );
     }
 
@@ -398,9 +396,9 @@ describe('ReactFragment', () => {
       return condition ? (
         [<Stateful key="a" />]
       ) : (
-        <React.Fragment>
+        <>
           <Stateful key="a" />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -435,13 +433,13 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
+        <>{[<Stateful key="a" />]}</>
       ) : (
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <Stateful key="a" />
-          </React.Fragment>
-        </React.Fragment>
+          </>
+        </>
       );
     }
 
@@ -476,7 +474,7 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
+        <>{[<Stateful key="a" />]}</>
       ) : (
         [[<Stateful key="a" />]]
       );
@@ -513,11 +511,11 @@ describe('ReactFragment', () => {
 
     function Foo({condition}) {
       return condition ? (
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <Stateful key="a" />
-          </React.Fragment>
-        </React.Fragment>
+          </>
+        </>
       ) : (
         [[<Stateful key="a" />]]
       );
@@ -600,9 +598,9 @@ describe('ReactFragment', () => {
           <Stateful />
         </React.Fragment>
       ) : (
-        <React.Fragment>
+        <>
           <Stateful />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -710,7 +708,7 @@ describe('ReactFragment', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     ReactNoop.render(<Foo condition={false} />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Each child in a list should have a unique "key" prop.',
     );
 
@@ -724,6 +722,149 @@ describe('ReactFragment', () => {
     expect(ReactNoop.getChildren()).toEqual([div(div(), span())]);
   });
 
+  it('should not preserve state when switching a nested unkeyed fragment to a passthrough component', function() {
+    const ops = [];
+
+    function Passthrough({children}) {
+      return children;
+    }
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <>
+            <Stateful />
+          </>
+        </>
+      ) : (
+        <>
+          <Passthrough>
+            <Stateful />
+          </Passthrough>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    ReactNoop.render(<Foo condition={false} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+  });
+
+  it('should not preserve state when switching a nested keyed fragment to a passthrough component', function() {
+    const ops = [];
+
+    function Passthrough({children}) {
+      return children;
+    }
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <React.Fragment key="a">
+            <Stateful />
+          </React.Fragment>
+        </>
+      ) : (
+        <>
+          <Passthrough>
+            <Stateful />
+          </Passthrough>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    ReactNoop.render(<Foo condition={false} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+  });
+
+  it('should not preserve state when switching a nested keyed array to a passthrough component', function() {
+    const ops = [];
+
+    function Passthrough({children}) {
+      return children;
+    }
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>{[<Stateful key="a" />]}</>
+      ) : (
+        <>
+          <Passthrough>
+            <Stateful />
+          </Passthrough>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    ReactNoop.render(<Foo condition={false} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+
+    ReactNoop.render(<Foo condition={true} />);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop.getChildren()).toEqual([div()]);
+  });
+
   it('should preserve state when it does not change positions', function() {
     const ops = [];
 
@@ -741,25 +882,25 @@ describe('ReactFragment', () => {
       return condition
         ? [
             <span />,
-            <React.Fragment>
+            <>
               <Stateful />
-            </React.Fragment>,
+            </>,
           ]
         : [
             <span />,
-            <React.Fragment>
+            <>
               <Stateful />
-            </React.Fragment>,
+            </>,
           ];
     }
 
     ReactNoop.render(<Foo condition={true} />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Each child in a list should have a unique "key" prop.',
     );
 
     ReactNoop.render(<Foo condition={false} />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Each child in a list should have a unique "key" prop.',
     );
 
@@ -767,7 +908,7 @@ describe('ReactFragment', () => {
     expect(ReactNoop.getChildren()).toEqual([span(), div()]);
 
     ReactNoop.render(<Foo condition={true} />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Each child in a list should have a unique "key" prop.',
     );
 
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index 74152cbcc6c31..2ebf8d16a85e3 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -60,7 +60,7 @@ describe('ReactHooks', () => {
     const {useState, useLayoutEffect} = React;
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -73,9 +73,9 @@ describe('ReactHooks', () => {
       setCounter2 = _setCounter2;
 
       const text = `${counter1}, ${counter2}`;
-      Scheduler.yieldValue(`Parent: ${text}`);
+      Scheduler.unstable_yieldValue(`Parent: ${text}`);
       useLayoutEffect(() => {
-        Scheduler.yieldValue(`Effect: ${text}`);
+        Scheduler.unstable_yieldValue(`Effect: ${text}`);
       });
       return <Child text={text} />;
     }
@@ -169,7 +169,7 @@ describe('ReactHooks', () => {
     const {useState, memo} = React;
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -182,7 +182,7 @@ describe('ReactHooks', () => {
       setCounter2 = _setCounter2;
 
       const text = `${counter1}, ${counter2} (${theme})`;
-      Scheduler.yieldValue(`Parent: ${text}`);
+      Scheduler.unstable_yieldValue(`Parent: ${text}`);
       return <Child text={text} />;
     }
 
@@ -254,7 +254,7 @@ describe('ReactHooks', () => {
       const [counter, _setCounter] = useState(0);
       setCounter = _setCounter;
 
-      Scheduler.yieldValue(`Count: ${counter}`);
+      Scheduler.unstable_yieldValue(`Count: ${counter}`);
       return counter;
     }
 
@@ -269,7 +269,7 @@ describe('ReactHooks', () => {
           throw new Error('Expected to ignore the callback.');
         }),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'State updates from the useState() and useReducer() Hooks ' +
         "don't support the second callback argument. " +
         'To execute a side effect after rendering, ' +
@@ -288,7 +288,7 @@ describe('ReactHooks', () => {
       const [counter, _dispatch] = useReducer((s, a) => a, 0);
       dispatch = _dispatch;
 
-      Scheduler.yieldValue(`Count: ${counter}`);
+      Scheduler.unstable_yieldValue(`Count: ${counter}`);
       return counter;
     }
 
@@ -303,7 +303,7 @@ describe('ReactHooks', () => {
           throw new Error('Expected to ignore the callback.');
         }),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'State updates from the useState() and useReducer() Hooks ' +
         "don't support the second callback argument. " +
         'To execute a side effect after rendering, ' +
@@ -322,7 +322,7 @@ describe('ReactHooks', () => {
     let setTheme;
     function ThemeProvider({children}) {
       const [theme, _setTheme] = useState('light');
-      Scheduler.yieldValue('Theme: ' + theme);
+      Scheduler.unstable_yieldValue('Theme: ' + theme);
       setTheme = _setTheme;
       return (
         <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
@@ -330,7 +330,7 @@ describe('ReactHooks', () => {
     }
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -342,9 +342,9 @@ describe('ReactHooks', () => {
       const theme = useContext(ThemeContext);
 
       const text = `${counter} (${theme})`;
-      Scheduler.yieldValue(`Parent: ${text}`);
+      Scheduler.unstable_yieldValue(`Parent: ${text}`);
       useLayoutEffect(() => {
-        Scheduler.yieldValue(`Effect: ${text}`);
+        Scheduler.unstable_yieldValue(`Effect: ${text}`);
       });
       return <Child text={text} />;
     }
@@ -405,7 +405,7 @@ describe('ReactHooks', () => {
     const {useState, useLayoutEffect} = React;
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -413,9 +413,9 @@ describe('ReactHooks', () => {
     function Parent() {
       const [counter, _setCounter] = useState(0);
       setCounter = _setCounter;
-      Scheduler.yieldValue('Parent: ' + counter);
+      Scheduler.unstable_yieldValue('Parent: ' + counter);
       useLayoutEffect(() => {
-        Scheduler.yieldValue('Effect: ' + counter);
+        Scheduler.unstable_yieldValue('Effect: ' + counter);
       });
       return <Child text={counter} />;
     }
@@ -431,7 +431,7 @@ describe('ReactHooks', () => {
     expect(root).toMatchRenderedOutput('1');
 
     // Update to the same state. React doesn't know if the queue is empty
-    // because the alterate fiber has pending update priority, so we have to
+    // because the alternate fiber has pending update priority, so we have to
     // enter the render phase before we can bail out. But we bail out before
     // rendering the child, and we don't fire any effects.
     act(() => setCounter(1));
@@ -483,7 +483,7 @@ describe('ReactHooks', () => {
     const {useState} = React;
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -491,7 +491,7 @@ describe('ReactHooks', () => {
     function Parent() {
       const [counter, _setCounter] = useState(0);
       setCounter = _setCounter;
-      Scheduler.yieldValue('Parent: ' + counter);
+      Scheduler.unstable_yieldValue('Parent: ' + counter);
       return <Child text={counter} />;
     }
 
@@ -502,7 +502,9 @@ describe('ReactHooks', () => {
 
     const update = value => {
       setCounter(previous => {
-        Scheduler.yieldValue(`Compute state (${previous} -> ${value})`);
+        Scheduler.unstable_yieldValue(
+          `Compute state (${previous} -> ${value})`,
+        );
         return value;
       });
     };
@@ -541,7 +543,7 @@ describe('ReactHooks', () => {
     const {useState} = React;
 
     function Child({text}) {
-      Scheduler.yieldValue('Child: ' + text);
+      Scheduler.unstable_yieldValue('Child: ' + text);
       return text;
     }
 
@@ -549,7 +551,7 @@ describe('ReactHooks', () => {
     function Parent() {
       const [counter, _setCounter] = useState(1);
       setCounter = _setCounter;
-      Scheduler.yieldValue('Parent: ' + counter);
+      Scheduler.unstable_yieldValue('Parent: ' + counter);
       return <Child text={counter} />;
     }
 
@@ -561,7 +563,9 @@ describe('ReactHooks', () => {
     const update = compute => {
       setCounter(previous => {
         const value = compute(previous);
-        Scheduler.yieldValue(`Compute state (${previous} -> ${value})`);
+        Scheduler.unstable_yieldValue(
+          `Compute state (${previous} -> ${value})`,
+        );
         return value;
       });
     };
@@ -599,7 +603,9 @@ describe('ReactHooks', () => {
     const {useLayoutEffect} = React;
     function App(props) {
       useLayoutEffect(() => {
-        Scheduler.yieldValue('Did commit: ' + props.dependencies.join(', '));
+        Scheduler.unstable_yieldValue(
+          'Did commit: ' + props.dependencies.join(', '),
+        );
       }, props.dependencies);
       return props.dependencies;
     }
@@ -607,7 +613,7 @@ describe('ReactHooks', () => {
     expect(Scheduler).toHaveYielded(['Did commit: A']);
     expect(() => {
       root.update(<App dependencies={['A', 'B']} />);
-    }).toWarnDev([
+    }).toErrorDev([
       'Warning: The final argument passed to useLayoutEffect changed size ' +
         'between renders. The order and size of this array must remain ' +
         'constant.\n\n' +
@@ -619,10 +625,13 @@ describe('ReactHooks', () => {
   it('warns if switching from dependencies to no dependencies', () => {
     const {useMemo} = React;
     function App({text, hasDeps}) {
-      const resolvedText = useMemo(() => {
-        Scheduler.yieldValue('Compute');
-        return text.toUpperCase();
-      }, hasDeps ? null : [text]);
+      const resolvedText = useMemo(
+        () => {
+          Scheduler.unstable_yieldValue('Compute');
+          return text.toUpperCase();
+        },
+        hasDeps ? null : [text],
+      );
       return resolvedText;
     }
 
@@ -633,7 +642,7 @@ describe('ReactHooks', () => {
 
     expect(() => {
       root.update(<App text="Hello" hasDeps={false} />);
-    }).toWarnDev([
+    }).toErrorDev([
       'Warning: useMemo received a final argument during this render, but ' +
         'not during the previous render. Even though the final argument is ' +
         'optional, its type cannot change between renders.',
@@ -652,8 +661,10 @@ describe('ReactHooks', () => {
     }
 
     expect(() => {
-      ReactTestRenderer.create(<App deps={'hello'} />);
-    }).toWarnDev([
+      act(() => {
+        ReactTestRenderer.create(<App deps={'hello'} />);
+      });
+    }).toErrorDev([
       'Warning: useEffect received a final argument that is not an array (instead, received `string`). ' +
         'When specified, the final argument must be an array.',
       'Warning: useLayoutEffect received a final argument that is not an array (instead, received `string`). ' +
@@ -664,8 +675,10 @@ describe('ReactHooks', () => {
         'When specified, the final argument must be an array.',
     ]);
     expect(() => {
-      ReactTestRenderer.create(<App deps={100500} />);
-    }).toWarnDev([
+      act(() => {
+        ReactTestRenderer.create(<App deps={100500} />);
+      });
+    }).toErrorDev([
       'Warning: useEffect received a final argument that is not an array (instead, received `number`). ' +
         'When specified, the final argument must be an array.',
       'Warning: useLayoutEffect received a final argument that is not an array (instead, received `number`). ' +
@@ -676,8 +689,10 @@ describe('ReactHooks', () => {
         'When specified, the final argument must be an array.',
     ]);
     expect(() => {
-      ReactTestRenderer.create(<App deps={{}} />);
-    }).toWarnDev([
+      act(() => {
+        ReactTestRenderer.create(<App deps={{}} />);
+      });
+    }).toErrorDev([
       'Warning: useEffect received a final argument that is not an array (instead, received `object`). ' +
         'When specified, the final argument must be an array.',
       'Warning: useLayoutEffect received a final argument that is not an array (instead, received `object`). ' +
@@ -687,9 +702,12 @@ describe('ReactHooks', () => {
       'Warning: useCallback received a final argument that is not an array (instead, received `object`). ' +
         'When specified, the final argument must be an array.',
     ]);
-    ReactTestRenderer.create(<App deps={[]} />);
-    ReactTestRenderer.create(<App deps={null} />);
-    ReactTestRenderer.create(<App deps={undefined} />);
+
+    act(() => {
+      ReactTestRenderer.create(<App deps={[]} />);
+      ReactTestRenderer.create(<App deps={null} />);
+      ReactTestRenderer.create(<App deps={undefined} />);
+    });
   });
 
   it('warns if deps is not an array for useImperativeHandle', () => {
@@ -702,7 +720,7 @@ describe('ReactHooks', () => {
 
     expect(() => {
       ReactTestRenderer.create(<App deps={'hello'} />);
-    }).toWarnDev([
+    }).toErrorDev([
       'Warning: useImperativeHandle received a final argument that is not an array (instead, received `string`). ' +
         'When specified, the final argument must be an array.',
     ]);
@@ -722,20 +740,20 @@ describe('ReactHooks', () => {
     }
 
     const root1 = ReactTestRenderer.create(null);
-    expect(() => root1.update(<App return={17} />)).toWarnDev([
+    expect(() => root1.update(<App return={17} />)).toErrorDev([
       'Warning: An effect function must not return anything besides a ' +
         'function, which is used for clean-up. You returned: 17',
     ]);
 
     const root2 = ReactTestRenderer.create(null);
-    expect(() => root2.update(<App return={null} />)).toWarnDev([
+    expect(() => root2.update(<App return={null} />)).toErrorDev([
       'Warning: An effect function must not return anything besides a ' +
         'function, which is used for clean-up. You returned null. If your ' +
         'effect does not require clean up, return undefined (or nothing).',
     ]);
 
     const root3 = ReactTestRenderer.create(null);
-    expect(() => root3.update(<App return={Promise.resolve()} />)).toWarnDev([
+    expect(() => root3.update(<App return={Promise.resolve()} />)).toErrorDev([
       'Warning: An effect function must not return anything besides a ' +
         'function, which is used for clean-up.\n\n' +
         'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
@@ -830,7 +848,7 @@ describe('ReactHooks', () => {
       expect(() => {
         ReactTestRenderer.create(<App />);
       }).toThrow('create is not a function');
-    }).toWarnDev([
+    }).toErrorDev([
       'Expected useImperativeHandle() first argument to either be a ' +
         'ref callback or React.createRef() object. ' +
         'Instead received: an object with keys {focus}.',
@@ -850,7 +868,7 @@ describe('ReactHooks', () => {
 
     expect(() => {
       ReactTestRenderer.create(<App />);
-    }).toWarnDev([
+    }).toErrorDev([
       'Expected useImperativeHandle() second argument to be a function ' +
         'that creates a handle. Instead received: object.',
     ]);
@@ -918,7 +936,7 @@ describe('ReactHooks', () => {
       });
       return null;
     }
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev(
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
     );
   });
@@ -936,7 +954,7 @@ describe('ReactHooks', () => {
       }, []);
     }
 
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev(
       'Context can only be read while React is rendering',
     );
   });
@@ -958,7 +976,7 @@ describe('ReactHooks', () => {
       }, []);
     }
 
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev(
       'Context can only be read while React is rendering',
     );
     expect(firstRead).toBe('light');
@@ -980,8 +998,11 @@ describe('ReactHooks', () => {
       return null;
     }
 
-    const root = ReactTestRenderer.create(<App />);
-    expect(() => root.update(<App />)).toThrow(
+    expect(() => {
+      act(() => {
+        ReactTestRenderer.create(<App />);
+      });
+    }).toThrow(
       // The exact message doesn't matter, just make sure we don't allow this
       'Context can only be read while React is rendering',
     );
@@ -1026,7 +1047,7 @@ describe('ReactHooks', () => {
       return null;
     }
 
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev([
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev([
       'Context can only be read while React is rendering',
     ]);
   });
@@ -1059,12 +1080,12 @@ describe('ReactHooks', () => {
 
     expect(() =>
       ReactTestRenderer.create(
-        <React.Fragment>
+        <>
           <Fn />
           <Cls />
-        </React.Fragment>,
+        </>,
       ),
-    ).toWarnDev(['Context can only be read while React is rendering']);
+    ).toErrorDev(['Context can only be read while React is rendering']);
   });
 
   it('warns when calling hooks inside useReducer', () => {
@@ -1086,7 +1107,7 @@ describe('ReactHooks', () => {
       expect(() => {
         ReactTestRenderer.create(<App />);
       }).toThrow('Rendered more hooks than during the previous render.');
-    }).toWarnDev([
+    }).toErrorDev([
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
       'Warning: React has detected a change in the order of Hooks called by App. ' +
@@ -1109,7 +1130,7 @@ describe('ReactHooks', () => {
       });
       return null;
     }
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev(
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
     );
   });
@@ -1149,7 +1170,7 @@ describe('ReactHooks', () => {
           <App />
         </Boundary>,
       );
-    }).toWarnDev([
+    }).toErrorDev([
       // We see it twice due to replay
       'Context can only be read while React is rendering',
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
@@ -1165,7 +1186,10 @@ describe('ReactHooks', () => {
       React.useLayoutEffect(() => {});
       React.useCallback(() => {});
       React.useRef();
-      React.useImperativeHandle(() => {}, () => {});
+      React.useImperativeHandle(
+        () => {},
+        () => {},
+      );
       if (__DEV__) {
         React.useDebugValue();
       }
@@ -1173,7 +1197,9 @@ describe('ReactHooks', () => {
     }
     // Verify it doesn't think we're still inside a Hook.
     // Should have no warnings.
-    ReactTestRenderer.create(<Valid />);
+    act(() => {
+      ReactTestRenderer.create(<Valid />);
+    });
 
     // Verify warnings don't get permanently disabled.
     expect(() => {
@@ -1182,7 +1208,7 @@ describe('ReactHooks', () => {
           <App />
         </Boundary>,
       );
-    }).toWarnDev([
+    }).toErrorDev([
       // We see it twice due to replay
       'Context can only be read while React is rendering',
       'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
@@ -1204,7 +1230,7 @@ describe('ReactHooks', () => {
       }, []);
     }
 
-    expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<App />)).toErrorDev(
       'Context can only be read while React is rendering',
     );
   });
@@ -1323,13 +1349,12 @@ describe('ReactHooks', () => {
     expect(renderCount).toBe(1);
 
     renderCount = 0;
-    expect(() => renderer.update(<Factory />)).toWarnDev(
+    expect(() => renderer.update(<Factory />)).toErrorDev(
       'Warning: The <Factory /> component appears to be a function component that returns a class instance. ' +
         'Change Factory to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Factory.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
     expect(renderCount).toBe(1);
     renderCount = 0;
@@ -1465,6 +1490,31 @@ describe('ReactHooks', () => {
       useStateHelper,
     ];
 
+    // We don't include useContext or useDebugValue in this set,
+    // because they aren't added to the hooks list and so won't throw.
+    let hooksInList = [
+      useCallbackHelper,
+      useEffectHelper,
+      useImperativeHandleHelper,
+      useLayoutEffectHelper,
+      useMemoHelper,
+      useReducerHelper,
+      useRefHelper,
+      useStateHelper,
+    ];
+
+    if (__EXPERIMENTAL__) {
+      const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});
+      const useDeferredValueHelper = () =>
+        React.useDeferredValue(0, {timeoutMs: 1000});
+
+      orderedHooks.push(useTransitionHelper);
+      orderedHooks.push(useDeferredValueHelper);
+
+      hooksInList.push(useTransitionHelper);
+      hooksInList.push(useDeferredValueHelper);
+    }
+
     const formatHookNamesToMatchErrorMessage = (hookNameA, hookNameB) => {
       return `use${hookNameA}${' '.repeat(24 - hookNameA.length)}${
         hookNameB ? `use${hookNameB}` : undefined
@@ -1499,16 +1549,21 @@ describe('ReactHooks', () => {
           return null;
           /* eslint-enable no-unused-vars */
         }
-        let root = ReactTestRenderer.create(<App update={false} />);
+        let root;
+        act(() => {
+          root = ReactTestRenderer.create(<App update={false} />);
+        });
         expect(() => {
           try {
-            root.update(<App update={true} />);
+            act(() => {
+              root.update(<App update={true} />);
+            });
           } catch (error) {
             // Swapping certain types of hooks will cause runtime errors.
             // This is okay as far as this test is concerned.
             // We just want to verify that warnings are always logged.
           }
-        }).toWarnDev([
+        }).toErrorDev([
           'Warning: React has detected a change in the order of Hooks called by App. ' +
             'This will lead to bugs and errors if not fixed. For more information, ' +
             'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -1521,7 +1576,9 @@ describe('ReactHooks', () => {
 
         // further warnings for this component are silenced
         try {
-          root.update(<App update={false} />);
+          act(() => {
+            root.update(<App update={false} />);
+          });
         } catch (error) {
           // Swapping certain types of hooks will cause runtime errors.
           // This is okay as far as this test is concerned.
@@ -1542,16 +1599,22 @@ describe('ReactHooks', () => {
           return null;
           /* eslint-enable no-unused-vars */
         }
-        let root = ReactTestRenderer.create(<App update={false} />);
+        let root;
+        act(() => {
+          root = ReactTestRenderer.create(<App update={false} />);
+        });
+
         expect(() => {
           try {
-            root.update(<App update={true} />);
+            act(() => {
+              root.update(<App update={true} />);
+            });
           } catch (error) {
             // Swapping certain types of hooks will cause runtime errors.
             // This is okay as far as this test is concerned.
             // We just want to verify that warnings are always logged.
           }
-        }).toWarnDev([
+        }).toErrorDev([
           'Warning: React has detected a change in the order of Hooks called by App. ' +
             'This will lead to bugs and errors if not fixed. For more information, ' +
             'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -1565,19 +1628,6 @@ describe('ReactHooks', () => {
       });
     });
 
-    // We don't include useContext or useDebugValue in this set,
-    // because they aren't added to the hooks list and so won't throw.
-    let hooksInList = [
-      useCallbackHelper,
-      useEffectHelper,
-      useImperativeHandleHelper,
-      useLayoutEffectHelper,
-      useMemoHelper,
-      useReducerHelper,
-      useRefHelper,
-      useStateHelper,
-    ];
-
     hooksInList.forEach((firstHelper, index) => {
       const secondHelper =
         index > 0
@@ -1604,9 +1654,15 @@ describe('ReactHooks', () => {
           return null;
           /* eslint-enable no-unused-vars */
         }
-        let root = ReactTestRenderer.create(<App update={false} />);
+        let root;
+        act(() => {
+          root = ReactTestRenderer.create(<App update={false} />);
+        });
+
         expect(() => {
-          root.update(<App update={true} />);
+          act(() => {
+            root.update(<App update={true} />);
+          });
         }).toThrow('Rendered fewer hooks than expected.');
       });
     });
@@ -1638,7 +1694,7 @@ describe('ReactHooks', () => {
             // This is okay as far as this test is concerned.
             // We just want to verify that warnings are always logged.
           }
-        }).toWarnDev([
+        }).toErrorDev([
           'Warning: React has detected a change in the order of Hooks called by App. ' +
             'This will lead to bugs and errors if not fixed. For more information, ' +
             'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -1680,7 +1736,7 @@ describe('ReactHooks', () => {
         expect(() => root.update(<App update={true} />)).toThrow(
           'custom error',
         );
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: React has detected a change in the order of Hooks called by App. ' +
           'This will lead to bugs and errors if not fixed. For more information, ' +
           'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -1714,10 +1770,10 @@ describe('ReactHooks', () => {
 
     expect(() =>
       ReactTestRenderer.create(
-        <React.Fragment>
+        <>
           <A />
           <B />
-        </React.Fragment>,
+        </>,
       ),
     ).toThrow('Hello');
   });
@@ -1766,7 +1822,7 @@ describe('ReactHooks', () => {
     expect(() => {
       globalListener();
       globalListener();
-    }).toWarnDev([
+    }).toErrorDev([
       'An update to C inside a test was not wrapped in act',
       'An update to C inside a test was not wrapped in act',
       // Note: should *not* warn about updates on unmounted component.
@@ -1802,7 +1858,7 @@ describe('ReactHooks', () => {
     );
     expect(root).toMatchRenderedOutput('loading');
     await Promise.resolve();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(root).toMatchRenderedOutput('hello');
   });
 
@@ -1834,7 +1890,7 @@ describe('ReactHooks', () => {
     );
     expect(root).toMatchRenderedOutput('loading');
     await Promise.resolve();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(root).toMatchRenderedOutput('hello');
   });
 
@@ -1866,7 +1922,7 @@ describe('ReactHooks', () => {
     );
     expect(root).toMatchRenderedOutput('loading');
     await Promise.resolve();
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(root).toMatchRenderedOutput('hello');
   });
 
@@ -1908,11 +1964,14 @@ describe('ReactHooks', () => {
       return 'Throw!';
     }
 
-    const root = ReactTestRenderer.create(
-      <ErrorBoundary>
-        <Thrower />
-      </ErrorBoundary>,
-    );
+    let root;
+    act(() => {
+      root = ReactTestRenderer.create(
+        <ErrorBoundary>
+          <Thrower />
+        </ErrorBoundary>,
+      );
+    });
 
     expect(root).toMatchRenderedOutput('Throw!');
     act(() => setShouldThrow(true));
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
index ab257d7e5623b..ca4d3090215eb 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
@@ -13,10 +13,13 @@
 'use strict';
 
 let React;
+let ReactCache;
+let TextResource;
 let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
 let SchedulerTracing;
+let Suspense;
 let useState;
 let useReducer;
 let useEffect;
@@ -25,24 +28,26 @@ let useCallback;
 let useMemo;
 let useRef;
 let useImperativeHandle;
+let useTransition;
+let useDeferredValue;
 let forwardRef;
 let memo;
 let act;
 
-// These tests use React Noop Renderer. All new tests should use React Test
-// Renderer and go in ReactHooks-test; plan is gradually migrate the noop tests
-// to that file.
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
     jest.resetModules();
+    jest.useFakeTimers();
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
     ReactFeatureFlags.enableSchedulerTracing = true;
+    ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     SchedulerTracing = require('scheduler/tracing');
+    ReactCache = require('react-cache');
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
@@ -53,18 +58,65 @@ describe('ReactHooksWithNoopRenderer', () => {
     useImperativeHandle = React.useImperativeHandle;
     forwardRef = React.forwardRef;
     memo = React.memo;
+    useTransition = React.useTransition;
+    useDeferredValue = React.useDeferredValue;
+    Suspense = React.Suspense;
     act = ReactNoop.act;
+
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+            resolve(text);
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
   });
 
   function span(prop) {
     return {type: 'span', hidden: false, children: [], prop};
   }
 
+  function hiddenSpan(prop) {
+    return {type: 'span', children: [], prop, hidden: true};
+  }
+
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
   }
 
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      TextResource.read([props.text, props.ms]);
+      Scheduler.unstable_yieldValue(text);
+      return <span prop={text} />;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+      } else {
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  function advanceTimers(ms) {
+    // Note: This advances Jest's virtual time but not React's. Use
+    // ReactNoop.expire for that.
+    if (typeof ms !== 'number') {
+      throw new Error('Must specify ms');
+    }
+    jest.advanceTimersByTime(ms);
+    // Wait until the end of the current tick
+    // We cannot use a timer since we're faking them
+    return Promise.resolve().then(() => {});
+  }
+
   it('resumes after an interruption', () => {
     function Counter(props, ref) {
       const [count, updateCount] = useState(0);
@@ -146,13 +198,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           '3. You might have more than one copy of React in the same app\n' +
           'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: The <Counter /> component appears to be a function component that returns a class instance. ' +
         'Change Counter to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Counter.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-      {withoutStack: true},
     );
 
     // Confirm that a subsequent hook works properly.
@@ -200,7 +251,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('lazy state initializer', () => {
       function Counter(props, ref) {
         const [count, updateCount] = useState(() => {
-          Scheduler.yieldValue('getInitialState');
+          Scheduler.unstable_yieldValue('getInitialState');
           return props.initialState;
         });
         useImperativeHandle(ref, () => ({updateCount}));
@@ -271,7 +322,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushWithoutYielding();
       ReactNoop.render(null);
       expect(Scheduler).toFlushWithoutYielding();
-      expect(() => act(() => _updateCount(1))).toWarnDev(
+      expect(() => act(() => _updateCount(1))).toErrorDev(
         "Warning: Can't perform a React state update on an unmounted " +
           'component. This is a no-op, but it indicates a memory leak in your ' +
           'application. To fix, cancel all subscriptions and asynchronous ' +
@@ -349,7 +400,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         if (count < 3) {
           setCount(count + 1);
         }
-        Scheduler.yieldValue('Render: ' + count);
+        Scheduler.unstable_yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
 
@@ -372,7 +423,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           setCount(c => c + 1);
           setCount(c => c + 1);
         }
-        Scheduler.yieldValue('Render: ' + count);
+        Scheduler.unstable_yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
 
@@ -393,7 +444,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       function Counter({row: newRow}) {
         let [count, setCount] = useState(0);
         setCount(count + 1);
-        Scheduler.yieldValue('Render: ' + count);
+        Scheduler.unstable_yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
       ReactNoop.render(<Counter />);
@@ -412,7 +463,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         if (count < 3) {
           dispatch('increment');
         }
-        Scheduler.yieldValue('Render: ' + count);
+        Scheduler.unstable_yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
 
@@ -461,7 +512,7 @@ describe('ReactHooksWithNoopRenderer', () => {
             setReducer(() => reducerA);
           }
         }
-        Scheduler.yieldValue('Render: ' + count);
+        Scheduler.unstable_yieldValue('Render: ' + count);
         return <Text text={count} />;
       }
       Counter = forwardRef(Counter);
@@ -494,6 +545,132 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span(22)]);
     });
+
+    it('discards render phase updates if something suspends', () => {
+      const thenable = {then() {}};
+      function Foo({signal}) {
+        return (
+          <Suspense fallback="Loading...">
+            <Bar signal={signal} />
+          </Suspense>
+        );
+      }
+
+      function Bar({signal: newSignal}) {
+        let [counter, setCounter] = useState(0);
+        let [signal, setSignal] = useState(true);
+
+        // Increment a counter every time the signal changes
+        if (signal !== newSignal) {
+          setCounter(c => c + 1);
+          setSignal(newSignal);
+          if (counter === 0) {
+            // We're suspending during a render that includes render phase
+            // updates. Those updates should not persist to the next render.
+            Scheduler.unstable_yieldValue('Suspend!');
+            throw thenable;
+          }
+        }
+
+        return <Text text={counter} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<Foo signal={true} />);
+
+      expect(Scheduler).toFlushAndYield([0]);
+      expect(root).toMatchRenderedOutput(<span prop={0} />);
+
+      root.render(<Foo signal={false} />);
+      expect(Scheduler).toFlushAndYield(['Suspend!']);
+      expect(root).toMatchRenderedOutput(<span prop={0} />);
+
+      // Rendering again should suspend again.
+      root.render(<Foo signal={false} />);
+      expect(Scheduler).toFlushAndYield(['Suspend!']);
+    });
+
+    it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
+      const thenable = {then() {}};
+      function Foo({signal}) {
+        return (
+          <Suspense fallback="Loading...">
+            <Bar signal={signal} />
+          </Suspense>
+        );
+      }
+
+      let setLabel;
+      function Bar({signal: newSignal}) {
+        let [counter, setCounter] = useState(0);
+
+        if (counter === 1) {
+          // We're suspending during a render that includes render phase
+          // updates. Those updates should not persist to the next render.
+          Scheduler.unstable_yieldValue('Suspend!');
+          throw thenable;
+        }
+
+        let [signal, setSignal] = useState(true);
+
+        // Increment a counter every time the signal changes
+        if (signal !== newSignal) {
+          setCounter(c => c + 1);
+          setSignal(newSignal);
+        }
+
+        let [label, _setLabel] = useState('A');
+        setLabel = _setLabel;
+
+        return <Text text={`${label}:${counter}`} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<Foo signal={true} />);
+
+      expect(Scheduler).toFlushAndYield(['A:0']);
+      expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+
+      await ReactNoop.act(async () => {
+        root.render(<Foo signal={false} />);
+        setLabel('B');
+      });
+      expect(Scheduler).toHaveYielded(['Suspend!']);
+      expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+
+      // Rendering again should suspend again.
+      root.render(<Foo signal={false} />);
+      expect(Scheduler).toFlushAndYield(['Suspend!']);
+
+      // Flip the signal back to "cancel" the update. However, the update to
+      // label should still proceed. It shouldn't have been dropped.
+      root.render(<Foo signal={true} />);
+      expect(Scheduler).toFlushAndYield(['B:0']);
+      expect(root).toMatchRenderedOutput(<span prop="B:0" />);
+    });
+
+    // TODO: This should probably warn
+    it.experimental('calling startTransition inside render phase', async () => {
+      let startTransition;
+      function App() {
+        let [counter, setCounter] = useState(0);
+        let [_startTransition] = useTransition();
+        startTransition = _startTransition;
+
+        if (counter === 0) {
+          startTransition(() => {
+            setCounter(c => c + 1);
+          });
+        }
+
+        return <Text text={counter} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App />);
+      expect(Scheduler).toFlushAndYield([1]);
+      expect(root).toMatchRenderedOutput(<span prop={1} />);
+    });
   });
 
   describe('useReducer', () => {
@@ -553,7 +730,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       function Counter(props, ref) {
         const [count, dispatch] = useReducer(reducer, props, p => {
-          Scheduler.yieldValue('Init');
+          Scheduler.unstable_yieldValue('Init');
           return p.initialCount;
         });
         useImperativeHandle(ref, () => ({dispatch}));
@@ -621,67 +798,70 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('simple mount and update', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Passive effect [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Passive effect [${props.count}]`);
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      // Effects are deferred until after the commit
-      expect(Scheduler).toFlushAndYield(['Passive effect [0]']);
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        // Effects are deferred until after the commit
+        expect(Scheduler).toFlushAndYield(['Passive effect [0]']);
+      });
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      // Effects are deferred until after the commit
-      expect(Scheduler).toFlushAndYield(['Passive effect [1]']);
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        // Effects are deferred until after the commit
+        expect(Scheduler).toFlushAndYield(['Passive effect [1]']);
+      });
     });
 
     it('flushes passive effects even with sibling deletions', () => {
       function LayoutEffect(props) {
         useLayoutEffect(() => {
-          Scheduler.yieldValue(`Layout effect`);
+          Scheduler.unstable_yieldValue(`Layout effect`);
         });
         return <Text text="Layout" />;
       }
       function PassiveEffect(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Passive effect`);
+          Scheduler.unstable_yieldValue(`Passive effect`);
         }, []);
         return <Text text="Passive" />;
       }
       let passive = <PassiveEffect key="p" />;
-      ReactNoop.render([<LayoutEffect key="l" />, passive]);
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Layout',
-        'Passive',
-        'Layout effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Layout'),
-        span('Passive'),
-      ]);
-
-      // Destroying the first child shouldn't prevent the passive effect from
-      // being executed
-      ReactNoop.render([passive]);
-      expect(Scheduler).toFlushAndYield(['Passive effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Passive')]);
-
-      // (No effects are left to flush.)
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render([<LayoutEffect key="l" />, passive]);
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Layout',
+          'Passive',
+          'Layout effect',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Layout'),
+          span('Passive'),
+        ]);
+        // Destroying the first child shouldn't prevent the passive effect from
+        // being executed
+        ReactNoop.render([passive]);
+        expect(Scheduler).toFlushAndYield(['Passive effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Passive')]);
+      });
+      // exiting act calls flushPassiveEffects(), but there are none left to flush.
       expect(Scheduler).toHaveYielded([]);
     });
 
     it('flushes passive effects even if siblings schedule an update', () => {
       function PassiveEffect(props) {
         useEffect(() => {
-          Scheduler.yieldValue('Passive effect');
+          Scheduler.unstable_yieldValue('Passive effect');
         });
         return <Text text="Passive" />;
       }
@@ -692,7 +872,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           if (count === 0) {
             setCount(1);
           }
-          Scheduler.yieldValue('Layout effect ' + count);
+          Scheduler.unstable_yieldValue('Layout effect ' + count);
         });
         return <Text text="Layout" />;
       }
@@ -719,30 +899,32 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('flushes passive effects even if siblings schedule a new root', () => {
       function PassiveEffect(props) {
         useEffect(() => {
-          Scheduler.yieldValue('Passive effect');
+          Scheduler.unstable_yieldValue('Passive effect');
         }, []);
         return <Text text="Passive" />;
       }
       function LayoutEffect(props) {
         useLayoutEffect(() => {
-          Scheduler.yieldValue('Layout effect');
+          Scheduler.unstable_yieldValue('Layout effect');
           // Scheduling work shouldn't interfere with the queued passive effect
           ReactNoop.renderToRootWithID(<Text text="New Root" />, 'root2');
         });
         return <Text text="Layout" />;
       }
-      ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
-      expect(Scheduler).toFlushAndYield([
-        'Passive',
-        'Layout',
-        'Layout effect',
-        'Passive effect',
-        'New Root',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Passive'),
-        span('Layout'),
-      ]);
+      act(() => {
+        ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
+        expect(Scheduler).toFlushAndYield([
+          'Passive',
+          'Layout',
+          'Layout effect',
+          'Passive effect',
+          'New Root',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Passive'),
+          span('Layout'),
+        ]);
+      });
     });
 
     it(
@@ -759,31 +941,31 @@ describe('ReactHooksWithNoopRenderer', () => {
 
         function Counter(props) {
           useEffect(() => {
-            Scheduler.yieldValue(
+            Scheduler.unstable_yieldValue(
               `Committed state when effect was fired: ${getCommittedText()}`,
             );
           });
           return <Text text={props.count} />;
         }
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([0, 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span(0)]);
-
-        // Before the effects have a chance to flush, schedule another update
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          // The previous effect flushes before the reconciliation
-          'Committed state when effect was fired: 0',
-          1,
-          'Sync effect',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([span(1)]);
+        act(() => {
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([0, 'Sync effect']);
+          expect(ReactNoop.getChildren()).toEqual([span(0)]);
+          // Before the effects have a chance to flush, schedule another update
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            // The previous effect flushes before the reconciliation
+            'Committed state when effect was fired: 0',
+            1,
+            'Sync effect',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(1)]);
+        });
 
-        ReactNoop.flushPassiveEffects();
         expect(Scheduler).toHaveYielded([
           'Committed state when effect was fired: 1',
         ]);
@@ -793,75 +975,74 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('updates have async priority', () => {
       function Counter(props) {
         const [count, updateCount] = useState('(empty)');
-        useEffect(
-          () => {
-            Scheduler.yieldValue(`Schedule update [${props.count}]`);
-            updateCount(props.count);
-          },
-          [props.count],
-        );
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+          updateCount(props.count);
+        }, [props.count]);
         return <Text text={'Count: ' + count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Count: (empty)',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Schedule update [0]']);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Count: (empty)',
+          'Sync effect',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        ReactNoop.flushPassiveEffects();
+        expect(Scheduler).toHaveYielded(['Schedule update [0]']);
+        expect(Scheduler).toFlushAndYield(['Count: 0']);
+      });
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Schedule update [1]']);
-      expect(Scheduler).toFlushAndYield(['Count: 1']);
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        ReactNoop.flushPassiveEffects();
+        expect(Scheduler).toHaveYielded(['Schedule update [1]']);
+        expect(Scheduler).toFlushAndYield(['Count: 1']);
+      });
     });
 
     it('updates have async priority even if effects are flushed early', () => {
       function Counter(props) {
         const [count, updateCount] = useState('(empty)');
-        useEffect(
-          () => {
-            Scheduler.yieldValue(`Schedule update [${props.count}]`);
-            updateCount(props.count);
-          },
-          [props.count],
-        );
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+          updateCount(props.count);
+        }, [props.count]);
         return <Text text={'Count: ' + count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Count: (empty)',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-
-      // Rendering again should flush the previous commit's effects
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Schedule update [0]',
-        'Count: 0',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Count: (empty)',
+          'Sync effect',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
 
-      expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        // Rendering again should flush the previous commit's effects
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Schedule update [0]',
+          'Count: 0',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
 
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Schedule update [1]']);
-      expect(Scheduler).toFlushAndYield(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        ReactNoop.flushPassiveEffects();
+        expect(Scheduler).toHaveYielded(['Schedule update [1]']);
+        expect(Scheduler).toFlushAndYield(['Count: 1']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
     });
 
     it('flushes passive effects when flushing discrete updates', () => {
@@ -870,21 +1051,24 @@ describe('ReactHooksWithNoopRenderer', () => {
         const [count, updateCount] = useState(0);
         _updateCount = updateCount;
         useEffect(() => {
-          Scheduler.yieldValue(`Will set count to 1`);
+          Scheduler.unstable_yieldValue(`Will set count to 1`);
           updateCount(1);
         }, []);
         return <Text text={'Count: ' + count} />;
       }
 
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      // we explicitly wait for missing act() warnings here since
+      // it's a lot harder to simulate this condition inside an act scope
+      expect(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      }).toErrorDev(['An update to Counter ran an effect']);
 
       // A discrete event forces the passive effect to be flushed --
       // updateCount(1) happens first, so 2 wins.
-
       ReactNoop.flushDiscreteUpdates();
       ReactNoop.discreteUpdates(() => {
         // (use batchedUpdates to silence the act() warning)
@@ -893,7 +1077,13 @@ describe('ReactHooksWithNoopRenderer', () => {
         });
       });
       expect(Scheduler).toHaveYielded(['Will set count to 1']);
-      expect(Scheduler).toFlushAndYield(['Count: 2']);
+      expect(() => {
+        expect(Scheduler).toFlushAndYield(['Count: 2']);
+      }).toErrorDev([
+        'An update to Counter ran an effect',
+        'An update to Counter ran an effect',
+      ]);
+
       expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
     });
 
@@ -917,24 +1107,28 @@ describe('ReactHooksWithNoopRenderer', () => {
           expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
             tracingEvent,
           ]);
-          Scheduler.yieldValue(`Will set count to 1`);
+          Scheduler.unstable_yieldValue(`Will set count to 1`);
           updateCount(1);
         }, []);
         return <Text text={'Count: ' + count} />;
       }
 
       const tracingEvent = {id: 0, name: 'hello', timestamp: 0};
-      SchedulerTracing.unstable_trace(
-        tracingEvent.name,
-        tracingEvent.timestamp,
-        () => {
-          ReactNoop.render(<Counter count={0} />, () =>
-            Scheduler.yieldValue('Sync effect'),
-          );
-        },
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      // we explicitly wait for missing act() warnings here since
+      // it's a lot harder to simulate this condition inside an act scope
+      expect(() => {
+        SchedulerTracing.unstable_trace(
+          tracingEvent.name,
+          tracingEvent.timestamp,
+          () => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+          },
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      }).toErrorDev(['An update to Counter ran an effect']);
 
       expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
 
@@ -942,11 +1136,19 @@ describe('ReactHooksWithNoopRenderer', () => {
       // updateCount(1) happens first, so 2 wins.
       ReactNoop.flushDiscreteUpdates();
       ReactNoop.discreteUpdates(() => {
-        // use batchedUpdates to silence the act warning
-        ReactNoop.batchedUpdates(() => _updateCount(2));
+        // (use batchedUpdates to silence the act() warning)
+        ReactNoop.batchedUpdates(() => {
+          _updateCount(2);
+        });
       });
       expect(Scheduler).toHaveYielded(['Will set count to 1']);
-      expect(Scheduler).toFlushAndYield(['Count: 2']);
+      expect(() => {
+        expect(Scheduler).toFlushAndYield(['Count: 2']);
+      }).toErrorDev([
+        'An update to Counter ran an effect',
+        'An update to Counter ran an effect',
+      ]);
+
       expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
 
       expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
@@ -959,27 +1161,26 @@ describe('ReactHooksWithNoopRenderer', () => {
       () => {
         function Counter(props) {
           const [count, updateCount] = useState('(empty)');
-          useEffect(
-            () => {
-              // Update multiple times. These should all be batched together in
-              // a single render.
-              updateCount(props.count);
-              updateCount(props.count);
-              updateCount(props.count);
-              updateCount(props.count);
-              updateCount(props.count);
-              updateCount(props.count);
-            },
-            [props.count],
-          );
+          useEffect(() => {
+            // Update multiple times. These should all be batched together in
+            // a single render.
+            updateCount(props.count);
+            updateCount(props.count);
+            updateCount(props.count);
+            updateCount(props.count);
+            updateCount(props.count);
+            updateCount(props.count);
+          }, [props.count]);
           return <Text text={'Count: ' + count} />;
         }
-        ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
-        // Even in sync mode, effects are deferred until after paint
-        expect(Scheduler).toHaveYielded(['Count: (empty)']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-        // Now fire the effects
-        ReactNoop.flushPassiveEffects();
+        act(() => {
+          ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+          // Even in legacy mode, effects are deferred until after paint
+          expect(Scheduler).toFlushAndYieldThrough(['Count: (empty)']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        });
+
+        // effects get fored on exiting act()
         // There were multiple updates, but there should only be a
         // single render
         expect(Scheduler).toHaveYielded(['Count: 0']);
@@ -990,74 +1191,78 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('flushSync is not allowed', () => {
       function Counter(props) {
         const [count, updateCount] = useState('(empty)');
-        useEffect(
-          () => {
-            Scheduler.yieldValue(`Schedule update [${props.count}]`);
-            ReactNoop.flushSync(() => {
-              updateCount(props.count);
-            });
-          },
-          [props.count],
-        );
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+          ReactNoop.flushSync(() => {
+            updateCount(props.count);
+          });
+        }, [props.count]);
         return <Text text={'Count: ' + count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Count: (empty)',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-
-      expect(() => {
-        ReactNoop.flushPassiveEffects();
-      }).toThrow('flushSync was called from inside a lifecycle method');
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Count: (empty)',
+          'Sync effect',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        expect(() => {
+          ReactNoop.flushPassiveEffects();
+        }).toThrow('flushSync was called from inside a lifecycle method');
+      });
     });
 
     it('unmounts previous effect', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Did create [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Did destroy [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did create [0]']);
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Did destroy [0]', 'Did create [1]']);
-    });
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
+
+      expect(Scheduler).toHaveYielded(['Did destroy [0]', 'Did create [1]']);
+    });
 
     it('unmounts on deletion', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Did create [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Did destroy [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did create [0]']);
 
       ReactNoop.render(null);
@@ -1068,27 +1273,31 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('unmounts on deletion after skipped effect', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Did create [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Did destroy [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
           };
         }, []);
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did create [0]']);
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
+
       expect(Scheduler).toHaveYielded([]);
 
       ReactNoop.render(null);
@@ -1098,29 +1307,33 @@ describe('ReactHooksWithNoopRenderer', () => {
 
     it('always fires effects if no dependencies are provided', () => {
       function effect() {
-        Scheduler.yieldValue(`Did create`);
+        Scheduler.unstable_yieldValue(`Did create`);
         return () => {
-          Scheduler.yieldValue(`Did destroy`);
+          Scheduler.unstable_yieldValue(`Did destroy`);
         };
       }
       function Counter(props) {
         useEffect(effect);
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did create']);
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did destroy', 'Did create']);
 
       ReactNoop.render(null);
@@ -1131,53 +1344,58 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('skips effect if inputs have not changed', () => {
       function Counter(props) {
         const text = `${props.label}: ${props.count}`;
-        useEffect(
-          () => {
-            Scheduler.yieldValue(`Did create [${text}]`);
-            return () => {
-              Scheduler.yieldValue(`Did destroy [${text}]`);
-            };
-          },
-          [props.label, props.count],
-        );
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(`Did create [${text}]`);
+          return () => {
+            Scheduler.unstable_yieldValue(`Did destroy [${text}]`);
+          };
+        }, [props.label, props.count]);
         return <Text text={text} />;
       }
-      ReactNoop.render(<Counter label="Count" count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter label="Count" count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+      });
+
       expect(Scheduler).toHaveYielded(['Did create [Count: 0]']);
       expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      ReactNoop.render(<Counter label="Count" count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      // Count changed
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter label="Count" count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        // Count changed
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
+
       expect(Scheduler).toHaveYielded([
         'Did destroy [Count: 0]',
         'Did create [Count: 1]',
       ]);
 
-      ReactNoop.render(<Counter label="Count" count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      // Nothing changed, so no effect should have fired
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter label="Count" count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        // Nothing changed, so no effect should have fired
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+      });
+
       expect(Scheduler).toHaveYielded([]);
       expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
 
-      ReactNoop.render(<Counter label="Total" count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      // Label changed
-      expect(Scheduler).toFlushAndYieldThrough(['Total: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Total: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter label="Total" count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        // Label changed
+        expect(Scheduler).toFlushAndYieldThrough(['Total: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Total: 1')]);
+      });
+
       expect(Scheduler).toHaveYielded([
         'Did destroy [Count: 1]',
         'Did create [Total: 1]',
@@ -1187,60 +1405,66 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('multiple effects', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Did commit 1 [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Did commit 1 [${props.count}]`);
         });
         useEffect(() => {
-          Scheduler.yieldValue(`Did commit 2 [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Did commit 2 [${props.count}]`);
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Did commit 1 [0]', 'Did commit 2 [0]']);
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
       expect(Scheduler).toHaveYielded(['Did commit 1 [1]', 'Did commit 2 [1]']);
     });
 
     it('unmounts all previous effects before creating any new ones', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Mount A [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount A [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
           };
         });
         useEffect(() => {
-          Scheduler.yieldValue(`Mount B [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount B [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      });
+
       expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
 
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+      });
       expect(Scheduler).toHaveYielded([
         'Unmount A [0]',
         'Unmount B [0]',
@@ -1252,28 +1476,31 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('handles errors on mount', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Mount A [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount A [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
           };
         });
         useEffect(() => {
-          Scheduler.yieldValue('Oops!');
+          Scheduler.unstable_yieldValue('Oops!');
           throw new Error('Oops!');
           // eslint-disable-next-line no-unreachable
-          Scheduler.yieldValue(`Mount B [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount B [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+      });
+
       expect(Scheduler).toHaveYielded([
         'Mount A [0]',
         'Oops!',
@@ -1287,104 +1514,112 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('handles errors on update', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Mount A [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount A [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
           };
         });
         useEffect(() => {
           if (props.count === 1) {
-            Scheduler.yieldValue('Oops!');
+            Scheduler.unstable_yieldValue('Oops!');
             throw new Error('Oops!');
           }
-          Scheduler.yieldValue(`Mount B [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount B [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        ReactNoop.flushPassiveEffects();
+        expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+      });
 
-      // This update will trigger an errror
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-      expect(Scheduler).toHaveYielded([
-        'Unmount A [0]',
-        'Unmount B [0]',
-        'Mount A [1]',
-        'Oops!',
-        // Clean up effect A. There's no effect B to clean-up, because it
-        // never mounted.
-        'Unmount A [1]',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      act(() => {
+        // This update will trigger an error
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+        expect(Scheduler).toHaveYielded([
+          'Unmount A [0]',
+          'Unmount B [0]',
+          'Mount A [1]',
+          'Oops!',
+          // Clean up effect A. There's no effect B to clean-up, because it
+          // never mounted.
+          'Unmount A [1]',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+      });
     });
 
     it('handles errors on unmount', () => {
       function Counter(props) {
         useEffect(() => {
-          Scheduler.yieldValue(`Mount A [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
           return () => {
-            Scheduler.yieldValue('Oops!');
+            Scheduler.unstable_yieldValue('Oops!');
             throw new Error('Oops!');
             // eslint-disable-next-line no-unreachable
-            Scheduler.yieldValue(`Unmount A [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
           };
         });
         useEffect(() => {
-          Scheduler.yieldValue(`Mount B [${props.count}]`);
+          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
           return () => {
-            Scheduler.yieldValue(`Unmount B [${props.count}]`);
+            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
           };
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      ReactNoop.flushPassiveEffects();
-      expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        ReactNoop.flushPassiveEffects();
+        expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+      });
 
-      // This update will trigger an errror
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-      expect(Scheduler).toHaveYielded([
-        'Oops!',
-        // B unmounts even though an error was thrown in the previous effect
-        'Unmount B [0]',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
+      act(() => {
+        // This update will trigger an error
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+        expect(Scheduler).toHaveYielded([
+          'Oops!',
+          // B unmounts even though an error was thrown in the previous effect
+          'Unmount B [0]',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+      });
     });
 
     it('works with memo', () => {
       function Counter({count}) {
         useLayoutEffect(() => {
-          Scheduler.yieldValue('Mount: ' + count);
-          return () => Scheduler.yieldValue('Unmount: ' + count);
+          Scheduler.unstable_yieldValue('Mount: ' + count);
+          return () => Scheduler.unstable_yieldValue('Unmount: ' + count);
         });
         return <Text text={'Count: ' + count} />;
       }
       Counter = memo(Counter);
 
       ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
+        Scheduler.unstable_yieldValue('Sync effect'),
       );
       expect(Scheduler).toFlushAndYieldThrough([
         'Count: 0',
@@ -1394,7 +1629,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
       ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
+        Scheduler.unstable_yieldValue('Sync effect'),
       );
       expect(Scheduler).toFlushAndYieldThrough([
         'Count: 1',
@@ -1415,7 +1650,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       function getCommittedText() {
         const yields = Scheduler.unstable_clearYields();
         const children = ReactNoop.getChildren();
-        Scheduler.yieldValue(yields);
+        Scheduler.unstable_yieldValue(yields);
         if (children === null) {
           return null;
         }
@@ -1424,13 +1659,13 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       function Counter(props) {
         useLayoutEffect(() => {
-          Scheduler.yieldValue(`Current: ${getCommittedText()}`);
+          Scheduler.unstable_yieldValue(`Current: ${getCommittedText()}`);
         });
         return <Text text={props.count} />;
       }
 
       ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
+        Scheduler.unstable_yieldValue('Sync effect'),
       );
       expect(Scheduler).toFlushAndYieldThrough([
         [0],
@@ -1440,7 +1675,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span(0)]);
 
       ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
+        Scheduler.unstable_yieldValue('Sync effect'),
       );
       expect(Scheduler).toFlushAndYieldThrough([
         [1],
@@ -1459,41 +1694,49 @@ describe('ReactHooksWithNoopRenderer', () => {
           // intentionally omits a mutation effect.
           committedText = props.count + '';
 
-          Scheduler.yieldValue(`Mount layout [current: ${committedText}]`);
+          Scheduler.unstable_yieldValue(
+            `Mount layout [current: ${committedText}]`,
+          );
           return () => {
-            Scheduler.yieldValue(`Unmount layout [current: ${committedText}]`);
+            Scheduler.unstable_yieldValue(
+              `Unmount layout [current: ${committedText}]`,
+            );
           };
         });
         useEffect(() => {
-          Scheduler.yieldValue(`Mount normal [current: ${committedText}]`);
+          Scheduler.unstable_yieldValue(
+            `Mount normal [current: ${committedText}]`,
+          );
           return () => {
-            Scheduler.yieldValue(`Unmount normal [current: ${committedText}]`);
+            Scheduler.unstable_yieldValue(
+              `Unmount normal [current: ${committedText}]`,
+            );
           };
         });
         return null;
       }
 
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Mount layout [current: 0]',
-        'Sync effect',
-      ]);
-      expect(committedText).toEqual('0');
-
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Mount normal [current: 0]',
-        'Unmount layout [current: 0]',
-        'Mount layout [current: 1]',
-        'Sync effect',
-      ]);
-      expect(committedText).toEqual('1');
+      act(() => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Mount layout [current: 0]',
+          'Sync effect',
+        ]);
+        expect(committedText).toEqual('0');
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Mount normal [current: 0]',
+          'Unmount layout [current: 0]',
+          'Mount layout [current: 1]',
+          'Sync effect',
+        ]);
+        expect(committedText).toEqual('1');
+      });
 
-      ReactNoop.flushPassiveEffects();
       expect(Scheduler).toHaveYielded([
         'Unmount normal [current: 1]',
         'Mount normal [current: 1]',
@@ -1518,10 +1761,10 @@ describe('ReactHooksWithNoopRenderer', () => {
           incrementBy,
         ]);
         return (
-          <React.Fragment>
+          <>
             <IncrementButton increment={increment} ref={button} />
             <Text text={'Count: ' + count} />
-          </React.Fragment>
+          </>
         );
       }
 
@@ -1570,13 +1813,10 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('memoizes value by comparing to previous inputs', () => {
       function CapitalizedText(props) {
         const text = props.text;
-        const capitalizedText = useMemo(
-          () => {
-            Scheduler.yieldValue(`Capitalize '${text}'`);
-            return text.toUpperCase();
-          },
-          [text],
-        );
+        const capitalizedText = useMemo(() => {
+          Scheduler.unstable_yieldValue(`Capitalize '${text}'`);
+          return text.toUpperCase();
+        }, [text]);
         return <Text text={capitalizedText} />;
       }
 
@@ -1604,12 +1844,12 @@ describe('ReactHooksWithNoopRenderer', () => {
       }
 
       function computeA() {
-        Scheduler.yieldValue('compute A');
+        Scheduler.unstable_yieldValue('compute A');
         return 'A';
       }
 
       function computeB() {
-        Scheduler.yieldValue('compute B');
+        Scheduler.unstable_yieldValue('compute B');
         return 'B';
       }
 
@@ -1639,7 +1879,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       }
 
       function compute(val) {
-        Scheduler.yieldValue('compute ' + val);
+        Scheduler.unstable_yieldValue('compute ' + val);
         return val;
       }
 
@@ -1679,7 +1919,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       function App() {
         ping = useDebouncedCallback(
           value => {
-            Scheduler.yieldValue('ping: ' + value);
+            Scheduler.unstable_yieldValue('ping: ' + value);
           },
           100,
           [],
@@ -1687,8 +1927,10 @@ describe('ReactHooksWithNoopRenderer', () => {
         return null;
       }
 
-      ReactNoop.render(<App />);
-      expect(Scheduler).toFlushAndYield([]);
+      act(() => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([]);
 
       ping(1);
       ping(2);
@@ -1841,6 +2083,217 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(totalRefUpdates).toBe(2); // Should not increase since last time
     });
   });
+  describe('useTransition', () => {
+    it.experimental(
+      'delays showing loading state until after timeout',
+      async () => {
+        let transition;
+        function App() {
+          const [show, setShow] = useState(false);
+          const [startTransition, isPending] = useTransition({
+            timeoutMs: 1000,
+          });
+          transition = () => {
+            startTransition(() => {
+              setShow(true);
+            });
+          };
+          return (
+            <Suspense
+              fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
+              {show ? (
+                <AsyncText ms={2000} text={`After... Pending: ${isPending}`} />
+              ) : (
+                <Text text={`Before... Pending: ${isPending}`} />
+              )}
+            </Suspense>
+          );
+        }
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: false'),
+        ]);
+
+        act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            transition,
+          );
+        });
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+        expect(Scheduler).toHaveYielded([
+          'Before... Pending: true',
+          'Suspend! [After... Pending: false]',
+          'Loading... Pending: false',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: true'),
+        ]);
+
+        Scheduler.unstable_advanceTime(1000);
+        await advanceTimers(1000);
+        expect(ReactNoop.getChildren()).toEqual([
+          hiddenSpan('Before... Pending: true'),
+          span('Loading... Pending: false'),
+        ]);
+
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+        expect(Scheduler).toHaveYielded([
+          'Promise resolved [After... Pending: false]',
+        ]);
+        expect(Scheduler).toFlushAndYield(['After... Pending: false']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('After... Pending: false'),
+        ]);
+      },
+    );
+    it.experimental(
+      'delays showing loading state until after busyDelayMs + busyMinDurationMs',
+      async () => {
+        let transition;
+        function App() {
+          const [show, setShow] = useState(false);
+          const [startTransition, isPending] = useTransition({
+            busyDelayMs: 1000,
+            busyMinDurationMs: 2000,
+          });
+          transition = () => {
+            startTransition(() => {
+              setShow(true);
+            });
+          };
+          return (
+            <Suspense
+              fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
+              {show ? (
+                <AsyncText ms={2000} text={`After... Pending: ${isPending}`} />
+              ) : (
+                <Text text={`Before... Pending: ${isPending}`} />
+              )}
+            </Suspense>
+          );
+        }
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: false'),
+        ]);
+
+        act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            transition,
+          );
+        });
+        Scheduler.unstable_advanceTime(1000);
+        await advanceTimers(1000);
+        expect(Scheduler).toHaveYielded([
+          'Before... Pending: true',
+          'Suspend! [After... Pending: false]',
+          'Loading... Pending: false',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: true'),
+        ]);
+
+        Scheduler.unstable_advanceTime(1000);
+        await advanceTimers(1000);
+        expect(Scheduler).toHaveYielded([
+          'Promise resolved [After... Pending: false]',
+        ]);
+        expect(Scheduler).toFlushAndYield(['After... Pending: false']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: true'),
+        ]);
+
+        Scheduler.unstable_advanceTime(1000);
+        await advanceTimers(1000);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Before... Pending: true'),
+        ]);
+        Scheduler.unstable_advanceTime(250);
+        await advanceTimers(250);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('After... Pending: false'),
+        ]);
+      },
+    );
+  });
+  describe('useDeferredValue', () => {
+    it.experimental('defers text value until specified timeout', async () => {
+      function TextBox({text}) {
+        return <AsyncText ms={1000} text={text} />;
+      }
+
+      let _setText;
+      function App() {
+        const [text, setText] = useState('A');
+        const deferredText = useDeferredValue(text, {
+          timeoutMs: 500,
+        });
+        _setText = setText;
+        return (
+          <>
+            <Text text={text} />
+            <Suspense fallback={<Text text={'Loading'} />}>
+              <TextBox text={deferredText} />
+            </Suspense>
+          </>
+        );
+      }
+
+      act(() => {
+        ReactNoop.render(<App />);
+      });
+
+      expect(Scheduler).toHaveYielded(['A', 'Suspend! [A]', 'Loading']);
+      expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading')]);
+
+      Scheduler.unstable_advanceTime(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+      expect(Scheduler).toFlushAndYield(['A']);
+      expect(ReactNoop.getChildren()).toEqual([span('A'), span('A')]);
+
+      act(() => {
+        _setText('B');
+      });
+      expect(Scheduler).toHaveYielded([
+        'B',
+        'A',
+        'B',
+        'Suspend! [B]',
+        'Loading',
+      ]);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+
+      Scheduler.unstable_advanceTime(250);
+      await advanceTimers(250);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+
+      Scheduler.unstable_advanceTime(500);
+      await advanceTimers(500);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('B'),
+        hiddenSpan('A'),
+        span('Loading'),
+      ]);
+
+      Scheduler.unstable_advanceTime(250);
+      await advanceTimers(250);
+      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+
+      act(() => {
+        expect(Scheduler).toFlushAndYield(['B']);
+      });
+      expect(ReactNoop.getChildren()).toEqual([span('B'), span('B')]);
+    });
+  });
 
   describe('progressive enhancement (not supported)', () => {
     it('mount additional state', () => {
@@ -1885,7 +2338,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(() => {
           expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 0']);
         }).toThrow('Rendered more hooks than during the previous render');
-      }).toWarnDev([
+      }).toErrorDev([
         'Warning: React has detected a change in the order of Hooks called by App. ' +
           'This will lead to bugs and errors if not fixed. For more information, ' +
           'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -1948,17 +2401,17 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('unmount effects', () => {
       function App(props) {
         useEffect(() => {
-          Scheduler.yieldValue('Mount A');
+          Scheduler.unstable_yieldValue('Mount A');
           return () => {
-            Scheduler.yieldValue('Unmount A');
+            Scheduler.unstable_yieldValue('Unmount A');
           };
         }, []);
 
         if (props.showMore) {
           useEffect(() => {
-            Scheduler.yieldValue('Mount B');
+            Scheduler.unstable_yieldValue('Mount B');
             return () => {
-              Scheduler.yieldValue('Unmount B');
+              Scheduler.unstable_yieldValue('Unmount B');
             };
           }, []);
         }
@@ -1966,28 +2419,32 @@ describe('ReactHooksWithNoopRenderer', () => {
         return null;
       }
 
-      ReactNoop.render(<App showMore={false} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-      ReactNoop.flushPassiveEffects();
+      act(() => {
+        ReactNoop.render(<App showMore={false} />, () =>
+          Scheduler.unstable_yieldValue('Sync effect'),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
+      });
+
       expect(Scheduler).toHaveYielded(['Mount A']);
 
-      ReactNoop.render(<App showMore={true} />);
-      expect(() => {
+      act(() => {
+        ReactNoop.render(<App showMore={true} />);
         expect(() => {
-          expect(Scheduler).toFlushAndYield([]);
-        }).toThrow('Rendered more hooks than during the previous render');
-      }).toWarnDev([
-        'Warning: React has detected a change in the order of Hooks called by App. ' +
-          'This will lead to bugs and errors if not fixed. For more information, ' +
-          'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
-          '   Previous render            Next render\n' +
-          '   ------------------------------------------------------\n' +
-          '1. useEffect                  useEffect\n' +
-          '2. undefined                  useEffect\n' +
-          '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
-      ]);
+          expect(() => {
+            expect(Scheduler).toFlushAndYield([]);
+          }).toThrow('Rendered more hooks than during the previous render');
+        }).toErrorDev([
+          'Warning: React has detected a change in the order of Hooks called by App. ' +
+            'This will lead to bugs and errors if not fixed. For more information, ' +
+            'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            '1. useEffect                  useEffect\n' +
+            '2. undefined                  useEffect\n' +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
+        ]);
+      });
 
       // Uncomment if/when we support this again
       // ReactNoop.flushPassiveEffects();
@@ -2015,29 +2472,28 @@ describe('ReactHooksWithNoopRenderer', () => {
         // This reducer closes over a value from props. If the reducer is not
         // properly updated, the eager reducer will compare to an old value
         // and bail out incorrectly.
-        Scheduler.yieldValue('Reducer: ' + count);
+        Scheduler.unstable_yieldValue('Reducer: ' + count);
         return count;
       }, -1);
-      useEffect(
-        () => {
-          Scheduler.yieldValue('Effect: ' + count);
-          dispatch();
-        },
-        [count],
-      );
-      Scheduler.yieldValue('Render: ' + state);
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect: ' + count);
+        dispatch();
+      }, [count]);
+      Scheduler.unstable_yieldValue('Render: ' + state);
       return count;
     }
 
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield([
-      'Render: -1',
-      'Effect: 1',
-      'Reducer: 1',
-      'Reducer: 1',
-      'Render: 1',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput('1');
+    act(() => {
+      ReactNoop.render(<App />);
+      expect(Scheduler).toFlushAndYield([
+        'Render: -1',
+        'Effect: 1',
+        'Reducer: 1',
+        'Reducer: 1',
+        'Render: 1',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput('1');
+    });
 
     act(() => {
       setCounter(2);
@@ -2052,6 +2508,66 @@ describe('ReactHooksWithNoopRenderer', () => {
     expect(ReactNoop).toMatchRenderedOutput('2');
   });
 
+  // Regression test. Covers a case where an internal state variable
+  // (`didReceiveUpdate`) is not reset properly.
+  it('state bail out edge case (#16359)', async () => {
+    let setCounterA;
+    let setCounterB;
+
+    function CounterA() {
+      const [counter, setCounter] = useState(0);
+      setCounterA = setCounter;
+      Scheduler.unstable_yieldValue('Render A: ' + counter);
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Commit A: ' + counter);
+      });
+      return counter;
+    }
+
+    function CounterB() {
+      const [counter, setCounter] = useState(0);
+      setCounterB = setCounter;
+      Scheduler.unstable_yieldValue('Render B: ' + counter);
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Commit B: ' + counter);
+      });
+      return counter;
+    }
+
+    const root = ReactNoop.createRoot(null);
+    await ReactNoop.act(async () => {
+      root.render(
+        <>
+          <CounterA />
+          <CounterB />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render A: 0',
+      'Render B: 0',
+      'Commit A: 0',
+      'Commit B: 0',
+    ]);
+
+    await ReactNoop.act(async () => {
+      setCounterA(1);
+
+      // In the same batch, update B twice. To trigger the condition we're
+      // testing, the first update is necessary to bypass the early
+      // bailout optimization.
+      setCounterB(1);
+      setCounterB(0);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render A: 1',
+      'Render B: 0',
+      'Commit A: 1',
+      // B should not fire an effect because the update bailed out
+      // 'Commit B: 0',
+    ]);
+  });
+
   it('should update latest rendered reducer when a preceding state receives a render phase update', () => {
     // Similar to previous test, except using a preceding render phase update
     // instead of new props.
@@ -2065,7 +2581,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         setStep(step + 1);
       }
 
-      Scheduler.yieldValue(`Step: ${step}, Shadow: ${shadow}`);
+      Scheduler.unstable_yieldValue(`Step: ${step}, Shadow: ${shadow}`);
       return shadow;
     }
 
@@ -2085,46 +2601,34 @@ describe('ReactHooksWithNoopRenderer', () => {
     expect(ReactNoop).toMatchRenderedOutput('5');
   });
 
-  describe('revertPassiveEffectsChange', () => {
-    it('flushes serial effects before enqueueing work', () => {
-      jest.resetModules();
-
-      ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-      ReactFeatureFlags.enableSchedulerTracing = true;
-      ReactFeatureFlags.revertPassiveEffectsChange = true;
-      React = require('react');
-      ReactNoop = require('react-noop-renderer');
-      Scheduler = require('scheduler');
-      SchedulerTracing = require('scheduler/tracing');
-      useState = React.useState;
-      useEffect = React.useEffect;
-      act = ReactNoop.act;
-
-      let _updateCount;
-      function Counter(props) {
-        const [count, updateCount] = useState(0);
-        _updateCount = updateCount;
-        useEffect(() => {
-          Scheduler.yieldValue(`Will set count to 1`);
-          updateCount(1);
-        }, []);
-        return <Text text={'Count: ' + count} />;
-      }
+  it('should process the rest pending updates after a render phase update', () => {
+    // Similar to previous test, except using a preceding render phase update
+    // instead of new props.
+    let updateA;
+    let updateC;
+    function App() {
+      const [a, setA] = useState(false);
+      const [b, setB] = useState(false);
+      if (a !== b) {
+        setB(a);
+      }
+      // Even though we called setB above,
+      // we should still apply the changes to C,
+      // during this render pass.
+      const [c, setC] = useState(false);
+      updateA = setA;
+      updateC = setC;
+      return `${a ? 'A' : 'a'}${b ? 'B' : 'b'}${c ? 'C' : 'c'}`;
+    }
 
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+    act(() => ReactNoop.render(<App />));
+    expect(ReactNoop).toMatchRenderedOutput('abc');
 
-      // Enqueuing this update forces the passive effect to be flushed --
-      // updateCount(1) happens first, so 2 wins.
-      // (use batchedUpdates to silence the act() warning)
-      ReactNoop.batchedUpdates(() => _updateCount(2));
-      expect(Scheduler).toHaveYielded(['Will set count to 1']);
-      expect(Scheduler).toFlushAndYield(['Count: 2']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
+    act(() => {
+      updateA(true);
+      // This update should not get dropped.
+      updateC(true);
     });
+    expect(ReactNoop).toMatchRenderedOutput('ABC');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
index 9db2710e1a2a2..e39b055f79c5f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js
@@ -42,7 +42,7 @@ describe('ReactIncremental', () => {
 
   it('should render a simple component, in steps if needed', () => {
     function Bar() {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return (
         <span>
           <div>Hello World</div>
@@ -51,11 +51,11 @@ describe('ReactIncremental', () => {
     }
 
     function Foo() {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return [<Bar key="a" isBar={true} />, <Bar key="b" isBar={true} />];
     }
 
-    ReactNoop.render(<Foo />, () => Scheduler.yieldValue('callback'));
+    ReactNoop.render(<Foo />, () => Scheduler.unstable_yieldValue('callback'));
     // Do one step of work.
     expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
 
@@ -132,12 +132,12 @@ describe('ReactIncremental', () => {
 
   it('can cancel partially rendered work and restart', () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return <div>{props.children}</div>;
     }
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div>
           <Bar>{props.text}</Bar>
@@ -192,10 +192,10 @@ describe('ReactIncremental', () => {
 
     inst.setState(
       () => {
-        Scheduler.yieldValue('setState1');
+        Scheduler.unstable_yieldValue('setState1');
         return {text: 'bar'};
       },
-      () => Scheduler.yieldValue('callback1'),
+      () => Scheduler.unstable_yieldValue('callback1'),
     );
 
     // Flush part of the work
@@ -205,10 +205,10 @@ describe('ReactIncremental', () => {
     ReactNoop.flushSync(() => ReactNoop.render(<Foo />));
     inst.setState(
       () => {
-        Scheduler.yieldValue('setState2');
+        Scheduler.unstable_yieldValue('setState2');
         return {text2: 'baz'};
       },
-      () => Scheduler.yieldValue('callback2'),
+      () => Scheduler.unstable_yieldValue('callback2'),
     );
 
     // Flush the rest of the work which now includes the low priority
@@ -223,17 +223,17 @@ describe('ReactIncremental', () => {
 
   it('can deprioritize unfinished work and resume it later', () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return <div>{props.children}</div>;
     }
 
     function Middle(props) {
-      Scheduler.yieldValue('Middle');
+      Scheduler.unstable_yieldValue('Middle');
       return <span>{props.children}</span>;
     }
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div>
           <Bar>{props.text}</Bar>
@@ -304,7 +304,7 @@ describe('ReactIncremental', () => {
 
     ops = [];
 
-    // Render the high priority work (everying except the hidden trees).
+    // Render the high priority work (everything except the hidden trees).
     ReactNoop.flushSync(() => {
       ReactNoop.render(<Foo text="foo" />);
     });
@@ -1086,7 +1086,7 @@ describe('ReactIncremental', () => {
     class Foo extends React.PureComponent {
       render() {
         const msg = `A: ${a}, B: ${this.props.b}`;
-        Scheduler.yieldValue(msg);
+        Scheduler.unstable_yieldValue(msg);
         return msg;
       }
     }
@@ -1456,18 +1456,18 @@ describe('ReactIncremental', () => {
     class Parent extends React.Component {
       state = {parentRenders: 0};
       static getDerivedStateFromProps(props, prevState) {
-        Scheduler.yieldValue('getDerivedStateFromProps');
+        Scheduler.unstable_yieldValue('getDerivedStateFromProps');
         return prevState.parentRenders + 1;
       }
       render() {
-        Scheduler.yieldValue('Parent');
+        Scheduler.unstable_yieldValue('Parent');
         return <Child parentRenders={this.state.parentRenders} ref={child} />;
       }
     }
 
     class Child extends React.Component {
       render() {
-        Scheduler.yieldValue('Child');
+        Scheduler.unstable_yieldValue('Child');
         return this.props.parentRenders;
       }
     }
@@ -1819,7 +1819,7 @@ describe('ReactIncremental', () => {
         };
       }
       render() {
-        Scheduler.yieldValue('Intl ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue('Intl ' + JSON.stringify(this.context));
         return this.props.children;
       }
     }
@@ -1834,7 +1834,7 @@ describe('ReactIncremental', () => {
         };
       }
       render() {
-        Scheduler.yieldValue('Router ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue('Router ' + JSON.stringify(this.context));
         return this.props.children;
       }
     }
@@ -1844,7 +1844,9 @@ describe('ReactIncremental', () => {
         locale: PropTypes.string,
       };
       render() {
-        Scheduler.yieldValue('ShowLocale ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue(
+          'ShowLocale ' + JSON.stringify(this.context),
+        );
         return this.context.locale;
       }
     }
@@ -1854,13 +1856,15 @@ describe('ReactIncremental', () => {
         route: PropTypes.string,
       };
       render() {
-        Scheduler.yieldValue('ShowRoute ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue(
+          'ShowRoute ' + JSON.stringify(this.context),
+        );
         return this.context.route;
       }
     }
 
     function ShowBoth(props, context) {
-      Scheduler.yieldValue('ShowBoth ' + JSON.stringify(context));
+      Scheduler.unstable_yieldValue('ShowBoth ' + JSON.stringify(context));
       return `${context.route} in ${context.locale}`;
     }
     ShowBoth.contextTypes = {
@@ -1870,14 +1874,18 @@ describe('ReactIncremental', () => {
 
     class ShowNeither extends React.Component {
       render() {
-        Scheduler.yieldValue('ShowNeither ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue(
+          'ShowNeither ' + JSON.stringify(this.context),
+        );
         return null;
       }
     }
 
     class Indirection extends React.Component {
       render() {
-        Scheduler.yieldValue('Indirection ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue(
+          'Indirection ' + JSON.stringify(this.context),
+        );
         return [
           <ShowLocale key="a" />,
           <ShowRoute key="b" />,
@@ -1904,8 +1912,10 @@ describe('ReactIncremental', () => {
         'ShowLocale {"locale":"fr"}',
         'ShowBoth {"locale":"fr"}',
       ]),
-    ).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Intl, ShowBoth, ShowLocale',
       {withoutStack: true},
     );
@@ -1959,8 +1969,10 @@ describe('ReactIncremental', () => {
         'ShowBoth {"locale":"en","route":"/about"}',
         'ShowBoth {"locale":"en"}',
       ]),
-    ).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Router, ShowRoute',
       {withoutStack: true},
     );
@@ -1988,8 +2000,12 @@ describe('ReactIncremental', () => {
     }
 
     ReactNoop.render(<Recurse />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Recurse',
       {withoutStack: true},
     );
@@ -2025,17 +2041,19 @@ describe('ReactIncremental', () => {
     };
 
     ReactNoop.render(<Recurse />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       [
         'Warning: The <Recurse /> component appears to be a function component that returns a class instance. ' +
           'Change Recurse to a class that extends React.Component instead. ' +
           "If you can't use a class try assigning the prototype on the function as a workaround. " +
           '`Recurse.prototype = React.Component.prototype`. ' +
           "Don't use an arrow function since it cannot be called with `new` by React.",
-        'Legacy context API has been detected within a strict-mode tree: \n\n' +
+        'Legacy context API has been detected within a strict-mode tree.\n\n' +
+          'The old API will be supported in all 16.x releases, but applications ' +
+          'using it should migrate to the new version.\n\n' +
           'Please update the following components: Recurse',
       ],
-      {withoutStack: true},
+      {withoutStack: 1},
     );
     expect(ops).toEqual([
       'Recurse {}',
@@ -2056,7 +2074,7 @@ describe('ReactIncremental', () => {
         };
       }
       render() {
-        Scheduler.yieldValue('Intl ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue('Intl ' + JSON.stringify(this.context));
         return this.props.children;
       }
     }
@@ -2066,7 +2084,9 @@ describe('ReactIncremental', () => {
         locale: PropTypes.string,
       };
       render() {
-        Scheduler.yieldValue('ShowLocale ' + JSON.stringify(this.context));
+        Scheduler.unstable_yieldValue(
+          'ShowLocale ' + JSON.stringify(this.context),
+        );
         return this.context.locale;
       }
     }
@@ -2095,8 +2115,10 @@ describe('ReactIncremental', () => {
         'Intl {}',
         'ShowLocale {"locale":"ru"}',
       ]),
-    ).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Intl, ShowLocale',
       {withoutStack: true},
     );
@@ -2174,8 +2196,12 @@ describe('ReactIncremental', () => {
         </IndirectionFn>
       </Intl>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
       {withoutStack: true},
     );
@@ -2266,8 +2292,12 @@ describe('ReactIncremental', () => {
         </IndirectionFn>
       </Stateful>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
       {withoutStack: true},
     );
@@ -2335,8 +2365,12 @@ describe('ReactIncremental', () => {
 
     // Init
     ReactNoop.render(<Root />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Child',
       {withoutStack: true},
     );
@@ -2385,8 +2419,12 @@ describe('ReactIncremental', () => {
 
     // Init
     ReactNoop.render(<Root />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: ContextProvider',
       {withoutStack: true},
     );
@@ -2396,9 +2434,8 @@ describe('ReactIncremental', () => {
     instance.setState({
       throwError: true,
     });
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Error boundaries should implement getDerivedStateFromError()',
-      {withoutStack: true},
     );
   });
 
@@ -2434,11 +2471,12 @@ describe('ReactIncremental', () => {
     }
 
     ReactNoop.render(<MyComponent />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       [
-        'componentWillReceiveProps: Please update the following components ' +
-          'to use static getDerivedStateFromProps instead: MyComponent',
-        'Legacy context API has been detected within a strict-mode tree: \n\n' +
+        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
+        'Legacy context API has been detected within a strict-mode tree.\n\n' +
+          'The old API will be supported in all 16.x releases, but applications ' +
+          'using it should migrate to the new version.\n\n' +
           'Please update the following components: MyComponent',
       ],
       {withoutStack: true},
@@ -2584,8 +2622,12 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Child, TopContextProvider',
       {withoutStack: true},
     );
@@ -2646,8 +2688,12 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
       {withoutStack: true},
     );
@@ -2717,8 +2763,12 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
       {withoutStack: true},
     );
@@ -2798,8 +2848,12 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.\n\n' +
         'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
       {withoutStack: true},
     );
@@ -2817,12 +2871,12 @@ describe('ReactIncremental', () => {
 
   it('does not interrupt for update at same priority', () => {
     function Parent(props) {
-      Scheduler.yieldValue('Parent: ' + props.step);
+      Scheduler.unstable_yieldValue('Parent: ' + props.step);
       return <Child step={props.step} />;
     }
 
     function Child(props) {
-      Scheduler.yieldValue('Child: ' + props.step);
+      Scheduler.unstable_yieldValue('Child: ' + props.step);
       return null;
     }
 
@@ -2837,12 +2891,12 @@ describe('ReactIncremental', () => {
 
   it('does not interrupt for update at lower priority', () => {
     function Parent(props) {
-      Scheduler.yieldValue('Parent: ' + props.step);
+      Scheduler.unstable_yieldValue('Parent: ' + props.step);
       return <Child step={props.step} />;
     }
 
     function Child(props) {
-      Scheduler.yieldValue('Child: ' + props.step);
+      Scheduler.unstable_yieldValue('Child: ' + props.step);
       return null;
     }
 
@@ -2858,12 +2912,12 @@ describe('ReactIncremental', () => {
 
   it('does interrupt for update at higher priority', () => {
     function Parent(props) {
-      Scheduler.yieldValue('Parent: ' + props.step);
+      Scheduler.unstable_yieldValue('Parent: ' + props.step);
       return <Child step={props.step} />;
     }
 
     function Child(props) {
-      Scheduler.yieldValue('Child: ' + props.step);
+      Scheduler.unstable_yieldValue('Child: ' + props.step);
       return null;
     }
 
@@ -2877,8 +2931,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
-  // We don't currently use fibers as keys. Re-enable this test if we
-  // ever do again.
+  // We sometimes use Maps with Fibers as keys.
   it('does not break with a bad Map polyfill', () => {
     const realMapSet = Map.prototype.set;
 
@@ -2886,17 +2939,27 @@ describe('ReactIncremental', () => {
       function Thing() {
         throw new Error('No.');
       }
+      // This class uses legacy context, which triggers warnings,
+      // the procedures for which use a Map to store fibers.
       class Boundary extends React.Component {
         state = {didError: false};
         componentDidCatch() {
           this.setState({didError: true});
         }
+        static contextTypes = {
+          color: () => null,
+        };
         render() {
           return this.state.didError ? null : <Thing />;
         }
       }
       ReactNoop.render(<Boundary />);
-      expect(Scheduler).toFlushWithoutYielding();
+      expect(() => {
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toErrorDev(
+        ['Legacy context API has been detected within a strict-mode tree'],
+        {withoutStack: true},
+      );
     }
 
     // First, verify that this code path normally receives Fibers as keys,
@@ -2942,6 +3005,7 @@ describe('ReactIncremental', () => {
     };
     React = require('react');
     ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
     try {
       triggerCodePathThatUsesFibersAsMapKeys();
     } finally {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 6fe7fc093663c..519c2d3f3a850 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -45,31 +45,31 @@ describe('ReactIncrementalErrorHandling', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       static getDerivedStateFromError(error) {
-        Scheduler.yieldValue('getDerivedStateFromError');
+        Scheduler.unstable_yieldValue('getDerivedStateFromError');
         return {error};
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('ErrorBoundary (catch)');
+          Scheduler.unstable_yieldValue('ErrorBoundary (catch)');
           return <ErrorMessage error={this.state.error} />;
         }
-        Scheduler.yieldValue('ErrorBoundary (try)');
+        Scheduler.unstable_yieldValue('ErrorBoundary (try)');
         return this.props.children;
       }
     }
 
     function ErrorMessage(props) {
-      Scheduler.yieldValue('ErrorMessage');
+      Scheduler.unstable_yieldValue('ErrorMessage');
       return <span prop={`Caught an error: ${props.error.message}`} />;
     }
 
     function Indirection(props) {
-      Scheduler.yieldValue('Indirection');
+      Scheduler.unstable_yieldValue('Indirection');
       return props.children || null;
     }
 
     function BadRender() {
-      Scheduler.yieldValue('throw');
+      Scheduler.unstable_yieldValue('throw');
       throw new Error('oops!');
     }
 
@@ -139,31 +139,31 @@ describe('ReactIncrementalErrorHandling', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       componentDidCatch(error) {
-        Scheduler.yieldValue('componentDidCatch');
+        Scheduler.unstable_yieldValue('componentDidCatch');
         this.setState({error});
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('ErrorBoundary (catch)');
+          Scheduler.unstable_yieldValue('ErrorBoundary (catch)');
           return <ErrorMessage error={this.state.error} />;
         }
-        Scheduler.yieldValue('ErrorBoundary (try)');
+        Scheduler.unstable_yieldValue('ErrorBoundary (try)');
         return this.props.children;
       }
     }
 
     function ErrorMessage(props) {
-      Scheduler.yieldValue('ErrorMessage');
+      Scheduler.unstable_yieldValue('ErrorMessage');
       return <span prop={`Caught an error: ${props.error.message}`} />;
     }
 
     function Indirection(props) {
-      Scheduler.yieldValue('Indirection');
+      Scheduler.unstable_yieldValue('Indirection');
       return props.children || null;
     }
 
     function BadRender() {
-      Scheduler.yieldValue('throw');
+      Scheduler.unstable_yieldValue('throw');
       throw new Error('oops!');
     }
 
@@ -197,7 +197,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYieldThrough([
       'Indirection',
       // Now that the tree is complete, and there's no remaining work, React
-      // reverts to sync mode to retry one more time before handling the error.
+      // reverts to legacy mode to retry one more time before handling the error.
 
       'ErrorBoundary (try)',
       'Indirection',
@@ -218,15 +218,15 @@ describe('ReactIncrementalErrorHandling', () => {
   it("retries at a lower priority if there's additional pending work", () => {
     function App(props) {
       if (props.isBroken) {
-        Scheduler.yieldValue('error');
+        Scheduler.unstable_yieldValue('error');
         throw new Error('Oops!');
       }
-      Scheduler.yieldValue('success');
+      Scheduler.unstable_yieldValue('success');
       return <span prop="Everything is fine." />;
     }
 
     function onCommit() {
-      Scheduler.yieldValue('commit');
+      Scheduler.unstable_yieldValue('commit');
     }
 
     function interrupt() {
@@ -236,18 +236,27 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     ReactNoop.render(<App isBroken={true} />, onCommit);
-    Scheduler.advanceTime(1000);
+    Scheduler.unstable_advanceTime(1000);
     expect(Scheduler).toFlushAndYieldThrough(['error']);
     interrupt();
 
     // This update is in a separate batch
     ReactNoop.render(<App isBroken={false} />, onCommit);
 
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toFlushAndYieldThrough([
       // The first render fails. But because there's a lower priority pending
       // update, it doesn't throw.
       'error',
-      // Now we retry at the lower priority. This time it succeeds.
+    ]);
+
+    // React will try to recover by rendering all the pending updates in a
+    // single batch, synchronously. This time it succeeds.
+    //
+    // This tells Scheduler to render a single unit of work. Because the render
+    // to recover from the error is synchronous, this should be enough to
+    // finish the rest of the work.
+    Scheduler.unstable_flushNumberOfYields(1);
+    expect(Scheduler).toHaveYielded([
       'success',
       // Nothing commits until the second update completes.
       'commit',
@@ -256,78 +265,104 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);
   });
 
-  it('on error, retries at a lower priority using the expiration of higher priority', () => {
-    class Parent extends React.Component {
-      state = {hideChild: false};
-      componentDidUpdate() {
-        Scheduler.yieldValue('commit: ' + this.state.hideChild);
-      }
-      render() {
-        if (this.state.hideChild) {
-          Scheduler.yieldValue('(empty)');
-          return <span prop="(empty)" />;
-        }
-        return <Child isBroken={this.props.childIsBroken} />;
+  it('does not include offscreen work when retrying after an error', () => {
+    function App(props) {
+      if (props.isBroken) {
+        Scheduler.unstable_yieldValue('error');
+        throw new Error('Oops!');
       }
+      Scheduler.unstable_yieldValue('success');
+      return (
+        <>
+          Everything is fine
+          <div hidden={true}>
+            <div>Offscreen content</div>
+          </div>
+        </>
+      );
     }
 
-    function Child(props) {
-      if (props.isBroken) {
-        Scheduler.yieldValue('Error!');
-        throw new Error('Error!');
-      }
-      Scheduler.yieldValue('Child');
-      return <span prop="Child" />;
+    function onCommit() {
+      Scheduler.unstable_yieldValue('commit');
     }
 
-    // Initial mount
-    const parent = React.createRef(null);
-    ReactNoop.render(<Parent ref={parent} childIsBroken={false} />);
-    expect(Scheduler).toFlushAndYield(['Child']);
-    expect(ReactNoop.getChildren()).toEqual([span('Child')]);
+    function interrupt() {
+      ReactNoop.flushSync(() => {
+        ReactNoop.renderToRootWithID(null, 'other-root');
+      });
+    }
 
-    // Schedule a low priority update to hide the child
-    parent.current.setState({hideChild: true});
+    ReactNoop.render(<App isBroken={true} />, onCommit);
+    Scheduler.unstable_advanceTime(1000);
+    expect(Scheduler).toFlushAndYieldThrough(['error']);
+    interrupt();
 
-    // Before the low priority update is flushed, synchronously trigger an
-    // error in the child.
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<Parent ref={parent} childIsBroken={true} />);
-    });
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // This update is in a separate batch
+    ReactNoop.render(<App isBroken={false} />, onCommit);
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      // The first render fails. But because there's a lower priority pending
+      // update, it doesn't throw.
+      'error',
+    ]);
+
+    // React will try to recover by rendering all the pending updates in a
+    // single batch, synchronously. This time it succeeds.
+    //
+    // This tells Scheduler to render a single unit of work. Because the render
+    // to recover from the error is synchronous, this should be enough to
+    // finish the rest of the work.
+    Scheduler.unstable_flushNumberOfYields(1);
     expect(Scheduler).toHaveYielded([
-      // First the sync update triggers an error
-      'Error!',
-      // Because there's a pending low priority update, we restart at the
-      // lower priority. This hides the children, suppressing the error.
-      '(empty)',
-      // Now the tree can commit.
-      'commit: true',
+      'success',
+      // Nothing commits until the second update completes.
+      'commit',
+      'commit',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
+    // This should not include the offscreen content
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        Everything is fine
+        <div hidden={true} />
+      </>,
+    );
+
+    // The offscreen content finishes in a subsequent render
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        Everything is fine
+        <div hidden={true}>
+          <div>Offscreen content</div>
+        </div>
+      </>,
+    );
   });
 
   it('retries one more time before handling error', () => {
     function BadRender() {
-      Scheduler.yieldValue('BadRender');
+      Scheduler.unstable_yieldValue('BadRender');
       throw new Error('oops');
     }
 
     function Sibling() {
-      Scheduler.yieldValue('Sibling');
+      Scheduler.unstable_yieldValue('Sibling');
       return <span prop="Sibling" />;
     }
 
     function Parent() {
-      Scheduler.yieldValue('Parent');
+      Scheduler.unstable_yieldValue('Parent');
       return (
-        <React.Fragment>
+        <>
           <BadRender />
           <Sibling />
-        </React.Fragment>
+        </>
       );
     }
 
-    ReactNoop.render(<Parent />, () => Scheduler.yieldValue('commit'));
+    ReactNoop.render(<Parent />, () => Scheduler.unstable_yieldValue('commit'));
 
     // Render the bad component asynchronously
     expect(Scheduler).toFlushAndYieldThrough(['Parent', 'BadRender']);
@@ -346,10 +381,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
-  // TODO: This is currently unobservable, but will be once we lift renderRoot
-  // and commitRoot into the renderer.
-  // it("does not retry synchronously if there's an update between complete and commit");
-
   it('calls componentDidCatch multiple times for multiple errors', () => {
     let id = 0;
     class BadMount extends React.Component {
@@ -357,7 +388,7 @@ describe('ReactIncrementalErrorHandling', () => {
         throw new Error(`Error ${++id}`);
       }
       render() {
-        Scheduler.yieldValue('BadMount');
+        Scheduler.unstable_yieldValue('BadMount');
         return null;
       }
     }
@@ -365,14 +396,14 @@ describe('ReactIncrementalErrorHandling', () => {
     class ErrorBoundary extends React.Component {
       state = {errorCount: 0};
       componentDidCatch(error) {
-        Scheduler.yieldValue(`componentDidCatch: ${error.message}`);
+        Scheduler.unstable_yieldValue(`componentDidCatch: ${error.message}`);
         this.setState(state => ({errorCount: state.errorCount + 1}));
       }
       render() {
         if (this.state.errorCount > 0) {
           return <span prop={`Number of errors: ${this.state.errorCount}`} />;
         }
-        Scheduler.yieldValue('ErrorBoundary');
+        Scheduler.unstable_yieldValue('ErrorBoundary');
         return this.props.children;
       }
     }
@@ -430,23 +461,23 @@ describe('ReactIncrementalErrorHandling', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       componentDidCatch(error) {
-        Scheduler.yieldValue('ErrorBoundary componentDidCatch');
+        Scheduler.unstable_yieldValue('ErrorBoundary componentDidCatch');
         this.setState({error});
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('ErrorBoundary render error');
+          Scheduler.unstable_yieldValue('ErrorBoundary render error');
           return (
             <span prop={`Caught an error: ${this.state.error.message}.`} />
           );
         }
-        Scheduler.yieldValue('ErrorBoundary render success');
+        Scheduler.unstable_yieldValue('ErrorBoundary render success');
         return this.props.children;
       }
     }
 
     function BrokenRender(props) {
-      Scheduler.yieldValue('BrokenRender');
+      Scheduler.unstable_yieldValue('BrokenRender');
       throw new Error('Hello');
     }
 
@@ -603,17 +634,17 @@ describe('ReactIncrementalErrorHandling', () => {
   it('propagates an error from a noop error boundary during partial deferred mounting', () => {
     class RethrowErrorBoundary extends React.Component {
       componentDidCatch(error) {
-        Scheduler.yieldValue('RethrowErrorBoundary componentDidCatch');
+        Scheduler.unstable_yieldValue('RethrowErrorBoundary componentDidCatch');
         throw error;
       }
       render() {
-        Scheduler.yieldValue('RethrowErrorBoundary render');
+        Scheduler.unstable_yieldValue('RethrowErrorBoundary render');
         return this.props.children;
       }
     }
 
     function BrokenRender() {
-      Scheduler.yieldValue('BrokenRender');
+      Scheduler.unstable_yieldValue('BrokenRender');
       throw new Error('Hello');
     }
 
@@ -758,7 +789,7 @@ describe('ReactIncrementalErrorHandling', () => {
         });
       });
     }).toThrow('Hello');
-    Scheduler.flushAll();
+    Scheduler.unstable_flushAll();
     expect(ReactNoop.getChildren()).toEqual([span('a:3')]);
   });
 
@@ -862,7 +893,7 @@ describe('ReactIncrementalErrorHandling', () => {
   it('should not attempt to recover an unmounting error boundary', () => {
     class Parent extends React.Component {
       componentWillUnmount() {
-        Scheduler.yieldValue('Parent componentWillUnmount');
+        Scheduler.unstable_yieldValue('Parent componentWillUnmount');
       }
       render() {
         return <Boundary />;
@@ -871,7 +902,7 @@ describe('ReactIncrementalErrorHandling', () => {
 
     class Boundary extends React.Component {
       componentDidCatch(e) {
-        Scheduler.yieldValue(`Caught error: ${e.message}`);
+        Scheduler.unstable_yieldValue(`Caught error: ${e.message}`);
       }
       render() {
         return <ThrowsOnUnmount />;
@@ -880,7 +911,7 @@ describe('ReactIncrementalErrorHandling', () => {
 
     class ThrowsOnUnmount extends React.Component {
       componentWillUnmount() {
-        Scheduler.yieldValue('ThrowsOnUnmount componentWillUnmount');
+        Scheduler.unstable_yieldValue('ThrowsOnUnmount componentWillUnmount');
         throw new Error('unmount error');
       }
       render() {
@@ -1117,8 +1148,12 @@ describe('ReactIncrementalErrorHandling', () => {
         <Connector />
       </Provider>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'Legacy context API has been detected within a strict-mode tree: \n\n' +
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Legacy context API has been detected within a strict-mode tree.\n\n' +
+        'The old API will be supported in all 16.x releases, but ' +
+        'applications using it should migrate to the new version.\n\n' +
         'Please update the following components: Connector, Provider',
       {withoutStack: true},
     );
@@ -1150,7 +1185,7 @@ describe('ReactIncrementalErrorHandling', () => {
         <BrokenRender />
       </ErrorBoundary>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev([
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
       'Warning: React.createElement: type is invalid -- expected a string',
       // React retries once on error
       'Warning: React.createElement: type is invalid -- expected a string',
@@ -1199,7 +1234,7 @@ describe('ReactIncrementalErrorHandling', () => {
         <BrokenRender fail={true} />
       </ErrorBoundary>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev([
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
       'Warning: React.createElement: type is invalid -- expected a string',
       // React retries once on error
       'Warning: React.createElement: type is invalid -- expected a string',
@@ -1219,7 +1254,9 @@ describe('ReactIncrementalErrorHandling', () => {
 
   it('recovers from uncaught reconciler errors', () => {
     const InvalidType = undefined;
-    expect(() => ReactNoop.render(<InvalidType />)).toWarnDev(
+    expect(() =>
+      ReactNoop.render(<InvalidType />),
+    ).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string',
       {withoutStack: true},
     );
@@ -1423,31 +1460,31 @@ describe('ReactIncrementalErrorHandling', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       componentDidCatch(error) {
-        Scheduler.yieldValue('componentDidCatch');
+        Scheduler.unstable_yieldValue('componentDidCatch');
         this.setState({error});
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('ErrorBoundary (catch)');
+          Scheduler.unstable_yieldValue('ErrorBoundary (catch)');
           return <ErrorMessage error={this.state.error} />;
         }
-        Scheduler.yieldValue('ErrorBoundary (try)');
+        Scheduler.unstable_yieldValue('ErrorBoundary (try)');
         return this.props.children;
       }
     }
 
     function ErrorMessage(props) {
-      Scheduler.yieldValue('ErrorMessage');
+      Scheduler.unstable_yieldValue('ErrorMessage');
       return <span prop={`Caught an error: ${props.error.message}`} />;
     }
 
     function BadRenderSibling(props) {
-      Scheduler.yieldValue('BadRenderSibling');
+      Scheduler.unstable_yieldValue('BadRenderSibling');
       return null;
     }
 
     function BadRender() {
-      Scheduler.yieldValue('throw');
+      Scheduler.unstable_yieldValue('throw');
       throw new Error('oops!');
     }
 
@@ -1485,25 +1522,25 @@ describe('ReactIncrementalErrorHandling', () => {
     // where we checked for the existence of didUpdate instead of didMount, and
     // didMount was not defined.
     function BadRender() {
-      Scheduler.yieldValue('throw');
+      Scheduler.unstable_yieldValue('throw');
       throw new Error('oops!');
     }
 
     class Parent extends React.Component {
       state = {error: null, other: false};
       componentDidCatch(error) {
-        Scheduler.yieldValue('did catch');
+        Scheduler.unstable_yieldValue('did catch');
         this.setState({error});
       }
       componentDidUpdate() {
-        Scheduler.yieldValue('did update');
+        Scheduler.unstable_yieldValue('did update');
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('render error message');
+          Scheduler.unstable_yieldValue('render error message');
           return <span prop={`Caught an error: ${this.state.error.message}`} />;
         }
-        Scheduler.yieldValue('render');
+        Scheduler.unstable_yieldValue('render');
         return <BadRender />;
       }
     }
@@ -1529,7 +1566,7 @@ describe('ReactIncrementalErrorHandling', () => {
       }
       render() {
         if (this.state.errorInfo) {
-          Scheduler.yieldValue('render error message');
+          Scheduler.unstable_yieldValue('render error message');
           return (
             <span
               prop={`Caught an error:${normalizeCodeLocInfo(
@@ -1612,17 +1649,19 @@ describe('ReactIncrementalErrorHandling', () => {
     ReactNoop.render(<Provider />);
     expect(() => {
       expect(Scheduler).toFlushAndThrow('Oops!');
-    }).toWarnDev(
+    }).toErrorDev(
       [
         'Warning: The <Provider /> component appears to be a function component that returns a class instance. ' +
           'Change Provider to a class that extends React.Component instead. ' +
           "If you can't use a class try assigning the prototype on the function as a workaround. " +
           '`Provider.prototype = React.Component.prototype`. ' +
           "Don't use an arrow function since it cannot be called with `new` by React.",
-        'Legacy context API has been detected within a strict-mode tree: \n\n' +
+        'Legacy context API has been detected within a strict-mode tree.\n\n' +
+          'The old API will be supported in all 16.x releases, but ' +
+          'applications using it should migrate to the new version.\n\n' +
           'Please update the following components: Provider',
       ],
-      {withoutStack: true},
+      {withoutStack: 1},
     );
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
index c0a9b386e6770..6a0a1f151be1d 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
@@ -22,7 +22,7 @@ describe('ReactIncrementalErrorLogging', () => {
     Scheduler = require('scheduler');
   });
 
-  // Note: in this test file we won't be using toWarnDev() matchers
+  // Note: in this test file we won't be using toErrorDev() matchers
   // because they filter out precisely the messages we want to test for.
   let oldConsoleError;
   beforeEach(() => {
@@ -167,10 +167,12 @@ describe('ReactIncrementalErrorLogging', () => {
         this.setState({step: 1});
       }
       componentWillUnmount() {
-        Scheduler.yieldValue('componentWillUnmount: ' + this.state.step);
+        Scheduler.unstable_yieldValue(
+          'componentWillUnmount: ' + this.state.step,
+        );
       }
       render() {
-        Scheduler.yieldValue('render: ' + this.state.step);
+        Scheduler.unstable_yieldValue('render: ' + this.state.step);
         if (this.state.step > 0) {
           throw new Error('oops');
         }
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
index 282ab0a0787fd..a88cd8e3a89fd 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
@@ -89,6 +89,15 @@ describe('ReactDebugFiberPerf', () => {
       // We don't use the overload with three arguments.
       measure(label, markName) {
         if (markName !== activeMeasure.markName) {
+          // Fail the test.
+          console.error(
+            'Unexpected measure() call: "%s". Active mark is "%s".',
+            markName,
+            activeMeasure.markName,
+          );
+          // This exception will be caught and ignored
+          // because in the real implementation, we don't want
+          // to spam the console due to a React bug.
           throw new Error('Unexpected measure() call.');
         }
         // Step one level up
@@ -127,6 +136,7 @@ describe('ReactDebugFiberPerf', () => {
     require('shared/ReactFeatureFlags').enableProfilerTimer = false;
     require('shared/ReactFeatureFlags').replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
     require('shared/ReactFeatureFlags').debugRenderPhaseSideEffectsForStrictMode = false;
+    require('scheduler/src/SchedulerFeatureFlags').enableProfiling = false;
 
     // Import after the polyfill is set up:
     React = require('react');
@@ -314,12 +324,10 @@ describe('ReactDebugFiberPerf', () => {
       </Parent>,
     );
     addComment('Should not print a warning');
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       [
-        'componentWillMount: Please update the following components ' +
-          'to use componentDidMount instead: NotCascading' +
-          '\n\ncomponentWillReceiveProps: Please update the following components ' +
-          'to use static getDerivedStateFromProps instead: NotCascading',
+        'Using UNSAFE_componentWillMount in strict mode is not recommended',
+        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
       ],
       {withoutStack: true},
     );
@@ -356,16 +364,12 @@ describe('ReactDebugFiberPerf', () => {
     }
     ReactNoop.render(<AllLifecycles />);
     addComment('Mount');
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       [
-        'componentWillMount: Please update the following components ' +
-          'to use componentDidMount instead: AllLifecycles' +
-          '\n\ncomponentWillReceiveProps: Please update the following components ' +
-          'to use static getDerivedStateFromProps instead: AllLifecycles' +
-          '\n\ncomponentWillUpdate: Please update the following components ' +
-          'to use componentDidUpdate instead: AllLifecycles',
-        'Legacy context API has been detected within a strict-mode tree: \n\n' +
-          'Please update the following components: AllLifecycles',
+        'Using UNSAFE_componentWillMount in strict mode is not recommended',
+        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
+        'Using UNSAFE_componentWillUpdate in strict mode is not recommended',
+        'Legacy context API has been detected within a strict-mode tree',
       ],
       {withoutStack: true},
     );
@@ -397,21 +401,21 @@ describe('ReactDebugFiberPerf', () => {
   it('measures deferred work in chunks', () => {
     class A extends React.Component {
       render() {
-        Scheduler.yieldValue('A');
+        Scheduler.unstable_yieldValue('A');
         return <div>{this.props.children}</div>;
       }
     }
 
     class B extends React.Component {
       render() {
-        Scheduler.yieldValue('B');
+        Scheduler.unstable_yieldValue('B');
         return <div>{this.props.children}</div>;
       }
     }
 
     class C extends React.Component {
       render() {
-        Scheduler.yieldValue('C');
+        Scheduler.unstable_yieldValue('C');
         return <div>{this.props.children}</div>;
       }
     }
@@ -595,6 +599,16 @@ describe('ReactDebugFiberPerf', () => {
         }),
     );
 
+    // Initial render
+    ReactNoop.render(
+      <Parent>
+        <React.Suspense fallback={<Spinner />} />
+      </Parent>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getFlameChart()).toMatchSnapshot();
+
+    // Update that suspends
     ReactNoop.render(
       <Parent>
         <React.Suspense fallback={<Spinner />}>
@@ -642,7 +656,7 @@ describe('ReactDebugFiberPerf', () => {
 
   it('warns if an in-progress update is interrupted', () => {
     function Foo() {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return <span />;
     }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.internal.js
index f37578b314ba4..0f953154f7960 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.internal.js
@@ -26,8 +26,8 @@ describe('ReactIncrementalReflection', () => {
   });
 
   function div(...children) {
-    children = children.map(
-      c => (typeof c === 'string' ? {text: c, hidden: false} : c),
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
     );
     return {type: 'div', children, prop: undefined, hidden: false};
   }
@@ -47,10 +47,14 @@ describe('ReactIncrementalReflection', () => {
       }
       UNSAFE_componentWillMount() {
         instances.push(this);
-        Scheduler.yieldValue('componentWillMount: ' + this._isMounted());
+        Scheduler.unstable_yieldValue(
+          'componentWillMount: ' + this._isMounted(),
+        );
       }
       componentDidMount() {
-        Scheduler.yieldValue('componentDidMount: ' + this._isMounted());
+        Scheduler.unstable_yieldValue(
+          'componentDidMount: ' + this._isMounted(),
+        );
       }
       render() {
         return <span />;
@@ -71,9 +75,8 @@ describe('ReactIncrementalReflection', () => {
     // Render the rest and commit the updates.
     expect(() =>
       expect(Scheduler).toFlushAndYield(['componentDidMount: true']),
-    ).toWarnDev(
-      'componentWillMount: Please update the following components ' +
-        'to use componentDidMount instead: Component',
+    ).toErrorDev(
+      'Using UNSAFE_componentWillMount in strict mode is not recommended',
       {withoutStack: true},
     );
 
@@ -91,16 +94,18 @@ describe('ReactIncrementalReflection', () => {
         instances.push(this);
       }
       componentWillUnmount() {
-        Scheduler.yieldValue('componentWillUnmount: ' + this._isMounted());
+        Scheduler.unstable_yieldValue(
+          'componentWillUnmount: ' + this._isMounted(),
+        );
       }
       render() {
-        Scheduler.yieldValue('Component');
+        Scheduler.unstable_yieldValue('Component');
         return <span />;
       }
     }
 
     function Other() {
-      Scheduler.yieldValue('Other');
+      Scheduler.unstable_yieldValue('Other');
       return <span />;
     }
 
@@ -109,9 +114,10 @@ describe('ReactIncrementalReflection', () => {
     }
 
     ReactNoop.render(<Foo mount={true} />);
-    expect(() => expect(Scheduler).toFlushAndYield(['Component'])).toWarnDev(
-      'componentWillMount: Please update the following components ' +
-        'to use componentDidMount instead: Component',
+    expect(() =>
+      expect(Scheduler).toFlushAndYield(['Component']),
+    ).toErrorDev(
+      'Using UNSAFE_componentWillMount in strict mode is not recommended',
       {withoutStack: true},
     );
 
@@ -149,22 +155,37 @@ describe('ReactIncrementalReflection', () => {
     class Component extends React.Component {
       UNSAFE_componentWillMount() {
         classInstance = this;
-        Scheduler.yieldValue(['componentWillMount', findInstance(this)]);
+        Scheduler.unstable_yieldValue([
+          'componentWillMount',
+          findInstance(this),
+        ]);
       }
       componentDidMount() {
-        Scheduler.yieldValue(['componentDidMount', findInstance(this)]);
+        Scheduler.unstable_yieldValue([
+          'componentDidMount',
+          findInstance(this),
+        ]);
       }
       UNSAFE_componentWillUpdate() {
-        Scheduler.yieldValue(['componentWillUpdate', findInstance(this)]);
+        Scheduler.unstable_yieldValue([
+          'componentWillUpdate',
+          findInstance(this),
+        ]);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue(['componentDidUpdate', findInstance(this)]);
+        Scheduler.unstable_yieldValue([
+          'componentDidUpdate',
+          findInstance(this),
+        ]);
       }
       componentWillUnmount() {
-        Scheduler.yieldValue(['componentWillUnmount', findInstance(this)]);
+        Scheduler.unstable_yieldValue([
+          'componentWillUnmount',
+          findInstance(this),
+        ]);
       }
       render() {
-        Scheduler.yieldValue('render');
+        Scheduler.unstable_yieldValue('render');
         return this.props.step < 2 ? (
           <span ref={ref => (this.span = ref)} />
         ) : this.props.step === 2 ? (
@@ -177,7 +198,7 @@ describe('ReactIncrementalReflection', () => {
 
     function Sibling() {
       // Sibling is used to assert that we've rendered past the first component.
-      Scheduler.yieldValue('render sibling');
+      Scheduler.unstable_yieldValue('render sibling');
       return <span />;
     }
 
@@ -200,11 +221,11 @@ describe('ReactIncrementalReflection', () => {
 
     expect(() =>
       expect(Scheduler).toFlushAndYield([['componentDidMount', span()]]),
-    ).toWarnDev(
-      'componentWillMount: Please update the following components ' +
-        'to use componentDidMount instead: Component' +
-        '\n\ncomponentWillUpdate: Please update the following components ' +
-        'to use componentDidUpdate instead: Component',
+    ).toErrorDev(
+      [
+        'Using UNSAFE_componentWillMount in strict mode is not recommended',
+        'Using UNSAFE_componentWillUpdate in strict mode is not recommended',
+      ],
       {withoutStack: true},
     );
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.internal.js
index ddc62c60aa6fa..1ca7d2baba39c 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.internal.js
@@ -90,12 +90,9 @@ describe('ReactIncrementalScheduling', () => {
   it('works on deferred roots in the order they were scheduled', () => {
     const {useEffect} = React;
     function Text({text}) {
-      useEffect(
-        () => {
-          Scheduler.yieldValue(text);
-        },
-        [text],
-      );
+      useEffect(() => {
+        Scheduler.unstable_yieldValue(text);
+      }, [text]);
       return text;
     }
 
@@ -111,30 +108,30 @@ describe('ReactIncrementalScheduling', () => {
     expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:1');
 
     // Schedule deferred work in the reverse order
-    ReactNoop.batchedUpdates(() => {
+    ReactNoop.act(() => {
       ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
       ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
-    });
-    // Ensure it starts in the order it was scheduled
-    expect(Scheduler).toFlushAndYieldThrough(['c:2']);
+      // Ensure it starts in the order it was scheduled
+      expect(Scheduler).toFlushAndYieldThrough(['c:2']);
+
+      expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
+      expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:1');
+      expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
+      // Schedule last bit of work, it will get processed the last
 
-    expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
-    expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:1');
-    expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
-    // Schedule last bit of work, it will get processed the last
-    ReactNoop.batchedUpdates(() => {
       ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
-    });
-    // Keep performing work in the order it was scheduled
-    expect(Scheduler).toFlushAndYieldThrough(['b:2']);
-    expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
-    expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:2');
-    expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
 
-    expect(Scheduler).toFlushAndYieldThrough(['a:2']);
-    expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:2');
-    expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:2');
-    expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
+      // Keep performing work in the order it was scheduled
+      expect(Scheduler).toFlushAndYieldThrough(['b:2']);
+      expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
+      expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:2');
+      expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
+
+      expect(Scheduler).toFlushAndYieldThrough(['a:2']);
+      expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:2');
+      expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:2');
+      expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
+    });
   });
 
   it('schedules sync updates when inside componentDidMount/Update', () => {
@@ -144,24 +141,24 @@ describe('ReactIncrementalScheduling', () => {
       state = {tick: 0};
 
       componentDidMount() {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           'componentDidMount (before setState): ' + this.state.tick,
         );
         this.setState({tick: 1});
         // We're in a batch. Update hasn't flushed yet.
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           'componentDidMount (after setState): ' + this.state.tick,
         );
       }
 
       componentDidUpdate() {
-        Scheduler.yieldValue('componentDidUpdate: ' + this.state.tick);
+        Scheduler.unstable_yieldValue('componentDidUpdate: ' + this.state.tick);
         if (this.state.tick === 2) {
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             'componentDidUpdate (before setState): ' + this.state.tick,
           );
           this.setState({tick: 3});
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             'componentDidUpdate (after setState): ' + this.state.tick,
           );
           // We're in a batch. Update hasn't flushed yet.
@@ -169,7 +166,7 @@ describe('ReactIncrementalScheduling', () => {
       }
 
       render() {
-        Scheduler.yieldValue('render: ' + this.state.tick);
+        Scheduler.unstable_yieldValue('render: ' + this.state.tick);
         instance = this;
         return <span prop={this.state.tick} />;
       }
@@ -209,11 +206,11 @@ describe('ReactIncrementalScheduling', () => {
 
       componentDidMount() {
         ReactNoop.deferredUpdates(() => {
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             'componentDidMount (before setState): ' + this.state.tick,
           );
           this.setState({tick: 1});
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             'componentDidMount (after setState): ' + this.state.tick,
           );
         });
@@ -221,13 +218,15 @@ describe('ReactIncrementalScheduling', () => {
 
       componentDidUpdate() {
         ReactNoop.deferredUpdates(() => {
-          Scheduler.yieldValue('componentDidUpdate: ' + this.state.tick);
+          Scheduler.unstable_yieldValue(
+            'componentDidUpdate: ' + this.state.tick,
+          );
           if (this.state.tick === 2) {
-            Scheduler.yieldValue(
+            Scheduler.unstable_yieldValue(
               'componentDidUpdate (before setState): ' + this.state.tick,
             );
             this.setState({tick: 3});
-            Scheduler.yieldValue(
+            Scheduler.unstable_yieldValue(
               'componentDidUpdate (after setState): ' + this.state.tick,
             );
           }
@@ -235,7 +234,7 @@ describe('ReactIncrementalScheduling', () => {
       }
 
       render() {
-        Scheduler.yieldValue('render: ' + this.state.tick);
+        Scheduler.unstable_yieldValue('render: ' + this.state.tick);
         instance = this;
         return <span prop={this.state.tick} />;
       }
@@ -285,7 +284,7 @@ describe('ReactIncrementalScheduling', () => {
         });
       }
       render() {
-        Scheduler.yieldValue('Foo');
+        Scheduler.unstable_yieldValue('Foo');
         return <span prop={this.state.step} />;
       }
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
index 268233f68c39a..8544542b88937 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
@@ -26,8 +26,8 @@ describe('ReactIncrementalSideEffects', () => {
   });
 
   function div(...children) {
-    children = children.map(
-      c => (typeof c === 'string' ? {text: c, hidden: false} : c),
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
     );
     return {type: 'div', children, prop: undefined, hidden: false};
   }
@@ -75,8 +75,8 @@ describe('ReactIncrementalSideEffects', () => {
           {props.text === 'World'
             ? [<Bar key="a" text={props.text} />, <div key="b" />]
             : props.text === 'Hi'
-              ? [<div key="b" />, <Bar key="a" text={props.text} />]
-              : null}
+            ? [<div key="b" />, <Bar key="a" text={props.text} />]
+            : null}
           <span prop="test" />
         </div>
       );
@@ -375,12 +375,12 @@ describe('ReactIncrementalSideEffects', () => {
 
   it('does not update child nodes if a flush is aborted', () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return <span prop={props.text} />;
     }
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div>
           <div>
@@ -409,12 +409,12 @@ describe('ReactIncrementalSideEffects', () => {
 
   it('preserves a previously rendered node when deprioritized', () => {
     function Middle(props) {
-      Scheduler.yieldValue('Middle');
+      Scheduler.unstable_yieldValue('Middle');
       return <span prop={props.children} />;
     }
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div>
           <div hidden={true}>
@@ -435,7 +435,9 @@ describe('ReactIncrementalSideEffects', () => {
       </div>,
     );
 
-    ReactNoop.render(<Foo text="bar" />, () => Scheduler.yieldValue('commit'));
+    ReactNoop.render(<Foo text="bar" />, () =>
+      Scheduler.unstable_yieldValue('commit'),
+    );
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'commit']);
     expect(ReactNoop.getChildrenAsJSX()).toEqual(
       <div>
@@ -457,7 +459,7 @@ describe('ReactIncrementalSideEffects', () => {
 
   it('can reuse side-effects after being preempted', () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return <span prop={props.children} />;
     }
 
@@ -469,7 +471,7 @@ describe('ReactIncrementalSideEffects', () => {
     );
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div hidden={true}>
           {props.step === 0 ? (
@@ -500,7 +502,7 @@ describe('ReactIncrementalSideEffects', () => {
     // Make a quick update which will schedule low priority work to
     // update the middle content.
     ReactNoop.render(<Foo text="bar" step={1} />, () =>
-      Scheduler.yieldValue('commit'),
+      Scheduler.unstable_yieldValue('commit'),
     );
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'commit', 'Bar']);
 
@@ -540,7 +542,7 @@ describe('ReactIncrementalSideEffects', () => {
         return this.props.children !== nextProps.children;
       }
       render() {
-        Scheduler.yieldValue('Bar');
+        Scheduler.unstable_yieldValue('Bar');
         return <span prop={this.props.children} />;
       }
     }
@@ -550,7 +552,7 @@ describe('ReactIncrementalSideEffects', () => {
         return this.props.step !== nextProps.step;
       }
       render() {
-        Scheduler.yieldValue('Content');
+        Scheduler.unstable_yieldValue('Content');
         return (
           <div>
             <Bar>{this.props.step === 0 ? 'Hi' : 'Hello'}</Bar>
@@ -561,7 +563,7 @@ describe('ReactIncrementalSideEffects', () => {
     }
 
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div hidden={true}>
           <Content step={props.step} text={props.text} />
@@ -619,7 +621,7 @@ describe('ReactIncrementalSideEffects', () => {
 
   it('can update a completed tree before it has a chance to commit', () => {
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return <span prop={props.step} />;
     }
     ReactNoop.render(<Foo step={1} />);
@@ -901,12 +903,12 @@ describe('ReactIncrementalSideEffects', () => {
         this.setState({active: true});
       }
       render() {
-        Scheduler.yieldValue('Bar');
+        Scheduler.unstable_yieldValue('Bar');
         return <span prop={this.state.active ? 'X' : this.props.idx} />;
       }
     }
     function Foo(props) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <div>
           <span prop={props.tick} />
@@ -1199,7 +1201,7 @@ describe('ReactIncrementalSideEffects', () => {
     }
 
     ReactNoop.render(<Foo show={true} />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Warning: Function components cannot be given refs. ' +
         'Attempts to access this ref will fail. ' +
         'Did you mean to use React.forwardRef()?\n\n' +
@@ -1263,7 +1265,7 @@ describe('ReactIncrementalSideEffects', () => {
     }
 
     ReactNoop.render(<Foo />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'Warning: A string ref, "bar", has been found within a strict mode tree.',
     );
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.internal.js
index dc1c3a07c2871..d52bb9cfa026f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.internal.js
@@ -216,7 +216,7 @@ describe('ReactIncrementalTriangle', () => {
       }
       render() {
         if (yieldAfterEachRender) {
-          Scheduler.yieldValue(this);
+          Scheduler.unstable_yieldValue(this);
         }
         const {counter, remainingDepth} = this.props;
         return (
@@ -308,7 +308,7 @@ describe('ReactIncrementalTriangle', () => {
       } else {
         ReactNoop.render(<App remainingDepth={MAX_DEPTH} key={keyCounter++} />);
       }
-      Scheduler.unstable_flushWithoutYielding();
+      Scheduler.unstable_flushAllWithoutAsserting();
       assertConsistentTree();
       return appInstance;
     }
@@ -390,7 +390,7 @@ describe('ReactIncrementalTriangle', () => {
               Scheduler.unstable_flushNumberOfYields(action.unitsOfWork);
               break;
             case FLUSH_ALL:
-              Scheduler.unstable_flushWithoutYielding();
+              Scheduler.unstable_flushAllWithoutAsserting();
               break;
             case STEP:
               ReactNoop.deferredUpdates(() => {
@@ -432,7 +432,7 @@ describe('ReactIncrementalTriangle', () => {
         assertConsistentTree(activeLeafIndices);
       }
       // Flush remaining work
-      Scheduler.unstable_flushWithoutYielding();
+      Scheduler.unstable_flushAllWithoutAsserting();
       assertConsistentTree(activeLeafIndices, expectedCounterAtEnd);
     }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.internal.js
index 26af1eb0014aa..bcb9f7189c05a 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.internal.js
@@ -34,7 +34,7 @@ describe('ReactIncrementalUpdates', () => {
     class Foo extends React.Component {
       state = {};
       componentDidMount() {
-        Scheduler.yieldValue('commit');
+        Scheduler.unstable_yieldValue('commit');
         ReactNoop.deferredUpdates(() => {
           // Has low priority
           this.setState({b: 'b'});
@@ -150,7 +150,7 @@ describe('ReactIncrementalUpdates', () => {
 
     function createUpdate(letter) {
       return () => {
-        Scheduler.yieldValue(letter);
+        Scheduler.unstable_yieldValue(letter);
         return {
           [letter]: letter,
         };
@@ -221,7 +221,7 @@ describe('ReactIncrementalUpdates', () => {
 
     function createUpdate(letter) {
       return () => {
-        Scheduler.yieldValue(letter);
+        Scheduler.unstable_yieldValue(letter);
         return {
           [letter]: letter,
         };
@@ -345,9 +345,10 @@ describe('ReactIncrementalUpdates', () => {
       }
     }
     ReactNoop.render(<Foo />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-      'componentWillReceiveProps: Please update the following components ' +
-        'to use static getDerivedStateFromProps instead: Foo',
+    expect(() =>
+      expect(Scheduler).toFlushWithoutYielding(),
+    ).toErrorDev(
+      'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
       {withoutStack: true},
     );
 
@@ -384,12 +385,11 @@ describe('ReactIncrementalUpdates', () => {
       return {a: 'a'};
     });
 
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
       'An update (setState, replaceState, or forceUpdate) was scheduled ' +
         'from inside an update function. Update functions should be pure, ' +
         'with zero side-effects. Consider using componentDidUpdate or a ' +
         'callback.',
-      {withoutStack: true},
     );
     expect(ops).toEqual([
       // Initial render
@@ -421,10 +421,10 @@ describe('ReactIncrementalUpdates', () => {
       render() {
         foo = this;
         return (
-          <React.Fragment>
+          <>
             <span prop={this.state.value} />
             <Bar />
-          </React.Fragment>
+          </>
         );
       }
     }
@@ -461,9 +461,9 @@ describe('ReactIncrementalUpdates', () => {
     const {useEffect} = React;
 
     function App({label}) {
-      Scheduler.yieldValue('Render: ' + label);
+      Scheduler.unstable_yieldValue('Render: ' + label);
       useEffect(() => {
-        Scheduler.yieldValue('Commit: ' + label);
+        Scheduler.unstable_yieldValue('Commit: ' + label);
       });
       return label;
     }
@@ -476,70 +476,74 @@ describe('ReactIncrementalUpdates', () => {
 
     // First, as a sanity check, assert what happens when four low pri
     // updates in separate batches are all flushed in the same callback
-    ReactNoop.render(<App label="" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="he" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="hell" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="hello" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    // Each update flushes in a separate commit.
-    // Note: This isn't necessarily the ideal behavior. It might be better to
-    // batch all of these updates together. The fact that they don't is an
-    // implementation detail. The important part of this unit test is what
-    // happens when they expire, in which case they really should be batched to
-    // avoid blocking the main thread for a long time.
-    expect(Scheduler).toFlushAndYield([
-      'Render: ',
-      'Commit: ',
-      'Render: he',
-      'Commit: he',
-      'Render: hell',
-      'Commit: hell',
-      'Render: hello',
-      'Commit: hello',
-    ]);
+    ReactNoop.act(() => {
+      ReactNoop.render(<App label="" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="he" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="hell" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="hello" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      // Each update flushes in a separate commit.
+      // Note: This isn't necessarily the ideal behavior. It might be better to
+      // batch all of these updates together. The fact that they don't is an
+      // implementation detail. The important part of this unit test is what
+      // happens when they expire, in which case they really should be batched to
+      // avoid blocking the main thread for a long time.
+      expect(Scheduler).toFlushAndYield([
+        'Render: ',
+        'Commit: ',
+        'Render: he',
+        'Commit: he',
+        'Render: hell',
+        'Commit: hell',
+        'Render: hello',
+        'Commit: hello',
+      ]);
+    });
 
-    // Now do the same thing over again, but this time, expire all the updates
-    // instead of flushing them normally.
-    ReactNoop.render(<App label="" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="go" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="good" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.render(<App label="goodbye" />);
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    // All the updates should render and commit in a single batch.
-    Scheduler.advanceTime(10000);
-    expect(Scheduler).toHaveYielded(['Render: goodbye']);
-    // Passive effect
-    expect(Scheduler).toFlushAndYield(['Commit: goodbye']);
+    ReactNoop.act(() => {
+      // Now do the same thing over again, but this time, expire all the updates
+      // instead of flushing them normally.
+      ReactNoop.render(<App label="" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="go" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="good" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.render(<App label="goodbye" />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      // All the updates should render and commit in a single batch.
+      Scheduler.unstable_advanceTime(10000);
+      expect(Scheduler).toHaveYielded(['Render: goodbye']);
+      // Passive effect
+      expect(Scheduler).toFlushAndYield(['Commit: goodbye']);
+    });
   });
 
   it('flushes all expired updates in a single batch across multiple roots', () => {
@@ -547,9 +551,9 @@ describe('ReactIncrementalUpdates', () => {
     const {useEffect} = React;
 
     function App({label}) {
-      Scheduler.yieldValue('Render: ' + label);
+      Scheduler.unstable_yieldValue('Render: ' + label);
       useEffect(() => {
-        Scheduler.yieldValue('Commit: ' + label);
+        Scheduler.unstable_yieldValue('Commit: ' + label);
       });
       return label;
     }
@@ -559,92 +563,264 @@ describe('ReactIncrementalUpdates', () => {
         ReactNoop.renderToRootWithID(null, 'other-root');
       });
     }
+    ReactNoop.act(() => {
+      // First, as a sanity check, assert what happens when four low pri
+      // updates in separate batches are all flushed in the same callback
+      ReactNoop.renderToRootWithID(<App label="" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="he" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="he" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="hell" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="hell" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="hello" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="hello" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      // Each update flushes in a separate commit.
+      // Note: This isn't necessarily the ideal behavior. It might be better to
+      // batch all of these updates together. The fact that they don't is an
+      // implementation detail. The important part of this unit test is what
+      // happens when they expire, in which case they really should be batched to
+      // avoid blocking the main thread for a long time.
+      expect(Scheduler).toFlushAndYield([
+        'Render: ',
+        'Commit: ',
+        'Render: ',
+        'Commit: ',
+        'Render: he',
+        'Commit: he',
+        'Render: he',
+        'Commit: he',
+        'Render: hell',
+        'Commit: hell',
+        'Render: hell',
+        'Commit: hell',
+        'Render: hello',
+        'Commit: hello',
+        'Render: hello',
+        'Commit: hello',
+      ]);
+    });
 
-    // First, as a sanity check, assert what happens when four low pri
-    // updates in separate batches are all flushed in the same callback
-    ReactNoop.renderToRootWithID(<App label="" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="he" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="he" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="hell" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="hell" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="hello" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="hello" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    // Each update flushes in a separate commit.
-    // Note: This isn't necessarily the ideal behavior. It might be better to
-    // batch all of these updates together. The fact that they don't is an
-    // implementation detail. The important part of this unit test is what
-    // happens when they expire, in which case they really should be batched to
-    // avoid blocking the main thread for a long time.
-    expect(Scheduler).toFlushAndYield([
-      'Render: ',
-      'Commit: ',
-      'Render: ',
-      'Commit: ',
-      'Render: he',
-      'Commit: he',
-      'Render: he',
-      'Commit: he',
-      'Render: hell',
-      'Commit: hell',
-      'Render: hell',
-      'Commit: hell',
-      'Render: hello',
-      'Commit: hello',
-      'Render: hello',
-      'Commit: hello',
+    ReactNoop.act(() => {
+      // Now do the same thing over again, but this time, expire all the updates
+      // instead of flushing them normally.
+      ReactNoop.renderToRootWithID(<App label="" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="go" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="go" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="good" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="good" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      ReactNoop.renderToRootWithID(<App label="goodbye" />, 'a');
+      ReactNoop.renderToRootWithID(<App label="goodbye" />, 'b');
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
+      interrupt();
+
+      // All the updates should render and commit in a single batch.
+      Scheduler.unstable_advanceTime(10000);
+      expect(Scheduler).toHaveYielded([
+        'Render: goodbye',
+        'Commit: goodbye',
+        'Render: goodbye',
+      ]);
+      // Passive effect
+      expect(Scheduler).toFlushAndYield(['Commit: goodbye']);
+    });
+  });
+
+  it('when rebasing, does not exclude updates that were already committed, regardless of priority', async () => {
+    const {useState, useLayoutEffect} = React;
+
+    let pushToLog;
+    function App() {
+      const [log, setLog] = useState('');
+      pushToLog = msg => {
+        setLog(prevLog => prevLog + msg);
+      };
+
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Committed: ' + log);
+        if (log === 'B') {
+          // Right after B commits, schedule additional updates.
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => {
+              pushToLog('C');
+            },
+          );
+          setLog(prevLog => prevLog + 'D');
+        }
+      }, [log]);
+
+      return log;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['Committed: ']);
+    expect(root).toMatchRenderedOutput('');
+
+    await ReactNoop.act(async () => {
+      pushToLog('A');
+      Scheduler.unstable_runWithPriority(
+        Scheduler.unstable_UserBlockingPriority,
+        () => {
+          pushToLog('B');
+        },
+      );
+    });
+    expect(Scheduler).toHaveYielded([
+      // A and B are pending. B is higher priority, so we'll render that first.
+      'Committed: B',
+      // Because A comes first in the queue, we're now in rebase mode. B must
+      // be rebased on top of A. Also, in a layout effect, we received two new
+      // updates: C and D. C is user-blocking and D is synchronous.
+      //
+      // First render the synchronous update. What we're testing here is that
+      // B *is not dropped* even though it has lower than sync priority. That's
+      // because we already committed it. However, this render should not
+      // include C, because that update wasn't already committed.
+      'Committed: BD',
+      'Committed: BCD',
+      'Committed: ABCD',
     ]);
+    expect(root).toMatchRenderedOutput('ABCD');
+  });
 
-    // Now do the same thing over again, but this time, expire all the updates
-    // instead of flushing them normally.
-    ReactNoop.renderToRootWithID(<App label="" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="go" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="go" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="good" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="good" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    ReactNoop.renderToRootWithID(<App label="goodbye" />, 'a');
-    ReactNoop.renderToRootWithID(<App label="goodbye" />, 'b');
-    Scheduler.advanceTime(1000);
-    expect(Scheduler).toFlushAndYieldThrough(['Render: ']);
-    interrupt();
-
-    // All the updates should render and commit in a single batch.
-    Scheduler.advanceTime(10000);
+  it('when rebasing, does not exclude updates that were already committed, regardless of priority (classes)', async () => {
+    let pushToLog;
+    class App extends React.Component {
+      state = {log: ''};
+      pushToLog = msg => {
+        this.setState(prevState => ({log: prevState.log + msg}));
+      };
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('Committed: ' + this.state.log);
+        if (this.state.log === 'B') {
+          // Right after B commits, schedule additional updates.
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => {
+              this.pushToLog('C');
+            },
+          );
+          this.pushToLog('D');
+        }
+      }
+      render() {
+        pushToLog = this.pushToLog;
+        return this.state.log;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('');
+
+    await ReactNoop.act(async () => {
+      pushToLog('A');
+      Scheduler.unstable_runWithPriority(
+        Scheduler.unstable_UserBlockingPriority,
+        () => {
+          pushToLog('B');
+        },
+      );
+    });
     expect(Scheduler).toHaveYielded([
-      'Render: goodbye',
-      'Commit: goodbye',
-      'Render: goodbye',
+      // A and B are pending. B is higher priority, so we'll render that first.
+      'Committed: B',
+      // Because A comes first in the queue, we're now in rebase mode. B must
+      // be rebased on top of A. Also, in a layout effect, we received two new
+      // updates: C and D. C is user-blocking and D is synchronous.
+      //
+      // First render the synchronous update. What we're testing here is that
+      // B *is not dropped* even though it has lower than sync priority. That's
+      // because we already committed it. However, this render should not
+      // include C, because that update wasn't already committed.
+      'Committed: BD',
+      'Committed: BCD',
+      'Committed: ABCD',
     ]);
-    // Passive effect
-    expect(Scheduler).toFlushAndYield(['Commit: goodbye']);
+    expect(root).toMatchRenderedOutput('ABCD');
+  });
+
+  it("base state of update queue is initialized to its fiber's memoized state", async () => {
+    // This test is very weird because it tests an implementation detail but
+    // is tested in terms of public APIs. When it was originally written, the
+    // test failed because the update queue was initialized to the state of
+    // the alternate fiber.
+    let app;
+    class App extends React.Component {
+      state = {prevProp: 'A', count: 0};
+      static getDerivedStateFromProps(props, state) {
+        // Add 100 whenever the label prop changes. The prev label is stored
+        // in state. If the state is dropped incorrectly, we'll fail to detect
+        // prop changes.
+        if (props.prop !== state.prevProp) {
+          return {
+            prevProp: props.prop,
+            count: state.count + 100,
+          };
+        }
+        return null;
+      }
+      render() {
+        app = this;
+        return this.state.count;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App prop="A" />);
+    });
+    expect(root).toMatchRenderedOutput('0');
+
+    // Changing the prop causes the count to increase by 100
+    await ReactNoop.act(async () => {
+      root.render(<App prop="B" />);
+    });
+    expect(root).toMatchRenderedOutput('100');
+
+    // Now increment the count by 1 with a state update. And, in the same
+    // batch, change the prop back to its original value.
+    await ReactNoop.act(async () => {
+      root.render(<App prop="A" />);
+      app.setState(state => ({count: state.count + 1}));
+    });
+    // There were two total prop changes, plus an increment.
+    expect(root).toMatchRenderedOutput('201');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 195f98fd7a53a..d4b2055607059 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -21,7 +21,7 @@ describe('ReactLazy', () => {
   });
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return props.text;
   }
 
@@ -46,7 +46,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hi');
 
     await Promise.resolve();
 
@@ -136,13 +136,13 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('FooBar');
 
     jest.advanceTimersByTime(100);
     await promiseForFoo;
 
-    expect(Scheduler).toFlushAndYield(['Foo', 'Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(Scheduler).toFlushAndYield(['Foo']);
+    expect(root).not.toMatchRenderedOutput('FooBar');
 
     jest.advanceTimersByTime(500);
     await promiseForBar;
@@ -165,7 +165,7 @@ describe('ReactLazy', () => {
       },
     );
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hi');
 
     await Promise.resolve();
 
@@ -193,7 +193,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hi');
 
     try {
       await Promise.resolve();
@@ -205,10 +205,10 @@ describe('ReactLazy', () => {
   it('mount and reorder', async () => {
     class Child extends React.Component {
       componentDidMount() {
-        Scheduler.yieldValue('Did mount: ' + this.props.label);
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue('Did update: ' + this.props.label);
+        Scheduler.unstable_yieldValue('Did update: ' + this.props.label);
       }
       render() {
         return <Text text={this.props.label} />;
@@ -239,7 +239,7 @@ describe('ReactLazy', () => {
     });
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('AB');
 
     await LazyChildA;
     await LazyChildB;
@@ -280,7 +280,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hi');
 
     await Promise.resolve();
 
@@ -299,12 +299,12 @@ describe('ReactLazy', () => {
 
   it('resolves defaultProps without breaking memoization', async () => {
     function LazyImpl(props) {
-      Scheduler.yieldValue('Lazy');
+      Scheduler.unstable_yieldValue('Lazy');
       return (
-        <React.Fragment>
+        <>
           <Text text={props.siblingText} />
           {props.children}
-        </React.Fragment>
+        </>
       );
     }
     LazyImpl.defaultProps = {siblingText: 'Sibling'};
@@ -330,7 +330,7 @@ describe('ReactLazy', () => {
       },
     );
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('SiblingA');
 
     await Promise.resolve();
 
@@ -349,38 +349,42 @@ describe('ReactLazy', () => {
       state = {};
 
       static getDerivedStateFromProps(props) {
-        Scheduler.yieldValue(`getDerivedStateFromProps: ${props.text}`);
+        Scheduler.unstable_yieldValue(
+          `getDerivedStateFromProps: ${props.text}`,
+        );
         return null;
       }
 
       constructor(props) {
         super(props);
-        Scheduler.yieldValue(`constructor: ${this.props.text}`);
+        Scheduler.unstable_yieldValue(`constructor: ${this.props.text}`);
       }
 
       componentDidMount() {
-        Scheduler.yieldValue(`componentDidMount: ${this.props.text}`);
+        Scheduler.unstable_yieldValue(`componentDidMount: ${this.props.text}`);
       }
 
       componentDidUpdate(prevProps) {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `componentDidUpdate: ${prevProps.text} -> ${this.props.text}`,
         );
       }
 
       componentWillUnmount() {
-        Scheduler.yieldValue(`componentWillUnmount: ${this.props.text}`);
+        Scheduler.unstable_yieldValue(
+          `componentWillUnmount: ${this.props.text}`,
+        );
       }
 
       shouldComponentUpdate(nextProps) {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `shouldComponentUpdate: ${this.props.text} -> ${nextProps.text}`,
         );
         return true;
       }
 
       getSnapshotBeforeUpdate(prevProps) {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `getSnapshotBeforeUpdate: ${prevProps.text} -> ${this.props.text}`,
         );
         return null;
@@ -403,7 +407,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('A1');
 
     await Promise.resolve();
 
@@ -449,20 +453,20 @@ describe('ReactLazy', () => {
       state = {};
 
       UNSAFE_componentWillMount() {
-        Scheduler.yieldValue(`UNSAFE_componentWillMount: ${this.props.text}`);
+        Scheduler.unstable_yieldValue(
+          `UNSAFE_componentWillMount: ${this.props.text}`,
+        );
       }
 
       UNSAFE_componentWillUpdate(nextProps) {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           `UNSAFE_componentWillUpdate: ${this.props.text} -> ${nextProps.text}`,
         );
       }
 
       UNSAFE_componentWillReceiveProps(nextProps) {
-        Scheduler.yieldValue(
-          `UNSAFE_componentWillReceiveProps: ${this.props.text} -> ${
-            nextProps.text
-          }`,
+        Scheduler.unstable_yieldValue(
+          `UNSAFE_componentWillReceiveProps: ${this.props.text} -> ${nextProps.text}`,
         );
       }
 
@@ -512,14 +516,14 @@ describe('ReactLazy', () => {
 
   it('resolves defaultProps on the outer wrapper but warns', async () => {
     function T(props) {
-      Scheduler.yieldValue(props.inner + ' ' + props.outer);
+      Scheduler.unstable_yieldValue(props.inner + ' ' + props.outer);
       return props.inner + ' ' + props.outer;
     }
     T.defaultProps = {inner: 'Hi'};
     const LazyText = lazy(() => fakeImport(T));
     expect(() => {
       LazyText.defaultProps = {outer: 'Bye'};
-    }).toWarnDev(
+    }).toErrorDev(
       'React.lazy(...): It is not supported to assign `defaultProps` to ' +
         'a lazy component import. Either specify them where the component ' +
         'is defined, or create a wrapping component around it.',
@@ -536,7 +540,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hi Bye');
 
     await Promise.resolve();
     expect(Scheduler).toFlushAndYield(['Hi Bye']);
@@ -572,7 +576,6 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
 
     await Promise.resolve();
     root.update(
@@ -600,7 +603,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Hello');
 
     await Promise.resolve();
     root.update(
@@ -621,7 +624,7 @@ describe('ReactLazy', () => {
     const LazyText = lazy(() => fakeImport(Text));
     expect(() => {
       LazyText.propTypes = {hello: () => {}};
-    }).toWarnDev(
+    }).toErrorDev(
       'React.lazy(...): It is not supported to assign `propTypes` to ' +
         'a lazy component import. Either specify them where the component ' +
         'is defined, or create a wrapping component around it.',
@@ -633,7 +636,7 @@ describe('ReactLazy', () => {
     const LazyAdd = lazy(() => fakeImport(Add));
     expect(() => {
       LazyAdd.propTypes = {};
-    }).toWarnDev(
+    }).toErrorDev(
       'React.lazy(...): It is not supported to assign `propTypes` to ' +
         'a lazy component import. Either specify them where the component ' +
         'is defined, or create a wrapping component around it.',
@@ -650,14 +653,13 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('22');
 
     // Mount
     await Promise.resolve();
     expect(() => {
-      expect(Scheduler);
-      Scheduler.flushAll();
-    }).toWarnDev([
+      Scheduler.unstable_flushAll();
+    }).toErrorDev([
       'Invalid prop `inner` of type `string` supplied to `Add`, expected `number`.',
     ]);
     expect(root).toMatchRenderedOutput('22');
@@ -670,7 +672,7 @@ describe('ReactLazy', () => {
         </Suspense>,
       );
       expect(Scheduler).toFlushWithoutYielding();
-    }).toWarnDev(
+    }).toErrorDev(
       'Invalid prop `inner` of type `boolean` supplied to `Add`, expected `number`.',
     );
     expect(root).toMatchRenderedOutput('0');
@@ -836,13 +838,13 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('Inner default text');
 
     // Mount
     await Promise.resolve();
     expect(() => {
       expect(Scheduler).toFlushAndYield(['Inner default text']);
-    }).toWarnDev(
+    }).toErrorDev(
       'The prop `text` is marked as required in `T`, but its value is `undefined`',
     );
     expect(root).toMatchRenderedOutput('Inner default text');
@@ -855,7 +857,7 @@ describe('ReactLazy', () => {
         </Suspense>,
       );
       expect(Scheduler).toFlushAndYield([null]);
-    }).toWarnDev(
+    }).toErrorDev(
       'The prop `text` is marked as required in `T`, but its value is `null`',
     );
     expect(root).toMatchRenderedOutput(null);
@@ -863,7 +865,7 @@ describe('ReactLazy', () => {
 
   it('includes lazy-loaded component in warning stack', async () => {
     const LazyFoo = lazy(() => {
-      Scheduler.yieldValue('Started loading');
+      Scheduler.unstable_yieldValue('Started loading');
       const Foo = props => <div>{[<Text text="A" />, <Text text="B" />]}</div>;
       return fakeImport(Foo);
     });
@@ -878,13 +880,13 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput(<div>AB</div>);
 
     await Promise.resolve();
 
     expect(() => {
       expect(Scheduler).toFlushAndYield(['A', 'B']);
-    }).toWarnDev('    in Text (at **)\n' + '    in Foo (at **)');
+    }).toErrorDev('    in Text (at **)\n' + '    in Foo (at **)');
     expect(root).toMatchRenderedOutput(<div>AB</div>);
   });
 
@@ -906,7 +908,7 @@ describe('ReactLazy', () => {
       }
       return fakeImport(
         React.forwardRef((props, ref) => {
-          Scheduler.yieldValue('forwardRef');
+          Scheduler.unstable_yieldValue('forwardRef');
           return <Bar ref={ref} />;
         }),
       );
@@ -924,7 +926,7 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('FooBar');
     expect(ref.current).toBe(null);
 
     await Promise.resolve();
@@ -952,7 +954,7 @@ describe('ReactLazy', () => {
       },
     );
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('4');
 
     // Mount
     await Promise.resolve();
@@ -1036,7 +1038,7 @@ describe('ReactLazy', () => {
       },
     );
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
+    expect(root).not.toMatchRenderedOutput('4');
 
     // Mount
     await Promise.resolve();
@@ -1069,7 +1071,7 @@ describe('ReactLazy', () => {
     });
 
     const ref = React.createRef();
-    const root = ReactTestRenderer.create(
+    ReactTestRenderer.create(
       <Suspense fallback={<Text text="Loading..." />}>
         <LazyFoo ref={ref} />
       </Suspense>,
@@ -1079,10 +1081,9 @@ describe('ReactLazy', () => {
     );
 
     expect(Scheduler).toFlushAndYield(['Loading...']);
-    expect(root).toMatchRenderedOutput(null);
     await Promise.resolve();
     expect(() => {
       expect(Scheduler).toFlushAndYield([]);
-    }).toWarnDev('Function components cannot be given refs');
+    }).toErrorDev('Function components cannot be given refs');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
index b7e9d7e4e8800..25d4ac83a9afc 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
@@ -36,7 +36,7 @@ describe('memo', () => {
   }
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
   }
 
@@ -56,7 +56,7 @@ describe('memo', () => {
       return <App ref={() => {}} />;
     }
     ReactNoop.render(<Outer />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev([
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
       'Warning: Function components cannot be given refs. Attempts to access ' +
         'this ref will fail.',
     ]);
@@ -74,7 +74,7 @@ describe('memo', () => {
       return <App ref={() => {}} />;
     }
     ReactNoop.render(<Outer />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev([
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
       'Warning: Function components cannot be given refs. Attempts to access ' +
         'this ref will fail.',
     ]);
@@ -184,7 +184,7 @@ describe('memo', () => {
           return <Text text={count} />;
         }
         Counter = memo(Counter, (oldProps, newProps) => {
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             `Old count: ${oldProps.count}, New count: ${newProps.count}`,
           );
           return oldProps.count === newProps.count;
@@ -311,7 +311,9 @@ describe('memo', () => {
       });
 
       it('warns if the first argument is undefined', () => {
-        expect(() => memo()).toWarnDev(
+        expect(() =>
+          memo(),
+        ).toErrorDev(
           'memo: The first argument must be a component. Instead ' +
             'received: undefined',
           {withoutStack: true},
@@ -319,7 +321,9 @@ describe('memo', () => {
       });
 
       it('warns if the first argument is null', () => {
-        expect(() => memo(null)).toWarnDev(
+        expect(() =>
+          memo(null),
+        ).toErrorDev(
           'memo: The first argument must be a component. Instead ' +
             'received: null',
           {withoutStack: true},
@@ -337,7 +341,7 @@ describe('memo', () => {
         expect(() => {
           ReactNoop.render(<Fn inner="2" />);
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev(
+        }).toErrorDev(
           'Invalid prop `inner` of type `string` supplied to `FnInner`, expected `number`.',
         );
 
@@ -345,7 +349,7 @@ describe('memo', () => {
         expect(() => {
           ReactNoop.render(<Fn inner={false} />);
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev(
+        }).toErrorDev(
           'Invalid prop `inner` of type `boolean` supplied to `FnInner`, expected `number`.',
         );
       });
@@ -361,7 +365,7 @@ describe('memo', () => {
         expect(() => {
           ReactNoop.render(<Fn outer="3" />);
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev(
+        }).toErrorDev(
           // Outer props are checked in createElement
           'Invalid prop `outer` of type `string` supplied to `FnInner`, expected `number`.',
         );
@@ -370,7 +374,7 @@ describe('memo', () => {
         expect(() => {
           ReactNoop.render(<Fn outer={false} />);
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev(
+        }).toErrorDev(
           // Outer props are checked in createElement
           'Invalid prop `outer` of type `boolean` supplied to `FnInner`, expected `number`.',
         );
@@ -397,7 +401,7 @@ describe('memo', () => {
         expect(() => {
           ReactNoop.render(<Outer inner="2" middle="3" outer="4" />);
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev([
+        }).toErrorDev([
           'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.',
           'Invalid prop `middle` of type `string` supplied to `Inner`, expected `number`.',
           'Invalid prop `inner` of type `string` supplied to `Inner`, expected `number`.',
@@ -409,7 +413,7 @@ describe('memo', () => {
             <Outer inner={false} middle={false} outer={false} />,
           );
           expect(Scheduler).toFlushWithoutYielding();
-        }).toWarnDev([
+        }).toErrorDev([
           'Invalid prop `outer` of type `boolean` supplied to `Inner`, expected `number`.',
           'Invalid prop `middle` of type `boolean` supplied to `Inner`, expected `number`.',
           'Invalid prop `inner` of type `boolean` supplied to `Inner`, expected `number`.',
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
index e04b75dc593a1..03c5ad4eec660 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
@@ -30,7 +30,7 @@ describe('ReactNewContext', () => {
   });
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} />;
   }
 
@@ -56,10 +56,10 @@ describe('ReactNewContext', () => {
         let contextValue;
         expect(() => {
           contextValue = useContext(Context, observedBits);
-        }).toWarnDev(
+        }).toErrorDev(
           observedBits !== undefined
             ? 'useContext() second argument is reserved for future use in React. ' +
-              `Passing it is not supported. You passed: ${observedBits}.`
+                `Passing it is not supported. You passed: ${observedBits}.`
             : [],
         );
         const render = props.children;
@@ -72,10 +72,10 @@ describe('ReactNewContext', () => {
       let contextValue;
       expect(() => {
         contextValue = useContext(Context, observedBits);
-      }).toWarnDev(
+      }).toErrorDev(
         observedBits !== undefined
           ? 'useContext() second argument is reserved for future use in React. ' +
-            `Passing it is not supported. You passed: ${observedBits}.`
+              `Passing it is not supported. You passed: ${observedBits}.`
           : [],
       );
       const render = props.children;
@@ -88,10 +88,10 @@ describe('ReactNewContext', () => {
       let contextValue;
       expect(() => {
         contextValue = useContext(Context, observedBits);
-      }).toWarnDev(
+      }).toErrorDev(
         observedBits !== undefined
           ? 'useContext() second argument is reserved for future use in React. ' +
-            `Passing it is not supported. You passed: ${observedBits}.`
+              `Passing it is not supported. You passed: ${observedBits}.`
           : [],
       );
       const render = props.children;
@@ -160,7 +160,7 @@ describe('ReactNewContext', () => {
         const ContextConsumer = getConsumer(Context);
 
         function Provider(props) {
-          Scheduler.yieldValue('Provider');
+          Scheduler.unstable_yieldValue('Provider');
           return (
             <Context.Provider value={props.value}>
               {props.children}
@@ -169,11 +169,11 @@ describe('ReactNewContext', () => {
         }
 
         function Consumer(props) {
-          Scheduler.yieldValue('Consumer');
+          Scheduler.unstable_yieldValue('Consumer');
           return (
             <ContextConsumer>
               {value => {
-                Scheduler.yieldValue('Consumer render prop');
+                Scheduler.unstable_yieldValue('Consumer render prop');
                 return <span prop={'Result: ' + value} />;
               }}
             </ContextConsumer>
@@ -185,13 +185,13 @@ describe('ReactNewContext', () => {
             return false;
           }
           render() {
-            Scheduler.yieldValue('Indirection');
+            Scheduler.unstable_yieldValue('Indirection');
             return this.props.children;
           }
         }
 
         function App(props) {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Provider value={props.value}>
               <Indirection>
@@ -229,7 +229,7 @@ describe('ReactNewContext', () => {
         const ContextConsumer = getConsumer(Context);
 
         function Provider(props) {
-          Scheduler.yieldValue('Provider');
+          Scheduler.unstable_yieldValue('Provider');
           return (
             <Context.Provider value={props.value}>
               {props.children}
@@ -238,11 +238,11 @@ describe('ReactNewContext', () => {
         }
 
         function Consumer(props) {
-          Scheduler.yieldValue('Consumer');
+          Scheduler.unstable_yieldValue('Consumer');
           return (
             <ContextConsumer>
               {value => {
-                Scheduler.yieldValue('Consumer render prop');
+                Scheduler.unstable_yieldValue('Consumer render prop');
                 return <span prop={'Result: ' + value} />;
               }}
             </ContextConsumer>
@@ -254,13 +254,13 @@ describe('ReactNewContext', () => {
             return false;
           }
           render() {
-            Scheduler.yieldValue('Indirection');
+            Scheduler.unstable_yieldValue('Indirection');
             return this.props.children;
           }
         }
 
         function App(props) {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Provider value={props.value}>
               <Indirection>
@@ -361,7 +361,7 @@ describe('ReactNewContext', () => {
         };
 
         ReactNoop.render(
-          <React.Fragment>
+          <>
             <BarContext.Provider value={{value: 'bar-updated'}}>
               <BarConsumer>
                 {({value}) => <Verify actual={value} expected="bar-updated" />}
@@ -382,7 +382,7 @@ describe('ReactNewContext', () => {
             <BarConsumer>
               {({value}) => <Verify actual={value} expected="bar-initial" />}
             </BarConsumer>
-          </React.Fragment>,
+          </>,
         );
         expect(Scheduler).toFlushWithoutYielding();
       });
@@ -463,7 +463,7 @@ describe('ReactNewContext', () => {
         const ContextConsumer = getConsumer(Context);
 
         function Provider(props) {
-          Scheduler.yieldValue('Provider');
+          Scheduler.unstable_yieldValue('Provider');
           return (
             <Context.Provider value={props.value}>
               {props.children}
@@ -472,11 +472,11 @@ describe('ReactNewContext', () => {
         }
 
         function Consumer(props) {
-          Scheduler.yieldValue('Consumer');
+          Scheduler.unstable_yieldValue('Consumer');
           return (
             <ContextConsumer>
               {value => {
-                Scheduler.yieldValue('Consumer render prop');
+                Scheduler.unstable_yieldValue('Consumer render prop');
                 return <span prop={'Result: ' + value} />;
               }}
             </ContextConsumer>
@@ -488,13 +488,13 @@ describe('ReactNewContext', () => {
             return false;
           }
           render() {
-            Scheduler.yieldValue('Indirection');
+            Scheduler.unstable_yieldValue('Indirection');
             return this.props.children;
           }
         }
 
         function App(props) {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Provider value={props.value}>
               <Indirection>
@@ -559,7 +559,7 @@ describe('ReactNewContext', () => {
 
         function App(props) {
           return (
-            <React.Fragment>
+            <>
               <Context.Provider value="Does not unwind">
                 <ErrorBoundary>
                   <Context.Provider value="Unwinds after BadRender throws">
@@ -568,7 +568,7 @@ describe('ReactNewContext', () => {
                 </ErrorBoundary>
                 <Consumer />
               </Context.Provider>
-            </React.Fragment>
+            </>
           );
         }
 
@@ -605,7 +605,7 @@ describe('ReactNewContext', () => {
           return (
             <Consumer unstable_observedBits={0b01}>
               {value => {
-                Scheduler.yieldValue('Foo');
+                Scheduler.unstable_yieldValue('Foo');
                 return <span prop={'Foo: ' + value.foo} />;
               }}
             </Consumer>
@@ -616,7 +616,7 @@ describe('ReactNewContext', () => {
           return (
             <Consumer unstable_observedBits={0b10}>
               {value => {
-                Scheduler.yieldValue('Bar');
+                Scheduler.unstable_yieldValue('Bar');
                 return <span prop={'Bar: ' + value.bar} />;
               }}
             </Consumer>
@@ -704,12 +704,12 @@ describe('ReactNewContext', () => {
           return (
             <Consumer unstable_observedBits={0b01}>
               {value => {
-                Scheduler.yieldValue('Foo');
+                Scheduler.unstable_yieldValue('Foo');
                 return (
-                  <React.Fragment>
+                  <>
                     <span prop={'Foo: ' + value.foo} />
                     {props.children && props.children()}
-                  </React.Fragment>
+                  </>
                 );
               }}
             </Consumer>
@@ -720,12 +720,12 @@ describe('ReactNewContext', () => {
           return (
             <Consumer unstable_observedBits={0b10}>
               {value => {
-                Scheduler.yieldValue('Bar');
+                Scheduler.unstable_yieldValue('Bar');
                 return (
-                  <React.Fragment>
+                  <>
                     <span prop={'Bar: ' + value.bar} />
                     {props.children && props.children()}
-                  </React.Fragment>
+                  </>
                 );
               }}
             </Consumer>
@@ -808,12 +808,10 @@ describe('ReactNewContext', () => {
         class Child extends React.Component {
           state = {step: 0};
           render() {
-            Scheduler.yieldValue('Child');
+            Scheduler.unstable_yieldValue('Child');
             return (
               <span
-                prop={`Context: ${this.props.context}, Step: ${
-                  this.state.step
-                }`}
+                prop={`Context: ${this.props.context}, Step: ${this.state.step}`}
               />
             );
           }
@@ -824,7 +822,7 @@ describe('ReactNewContext', () => {
             <Context.Provider value={props.value}>
               <Consumer>
                 {value => {
-                  Scheduler.yieldValue('Consumer render prop');
+                  Scheduler.unstable_yieldValue('Consumer render prop');
                   return <Child ref={inst => (child = inst)} context={value} />;
                 }}
               </Consumer>
@@ -847,36 +845,36 @@ describe('ReactNewContext', () => {
         const Consumer = getConsumer(Context);
 
         function renderChildValue(value) {
-          Scheduler.yieldValue('Consumer');
+          Scheduler.unstable_yieldValue('Consumer');
           return <span prop={value} />;
         }
 
         function ChildWithInlineRenderCallback() {
-          Scheduler.yieldValue('ChildWithInlineRenderCallback');
+          Scheduler.unstable_yieldValue('ChildWithInlineRenderCallback');
           // Note: we are intentionally passing an inline arrow. Don't refactor.
           return <Consumer>{value => renderChildValue(value)}</Consumer>;
         }
 
         function ChildWithCachedRenderCallback() {
-          Scheduler.yieldValue('ChildWithCachedRenderCallback');
+          Scheduler.unstable_yieldValue('ChildWithCachedRenderCallback');
           return <Consumer>{renderChildValue}</Consumer>;
         }
 
         class PureIndirection extends React.PureComponent {
           render() {
-            Scheduler.yieldValue('PureIndirection');
+            Scheduler.unstable_yieldValue('PureIndirection');
             return (
-              <React.Fragment>
+              <>
                 <ChildWithInlineRenderCallback />
                 <ChildWithCachedRenderCallback />
-              </React.Fragment>
+              </>
             );
           }
         }
 
         class App extends React.Component {
           render() {
-            Scheduler.yieldValue('App');
+            Scheduler.unstable_yieldValue('App');
             return (
               <Context.Provider value={this.props.value}>
                 <PureIndirection />
@@ -988,7 +986,7 @@ describe('ReactNewContext', () => {
           };
 
           render() {
-            Scheduler.yieldValue('App');
+            Scheduler.unstable_yieldValue('App');
             return (
               <Context.Provider value={this.state.step}>
                 <StaticContent />
@@ -1001,12 +999,12 @@ describe('ReactNewContext', () => {
         class StaticContent extends React.PureComponent {
           render() {
             return (
-              <React.Fragment>
-                <React.Fragment>
+              <>
+                <>
                   <span prop="static 1" />
                   <span prop="static 2" />
-                </React.Fragment>
-              </React.Fragment>
+                </>
+              </>
             );
           }
         }
@@ -1016,7 +1014,7 @@ describe('ReactNewContext', () => {
             return (
               <ContextConsumer>
                 {value => {
-                  Scheduler.yieldValue('Consumer');
+                  Scheduler.unstable_yieldValue('Consumer');
                   return <span prop={value} />;
                 }}
               </ContextConsumer>
@@ -1068,7 +1066,7 @@ describe('ReactNewContext', () => {
 
       // Update
       ReactNoop.render(<App value={2} />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
         'calculateChangedBits: Expected the return value to be a 31-bit ' +
           'integer. Instead received: 4294967295',
       );
@@ -1079,7 +1077,7 @@ describe('ReactNewContext', () => {
       const Context = React.createContext(0);
 
       function Foo(props) {
-        Scheduler.yieldValue('Foo');
+        Scheduler.unstable_yieldValue('Foo');
         return null;
       }
 
@@ -1119,14 +1117,14 @@ describe('ReactNewContext', () => {
       const Context = React.createContext(0);
 
       function Child() {
-        Scheduler.yieldValue('Child');
+        Scheduler.unstable_yieldValue('Child');
         return <span prop="Child" />;
       }
 
       const children = <Child />;
 
       function App(props) {
-        Scheduler.yieldValue('App');
+        Scheduler.unstable_yieldValue('App');
         return (
           <Context.Provider value={props.value}>{children}</Context.Provider>
         );
@@ -1150,7 +1148,7 @@ describe('ReactNewContext', () => {
       const Context = React.createContext(0);
 
       function Child() {
-        Scheduler.yieldValue('Child');
+        Scheduler.unstable_yieldValue('Child');
         return <span prop="Child" />;
       }
 
@@ -1165,7 +1163,7 @@ describe('ReactNewContext', () => {
           return {legacyValue: this.state.legacyValue};
         }
         render() {
-          Scheduler.yieldValue('LegacyProvider');
+          Scheduler.unstable_yieldValue('LegacyProvider');
           return this.props.children;
         }
       }
@@ -1173,7 +1171,7 @@ describe('ReactNewContext', () => {
       class App extends React.Component {
         state = {value: 1};
         render() {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Context.Provider value={this.state.value}>
               {this.props.children}
@@ -1195,8 +1193,10 @@ describe('ReactNewContext', () => {
       );
       expect(() => {
         expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
-      }).toWarnDev(
-        'Legacy context API has been detected within a strict-mode tree: \n\n' +
+      }).toErrorDev(
+        'Legacy context API has been detected within a strict-mode tree.\n\n' +
+          'The old API will be supported in all 16.x releases, but applications ' +
+          'using it should migrate to the new version.\n\n' +
           'Please update the following components: LegacyProvider',
         {withoutStack: true},
       );
@@ -1299,12 +1299,12 @@ describe('ReactNewContext', () => {
         };
 
         renderConsumer = context => {
-          Scheduler.yieldValue('App#renderConsumer');
+          Scheduler.unstable_yieldValue('App#renderConsumer');
           return <span prop={this.state.text} />;
         };
 
         render() {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Context.Provider value={this.props.value}>
               <Consumer>{this.renderConsumer}</Consumer>
@@ -1439,12 +1439,12 @@ describe('ReactNewContext', () => {
         };
 
         renderConsumer = context => {
-          Scheduler.yieldValue('App#renderConsumer');
+          Scheduler.unstable_yieldValue('App#renderConsumer');
           return <span prop={this.state.text} />;
         };
 
         render() {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Context.Provider value={this.props.value}>
               <Consumer>{this.renderConsumer}</Consumer>
@@ -1479,15 +1479,10 @@ describe('ReactNewContext', () => {
       }
 
       ReactNoop.render(<Cls />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
-        [
-          'Context can only be read while React is rendering',
-          'Cannot update during an existing state transition',
-        ],
-        {
-          withoutStack: 1,
-        },
-      );
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
+        'Context can only be read while React is rendering',
+        'Cannot update during an existing state transition',
+      ]);
     });
   });
 
@@ -1498,7 +1493,7 @@ describe('ReactNewContext', () => {
         return [Context].map(useContext);
       }
       ReactNoop.render(<Foo />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
         'useContext() second argument is reserved for future ' +
           'use in React. Passing it is not supported. ' +
           'You passed: 0.\n\n' +
@@ -1532,7 +1527,7 @@ describe('ReactNewContext', () => {
         return useContext(Context.Consumer);
       }
       ReactNoop.render(<Foo />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
         'Calling useContext(Context.Consumer) is not supported, may cause bugs, ' +
           'and will be removed in a future major release. ' +
           'Did you mean to call useContext(Context) instead?',
@@ -1546,7 +1541,7 @@ describe('ReactNewContext', () => {
         return null;
       }
       ReactNoop.render(<Foo />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
         'Calling useContext(Context.Provider) is not supported. ' +
           'Did you mean to call useContext(Context) instead?',
       );
@@ -1571,12 +1566,12 @@ describe('ReactNewContext', () => {
         };
 
         renderConsumer = context => {
-          Scheduler.yieldValue('App#renderConsumer');
+          Scheduler.unstable_yieldValue('App#renderConsumer');
           return <span prop={this.state.text} />;
         };
 
         render() {
-          Scheduler.yieldValue('App');
+          Scheduler.unstable_yieldValue('App');
           return (
             <Context.Provider value={this.props.value}>
               <Consumer>{this.renderConsumer}</Consumer>
@@ -1620,7 +1615,6 @@ describe('ReactNewContext', () => {
   });
 
   describe('fuzz test', () => {
-    const Fragment = React.Fragment;
     const contextKeys = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
 
     const FLUSH_ALL = 'FLUSH_ALL';
@@ -1699,7 +1693,7 @@ describe('ReactNewContext', () => {
           return false;
         }
         render() {
-          Scheduler.yieldValue();
+          Scheduler.unstable_yieldValue();
           if (this.props.depth >= this.props.maxDepth) {
             return null;
           }
@@ -1712,14 +1706,14 @@ describe('ReactNewContext', () => {
             return (
               <Context.Consumer key={i}>
                 {value => (
-                  <Fragment>
+                  <>
                     <span prop={`${randomKey}:${value}`} />
                     <ConsumerTree
                       rand={this.props.rand}
                       depth={this.props.depth + 1}
                       maxDepth={this.props.maxDepth}
                     />
-                  </Fragment>
+                  </>
                 )}
               </Context.Consumer>
             );
@@ -1777,7 +1771,7 @@ describe('ReactNewContext', () => {
         actions.forEach(action => {
           switch (action.type) {
             case FLUSH_ALL:
-              Scheduler.unstable_flushWithoutYielding();
+              Scheduler.unstable_flushAllWithoutAsserting();
               break;
             case FLUSH:
               Scheduler.unstable_flushNumberOfYields(action.unitsOfWork);
@@ -1795,7 +1789,7 @@ describe('ReactNewContext', () => {
           assertConsistentTree();
         });
 
-        Scheduler.unstable_flushWithoutYielding();
+        Scheduler.unstable_flushAllWithoutAsserting();
         assertConsistentTree(finalExpectedValues);
       }
 
@@ -1835,20 +1829,20 @@ Context fuzz tester error! Copy and paste the following line into the test suite
 
     function Component() {
       return (
-        <React.Fragment>
+        <>
           <BarContext.Provider value={{value: 'bar-updated'}}>
             <BarConsumer>
               {({value}) => <div actual={value} expected="bar-updated" />}
             </BarConsumer>
           </BarContext.Provider>
-        </React.Fragment>
+        </>
       );
     }
 
     expect(() => {
       ReactNoop.render(<Component />);
       expect(Scheduler).toFlushWithoutYielding();
-    }).toWarnDev(
+    }).toErrorDev(
       'Rendering <Context> directly is not supported and will be removed in ' +
         'a future major release. Did you mean to render <Context.Consumer> instead?',
     );
@@ -1862,13 +1856,13 @@ Context fuzz tester error! Copy and paste the following line into the test suite
 
     function Component() {
       return (
-        <React.Fragment>
+        <>
           <BarContext.Provider value={{value: 'bar-updated'}}>
             <BarContext.Consumer>
               {({value}) => <div actual={value} expected="bar-updated" />}
             </BarContext.Consumer>
           </BarContext.Provider>
-        </React.Fragment>
+        </>
       );
     }
 
@@ -1882,20 +1876,20 @@ Context fuzz tester error! Copy and paste the following line into the test suite
 
     function Component() {
       return (
-        <React.Fragment>
+        <>
           <BarContext.Provider value={{value: 'bar-updated'}}>
             <BarConsumer.Consumer.Consumer>
               {({value}) => <div actual={value} expected="bar-updated" />}
             </BarConsumer.Consumer.Consumer>
           </BarContext.Provider>
-        </React.Fragment>
+        </>
       );
     }
 
     expect(() => {
       ReactNoop.render(<Component />);
       expect(Scheduler).toFlushWithoutYielding();
-    }).toWarnDev(
+    }).toErrorDev(
       'Rendering <Context.Consumer.Consumer> is not supported and will be removed in ' +
         'a future major release. Did you mean to render <Context.Consumer> instead?',
     );
@@ -1906,20 +1900,20 @@ Context fuzz tester error! Copy and paste the following line into the test suite
 
     function Component() {
       return (
-        <React.Fragment>
+        <>
           <BarContext.Consumer.Provider value={{value: 'bar-updated'}}>
             <BarContext.Consumer>
               {({value}) => <div actual={value} expected="bar-updated" />}
             </BarContext.Consumer>
           </BarContext.Consumer.Provider>
-        </React.Fragment>
+        </>
       );
     }
 
     expect(() => {
       ReactNoop.render(<Component />);
       expect(Scheduler).toFlushWithoutYielding();
-    }).toWarnDev(
+    }).toErrorDev(
       'Rendering <Context.Consumer.Provider> is not supported and will be removed in ' +
         'a future major release. Did you mean to render <Context.Provider> instead?',
     );
diff --git a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
index 04f7febe843e7..38be78044cc8e 100644
--- a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
@@ -39,9 +39,9 @@ describe('ReactNoop.act()', () => {
     function App() {
       let [ctr, setCtr] = React.useState(0);
       async function someAsyncFunction() {
-        Scheduler.yieldValue('stage 1');
+        Scheduler.unstable_yieldValue('stage 1');
         await null;
-        Scheduler.yieldValue('stage 2');
+        Scheduler.unstable_yieldValue('stage 2');
         await null;
         setCtr(1);
       }
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
index 3c5209dfc388a..46ccfea5c2061 100644
--- a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
@@ -39,8 +39,8 @@ describe('ReactPersistent', () => {
   }
 
   function div(...children) {
-    children = children.map(
-      c => (typeof c === 'string' ? {text: c, hidden: false} : c),
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
     );
     return {type: 'div', children, prop: undefined, hidden: false};
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.internal.js
index dec4bfbfc57b1..943f07ad063e3 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.internal.js
@@ -55,9 +55,22 @@ describe('ReactSchedulerIntegration', () => {
     }
   }
 
+  it('flush sync has correct priority', () => {
+    function ReadPriority() {
+      Scheduler.unstable_yieldValue(
+        'Priority: ' + getCurrentPriorityAsString(),
+      );
+      return null;
+    }
+    ReactNoop.flushSync(() => ReactNoop.render(<ReadPriority />));
+    expect(Scheduler).toHaveYielded(['Priority: Immediate']);
+  });
+
   it('has correct priority during rendering', () => {
     function ReadPriority() {
-      Scheduler.yieldValue('Priority: ' + getCurrentPriorityAsString());
+      Scheduler.unstable_yieldValue(
+        'Priority: ' + getCurrentPriorityAsString(),
+      );
       return null;
     }
     ReactNoop.render(<ReadPriority />);
@@ -76,17 +89,19 @@ describe('ReactSchedulerIntegration', () => {
 
   it('has correct priority when continuing a render after yielding', () => {
     function ReadPriority() {
-      Scheduler.yieldValue('Priority: ' + getCurrentPriorityAsString());
+      Scheduler.unstable_yieldValue(
+        'Priority: ' + getCurrentPriorityAsString(),
+      );
       return null;
     }
 
     runWithPriority(UserBlockingPriority, () => {
       ReactNoop.render(
-        <React.Fragment>
+        <>
           <ReadPriority />
           <ReadPriority />
           <ReadPriority />
-        </React.Fragment>,
+        </>,
       );
     });
 
@@ -106,9 +121,11 @@ describe('ReactSchedulerIntegration', () => {
   it('layout effects have immediate priority', () => {
     const {useLayoutEffect} = React;
     function ReadPriority() {
-      Scheduler.yieldValue('Render priority: ' + getCurrentPriorityAsString());
+      Scheduler.unstable_yieldValue(
+        'Render priority: ' + getCurrentPriorityAsString(),
+      );
       useLayoutEffect(() => {
-        Scheduler.yieldValue(
+        Scheduler.unstable_yieldValue(
           'Layout priority: ' + getCurrentPriorityAsString(),
         );
       });
@@ -122,37 +139,181 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
-  it('passive effects have the same priority as render', () => {
+  it('passive effects never have higher than normal priority', async () => {
     const {useEffect} = React;
-    function ReadPriority() {
-      Scheduler.yieldValue('Render priority: ' + getCurrentPriorityAsString());
+    function ReadPriority({step}) {
+      Scheduler.unstable_yieldValue(
+        `Render priority: ${getCurrentPriorityAsString()}`,
+      );
       useEffect(() => {
-        Scheduler.yieldValue(
-          'Passive priority: ' + getCurrentPriorityAsString(),
+        Scheduler.unstable_yieldValue(
+          `Effect priority: ${getCurrentPriorityAsString()}`,
         );
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `Effect clean-up priority: ${getCurrentPriorityAsString()}`,
+          );
+        };
       });
       return null;
     }
 
-    ReactNoop.render(<ReadPriority />);
-    expect(Scheduler).toFlushAndYield([
-      'Render priority: Normal',
-      'Passive priority: Normal',
+    // High priority renders spawn effects at normal priority
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(ImmediatePriority, () => {
+        ReactNoop.render(<ReadPriority />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render priority: Immediate',
+      'Effect priority: Normal',
+    ]);
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
+        ReactNoop.render(<ReadPriority />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render priority: UserBlocking',
+      'Effect clean-up priority: Normal',
+      'Effect priority: Normal',
     ]);
 
-    runWithPriority(UserBlockingPriority, () => {
+    // Renders lower than normal priority spawn effects at the same priority
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(IdlePriority, () => {
+        ReactNoop.render(<ReadPriority />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render priority: Idle',
+      'Effect clean-up priority: Idle',
+      'Effect priority: Idle',
+    ]);
+  });
+
+  it('passive effects have correct priority even if they are flushed early', async () => {
+    const {useEffect} = React;
+    function ReadPriority({step}) {
+      Scheduler.unstable_yieldValue(
+        `Render priority [step ${step}]: ${getCurrentPriorityAsString()}`,
+      );
+      useEffect(() => {
+        Scheduler.unstable_yieldValue(
+          `Effect priority [step ${step}]: ${getCurrentPriorityAsString()}`,
+        );
+      });
+      return null;
+    }
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<ReadPriority step={1} />);
+      Scheduler.unstable_flushUntilNextPaint();
+      expect(Scheduler).toHaveYielded(['Render priority [step 1]: Normal']);
+      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
+        ReactNoop.render(<ReadPriority step={2} />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'Effect priority [step 1]: Normal',
+      'Render priority [step 2]: UserBlocking',
+      'Effect priority [step 2]: Normal',
+    ]);
+  });
+
+  it('passive effect clean-up functions have correct priority even when component is deleted', async () => {
+    const {useEffect} = React;
+    function ReadPriority({step}) {
+      useEffect(() => {
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `Effect clean-up priority: ${getCurrentPriorityAsString()}`,
+          );
+        };
+      });
+      return null;
+    }
+
+    await ReactNoop.act(async () => {
       ReactNoop.render(<ReadPriority />);
     });
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(ImmediatePriority, () => {
+        ReactNoop.render(null);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Normal']);
 
-    expect(Scheduler).toFlushAndYield([
-      'Render priority: UserBlocking',
-      'Passive priority: UserBlocking',
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<ReadPriority />);
+    });
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
+        ReactNoop.render(null);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Normal']);
+
+    // Renders lower than normal priority spawn effects at the same priority
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<ReadPriority />);
+    });
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_runWithPriority(IdlePriority, () => {
+        ReactNoop.render(null);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Idle']);
+  });
+
+  it('passive effects are called before Normal-pri scheduled in layout effects', async () => {
+    const {useEffect, useLayoutEffect} = React;
+    function Effects({step}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Layout Effect');
+        Scheduler.unstable_scheduleCallback(NormalPriority, () =>
+          Scheduler.unstable_yieldValue(
+            'Scheduled Normal Callback from Layout Effect',
+          ),
+        );
+      });
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Passive Effect');
+      });
+      return null;
+    }
+    function CleanupEffect() {
+      useLayoutEffect(() => () => {
+        Scheduler.unstable_yieldValue('Cleanup Layout Effect');
+        Scheduler.unstable_scheduleCallback(NormalPriority, () =>
+          Scheduler.unstable_yieldValue(
+            'Scheduled Normal Callback from Cleanup Layout Effect',
+          ),
+        );
+      });
+      return null;
+    }
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<CleanupEffect />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<Effects />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cleanup Layout Effect',
+      'Layout Effect',
+      'Passive Effect',
+      // These callbacks should be scheduled after the passive effects.
+      'Scheduled Normal Callback from Cleanup Layout Effect',
+      'Scheduled Normal Callback from Layout Effect',
     ]);
   });
 
   it('after completing a level of work, infers priority of the next batch based on its expiration time', () => {
     function App({label}) {
-      Scheduler.yieldValue(`${label} [${getCurrentPriorityAsString()}]`);
+      Scheduler.unstable_yieldValue(
+        `${label} [${getCurrentPriorityAsString()}]`,
+      );
       return label;
     }
 
@@ -166,6 +327,84 @@ describe('ReactSchedulerIntegration', () => {
     expect(Scheduler).toFlushAndYield(['A [UserBlocking]', 'B [Normal]']);
   });
 
-  // TODO
-  it.skip('passive effects have render priority even if they are flushed early', () => {});
+  it('requests a paint after committing', () => {
+    const scheduleCallback = Scheduler.unstable_scheduleCallback;
+
+    const root = ReactNoop.createRoot();
+    root.render('Initial');
+    Scheduler.unstable_flushAll();
+
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('B'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('C'));
+
+    // Schedule a React render. React will request a paint after committing it.
+    root.render('Update');
+
+    // Advance time just to be sure the next tasks have lower priority
+    Scheduler.unstable_advanceTime(2000);
+
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('D'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('E'));
+
+    // Flush everything up to the next paint. Should yield after the
+    // React commit.
+    Scheduler.unstable_flushUntilNextPaint();
+    expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
+  });
+
+  it('idle updates are not blocked by offscreen work', async () => {
+    function Text({text}) {
+      Scheduler.unstable_yieldValue(text);
+      return text;
+    }
+
+    function App({label}) {
+      return (
+        <>
+          <Text text={`Visible: ` + label} />
+          <div hidden={true}>
+            <Text text={`Hidden: ` + label} />
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App label="A" />);
+
+      // Commit the visible content
+      expect(Scheduler).toFlushUntilNextPaint(['Visible: A']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          Visible: A
+          <div hidden={true} />
+        </>,
+      );
+
+      // Before the hidden content has a chance to render, schedule an
+      // idle update
+      runWithPriority(IdlePriority, () => {
+        root.render(<App label="B" />);
+      });
+
+      // The next commit should only include the visible content
+      expect(Scheduler).toFlushUntilNextPaint(['Visible: B']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          Visible: B
+          <div hidden={true} />
+        </>,
+      );
+    });
+
+    // The hidden content commits later
+    expect(Scheduler).toHaveYielded(['Hidden: B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Visible: B<div hidden={true}>Hidden: B</div>
+      </>,
+    );
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
new file mode 100644
index 0000000000000..8144a11be827c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -0,0 +1,438 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {createEventTarget} from 'dom-event-testing-library';
+
+let React;
+let ReactFeatureFlags;
+
+describe('ReactScope', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableScopeAPI = true;
+    ReactFeatureFlags.enableDeprecatedFlareAPI = true;
+    React = require('react');
+  });
+
+  describe('ReactDOM', () => {
+    let ReactDOM;
+    let container;
+
+    beforeEach(() => {
+      ReactDOM = require('react-dom');
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    it('DO_NOT_USE_queryAllNodes() works as intended', () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+            <a ref={aRef}>A</a>
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <a ref={aRef}>A</a>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+          </TestScope>
+        );
+      }
+
+      ReactDOM.render(<Test toggle={true} />, container);
+      let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+      ReactDOM.render(<Test toggle={false} />, container);
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
+      ReactDOM.render(null, container);
+      expect(scopeRef.current).toBe(null);
+    });
+
+    it('DO_NOT_USE_queryAllNodes() provides the correct host instance', () => {
+      const testScopeQuery = (type, props) => type === 'div';
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+            <a ref={aRef}>A</a>
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <a ref={aRef}>A</a>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+          </TestScope>
+        );
+      }
+
+      ReactDOM.render(<Test toggle={true} />, container);
+      let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current]);
+      let filterQuery = (type, props, instance) =>
+        instance === spanRef.current || testScopeQuery(type, props);
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current]);
+      filterQuery = (type, props, instance) =>
+        [spanRef.current, aRef.current].includes(instance) ||
+        testScopeQuery(type, props);
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+      ReactDOM.render(<Test toggle={false} />, container);
+      filterQuery = (type, props, instance) =>
+        [spanRef.current, aRef.current].includes(instance) ||
+        testScopeQuery(type, props);
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
+      expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
+      ReactDOM.render(null, container);
+      expect(scopeRef.current).toBe(null);
+    });
+
+    it('DO_NOT_USE_queryFirstNode() works as intended', () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+            <a ref={aRef}>A</a>
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <a ref={aRef}>A</a>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+          </TestScope>
+        );
+      }
+
+      ReactDOM.render(<Test toggle={true} />, container);
+      let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(divRef.current);
+      ReactDOM.render(<Test toggle={false} />, container);
+      node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(aRef.current);
+      ReactDOM.render(null, container);
+      expect(scopeRef.current).toBe(null);
+    });
+
+    it('containsNode() works as intended', () => {
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+      const outerSpan = React.createRef();
+      const emRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <div>
+            <span ref={outerSpan}>SPAN</span>
+            <TestScope ref={scopeRef}>
+              <div ref={divRef}>DIV</div>
+              <span ref={spanRef}>SPAN</span>
+              <a ref={aRef}>A</a>
+            </TestScope>
+            <em ref={emRef}>EM</em>
+          </div>
+        ) : (
+          <div>
+            <TestScope ref={scopeRef}>
+              <a ref={aRef}>A</a>
+              <div ref={divRef}>DIV</div>
+              <span ref={spanRef}>SPAN</span>
+              <em ref={emRef}>EM</em>
+            </TestScope>
+            <span ref={outerSpan}>SPAN</span>
+          </div>
+        );
+      }
+
+      ReactDOM.render(<Test toggle={true} />, container);
+      expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+      ReactDOM.render(<Test toggle={false} />, container);
+      expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(true);
+      ReactDOM.render(<Test toggle={true} />, container);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+    });
+
+    it('scopes support server-side rendering and hydration', () => {
+      const TestScope = React.unstable_createScope();
+      const ReactDOMServer = require('react-dom/server');
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return (
+          <div>
+            <TestScope ref={scopeRef}>
+              <div ref={divRef}>DIV</div>
+              <span ref={spanRef}>SPAN</span>
+              <a ref={aRef}>A</a>
+            </TestScope>
+            <div>Outside content!</div>
+          </div>
+        );
+      }
+      const html = ReactDOMServer.renderToString(<Test />);
+      expect(html).toBe(
+        '<div data-reactroot=""><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
+      );
+      container.innerHTML = html;
+      ReactDOM.hydrate(<Test />, container);
+      const testScopeQuery = (type, props) => true;
+      const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+    });
+
+    it('event responders can be attached to scopes', () => {
+      let onKeyDown = jest.fn();
+      const TestScope = React.unstable_createScope();
+      const ref = React.createRef();
+      const useKeyboard = require('react-interactions/events/keyboard')
+        .useKeyboard;
+      let Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+        });
+        return (
+          <TestScope DEPRECATED_flareListeners={listener}>
+            <div ref={ref} />
+          </TestScope>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      let target = createEventTarget(ref.current);
+      target.keydown({key: 'Q'});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+
+      onKeyDown = jest.fn();
+      Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+        });
+        return (
+          <div>
+            <TestScope DEPRECATED_flareListeners={listener}>
+              <div ref={ref} />
+            </TestScope>
+          </div>
+        );
+      };
+      ReactDOM.render(<Component />, container);
+
+      target = createEventTarget(ref.current);
+      target.keydown({key: 'Q'});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    it('getChildContextValues() works as intended', () => {
+      const TestContext = React.createContext();
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <TestContext.Provider value={1} />
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <TestContext.Provider value={1} />
+            <TestContext.Provider value={2} />
+          </TestScope>
+        );
+      }
+
+      ReactDOM.render(<Test toggle={true} />, container);
+      let nodes = scopeRef.current.getChildContextValues(TestContext);
+      expect(nodes).toEqual([1]);
+      ReactDOM.render(<Test toggle={false} />, container);
+      nodes = scopeRef.current.getChildContextValues(TestContext);
+      expect(nodes).toEqual([1, 2]);
+      ReactDOM.render(null, container);
+      expect(scopeRef.current).toBe(null);
+    });
+  });
+
+  describe('ReactTestRenderer', () => {
+    let ReactTestRenderer;
+
+    beforeEach(() => {
+      ReactTestRenderer = require('react-test-renderer');
+    });
+
+    it('DO_NOT_USE_queryAllNodes() works as intended', () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+            <a ref={aRef}>A</a>
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <a ref={aRef}>A</a>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+          </TestScope>
+        );
+      }
+
+      const renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+        createNodeMock: element => {
+          return element;
+        },
+      });
+      let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+      renderer.update(<Test toggle={false} />);
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
+    });
+
+    it('DO_NOT_USE_queryFirstNode() works as intended', () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <TestScope ref={scopeRef}>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+            <a ref={aRef}>A</a>
+          </TestScope>
+        ) : (
+          <TestScope ref={scopeRef}>
+            <a ref={aRef}>A</a>
+            <div ref={divRef}>DIV</div>
+            <span ref={spanRef}>SPAN</span>
+          </TestScope>
+        );
+      }
+
+      const renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+        createNodeMock: element => {
+          return element;
+        },
+      });
+      let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(divRef.current);
+      renderer.update(<Test toggle={false} />);
+      node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(aRef.current);
+    });
+
+    it('containsNode() works as intended', () => {
+      const TestScope = React.unstable_createScope();
+      const scopeRef = React.createRef();
+      const divRef = React.createRef();
+      const spanRef = React.createRef();
+      const aRef = React.createRef();
+      const outerSpan = React.createRef();
+      const emRef = React.createRef();
+
+      function Test({toggle}) {
+        return toggle ? (
+          <div>
+            <span ref={outerSpan}>SPAN</span>
+            <TestScope ref={scopeRef}>
+              <div ref={divRef}>DIV</div>
+              <span ref={spanRef}>SPAN</span>
+              <a ref={aRef}>A</a>
+            </TestScope>
+            <em ref={emRef}>EM</em>
+          </div>
+        ) : (
+          <div>
+            <TestScope ref={scopeRef}>
+              <a ref={aRef}>A</a>
+              <div ref={divRef}>DIV</div>
+              <span ref={spanRef}>SPAN</span>
+              <em ref={emRef}>EM</em>
+            </TestScope>
+            <span ref={outerSpan}>SPAN</span>
+          </div>
+        );
+      }
+
+      const renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+        createNodeMock: element => {
+          return element;
+        },
+      });
+      expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+      renderer.update(<Test toggle={false} />);
+      expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
+      expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(true);
+      renderer.update(<Test toggle={true} />);
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index d7a3b894290dc..0a1d209d41f52 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -28,51 +28,58 @@ describe('ReactSuspense', () => {
 
     Suspense = React.Suspense;
 
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      let listeners = null;
-      let status = 'pending';
-      let value = null;
-      return {
-        then(resolve, reject) {
-          switch (status) {
-            case 'pending': {
-              if (listeners === null) {
-                listeners = [{resolve, reject}];
-                setTimeout(() => {
-                  if (textResourceShouldFail) {
-                    Scheduler.yieldValue(`Promise rejected [${text}]`);
-                    status = 'rejected';
-                    value = new Error('Failed to load: ' + text);
-                    listeners.forEach(listener => listener.reject(value));
-                  } else {
-                    Scheduler.yieldValue(`Promise resolved [${text}]`);
-                    status = 'resolved';
-                    value = text;
-                    listeners.forEach(listener => listener.resolve(value));
-                  }
-                }, ms);
-              } else {
-                listeners.push({resolve, reject});
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        let listeners = null;
+        let status = 'pending';
+        let value = null;
+        return {
+          then(resolve, reject) {
+            switch (status) {
+              case 'pending': {
+                if (listeners === null) {
+                  listeners = [{resolve, reject}];
+                  setTimeout(() => {
+                    if (textResourceShouldFail) {
+                      Scheduler.unstable_yieldValue(
+                        `Promise rejected [${text}]`,
+                      );
+                      status = 'rejected';
+                      value = new Error('Failed to load: ' + text);
+                      listeners.forEach(listener => listener.reject(value));
+                    } else {
+                      Scheduler.unstable_yieldValue(
+                        `Promise resolved [${text}]`,
+                      );
+                      status = 'resolved';
+                      value = text;
+                      listeners.forEach(listener => listener.resolve(value));
+                    }
+                  }, ms);
+                } else {
+                  listeners.push({resolve, reject});
+                }
+                break;
+              }
+              case 'resolved': {
+                resolve(value);
+                break;
+              }
+              case 'rejected': {
+                reject(value);
+                break;
               }
-              break;
-            }
-            case 'resolved': {
-              resolve(value);
-              break;
-            }
-            case 'rejected': {
-              reject(value);
-              break;
             }
-          }
-        },
-      };
-    }, ([text, ms]) => text);
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
     textResourceShouldFail = false;
   });
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return props.text;
   }
 
@@ -80,13 +87,13 @@ describe('ReactSuspense', () => {
     const text = props.text;
     try {
       TextResource.read([props.text, props.ms]);
-      Scheduler.yieldValue(text);
+      Scheduler.unstable_yieldValue(text);
       return text;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend! [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error! [${text}]`);
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
       }
       throw promise;
     }
@@ -94,26 +101,36 @@ describe('ReactSuspense', () => {
 
   it('suspends rendering and continues later', () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return props.children;
     }
 
-    function Foo() {
-      Scheduler.yieldValue('Foo');
+    function Foo({renderBar}) {
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <Bar>
-            <AsyncText text="A" ms={100} />
-            <Text text="B" />
-          </Bar>
+          {renderBar ? (
+            <Bar>
+              <AsyncText text="A" ms={100} />
+              <Text text="B" />
+            </Bar>
+          ) : null}
         </Suspense>
       );
     }
 
+    // Render an empty shell
     const root = ReactTestRenderer.create(<Foo />, {
       unstable_isConcurrent: true,
     });
 
+    expect(Scheduler).toFlushAndYield(['Foo']);
+    expect(root).toMatchRenderedOutput(null);
+
+    // Navigate the shell to now render the child content.
+    // This should suspend.
+    root.update(<Foo renderBar={true} />);
+
     expect(Scheduler).toFlushAndYield([
       'Foo',
       'Bar',
@@ -142,14 +159,14 @@ describe('ReactSuspense', () => {
   it('suspends siblings and later recovers each independently', () => {
     // Render two sibling Suspense components
     const root = ReactTestRenderer.create(
-      <React.Fragment>
+      <>
         <Suspense fallback={<Text text="Loading A..." />}>
           <AsyncText text="A" ms={5000} />
         </Suspense>
         <Suspense fallback={<Text text="Loading B..." />}>
           <AsyncText text="B" ms={6000} />
         </Suspense>
-      </React.Fragment>,
+      </>,
       {
         unstable_isConcurrent: true,
       },
@@ -161,17 +178,12 @@ describe('ReactSuspense', () => {
       'Suspend! [B]',
       'Loading B...',
     ]);
-    expect(root).toMatchRenderedOutput(null);
-
-    // Advance time by enough to timeout both components and commit their placeholders
-    jest.advanceTimersByTime(4000);
-    expect(Scheduler).toFlushWithoutYielding();
     expect(root).toMatchRenderedOutput('Loading A...Loading B...');
 
     // Advance time by enough that the first Suspense's promise resolves and
     // switches back to the normal view. The second Suspense should still
     // show the placeholder
-    jest.advanceTimersByTime(1000);
+    jest.advanceTimersByTime(5000);
     // TODO: Should we throw if you forget to call toHaveYielded?
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A']);
@@ -206,45 +218,333 @@ describe('ReactSuspense', () => {
 
     function Async() {
       if (!didResolve) {
-        Scheduler.yieldValue('Suspend!');
+        Scheduler.unstable_yieldValue('Suspend!');
         throw thenable;
       }
-      Scheduler.yieldValue('Async');
+      Scheduler.unstable_yieldValue('Async');
       return 'Async';
     }
 
     const root = ReactTestRenderer.create(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <Async />
-        <Text text="Sibling" />
-      </Suspense>,
+      <>
+        <Suspense fallback={<Text text="Loading..." />} />
+        <Text text="Initial" />
+      </>,
       {
         unstable_isConcurrent: true,
       },
     );
+    expect(Scheduler).toFlushAndYield(['Initial']);
+    expect(root).toMatchRenderedOutput('Initial');
 
-    expect(Scheduler).toFlushAndYieldThrough(['Suspend!']);
+    // The update will suspend.
+    root.update(
+      <>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+        <Text text="After Suspense" />
+        <Text text="Sibling" />
+      </>,
+    );
+
+    // Yield past the Suspense boundary but don't complete the last sibling.
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Suspend!',
+      'Loading...',
+      'After Suspense',
+    ]);
 
     // The promise resolves before the current render phase has completed
     resolveThenable();
     expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Initial');
 
     // Start over from the root, instead of continuing.
     expect(Scheduler).toFlushAndYield([
       // Async renders again *before* Sibling
       'Async',
+      'After Suspense',
       'Sibling',
     ]);
-    expect(root).toMatchRenderedOutput('AsyncSibling');
+    expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');
   });
 
+  it(
+    'interrupts current render if something already suspended with a ' +
+      "delay, and then subsequently there's a lower priority update",
+    () => {
+      const root = ReactTestRenderer.create(
+        <>
+          <Suspense fallback={<Text text="Loading..." />} />
+          <Text text="Initial" />
+        </>,
+        {
+          unstable_isConcurrent: true,
+        },
+      );
+      expect(Scheduler).toFlushAndYield(['Initial']);
+      expect(root).toMatchRenderedOutput('Initial');
+
+      // The update will suspend.
+      root.update(
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" ms={2000} />
+          </Suspense>
+          <Text text="After Suspense" />
+          <Text text="Sibling" />
+        </>,
+      );
+
+      // Yield past the Suspense boundary but don't complete the last sibling.
+      expect(Scheduler).toFlushAndYieldThrough([
+        'Suspend! [Async]',
+        'Loading...',
+        'After Suspense',
+      ]);
+
+      // Receives a lower priority update before the current render phase
+      // has completed.
+      Scheduler.unstable_advanceTime(1000);
+      root.update(
+        <>
+          <Suspense fallback={<Text text="Loading..." />} />
+          <Text text="Updated" />
+        </>,
+      );
+      expect(Scheduler).toHaveYielded([]);
+      expect(root).toMatchRenderedOutput('Initial');
+
+      // Render the update, instead of continuing
+      expect(Scheduler).toFlushAndYield(['Updated']);
+      expect(root).toMatchRenderedOutput('Updated');
+    },
+  );
+
+  it(
+    'interrupts current render when something suspends with a ' +
+      "delay and we've already skipped over a lower priority update in " +
+      'a parent',
+    () => {
+      function interrupt() {
+        // React has a heuristic to batch all updates that occur within the same
+        // event. This is a trick to circumvent that heuristic.
+        ReactTestRenderer.create('whatever');
+      }
+
+      function App({shouldSuspend, step}) {
+        return (
+          <>
+            <Text text={`A${step}`} />
+            <Suspense fallback={<Text text="Loading..." />}>
+              {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}
+            </Suspense>
+            <Text text={`B${step}`} />
+            <Text text={`C${step}`} />
+          </>
+        );
+      }
+
+      const root = ReactTestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
+
+      root.update(<App shouldSuspend={false} step={0} />);
+      expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      // This update will suspend.
+      root.update(<App shouldSuspend={true} step={1} />);
+
+      // Need to move into the next async bucket.
+      Scheduler.unstable_advanceTime(1000);
+      // Do a bit of work, then interrupt to trigger a restart.
+      expect(Scheduler).toFlushAndYieldThrough(['A1']);
+      interrupt();
+
+      // Schedule another update. This will have lower priority because of
+      // the interrupt trick above.
+      root.update(<App shouldSuspend={false} step={2} />);
+
+      expect(Scheduler).toFlushAndYieldThrough([
+        // Should have restarted the first update, because of the interruption
+        'A1',
+        'Suspend! [Async]',
+        'Loading...',
+        'B1',
+      ]);
+
+      // Should not have committed loading state
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      // After suspending, should abort the first update and switch to the
+      // second update. So, C1 should not appear in the log.
+      // TODO: This should work even if React does not yield to the main
+      // thread. Should use same mechanism as selective hydration to interrupt
+      // the render before the end of the current slice of work.
+      expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);
+
+      expect(root).toMatchRenderedOutput('A2B2C2');
+    },
+  );
+
+  it(
+    'interrupts current render when something suspends with a ' +
+      "delay and we've already bailed out lower priority update in " +
+      'a parent',
+    async () => {
+      // This is similar to the previous test case, except this covers when
+      // React completely bails out on the parent component, without processing
+      // the update queue.
+
+      const {useState} = React;
+
+      function interrupt() {
+        // React has a heuristic to batch all updates that occur within the same
+        // event. This is a trick to circumvent that heuristic.
+        ReactTestRenderer.create('whatever');
+      }
+
+      let setShouldSuspend;
+      function Async() {
+        const [shouldSuspend, _setShouldSuspend] = useState(false);
+        setShouldSuspend = _setShouldSuspend;
+        return (
+          <>
+            <Text text="A" />
+            <Suspense fallback={<Text text="Loading..." />}>
+              {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}
+            </Suspense>
+            <Text text="B" />
+            <Text text="C" />
+          </>
+        );
+      }
+
+      let setShouldHideInParent;
+      function App() {
+        const [shouldHideInParent, _setShouldHideInParent] = useState(false);
+        setShouldHideInParent = _setShouldHideInParent;
+        Scheduler.unstable_yieldValue(
+          'shouldHideInParent: ' + shouldHideInParent,
+        );
+        return shouldHideInParent ? <Text text="(empty)" /> : <Async />;
+      }
+
+      const root = ReactTestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
+
+      await ReactTestRenderer.act(async () => {
+        root.update(<App />);
+        expect(Scheduler).toFlushAndYield([
+          'shouldHideInParent: false',
+          'A',
+          'B',
+          'C',
+        ]);
+        expect(root).toMatchRenderedOutput('ABC');
+
+        // This update will suspend.
+        setShouldSuspend(true);
+
+        // Need to move into the next async bucket.
+        Scheduler.unstable_advanceTime(1000);
+        // Do a bit of work, then interrupt to trigger a restart.
+        expect(Scheduler).toFlushAndYieldThrough(['A']);
+        interrupt();
+        // Should not have committed loading state
+        expect(root).toMatchRenderedOutput('ABC');
+
+        // Schedule another update. This will have lower priority because of
+        // the interrupt trick above.
+        setShouldHideInParent(true);
+
+        expect(Scheduler).toFlushAndYieldThrough([
+          // Should have restarted the first update, because of the interruption
+          'A',
+          'Suspend! [Async]',
+          'Loading...',
+          'B',
+        ]);
+
+        // Should not have committed loading state
+        expect(root).toMatchRenderedOutput('ABC');
+
+        // After suspending, should abort the first update and switch to the
+        // second update.
+        expect(Scheduler).toFlushAndYield([
+          'shouldHideInParent: true',
+          '(empty)',
+        ]);
+
+        expect(root).toMatchRenderedOutput('(empty)');
+      });
+    },
+  );
+
+  it(
+    'interrupts current render when something suspends with a ' +
+      'delay, and a parent received an update after it completed',
+    () => {
+      function App({shouldSuspend, step}) {
+        return (
+          <>
+            <Text text={`A${step}`} />
+            <Suspense fallback={<Text text="Loading..." />}>
+              {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}
+            </Suspense>
+            <Text text={`B${step}`} />
+            <Text text={`C${step}`} />
+          </>
+        );
+      }
+
+      const root = ReactTestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
+
+      root.update(<App shouldSuspend={false} step={0} />);
+      expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      // This update will suspend.
+      root.update(<App shouldSuspend={true} step={1} />);
+      // Flush past the root, but stop before the async component.
+      expect(Scheduler).toFlushAndYieldThrough(['A1']);
+
+      // Schedule an update on the root, which already completed.
+      root.update(<App shouldSuspend={false} step={2} />);
+      // We'll keep working on the existing update.
+      expect(Scheduler).toFlushAndYieldThrough([
+        // Now the async component suspends
+        'Suspend! [Async]',
+        'Loading...',
+        'B1',
+      ]);
+
+      // Should not have committed loading state
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      // After suspending, should abort the first update and switch to the
+      // second update. So, C1 should not appear in the log.
+      // TODO: This should work even if React does not yield to the main
+      // thread. Should use same mechanism as selective hydration to interrupt
+      // the render before the end of the current slice of work.
+      expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);
+
+      expect(root).toMatchRenderedOutput('A2B2C2');
+    },
+  );
+
   it('mounts a lazy class component in non-concurrent mode', async () => {
     class Class extends React.Component {
       componentDidMount() {
-        Scheduler.yieldValue('Did mount: ' + this.props.label);
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue('Did update: ' + this.props.label);
+        Scheduler.unstable_yieldValue('Did update: ' + this.props.label);
       }
       render() {
         return <Text text={this.props.label} />;
@@ -321,13 +621,13 @@ describe('ReactSuspense', () => {
     it('a mounted class component can suspend without losing state', () => {
       class TextWithLifecycle extends React.Component {
         componentDidMount() {
-          Scheduler.yieldValue(`Mount [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
         }
         componentDidUpdate() {
-          Scheduler.yieldValue(`Update [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
         }
         componentWillUnmount() {
-          Scheduler.yieldValue(`Unmount [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
         }
         render() {
           return <Text {...this.props} />;
@@ -338,15 +638,17 @@ describe('ReactSuspense', () => {
       class AsyncTextWithLifecycle extends React.Component {
         state = {step: 1};
         componentDidMount() {
-          Scheduler.yieldValue(`Mount [${this.props.text}:${this.state.step}]`);
+          Scheduler.unstable_yieldValue(
+            `Mount [${this.props.text}:${this.state.step}]`,
+          );
         }
         componentDidUpdate() {
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             `Update [${this.props.text}:${this.state.step}]`,
           );
         }
         componentWillUnmount() {
-          Scheduler.yieldValue(
+          Scheduler.unstable_yieldValue(
             `Unmount [${this.props.text}:${this.state.step}]`,
           );
         }
@@ -356,13 +658,13 @@ describe('ReactSuspense', () => {
           const ms = this.props.ms;
           try {
             TextResource.read([text, ms]);
-            Scheduler.yieldValue(text);
+            Scheduler.unstable_yieldValue(text);
             return text;
           } catch (promise) {
             if (typeof promise.then === 'function') {
-              Scheduler.yieldValue(`Suspend! [${text}]`);
+              Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
             } else {
-              Scheduler.yieldValue(`Error! [${text}]`);
+              Scheduler.unstable_yieldValue(`Error! [${text}]`);
             }
             throw promise;
           }
@@ -547,20 +849,20 @@ describe('ReactSuspense', () => {
     it('suspends in a class that has componentWillUnmount and is then deleted', () => {
       class AsyncTextWithUnmount extends React.Component {
         componentWillUnmount() {
-          Scheduler.yieldValue('will unmount');
+          Scheduler.unstable_yieldValue('will unmount');
         }
         render() {
           const text = this.props.text;
           const ms = this.props.ms;
           try {
             TextResource.read([text, ms]);
-            Scheduler.yieldValue(text);
+            Scheduler.unstable_yieldValue(text);
             return text;
           } catch (promise) {
             if (typeof promise.then === 'function') {
-              Scheduler.yieldValue(`Suspend! [${text}]`);
+              Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
             } else {
-              Scheduler.yieldValue(`Error! [${text}]`);
+              Scheduler.unstable_yieldValue(`Error! [${text}]`);
             }
             throw promise;
           }
@@ -589,22 +891,19 @@ describe('ReactSuspense', () => {
       function AsyncTextWithEffect(props) {
         const text = props.text;
 
-        useLayoutEffect(
-          () => {
-            Scheduler.yieldValue('Did commit: ' + text);
-          },
-          [text],
-        );
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('Did commit: ' + text);
+        }, [text]);
 
         try {
           TextResource.read([props.text, props.ms]);
-          Scheduler.yieldValue(text);
+          Scheduler.unstable_yieldValue(text);
           return text;
         } catch (promise) {
           if (typeof promise.then === 'function') {
-            Scheduler.yieldValue(`Suspend! [${text}]`);
+            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
           } else {
-            Scheduler.yieldValue(`Error! [${text}]`);
+            Scheduler.unstable_yieldValue(`Error! [${text}]`);
           }
           throw promise;
         }
@@ -675,7 +974,7 @@ describe('ReactSuspense', () => {
       expect(root).toMatchRenderedOutput('Step: 3');
     });
 
-    it('does not remount the fallback while suspended children resolve in sync mode', () => {
+    it('does not remount the fallback while suspended children resolve in legacy mode', () => {
       let mounts = 0;
       class ShouldMountOnce extends React.Component {
         componentDidMount() {
@@ -827,13 +1126,13 @@ describe('ReactSuspense', () => {
         const fullText = `${text}:${step}`;
         try {
           TextResource.read([fullText, ms]);
-          Scheduler.yieldValue(fullText);
+          Scheduler.unstable_yieldValue(fullText);
           return fullText;
         } catch (promise) {
           if (typeof promise.then === 'function') {
-            Scheduler.yieldValue(`Suspend! [${fullText}]`);
+            Scheduler.unstable_yieldValue(`Suspend! [${fullText}]`);
           } else {
-            Scheduler.yieldValue(`Error! [${fullText}]`);
+            Scheduler.unstable_yieldValue(`Error! [${fullText}]`);
           }
           throw promise;
         }
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js
new file mode 100644
index 0000000000000..d58f83a92a521
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js
@@ -0,0 +1,308 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+
+describe('ReactSuspense', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableSuspenseCallback = true;
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+  });
+
+  function text(t) {
+    return {text: t, hidden: false};
+  }
+
+  function createThenable() {
+    let completed = false;
+    const resolveRef = {current: null};
+    let promise = {
+      then(resolve, reject) {
+        resolveRef.current = () => {
+          completed = true;
+          resolve();
+        };
+      },
+    };
+
+    const PromiseComp = () => {
+      if (!completed) {
+        throw promise;
+      }
+      return 'Done';
+    };
+    return {promise, resolveRef, PromiseComp};
+  }
+
+  it('check type', () => {
+    const {PromiseComp} = createThenable();
+
+    const elementBadType = (
+      <React.Suspense suspenseCallback={1} fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(elementBadType);
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: Unexpected type for suspenseCallback.',
+    ]);
+
+    const elementMissingCallback = (
+      <React.Suspense fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(elementMissingCallback);
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([]);
+  });
+
+  it('1 then 0 suspense callback', () => {
+    const {promise, resolveRef, PromiseComp} = createThenable();
+
+    let ops = [];
+    const suspenseCallback = thenables => {
+      ops.push(thenables);
+    };
+
+    const element = (
+      <React.Suspense suspenseCallback={suspenseCallback} fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Waiting')]);
+    expect(ops).toEqual([new Set([promise])]);
+    ops = [];
+
+    resolveRef.current();
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Done')]);
+    expect(ops).toEqual([]);
+  });
+
+  it('2 then 1 then 0 suspense callback', () => {
+    const {
+      promise: promise1,
+      resolveRef: resolveRef1,
+      PromiseComp: PromiseComp1,
+    } = createThenable();
+    const {
+      promise: promise2,
+      resolveRef: resolveRef2,
+      PromiseComp: PromiseComp2,
+    } = createThenable();
+
+    let ops = [];
+    const suspenseCallback1 = thenables => {
+      ops.push(thenables);
+    };
+
+    const element = (
+      <React.Suspense
+        suspenseCallback={suspenseCallback1}
+        fallback={'Waiting Tier 1'}>
+        <PromiseComp1 />
+        <PromiseComp2 />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ops).toEqual([new Set([promise1, promise2])]);
+    ops = [];
+
+    resolveRef1.current();
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ops).toEqual([new Set([promise2])]);
+    ops = [];
+
+    resolveRef2.current();
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Done'), text('Done')]);
+    expect(ops).toEqual([]);
+  });
+
+  it('nested suspense promises are reported only for their tier', () => {
+    const {promise, PromiseComp} = createThenable();
+
+    let ops1 = [];
+    const suspenseCallback1 = thenables => {
+      ops1.push(thenables);
+    };
+    let ops2 = [];
+    const suspenseCallback2 = thenables => {
+      ops2.push(thenables);
+    };
+
+    const element = (
+      <React.Suspense
+        suspenseCallback={suspenseCallback1}
+        fallback={'Waiting Tier 1'}>
+        <React.Suspense
+          suspenseCallback={suspenseCallback2}
+          fallback={'Waiting Tier 2'}>
+          <PromiseComp />
+        </React.Suspense>
+      </React.Suspense>
+    );
+
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 2')]);
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([new Set([promise])]);
+  });
+
+  it('competing suspense promises', () => {
+    const {
+      promise: promise1,
+      resolveRef: resolveRef1,
+      PromiseComp: PromiseComp1,
+    } = createThenable();
+    const {
+      promise: promise2,
+      resolveRef: resolveRef2,
+      PromiseComp: PromiseComp2,
+    } = createThenable();
+
+    let ops1 = [];
+    const suspenseCallback1 = thenables => {
+      ops1.push(thenables);
+    };
+    let ops2 = [];
+    const suspenseCallback2 = thenables => {
+      ops2.push(thenables);
+    };
+
+    const element = (
+      <React.Suspense
+        suspenseCallback={suspenseCallback1}
+        fallback={'Waiting Tier 1'}>
+        <React.Suspense
+          suspenseCallback={suspenseCallback2}
+          fallback={'Waiting Tier 2'}>
+          <PromiseComp2 />
+        </React.Suspense>
+        <PromiseComp1 />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Waiting Tier 1')]);
+    expect(ops1).toEqual([new Set([promise1])]);
+    expect(ops2).toEqual([]);
+    ops1 = [];
+    ops2 = [];
+
+    resolveRef1.current();
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([
+      text('Waiting Tier 2'),
+      text('Done'),
+    ]);
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([new Set([promise2])]);
+    ops1 = [];
+    ops2 = [];
+
+    resolveRef2.current();
+    ReactNoop.render(element);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([text('Done'), text('Done')]);
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([]);
+  });
+
+  if (__DEV__) {
+    it('regression test for #16215 that relies on implementation details', async () => {
+      // Regression test for https://github.com/facebook/react/pull/16215.
+      // The bug only happens if there's an error earlier in the commit phase.
+      // The first error is the one that gets thrown, so to observe the later
+      // error, I've mocked the ReactErrorUtils module.
+      //
+      // If this test starts failing because the implementation details change,
+      // you can probably just delete it. It's not worth the hassle.
+      jest.resetModules();
+
+      let errors = [];
+      let hasCaughtError = false;
+      jest.mock('shared/ReactErrorUtils', () => ({
+        invokeGuardedCallback(name, fn, context, ...args) {
+          try {
+            return fn.call(context, ...args);
+          } catch (error) {
+            hasCaughtError = true;
+            errors.push(error);
+          }
+        },
+        hasCaughtError() {
+          return hasCaughtError;
+        },
+        clearCaughtError() {
+          hasCaughtError = false;
+          return errors[errors.length - 1];
+        },
+      }));
+
+      ReactFeatureFlags = require('shared/ReactFeatureFlags');
+      ReactFeatureFlags.enableSuspenseCallback = true;
+
+      React = require('react');
+      ReactNoop = require('react-noop-renderer');
+      Scheduler = require('scheduler');
+
+      const {useEffect} = React;
+      const {PromiseComp} = createThenable();
+      function App() {
+        useEffect(() => {
+          Scheduler.unstable_yieldValue('Passive Effect');
+        });
+        return (
+          <React.Suspense
+            suspenseCallback={() => {
+              throw Error('Oops!');
+            }}
+            fallback="Loading...">
+            <PromiseComp />
+          </React.Suspense>
+        );
+      }
+      const root = ReactNoop.createRoot();
+      await ReactNoop.act(async () => {
+        root.render(<App />);
+        expect(Scheduler).toFlushAndThrow('Oops!');
+      });
+
+      // Should have only received a single error. Before the bug fix, there was
+      // also a second error related to the Suspense update queue.
+      expect(errors.length).toBe(1);
+      expect(errors[0].message).toEqual('Oops!');
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index c6607df92ea90..e18ee8152656a 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -46,32 +46,29 @@ describe('ReactSuspenseFuzz', () => {
     function Container({children, updates}) {
       const [step, setStep] = useState(0);
 
-      useLayoutEffect(
-        () => {
-          if (updates !== undefined) {
-            const cleanUps = new Set();
-            updates.forEach(({remountAfter}, i) => {
-              const task = {
-                label: `Remount childen after ${remountAfter}ms`,
-              };
-              const timeoutID = setTimeout(() => {
-                pendingTasks.delete(task);
-                Scheduler.yieldValue(task.label);
-                setStep(i + 1);
-              }, remountAfter);
-              pendingTasks.add(task);
-              cleanUps.add(() => {
-                pendingTasks.delete(task);
-                clearTimeout(timeoutID);
-              });
-            });
-            return () => {
-              cleanUps.forEach(cleanUp => cleanUp());
+      useLayoutEffect(() => {
+        if (updates !== undefined) {
+          const cleanUps = new Set();
+          updates.forEach(({remountAfter}, i) => {
+            const task = {
+              label: `Remount children after ${remountAfter}ms`,
             };
-          }
-        },
-        [updates],
-      );
+            const timeoutID = setTimeout(() => {
+              pendingTasks.delete(task);
+              Scheduler.unstable_yieldValue(task.label);
+              setStep(i + 1);
+            }, remountAfter);
+            pendingTasks.add(task);
+            cleanUps.add(() => {
+              pendingTasks.delete(task);
+              clearTimeout(timeoutID);
+            });
+          });
+          return () => {
+            cleanUps.forEach(cleanUp => cleanUp());
+          };
+        }
+      }, [updates]);
 
       return <React.Fragment key={step}>{children}</React.Fragment>;
     }
@@ -79,32 +76,29 @@ describe('ReactSuspenseFuzz', () => {
     function Text({text, initialDelay = 0, updates}) {
       const [[step, delay], setStep] = useState([0, initialDelay]);
 
-      useLayoutEffect(
-        () => {
-          if (updates !== undefined) {
-            const cleanUps = new Set();
-            updates.forEach(({beginAfter, suspendFor}, i) => {
-              const task = {
-                label: `Update ${beginAfter}ms after mount and suspend for ${suspendFor}ms [${text}]`,
-              };
-              const timeoutID = setTimeout(() => {
-                pendingTasks.delete(task);
-                Scheduler.yieldValue(task.label);
-                setStep([i + 1, suspendFor]);
-              }, beginAfter);
-              pendingTasks.add(task);
-              cleanUps.add(() => {
-                pendingTasks.delete(task);
-                clearTimeout(timeoutID);
-              });
-            });
-            return () => {
-              cleanUps.forEach(cleanUp => cleanUp());
+      useLayoutEffect(() => {
+        if (updates !== undefined) {
+          const cleanUps = new Set();
+          updates.forEach(({beginAfter, suspendFor}, i) => {
+            const task = {
+              label: `Update ${beginAfter}ms after mount and suspend for ${suspendFor}ms [${text}]`,
             };
-          }
-        },
-        [updates],
-      );
+            const timeoutID = setTimeout(() => {
+              pendingTasks.delete(task);
+              Scheduler.unstable_yieldValue(task.label);
+              setStep([i + 1, suspendFor]);
+            }, beginAfter);
+            pendingTasks.add(task);
+            cleanUps.add(() => {
+              pendingTasks.delete(task);
+              clearTimeout(timeoutID);
+            });
+          });
+          return () => {
+            cleanUps.forEach(cleanUp => cleanUp());
+          };
+        }
+      }, [updates]);
 
       const fullText = `${text}:${step}`;
 
@@ -121,36 +115,36 @@ describe('ReactSuspenseFuzz', () => {
               setTimeout(() => {
                 cache.set(fullText, fullText);
                 pendingTasks.delete(task);
-                Scheduler.yieldValue(task.label);
+                Scheduler.unstable_yieldValue(task.label);
                 resolve();
               }, delay);
             },
           };
           cache.set(fullText, thenable);
-          Scheduler.yieldValue(`Suspended! [${fullText}]`);
+          Scheduler.unstable_yieldValue(`Suspended! [${fullText}]`);
           throw thenable;
         } else if (typeof resolvedText.then === 'function') {
           const thenable = resolvedText;
-          Scheduler.yieldValue(`Suspended! [${fullText}]`);
+          Scheduler.unstable_yieldValue(`Suspended! [${fullText}]`);
           throw thenable;
         }
       } else {
         resolvedText = fullText;
       }
 
-      Scheduler.yieldValue(resolvedText);
+      Scheduler.unstable_yieldValue(resolvedText);
       return resolvedText;
     }
 
     function resolveAllTasks() {
-      Scheduler.unstable_flushWithoutYielding();
+      Scheduler.unstable_flushAllWithoutAsserting();
       let elapsedTime = 0;
       while (pendingTasks && pendingTasks.size > 0) {
         if ((elapsedTime += 1000) > 1000000) {
           throw new Error('Something did not resolve properly.');
         }
         ReactNoop.act(() => jest.advanceTimersByTime(1000));
-        Scheduler.unstable_flushWithoutYielding();
+        Scheduler.unstable_flushAllWithoutAsserting();
       }
     }
 
@@ -177,10 +171,10 @@ describe('ReactSuspenseFuzz', () => {
       ReactNoop.renderLegacySyncRoot(null);
 
       resetCache();
-      const batchedSyncRoot = ReactNoop.createSyncRoot();
-      batchedSyncRoot.render(children);
+      const batchedBlockingRoot = ReactNoop.createBlockingRoot();
+      batchedBlockingRoot.render(children);
       resolveAllTasks();
-      const batchedSyncOutput = batchedSyncRoot.getChildrenAsJSX();
+      const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();
       expect(batchedSyncOutput).toEqual(expectedOutput);
 
       resetCache();
@@ -354,7 +348,7 @@ Random seed is ${SEED}
     it('1', () => {
       const {Text, testResolvedOutput} = createFuzzer();
       testResolvedOutput(
-        <React.Fragment>
+        <>
           <Text
             initialDelay={20}
             text="A"
@@ -368,14 +362,14 @@ Random seed is ${SEED}
             />
             <Text text="C" />
           </Suspense>
-        </React.Fragment>,
+        </>,
       );
     });
 
     it('2', () => {
       const {Text, Container, testResolvedOutput} = createFuzzer();
       testResolvedOutput(
-        <React.Fragment>
+        <>
           <Suspense fallback="Loading...">
             <Text initialDelay={7200} text="A" />
           </Suspense>
@@ -386,14 +380,14 @@ Random seed is ${SEED}
               <Text initialDelay={9000} text="D" />
             </Container>
           </Suspense>
-        </React.Fragment>,
+        </>,
       );
     });
 
     it('3', () => {
       const {Text, Container, testResolvedOutput} = createFuzzer();
       testResolvedOutput(
-        <React.Fragment>
+        <>
           <Suspense fallback="Loading...">
             <Text
               initialDelay={3183}
@@ -420,7 +414,7 @@ Random seed is ${SEED}
             />
             <Text initialDelay={6732} text="D" />
           </Container>
-        </React.Fragment>,
+        </>,
       );
     });
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
new file mode 100644
index 0000000000000..12a6d03a2313e
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
@@ -0,0 +1,2297 @@
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let SuspenseList;
+
+describe('ReactSuspenseList', () => {
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    ReactFeatureFlags.enableSuspenseServerRenderer = true;
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+    SuspenseList = React.SuspenseList;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return <span>{props.text}</span>;
+  }
+
+  function createAsyncText(text) {
+    let resolved = false;
+    let Component = function() {
+      if (!resolved) {
+        Scheduler.unstable_yieldValue('Suspend! [' + text + ']');
+        throw promise;
+      }
+      return <Text text={text} />;
+    };
+    let promise = new Promise(resolve => {
+      Component.resolve = function() {
+        resolved = true;
+        return resolve();
+      };
+    });
+    return Component;
+  }
+
+  it('warns if an unsupported revealOrder option is used', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="something">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: "something" is not a supported revealOrder on ' +
+        '<SuspenseList />. Did you mean "together", "forwards" or "backwards"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a upper case revealOrder option is used', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="TOGETHER">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: "TOGETHER" is not a valid value for revealOrder on ' +
+        '<SuspenseList />. Use lowercase "together" instead.' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a misspelled revealOrder option is used', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forward">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: "forward" is not a valid value for revealOrder on ' +
+        '<SuspenseList />. React uses the -s suffix in the spelling. ' +
+        'Use "forwards" instead.' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a single element is passed to a "forwards" list', () => {
+    function Foo({children}) {
+      return <SuspenseList revealOrder="forwards">{children}</SuspenseList>;
+    }
+
+    ReactNoop.render(<Foo />);
+    // No warning
+    Scheduler.unstable_flushAll();
+
+    ReactNoop.render(<Foo>{null}</Foo>);
+    // No warning
+    Scheduler.unstable_flushAll();
+
+    ReactNoop.render(<Foo>{false}</Foo>);
+    // No warning
+    Scheduler.unstable_flushAll();
+
+    ReactNoop.render(
+      <Foo>
+        <Suspense fallback="Loading">Child</Suspense>
+      </Foo>,
+    );
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: A single row was passed to a <SuspenseList revealOrder="forwards" />. ' +
+        'This is not useful since it needs multiple rows. ' +
+        'Did you mean to pass multiple children or an array?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a single fragment is passed to a "backwards" list', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="backwards">
+          <>{[]}</>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: A single row was passed to a <SuspenseList revealOrder="backwards" />. ' +
+        'This is not useful since it needs multiple rows. ' +
+        'Did you mean to pass multiple children or an array?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a nested array is passed to a "forwards" list', () => {
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards">
+          {items.map(name => (
+            <Suspense key={name} fallback="Loading">
+              {name}
+            </Suspense>
+          ))}
+          <div>Tail</div>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo items={['A', 'B']} />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: A nested array was passed to row #0 in <SuspenseList />. ' +
+        'Wrap it in an additional SuspenseList to configure its revealOrder: ' +
+        '<SuspenseList revealOrder=...> ... ' +
+        '<SuspenseList revealOrder=...>{array}</SuspenseList> ... ' +
+        '</SuspenseList>' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('shows content independently by default', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList>
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('shows content independently in legacy mode regardless of option', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.renderLegacySyncRoot(<Foo />);
+
+    expect(Scheduler).toHaveYielded([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays all "together"', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'Suspend! [C]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays all "together" even when nested as siblings', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <div>
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+          </div>
+          <div>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          </div>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>Loading A</span>
+          <span>Loading B</span>
+        </div>
+        <div>
+          <span>Loading C</span>
+        </div>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'Suspend! [C]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>Loading A</span>
+          <span>Loading B</span>
+        </div>
+        <div>
+          <span>Loading C</span>
+        </div>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A</span>
+          <span>B</span>
+        </div>
+        <div>
+          <span>C</span>
+        </div>
+      </>,
+    );
+  });
+
+  it('displays all "together" in nested SuspenseLists', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <SuspenseList revealOrder="together">
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          </SuspenseList>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+    await B.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Loading C',
+      'Loading B',
+      'Loading C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <SuspenseList>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          </SuspenseList>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+    await B.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Loading C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays all "together" during an update', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+    let D = createAsyncText('D');
+
+    function Foo({step}) {
+      return (
+        <SuspenseList revealOrder="together">
+          {step === 0 && (
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+          )}
+          {step === 0 && (
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+          )}
+          {step === 1 && (
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          )}
+          {step === 1 && (
+            <Suspense fallback={<Text text="Loading D" />}>
+              <D />
+            </Suspense>
+          )}
+        </SuspenseList>
+      );
+    }
+
+    // Mount
+    await A.resolve();
+    ReactNoop.render(<Foo step={0} />);
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading A',
+      'Loading B',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+    await B.resolve();
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    // Update
+    await C.resolve();
+    ReactNoop.render(<Foo step={1} />);
+    expect(Scheduler).toFlushAndYield([
+      'C',
+      'Suspend! [D]',
+      'Loading D',
+      'Loading C',
+      'Loading D',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading C</span>
+        <span>Loading D</span>
+      </>,
+    );
+    await D.resolve();
+    expect(Scheduler).toFlushAndYield(['C', 'D']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  it('avoided boundaries can be coordinate with SuspenseList', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo({showMore}) {
+      return (
+        <Suspense fallback={<Text text="Loading" />}>
+          <SuspenseList revealOrder="together">
+            <Suspense
+              unstable_avoidThisFallback={true}
+              fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+            {showMore ? (
+              <>
+                <Suspense
+                  unstable_avoidThisFallback={true}
+                  fallback={<Text text="Loading B" />}>
+                  <B />
+                </Suspense>
+                <Suspense
+                  unstable_avoidThisFallback={true}
+                  fallback={<Text text="Loading C" />}>
+                  <C />
+                </Suspense>
+              </>
+            ) : null}
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading</span>);
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    // Let's do an update that should consult the avoided boundaries.
+    ReactNoop.render(<Foo showMore={true} />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    // This will suspend, since the boundaries are avoided. Give them
+    // time to display their loading states.
+    jest.advanceTimersByTime(500);
+
+    // A is already showing content so it doesn't turn into a fallback.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]']);
+
+    // Even though we could now show B, we're still waiting on C.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays each items in "forwards" order', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await C.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays each items in "backwards" order', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="backwards">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [C]',
+      'Loading C',
+      'Loading B',
+      'Loading A',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C', 'Suspend! [B]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+    let D = createAsyncText('D');
+    let E = createAsyncText('E');
+    let F = createAsyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards">
+          {items.map(([key, Component]) => (
+            <Suspense key={key} fallback={<Text text={'Loading ' + key} />}>
+              <Component />
+            </Suspense>
+          ))}
+        </SuspenseList>
+      );
+    }
+
+    await B.resolve();
+    await D.resolve();
+
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['B', B],
+          ['D', D],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield(['B', 'D']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>B</span>
+        <span>D</span>
+      </>,
+    );
+
+    // Insert items in the beginning, middle and end.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['B', B],
+          ['C', C],
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      'Loading A',
+      'B',
+      'Suspend! [C]',
+      'Loading C',
+      'D',
+      'Loading A',
+      'B',
+      'Loading C',
+      'D',
+      'Loading E',
+      'Loading F',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>B</span>
+        <span>Loading C</span>
+        <span>D</span>
+        <span>Loading E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [C]']);
+
+    // Even though we could show A, it is still in a fallback state because
+    // C is not yet resolved. We need to resolve everything in the head first.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>B</span>
+        <span>Loading C</span>
+        <span>D</span>
+        <span>Loading E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'C', 'Suspend! [E]']);
+
+    // We can now resolve the full head.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>Loading E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await E.resolve();
+
+    expect(Scheduler).toFlushAndYield(['E', 'Suspend! [F]']);
+
+    // In the tail we can resolve one-by-one.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await F.resolve();
+
+    // We can also delete some items.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield(['D', 'E', 'F']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let D = createAsyncText('D');
+    let F = createAsyncText('F');
+
+    function createSyncText(text) {
+      return function() {
+        return <Text text={text} />;
+      };
+    }
+
+    let As = createSyncText('A');
+    let Bs = createSyncText('B');
+    let Cs = createSyncText('C');
+    let Ds = createSyncText('D');
+    let Es = createSyncText('E');
+    let Fs = createSyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="backwards">
+          {items.map(([key, Component]) => (
+            <Suspense key={key} fallback={<Text text={'Loading ' + key} />}>
+              <Component />
+            </Suspense>
+          ))}
+        </SuspenseList>
+      );
+    }
+
+    // The first pass doesn't suspend.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', As],
+          ['B', Bs],
+          ['C', Cs],
+          ['D', Ds],
+          ['E', Es],
+          ['F', Fs],
+        ]}
+      />,
+    );
+    expect(Scheduler).toFlushAndYield(['F', 'E', 'D', 'C', 'B', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+
+    // Update items in the beginning, middle and end to start suspending.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['B', B],
+          ['C', Cs],
+          ['D', D],
+          ['E', Es],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      'Loading A',
+      'Suspend! [B]',
+      'Loading B',
+      'C',
+      'Suspend! [D]',
+      'Loading D',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+      'Suspend! [A]',
+      'Loading A',
+      'Suspend! [B]',
+      'Loading B',
+      'C',
+      'Suspend! [D]',
+      'Loading D',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+    ]);
+
+    // This will suspend, since the boundaries are avoided. Give them
+    // time to display their loading states.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>Loading A</span>
+        <span hidden={true}>B</span>
+        <span>Loading B</span>
+        <span>C</span>
+        <span hidden={true}>D</span>
+        <span>Loading D</span>
+        <span>E</span>
+        <span hidden={true}>F</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await F.resolve();
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [D]', 'F']);
+
+    // Even though we could show F, it is still in a fallback state because
+    // E is not yet resolved. We need to resolve everything in the head first.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>Loading A</span>
+        <span hidden={true}>B</span>
+        <span>Loading B</span>
+        <span>C</span>
+        <span hidden={true}>D</span>
+        <span>Loading D</span>
+        <span>E</span>
+        <span hidden={true}>F</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await D.resolve();
+
+    expect(Scheduler).toFlushAndYield(['D', 'F', 'Suspend! [B]']);
+
+    // We can now resolve the full head.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>Loading A</span>
+        <span hidden={true}>B</span>
+        <span>Loading B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [A]']);
+
+    // In the tail we can resolve one-by-one.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>Loading A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <Text text="A" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <Text text="B" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <Text text="C" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    // This render is only CPU bound. Nothing suspends.
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYieldThrough(['A']);
+
+    Scheduler.unstable_advanceTime(200);
+    jest.advanceTimersByTime(200);
+
+    expect(Scheduler).toFlushAndYieldThrough(['B']);
+
+    Scheduler.unstable_advanceTime(300);
+    jest.advanceTimersByTime(300);
+
+    // We've still not been able to show anything on the screen even though
+    // we have two items ready.
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Time has now elapsed for so long that we're just going to give up
+    // rendering the rest of the content. So that we can at least show
+    // something.
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Loading C',
+      'C', // I'll flush through into the next render so that the first commits.
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    // Then we do a second pass to commit the last item.
+    expect(Scheduler).toFlushAndYield([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapsed">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('warns if an unsupported tail option is used', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapse">
+          <Suspense fallback="Loading">A</Suspense>
+          <Suspense fallback="Loading">B</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: "collapse" is not a supported value for tail on ' +
+        '<SuspenseList />. Did you mean "collapsed" or "hidden"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if a tail option is used with "together"', () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together" tail="collapsed">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+      'Warning: <SuspenseList tail="collapsed" /> is only valid if ' +
+        'revealOrder is "forwards" or "backwards". ' +
+        'Did you mean to specify revealOrder="forwards"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapsed">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <Text text="A" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <Text text="B" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <Text text="C" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading D" />}>
+            <Text text="D" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    // This render is only CPU bound. Nothing suspends.
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYieldThrough(['A']);
+
+    Scheduler.unstable_advanceTime(200);
+    jest.advanceTimersByTime(200);
+
+    expect(Scheduler).toFlushAndYieldThrough(['B']);
+
+    Scheduler.unstable_advanceTime(300);
+    jest.advanceTimersByTime(300);
+
+    // We've still not been able to show anything on the screen even though
+    // we have two items ready.
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Time has now elapsed for so long that we're just going to give up
+    // rendering the rest of the content. So that we can at least show
+    // something.
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Loading C',
+      'C', // I'll flush through into the next render so that the first commits.
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    // Then we do a second pass to commit the last two items.
+    expect(Scheduler).toFlushAndYield(['D']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  it('adding to the middle does not collapse insertions (forwards)', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+    let D = createAsyncText('D');
+    let E = createAsyncText('E');
+    let F = createAsyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapsed">
+          {items.map(([key, Component]) => (
+            <Suspense key={key} fallback={<Text text={'Loading ' + key} />}>
+              <Component />
+            </Suspense>
+          ))}
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['D', D],
+        ]}
+      />,
+    );
+
+    await A.resolve();
+    await D.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'D']);
+
+    // First render commits A and D.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>D</span>
+      </>,
+    );
+
+    // For the second render, we're going to insert items in the middle and end.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['B', B],
+          ['C', C],
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'D',
+      'A',
+      'Loading B',
+      'Loading C',
+      'D',
+      'Loading E',
+    ]);
+
+    // B and C don't get collapsed, but F gets collapsed with E.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+        <span>D</span>
+        <span>Loading E</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    // Even though B is unsuspended, it's still in loading state because
+    // it is blocked by C.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+        <span>D</span>
+        <span>Loading E</span>
+      </>,
+    );
+
+    await C.resolve();
+    await E.resolve();
+
+    expect(Scheduler).toFlushAndYield([
+      'B',
+      'C',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+    ]);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await F.resolve();
+
+    expect(Scheduler).toFlushAndYield(['F']);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  it('adding to the middle does not collapse insertions (backwards)', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+    let D = createAsyncText('D');
+    let E = createAsyncText('E');
+    let F = createAsyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="backwards" tail="collapsed">
+          {items.map(([key, Component]) => (
+            <Suspense key={key} fallback={<Text text={'Loading ' + key} />}>
+              <Component />
+            </Suspense>
+          ))}
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['C', C],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    await C.resolve();
+    await F.resolve();
+
+    expect(Scheduler).toFlushAndYield(['F', 'C']);
+
+    // First render commits C and F.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>C</span>
+        <span>F</span>
+      </>,
+    );
+
+    // For the second render, we're going to insert items in the middle and end.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['B', B],
+          ['C', C],
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'C',
+      'Suspend! [D]',
+      'Loading D',
+      'Suspend! [E]',
+      'Loading E',
+      'F',
+      'C',
+      'Loading D',
+      'Loading E',
+      'F',
+      'Loading B',
+    ]);
+
+    // D and E don't get collapsed, but A gets collapsed with B.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading B</span>
+        <span>C</span>
+        <span>Loading D</span>
+        <span>Loading E</span>
+        <span>F</span>
+      </>,
+    );
+
+    await D.resolve();
+
+    expect(Scheduler).toFlushAndYield(['D', 'Suspend! [E]']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    // Even though D is unsuspended, it's still in loading state because
+    // it is blocked by E.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading B</span>
+        <span>C</span>
+        <span>Loading D</span>
+        <span>Loading E</span>
+        <span>F</span>
+      </>,
+    );
+
+    await C.resolve();
+    await E.resolve();
+
+    await B.resolve();
+    await C.resolve();
+    await D.resolve();
+    await E.resolve();
+
+    expect(Scheduler).toFlushAndYield([
+      'D',
+      'E',
+      'B',
+      'Suspend! [A]',
+      'Loading A',
+    ]);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  it('adding to the middle of committed tail does not collapse insertions', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+    let D = createAsyncText('D');
+    let E = createAsyncText('E');
+    let F = createAsyncText('F');
+
+    function SyncD() {
+      return <Text text="D" />;
+    }
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapsed">
+          {items.map(([key, Component]) => (
+            <Suspense key={key} fallback={<Text text={'Loading ' + key} />}>
+              <Component />
+            </Suspense>
+          ))}
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['D', SyncD],
+        ]}
+      />,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'D']);
+
+    // First render commits A and D.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>D</span>
+      </>,
+    );
+
+    // For the second render, we're going to insert items in the middle and end.
+    // Note that D now suspends even though it didn't in the first pass.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['A', A],
+          ['B', B],
+          ['C', C],
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'Suspend! [D]',
+      'Loading D',
+      'A',
+      'Loading B',
+      'Loading C',
+      'Suspend! [D]',
+      'Loading D',
+      'Loading E',
+    ]);
+
+    // This is suspended due to the update to D causing a loading state.
+    jest.advanceTimersByTime(500);
+
+    // B and C don't get collapsed, but F gets collapsed with E.
+    // Even though everything in the bottom of the list is suspended, we don't
+    // collapse them because D was an update. Not an insertion.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+        <span hidden={true}>D</span>
+        <span>Loading D</span>
+        <span>Loading E</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    // B is able to unblock here because it's part of the tail.
+    // If D was still visible it wouldn't be part of the tail
+    // and would be blocked on C like in the other test.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading C</span>
+        <span hidden={true}>D</span>
+        <span>Loading D</span>
+        <span>Loading E</span>
+      </>,
+    );
+
+    await C.resolve();
+    await D.resolve();
+    await E.resolve();
+
+    expect(Scheduler).toFlushAndYield([
+      'C',
+      'D',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+    ]);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>Loading F</span>
+      </>,
+    );
+
+    await F.resolve();
+
+    expect(Scheduler).toFlushAndYield(['F']);
+
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  it('only shows no initial loading state "hidden" tail insertions', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('eventually resolves a nested forwards suspense list', async () => {
+    let B = createAsyncText('B');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <SuspenseList revealOrder="forwards">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <Text text="A" />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <Text text="C" />
+            </Suspense>
+          </SuspenseList>
+          <Suspense fallback={<Text text="Loading D" />}>
+            <Text text="D" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading C',
+      'D',
+      // The second pass forces the fallbacks
+      'Loading A',
+      'Loading B',
+      'Loading C',
+      'Loading D',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+        <span>Loading D</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C', 'D']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
+    let B = createAsyncText('B');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <SuspenseList revealOrder="forwards" tail="hidden">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <Text text="A" />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+          </SuspenseList>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <Text text="C" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'C',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading C</span>);
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
+    let B = createAsyncText('B');
+
+    function Foo({showB}) {
+      return (
+        <SuspenseList revealOrder="forwards">
+          <SuspenseList revealOrder="forwards" tail="hidden">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <Text text="A" />
+            </Suspense>
+            {showB ? (
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+            ) : null}
+          </SuspenseList>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <Text text="C" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo showB={false} />);
+
+    expect(Scheduler).toFlushAndYield(['A', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>C</span>
+      </>,
+    );
+
+    // Showing the B later means that C has already committed
+    // so we're now effectively in "together" mode for the head.
+    ReactNoop.render(<Foo showB={true} />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'C',
+      'A',
+      'C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('can do unrelated adjacent updates', async () => {
+    let updateAdjacent;
+    function Adjacent() {
+      let [text, setText] = React.useState('-');
+      updateAdjacent = setText;
+      return <Text text={text} />;
+    }
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards">
+            <Text text="A" />
+            <Text text="B" />
+          </SuspenseList>
+          <Adjacent />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['A', 'B', '-']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>-</span>
+      </div>,
+    );
+
+    // Update the row adjacent to the list
+    ReactNoop.act(() => updateAdjacent('C'));
+
+    expect(Scheduler).toHaveYielded(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  it('is able to re-suspend the last rows during an update with hidden', async () => {
+    let AsyncB = createAsyncText('B');
+
+    let setAsyncB;
+
+    function B() {
+      let [shouldBeAsync, setAsync] = React.useState(false);
+      setAsyncB = setAsync;
+
+      return shouldBeAsync ? (
+        <Suspense fallback={<Text text="Loading B" />}>
+          <AsyncB />
+        </Suspense>
+      ) : (
+        <Text text="Sync B" />
+      );
+    }
+
+    function Foo({updateList}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <Suspense key="A" fallback={<Text text="Loading A" />}>
+            <Text text="A" />
+          </Suspense>
+          <B key="B" updateList={updateList} />
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['A', 'Sync B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Sync B</span>
+      </>,
+    );
+
+    let previousInst = setAsyncB;
+
+    // During an update we suspend on B.
+    ReactNoop.act(() => setAsyncB(true));
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend! [B]',
+      'Loading B',
+      // The second pass is the "force hide" pass
+      'Loading B',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    // Before we resolve we'll rerender the whole list.
+    // This should leave the tree intact.
+    ReactNoop.act(() => ReactNoop.render(<Foo updateList={true} />));
+
+    expect(Scheduler).toHaveYielded(['A', 'Suspend! [B]', 'Loading B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await AsyncB.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    // This should be the same instance. I.e. it didn't
+    // remount.
+    expect(previousInst).toBe(setAsyncB);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
index 9f02055477ad8..012511d7654cf 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
@@ -34,66 +34,73 @@ describe('ReactSuspensePlaceholder', () => {
     Profiler = React.Profiler;
     Suspense = React.Suspense;
 
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      let listeners = null;
-      let status = 'pending';
-      let value = null;
-      return {
-        then(resolve, reject) {
-          switch (status) {
-            case 'pending': {
-              if (listeners === null) {
-                listeners = [{resolve, reject}];
-                setTimeout(() => {
-                  if (textResourceShouldFail) {
-                    Scheduler.yieldValue(`Promise rejected [${text}]`);
-                    status = 'rejected';
-                    value = new Error('Failed to load: ' + text);
-                    listeners.forEach(listener => listener.reject(value));
-                  } else {
-                    Scheduler.yieldValue(`Promise resolved [${text}]`);
-                    status = 'resolved';
-                    value = text;
-                    listeners.forEach(listener => listener.resolve(value));
-                  }
-                }, ms);
-              } else {
-                listeners.push({resolve, reject});
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        let listeners = null;
+        let status = 'pending';
+        let value = null;
+        return {
+          then(resolve, reject) {
+            switch (status) {
+              case 'pending': {
+                if (listeners === null) {
+                  listeners = [{resolve, reject}];
+                  setTimeout(() => {
+                    if (textResourceShouldFail) {
+                      Scheduler.unstable_yieldValue(
+                        `Promise rejected [${text}]`,
+                      );
+                      status = 'rejected';
+                      value = new Error('Failed to load: ' + text);
+                      listeners.forEach(listener => listener.reject(value));
+                    } else {
+                      Scheduler.unstable_yieldValue(
+                        `Promise resolved [${text}]`,
+                      );
+                      status = 'resolved';
+                      value = text;
+                      listeners.forEach(listener => listener.resolve(value));
+                    }
+                  }, ms);
+                } else {
+                  listeners.push({resolve, reject});
+                }
+                break;
+              }
+              case 'resolved': {
+                resolve(value);
+                break;
+              }
+              case 'rejected': {
+                reject(value);
+                break;
               }
-              break;
-            }
-            case 'resolved': {
-              resolve(value);
-              break;
-            }
-            case 'rejected': {
-              reject(value);
-              break;
             }
-          }
-        },
-      };
-    }, ([text, ms]) => text);
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
     textResourceShouldFail = false;
   });
 
   function Text({fakeRenderDuration = 0, text = 'Text'}) {
-    Scheduler.advanceTime(fakeRenderDuration);
-    Scheduler.yieldValue(text);
+    Scheduler.unstable_advanceTime(fakeRenderDuration);
+    Scheduler.unstable_yieldValue(text);
     return text;
   }
 
   function AsyncText({fakeRenderDuration = 0, ms, text}) {
-    Scheduler.advanceTime(fakeRenderDuration);
+    Scheduler.unstable_advanceTime(fakeRenderDuration);
     try {
       TextResource.read([text, ms]);
-      Scheduler.yieldValue(text);
+      Scheduler.unstable_yieldValue(text);
       return text;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend! [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error! [${text}]`);
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
       }
       throw promise;
     }
@@ -103,7 +110,7 @@ describe('ReactSuspensePlaceholder', () => {
     class HiddenText extends React.PureComponent {
       render() {
         const text = this.props.text;
-        Scheduler.yieldValue(text);
+        Scheduler.unstable_yieldValue(text);
         return <span hidden={true}>{text}</span>;
       }
     }
@@ -126,7 +133,7 @@ describe('ReactSuspensePlaceholder', () => {
     ReactNoop.render(<App middleText="B" />);
 
     expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'C', 'Loading...']);
-    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
     jest.advanceTimersByTime(1000);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
@@ -134,11 +141,11 @@ describe('ReactSuspensePlaceholder', () => {
     expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
 
     expect(ReactNoop).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span hidden={true}>A</span>
         <span>B</span>
         <span>C</span>
-      </React.Fragment>,
+      </>,
     );
 
     // Update
@@ -149,12 +156,12 @@ describe('ReactSuspensePlaceholder', () => {
     jest.advanceTimersByTime(750);
     expect(Scheduler).toFlushAndYield([]);
     expect(ReactNoop).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span hidden={true}>A</span>
         <span hidden={true}>B</span>
         <span hidden={true}>C</span>
         Loading...
-      </React.Fragment>,
+      </>,
     );
 
     // Resolve the promise
@@ -165,11 +172,11 @@ describe('ReactSuspensePlaceholder', () => {
     // Render the final update. A should still be hidden, because it was
     // given a `hidden` prop.
     expect(ReactNoop).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span hidden={true}>A</span>
         <span>B2</span>
         <span>C</span>
-      </React.Fragment>,
+      </>,
     );
   });
 
@@ -189,7 +196,7 @@ describe('ReactSuspensePlaceholder', () => {
 
     expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'C', 'Loading...']);
 
-    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop).not.toMatchRenderedOutput('ABC');
 
     jest.advanceTimersByTime(1000);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
@@ -239,7 +246,7 @@ describe('ReactSuspensePlaceholder', () => {
 
     expect(Scheduler).toFlushAndYield(['a', 'Suspend! [b]', 'c', 'Loading...']);
 
-    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop).toMatchRenderedOutput(<uppercase>LOADING...</uppercase>);
 
     jest.advanceTimersByTime(1000);
     expect(Scheduler).toHaveYielded(['Promise resolved [b]']);
@@ -278,19 +285,19 @@ describe('ReactSuspensePlaceholder', () => {
       onRender = jest.fn();
 
       const Fallback = () => {
-        Scheduler.yieldValue('Fallback');
-        Scheduler.advanceTime(10);
+        Scheduler.unstable_yieldValue('Fallback');
+        Scheduler.unstable_advanceTime(10);
         return 'Loading...';
       };
 
       const Suspending = () => {
-        Scheduler.yieldValue('Suspending');
-        Scheduler.advanceTime(2);
+        Scheduler.unstable_yieldValue('Suspending');
+        Scheduler.unstable_advanceTime(2);
         return <AsyncText ms={1000} text="Loaded" fakeRenderDuration={1} />;
       };
 
       App = ({shouldSuspend, text = 'Text', textRenderDuration = 5}) => {
-        Scheduler.yieldValue('App');
+        Scheduler.unstable_yieldValue('App');
         return (
           <Profiler id="root" onRender={onRender}>
             <Suspense fallback={<Fallback />}>
@@ -345,10 +352,8 @@ describe('ReactSuspensePlaceholder', () => {
           'Text',
           'Fallback',
         ]);
-        expect(ReactNoop).toMatchRenderedOutput(null);
-
-        // Show the fallback UI.
-        jest.advanceTimersByTime(750);
+        // Since this is initial render we immediately commit the fallback. Another test below
+        // deals with the update case where this suspends.
         expect(ReactNoop).toMatchRenderedOutput('Loading...');
         expect(onRender).toHaveBeenCalledTimes(1);
 
@@ -359,7 +364,7 @@ describe('ReactSuspensePlaceholder', () => {
         expect(onRender.mock.calls[0][3]).toBe(10);
 
         // Resolve the pending promise.
-        jest.advanceTimersByTime(250);
+        jest.advanceTimersByTime(1000);
         expect(Scheduler).toHaveYielded(['Promise resolved [Loaded]']);
         expect(Scheduler).toFlushAndYield(['Suspending', 'Loaded', 'Text']);
         expect(ReactNoop).toMatchRenderedOutput('LoadedText');
@@ -437,7 +442,12 @@ describe('ReactSuspensePlaceholder', () => {
       });
 
       it('properly accounts for base durations when a suspended times out in a concurrent tree', () => {
-        ReactNoop.render(<App shouldSuspend={false} textRenderDuration={5} />);
+        ReactNoop.render(
+          <>
+            <App shouldSuspend={false} textRenderDuration={5} />
+            <Suspense fallback={null} />
+          </>,
+        );
 
         expect(Scheduler).toFlushAndYield(['App', 'Text']);
         expect(ReactNoop).toMatchRenderedOutput('Text');
@@ -448,7 +458,12 @@ describe('ReactSuspensePlaceholder', () => {
         expect(onRender.mock.calls[0][2]).toBe(5);
         expect(onRender.mock.calls[0][3]).toBe(5);
 
-        ReactNoop.render(<App shouldSuspend={true} textRenderDuration={5} />);
+        ReactNoop.render(
+          <>
+            <App shouldSuspend={true} textRenderDuration={5} />
+            <Suspense fallback={null} />
+          </>,
+        );
         expect(Scheduler).toFlushAndYield([
           'App',
           'Suspending',
@@ -476,12 +491,12 @@ describe('ReactSuspensePlaceholder', () => {
         // suspending in the case that we already timed out. To simulate the old
         // behavior, we add a different suspending boundary as a sibling.
         ReactNoop.render(
-          <React.Fragment>
+          <>
             <App shouldSuspend={true} text="New" textRenderDuration={6} />
             <Suspense fallback={null}>
               <AsyncText ms={100} text="Sibling" fakeRenderDuration={1} />
             </Suspense>
-          </React.Fragment>,
+          </>,
         );
         expect(Scheduler).toFlushAndYield([
           'App',
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
index 935ec1449aff5..d4997de38f705 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
@@ -9,15 +9,18 @@ let Suspense;
 let TextResource;
 let textResourceShouldFail;
 
-// These tests use React Noop Renderer.  All new tests should use React Test
-// Renderer and go in ReactSuspense-test; plan is gradually migrate the noop
-// tests to that file.
 describe('ReactSuspenseWithNoopRenderer', () => {
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
   beforeEach(() => {
     jest.resetModules();
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
     React = require('react');
     Fragment = React.Fragment;
     ReactNoop = require('react-noop-renderer');
@@ -25,19 +28,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactCache = require('react-cache');
     Suspense = React.Suspense;
 
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      return new Promise((resolve, reject) =>
-        setTimeout(() => {
-          if (textResourceShouldFail) {
-            Scheduler.yieldValue(`Promise rejected [${text}]`);
-            reject(new Error('Failed to load: ' + text));
-          } else {
-            Scheduler.yieldValue(`Promise resolved [${text}]`);
-            resolve(text);
-          }
-        }, ms),
-      );
-    }, ([text, ms]) => text);
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            if (textResourceShouldFail) {
+              Scheduler.unstable_yieldValue(`Promise rejected [${text}]`);
+              reject(new Error('Failed to load: ' + text));
+            } else {
+              Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+              resolve(text);
+            }
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
     textResourceShouldFail = false;
   });
 
@@ -69,7 +75,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   }
 
   function Text(props) {
-    Scheduler.yieldValue(props.text);
+    Scheduler.unstable_yieldValue(props.text);
     return <span prop={props.text} ref={props.hostRef} />;
   }
 
@@ -77,13 +83,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     const text = props.text;
     try {
       TextResource.read([props.text, props.ms]);
-      Scheduler.yieldValue(text);
+      Scheduler.unstable_yieldValue(text);
       return <span prop={text} />;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend! [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error! [${text}]`);
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
       }
       throw promise;
     }
@@ -100,7 +106,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<Foo />);
 
-    expect(() => Scheduler.flushAll()).toWarnDev([
+    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
       'Warning: maxDuration has been removed from React. ' +
         'Remove the maxDuration prop.' +
         '\n    in Suspense (at **)' +
@@ -108,25 +114,96 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
-  it('suspends rendering and continues later', async () => {
+  it('does not restart rendering for initial render', async () => {
     function Bar(props) {
-      Scheduler.yieldValue('Bar');
+      Scheduler.unstable_yieldValue('Bar');
       return props.children;
     }
 
     function Foo() {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Bar>
+              <AsyncText text="A" ms={100} />
+              <Text text="B" />
+            </Bar>
+          </Suspense>
+          <Text text="C" />
+          <Text text="D" />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Foo',
+      'Bar',
+      // A suspends
+      'Suspend! [A]',
+      // But we keep rendering the siblings
+      'B',
+      'Loading...',
+      'C',
+      // We leave D incomplete.
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    // Flush the promise completely
+    Scheduler.unstable_advanceTime(100);
+    await advanceTimers(100);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+    // Even though the promise has resolved, we should now flush
+    // and commit the in progress render instead of restarting.
+    expect(Scheduler).toFlushAndYield(['D']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Loading...'),
+      span('C'),
+      span('D'),
+    ]);
+
+    // Await one micro task to attach the retry listeners.
+    await null;
+
+    // Next, we'll flush the complete content.
+    expect(Scheduler).toFlushAndYield(['Bar', 'A', 'B']);
+
+    expect(ReactNoop.getChildren()).toEqual([
+      span('A'),
+      span('B'),
+      span('C'),
+      span('D'),
+    ]);
+  });
+
+  it('suspends rendering and continues later', async () => {
+    function Bar(props) {
+      Scheduler.unstable_yieldValue('Bar');
+      return props.children;
+    }
+
+    function Foo({renderBar}) {
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <Bar>
-            <AsyncText text="A" ms={100} />
-            <Text text="B" />
-          </Bar>
+          {renderBar ? (
+            <Bar>
+              <AsyncText text="A" ms={100} />
+              <Text text="B" />
+            </Bar>
+          ) : null}
         </Suspense>
       );
     }
 
+    // Render empty shell.
     ReactNoop.render(<Foo />);
+    expect(Scheduler).toFlushAndYield(['Foo']);
+
+    // The update will suspend.
+    ReactNoop.render(<Foo renderBar={true} />);
     expect(Scheduler).toFlushAndYield([
       'Foo',
       'Bar',
@@ -170,13 +247,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Suspend! [B]',
       'Loading B...',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Advance time by enough to timeout both components and commit their placeholders
-    ReactNoop.expire(4000);
-    await advanceTimers(4000);
-
-    expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([
       span('Loading A...'),
       span('Loading B...'),
@@ -185,8 +255,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Advance time by enough that the first Suspense's promise resolves and
     // switches back to the normal view. The second Suspense should still
     // show the placeholder
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
+    ReactNoop.expire(5000);
+    await advanceTimers(5000);
 
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A']);
@@ -203,6 +273,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   it('continues rendering siblings after suspending', async () => {
+    // A shell is needed. The update cause it to suspend.
+    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+    expect(Scheduler).toFlushAndYield([]);
+    // B suspends. Continue rendering the remaining siblings.
     ReactNoop.render(
       <Suspense fallback={<Text text="Loading..." />}>
         <Text text="A" />
@@ -253,17 +327,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const errorBoundary = React.createRef();
-    function App() {
+    function App({renderContent}) {
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <ErrorBoundary ref={errorBoundary}>
-            <AsyncText text="Result" ms={1000} />
-          </ErrorBoundary>
+          {renderContent ? (
+            <ErrorBoundary ref={errorBoundary}>
+              <AsyncText text="Result" ms={1000} />
+            </ErrorBoundary>
+          ) : null}
         </Suspense>
       );
     }
 
     ReactNoop.render(<App />);
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    ReactNoop.render(<App renderContent={true} />);
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -318,16 +398,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     ReactNoop.render(<App />);
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    ReactNoop.expire(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
     textResourceShouldFail = true;
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
+    ReactNoop.expire(3000);
+    await advanceTimers(3000);
     textResourceShouldFail = false;
 
     expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
@@ -394,20 +469,24 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     function App(props) {
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" />
+          {props.showA && <AsyncText text="A" />}
           {props.showB && <Text text="B" />}
         </Suspense>
       );
     }
 
-    ReactNoop.render(<App showB={false} />);
+    ReactNoop.render(<App showA={false} showB={false} />);
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    ReactNoop.render(<App showA={true} showB={false} />);
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance React's virtual time by enough to fall into a new async bucket,
     // but not enough to expire the suspense timeout.
     ReactNoop.expire(120);
-    ReactNoop.render(<App showB={true} />);
+    ReactNoop.render(<App showA={true} showB={true} />);
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -423,7 +502,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         return <Text text="(empty)" />;
       }
       return (
-        <Suspense>
+        <Suspense fallback="Loading...">
           <AsyncText ms={2000} text="Async" />
         </Suspense>
       );
@@ -447,7 +526,79 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
   });
 
+  it('tries each subsequent level after suspending', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App({step, shouldSuspend}) {
+      return (
+        <Suspense fallback="Loading...">
+          <Text text="Sibling" />
+          {shouldSuspend ? (
+            <AsyncText ms={10000} text={'Step ' + step} />
+          ) : (
+            <Text text={'Step ' + step} />
+          )}
+        </Suspense>
+      );
+    }
+
+    function interrupt() {
+      // React has a heuristic to batch all updates that occur within the same
+      // event. This is a trick to circumvent that heuristic.
+      ReactNoop.flushSync(() => {
+        ReactNoop.renderToRootWithID(null, 'other-root');
+      });
+    }
+
+    // Mount the Suspense boundary without suspending, so that the subsequent
+    // updates suspend with a delay.
+    await ReactNoop.act(async () => {
+      root.render(<App step={0} shouldSuspend={false} />);
+    });
+    await advanceTimers(1000);
+    expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);
+
+    // Schedule an update at several distinct expiration times
+    await ReactNoop.act(async () => {
+      root.render(<App step={1} shouldSuspend={true} />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+      interrupt();
+
+      root.render(<App step={2} shouldSuspend={true} />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+      interrupt();
+
+      root.render(<App step={3} shouldSuspend={true} />);
+      Scheduler.unstable_advanceTime(1000);
+      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+      interrupt();
+
+      root.render(<App step={4} shouldSuspend={false} />);
+    });
+
+    // Should suspend at each distinct level
+    expect(Scheduler).toHaveYielded([
+      'Sibling',
+      'Suspend! [Step 1]',
+      'Sibling',
+      'Suspend! [Step 2]',
+      'Sibling',
+      'Suspend! [Step 3]',
+      'Sibling',
+      'Step 4',
+    ]);
+  });
+
   it('forces an expiration after an update times out', async () => {
+    ReactNoop.render(
+      <Fragment>
+        <Suspense fallback={<Text text="Loading..." />} />
+      </Fragment>,
+    );
+    expect(Scheduler).toFlushAndYield([]);
+
     ReactNoop.render(
       <Fragment>
         <Suspense fallback={<Text text="Loading..." />}>
@@ -485,7 +636,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
-  it('switches to an inner fallback even if it expires later', async () => {
+  it('switches to an inner fallback after suspending for a while', async () => {
     // Advance the virtual time so that we're closer to the edge of a bucket.
     ReactNoop.expire(200);
 
@@ -509,26 +660,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading inner...',
       'Loading outer...',
     ]);
-    // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Expire the outer timeout, but don't expire the inner one.
-    // We should see the outer loading placeholder.
-    ReactNoop.expire(250);
-    await advanceTimers(250);
-    expect(Scheduler).toFlushWithoutYielding();
+    // The outer loading state finishes immediately.
     expect(ReactNoop.getChildren()).toEqual([
       span('Sync'),
       span('Loading outer...'),
     ]);
 
     // Resolve the outer promise.
-    ReactNoop.expire(50);
-    await advanceTimers(50);
-    // At this point, 250ms have elapsed total. The outer placeholder
-    // timed out at around 150-200ms. So, 50-100ms have elapsed since the
-    // placeholder timed out. That means we still haven't reached the 150ms
-    // threshold of the inner placeholder.
+    ReactNoop.expire(300);
+    await advanceTimers(300);
     expect(Scheduler).toHaveYielded(['Promise resolved [Outer content]']);
     expect(Scheduler).toFlushAndYield([
       'Outer content',
@@ -565,6 +705,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   it('renders an expiration boundary synchronously', async () => {
+    spyOnDev(console, 'error');
     // Synchronously render a tree that suspends
     ReactNoop.flushSync(() =>
       ReactNoop.render(
@@ -618,6 +759,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   it('expires early by default', async () => {
+    ReactNoop.render(
+      <Fragment>
+        <Suspense fallback={<Text text="Loading..." />} />
+      </Fragment>,
+    );
+    expect(Scheduler).toFlushAndYield([]);
+
     ReactNoop.render(
       <Fragment>
         <Suspense fallback={<Text text="Loading..." />}>
@@ -654,24 +802,39 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   it('resolves successfully even if fallback render is pending', async () => {
     ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="Async" ms={3000} />
-      </Suspense>,
+      <>
+        <Suspense fallback={<Text text="Loading..." />} />
+      </>,
+    );
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+    ReactNoop.render(
+      <>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" ms={3000} />
+        </Suspense>
+      </>,
     );
     expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
     await advanceTimers(1500);
     expect(Scheduler).toHaveYielded([]);
+    expect(ReactNoop.getChildren()).toEqual([]);
     // Before we have a chance to flush, the promise resolves.
     await advanceTimers(2000);
     expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield(['Async']);
+    expect(Scheduler).toFlushAndYield([
+      // We've now pinged the boundary but we don't know if we should restart yet,
+      // because we haven't completed the suspense boundary.
+      'Loading...',
+      // Once we've completed the boundary we restarted.
+      'Async',
+    ]);
     expect(ReactNoop.getChildren()).toEqual([span('Async')]);
   });
 
   it('throws a helpful error when an update is suspends without a placeholder', () => {
-    expect(() => {
-      ReactNoop.flushSync(() => ReactNoop.render(<AsyncText text="Async" />));
-    }).toThrow(
+    ReactNoop.render(<AsyncText ms={1000} text="Async" />);
+    expect(Scheduler).toFlushAndThrow(
       'AsyncText suspended while rendering, but no fallback UI was specified.',
     );
   });
@@ -683,7 +846,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         <AsyncText text="B" ms={100} />
       </Suspense>,
     );
-    Scheduler.advanceTime(10000);
+    Scheduler.unstable_advanceTime(10000);
     expect(Scheduler).toHaveYielded([
       'Suspend! [A]',
       'Suspend! [B]',
@@ -702,6 +865,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   it('can resume rendering earlier than a timeout', async () => {
+    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+    expect(Scheduler).toFlushAndYield([]);
+
     ReactNoop.render(
       <Suspense fallback={<Text text="Loading..." />}>
         <AsyncText text="Async" ms={100} />
@@ -792,10 +958,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   it('flushes all expired updates in a single batch', async () => {
     class Foo extends React.Component {
       componentDidUpdate() {
-        Scheduler.yieldValue('Commit: ' + this.props.text);
+        Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
       }
       componentDidMount() {
-        Scheduler.yieldValue('Commit: ' + this.props.text);
+        Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
       }
       render() {
         return (
@@ -817,7 +983,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     jest.advanceTimersByTime(1000);
     ReactNoop.render(<Foo text="goodbye" />);
 
-    Scheduler.advanceTime(10000);
+    Scheduler.unstable_advanceTime(10000);
     jest.advanceTimersByTime(10000);
 
     expect(Scheduler).toHaveYielded([
@@ -827,7 +993,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    Scheduler.advanceTime(20000);
+    Scheduler.unstable_advanceTime(20000);
     await advanceTimers(20000);
     expect(Scheduler).toHaveYielded(['Promise resolved [goodbye]']);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
@@ -840,7 +1006,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Regression test. This test used to fall into an infinite loop.
     function ExpensiveText({text}) {
       // This causes the update to expire.
-      Scheduler.advanceTime(10000);
+      Scheduler.unstable_advanceTime(10000);
       // Then something suspends.
       return <AsyncText text={text} ms={200000} />;
     }
@@ -872,11 +1038,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
     expect(ReactNoop).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span prop="A" />
         <span prop="B" />
         <span prop="C" />
-      </React.Fragment>,
+      </>,
     );
   });
 
@@ -944,15 +1110,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ]);
       expect(Scheduler).toFlushExpired(['Step: 1']);
       expect(ReactNoop).toMatchRenderedOutput(
-        <React.Fragment>
+        <>
           <span prop="Step: 1" />
           <span prop="Sibling" />
-        </React.Fragment>,
+        </>,
       );
 
       // Update.
       text.current.setState({step: 2}, () =>
-        Scheduler.yieldValue('Update did commit'),
+        Scheduler.unstable_yieldValue('Update did commit'),
       );
 
       expect(ReactNoop.flushNextYield()).toEqual([
@@ -963,33 +1129,33 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Update did commit',
       ]);
       expect(ReactNoop).toMatchRenderedOutput(
-        <React.Fragment>
+        <>
           <span hidden={true} prop="Step: 1" />
           <span hidden={true} prop="Sibling" />
           <span prop="Loading (1)" />
           <span prop="Loading (2)" />
           <span prop="Loading (3)" />
-        </React.Fragment>,
+        </>,
       );
 
       await advanceTimers(100);
       expect(Scheduler).toHaveYielded(['Promise resolved [Step: 2]']);
       expect(Scheduler).toFlushExpired(['Step: 2']);
       expect(ReactNoop).toMatchRenderedOutput(
-        <React.Fragment>
+        <>
           <span prop="Step: 2" />
           <span prop="Sibling" />
-        </React.Fragment>,
+        </>,
       );
     });
 
     it('does not re-render siblings in loose mode', async () => {
       class TextWithLifecycle extends React.Component {
         componentDidMount() {
-          Scheduler.yieldValue(`Mount [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
         }
         componentDidUpdate() {
-          Scheduler.yieldValue(`Update [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
         }
         render() {
           return <Text {...this.props} />;
@@ -998,10 +1164,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       class AsyncTextWithLifecycle extends React.Component {
         componentDidMount() {
-          Scheduler.yieldValue(`Mount [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
         }
         componentDidUpdate() {
-          Scheduler.yieldValue(`Update [${this.props.text}]`);
+          Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
         }
         render() {
           return <AsyncText {...this.props} />;
@@ -1019,7 +1185,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       ReactNoop.renderLegacySyncRoot(<App />, () =>
-        Scheduler.yieldValue('Commit root'),
+        Scheduler.unstable_yieldValue('Commit root'),
       );
       expect(Scheduler).toHaveYielded([
         'A',
@@ -1035,12 +1201,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Commit root',
       ]);
       expect(ReactNoop).toMatchRenderedOutput(
-        <React.Fragment>
+        <>
           <span hidden={true} prop="A" />
           <span hidden={true} prop="C" />
 
           <span prop="Loading..." />
-        </React.Fragment>,
+        </>,
       );
 
       ReactNoop.expire(1000);
@@ -1049,11 +1215,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushExpired(['B']);
       expect(ReactNoop).toMatchRenderedOutput(
-        <React.Fragment>
+        <>
           <span prop="A" />
           <span prop="B" />
           <span prop="C" />
-        </React.Fragment>,
+        </>,
       );
     });
 
@@ -1062,24 +1228,24 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         constructor(props) {
           super(props);
           const text = props.text;
-          Scheduler.yieldValue('constructor');
+          Scheduler.unstable_yieldValue('constructor');
           try {
             TextResource.read([props.text, props.ms]);
             this.state = {text};
           } catch (promise) {
             if (typeof promise.then === 'function') {
-              Scheduler.yieldValue(`Suspend! [${text}]`);
+              Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
             } else {
-              Scheduler.yieldValue(`Error! [${text}]`);
+              Scheduler.unstable_yieldValue(`Error! [${text}]`);
             }
             throw promise;
           }
         }
         componentDidMount() {
-          Scheduler.yieldValue('componentDidMount');
+          Scheduler.unstable_yieldValue('componentDidMount');
         }
         render() {
-          Scheduler.yieldValue(this.state.text);
+          Scheduler.unstable_yieldValue(this.state.text);
           return <span prop={this.state.text} />;
         }
       }
@@ -1156,7 +1322,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           const child = useRef(null);
 
           useLayoutEffect(() => {
-            Scheduler.yieldValue(ReactNoop.getPendingChildrenAsJSX());
+            Scheduler.unstable_yieldValue(ReactNoop.getPendingChildrenAsJSX());
           });
 
           return (
@@ -1180,10 +1346,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           'Suspend! [Hi]',
           'Loading...',
           // The child should have already been hidden
-          <React.Fragment>
+          <>
             <span hidden={true} />
             <span prop="Loading..." />
-          </React.Fragment>,
+          </>,
         ]);
 
         await advanceTimers(1000);
@@ -1199,7 +1365,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           const child = useRef(null);
 
           useLayoutEffect(() => {
-            Scheduler.yieldValue('Child is hidden: ' + child.current.hidden);
+            Scheduler.unstable_yieldValue(
+              'Child is hidden: ' + child.current.hidden,
+            );
           });
 
           return (
@@ -1232,18 +1400,52 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         expect(Scheduler).toFlushExpired(['Hi']);
       });
     }
+
+    it('handles errors in the return path of a component that suspends', async () => {
+      // Covers an edge case where an error is thrown inside the complete phase
+      // of a component that is in the return path of a component that suspends.
+      // The second error should also be handled (i.e. able to be captured by
+      // an error boundary.
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error, errorInfo) {
+          return {error};
+        }
+        render() {
+          if (this.state.error) {
+            return `Caught an error: ${this.state.error.message}`;
+          }
+          return this.props.children;
+        }
+      }
+
+      ReactNoop.renderLegacySyncRoot(
+        <ErrorBoundary>
+          <Suspense fallback="Loading...">
+            <errorInCompletePhase>
+              <AsyncText ms={1000} text="Async" />
+            </errorInCompletePhase>
+          </Suspense>
+        </ErrorBoundary>,
+      );
+
+      expect(Scheduler).toHaveYielded(['Suspend! [Async]']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        'Caught an error: Error in host config.',
+      );
+    });
   });
 
   it('does not call lifecycles of a suspended component', async () => {
     class TextWithLifecycle extends React.Component {
       componentDidMount() {
-        Scheduler.yieldValue(`Mount [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue(`Update [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
       }
       componentWillUnmount() {
-        Scheduler.yieldValue(`Unmount [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
       }
       render() {
         return <Text {...this.props} />;
@@ -1252,26 +1454,26 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     class AsyncTextWithLifecycle extends React.Component {
       componentDidMount() {
-        Scheduler.yieldValue(`Mount [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
       }
       componentDidUpdate() {
-        Scheduler.yieldValue(`Update [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
       }
       componentWillUnmount() {
-        Scheduler.yieldValue(`Unmount [${this.props.text}]`);
+        Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
       }
       render() {
         const text = this.props.text;
         const ms = this.props.ms;
         try {
           TextResource.read([text, ms]);
-          Scheduler.yieldValue(text);
+          Scheduler.unstable_yieldValue(text);
           return <span prop={text} />;
         } catch (promise) {
           if (typeof promise.then === 'function') {
-            Scheduler.yieldValue(`Suspend! [${text}]`);
+            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
           } else {
-            Scheduler.yieldValue(`Error! [${text}]`);
+            Scheduler.unstable_yieldValue(`Error! [${text}]`);
           }
           throw promise;
         }
@@ -1289,7 +1491,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     ReactNoop.renderLegacySyncRoot(<App />, () =>
-      Scheduler.yieldValue('Commit root'),
+      Scheduler.unstable_yieldValue('Commit root'),
     );
     expect(Scheduler).toHaveYielded([
       'A',
@@ -1305,31 +1507,181 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Commit root',
     ]);
     expect(ReactNoop).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span hidden={true} prop="A" />
         <span hidden={true} prop="C" />
         <span prop="Loading..." />
-      </React.Fragment>,
+      </>,
     );
   });
 
+  it('does not call lifecycles of a suspended component (hooks)', async () => {
+    function TextWithLifecycle(props) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `Destroy Layout Effect [${props.text}]`,
+          );
+        };
+      }, [props.text]);
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
+        return () => {
+          Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      return <Text {...props} />;
+    }
+
+    function AsyncTextWithLifecycle(props) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `Destroy Layout Effect [${props.text}]`,
+          );
+        };
+      }, [props.text]);
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
+        return () => {
+          Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      const text = props.text;
+      const ms = props.ms;
+      try {
+        TextResource.read([text, ms]);
+        Scheduler.unstable_yieldValue(text);
+        return <span prop={text} />;
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+        } else {
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+        }
+        throw promise;
+      }
+    }
+
+    function App({text}) {
+      return (
+        <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+          <TextWithLifecycle text="A" />
+          <AsyncTextWithLifecycle ms={100} text={text} />
+          <TextWithLifecycle text="C" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.renderLegacySyncRoot(<App text="B" />, () =>
+      Scheduler.unstable_yieldValue('Commit root'),
+    );
+    expect(Scheduler).toHaveYielded([
+      'A',
+      'Suspend! [B]',
+      'C',
+      'Loading...',
+
+      'Layout Effect [A]',
+      // B's effect should not fire because it suspended
+      // 'Layout Effect [B]',
+      'Layout Effect [C]',
+      'Layout Effect [Loading...]',
+      'Commit root',
+    ]);
+
+    // Flush passive effects.
+    expect(Scheduler).toFlushAndYield([
+      'Effect [A]',
+      // B's effect should not fire because it suspended
+      // 'Effect [B]',
+      'Effect [C]',
+      'Effect [Loading...]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true} prop="A" />
+        <span hidden={true} prop="C" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    Scheduler.unstable_advanceTime(500);
+    await advanceTimers(500);
+
+    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+
+    expect(Scheduler).toFlushAndYield([
+      'B',
+      'Destroy Layout Effect [Loading...]',
+      'Destroy Effect [Loading...]',
+      'Layout Effect [B]',
+      'Effect [B]',
+    ]);
+
+    // Update
+    ReactNoop.renderLegacySyncRoot(<App text="B2" />, () =>
+      Scheduler.unstable_yieldValue('Commit root'),
+    );
+
+    expect(Scheduler).toHaveYielded([
+      'A',
+      'Suspend! [B2]',
+      'C',
+      'Loading...',
+
+      // B2's effect should not fire because it suspended
+      // 'Layout Effect [B2]',
+      'Layout Effect [Loading...]',
+      'Commit root',
+    ]);
+
+    // Flush passive effects.
+    expect(Scheduler).toFlushAndYield([
+      // B2's effect should not fire because it suspended
+      // 'Effect [B2]',
+      'Effect [Loading...]',
+    ]);
+
+    Scheduler.unstable_advanceTime(500);
+    await advanceTimers(500);
+
+    expect(Scheduler).toHaveYielded(['Promise resolved [B2]']);
+
+    expect(Scheduler).toFlushAndYield([
+      'B2',
+      'Destroy Layout Effect [Loading...]',
+      'Destroy Effect [Loading...]',
+      'Destroy Layout Effect [B]',
+      'Layout Effect [B2]',
+      'Destroy Effect [B]',
+      'Effect [B2]',
+    ]);
+  });
+
   it('suspends for longer if something took a long (CPU bound) time to render', async () => {
-    function Foo() {
-      Scheduler.yieldValue('Foo');
+    function Foo({renderContent}) {
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={5000} />
+          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
         </Suspense>
       );
     }
 
     ReactNoop.render(<Foo />);
-    Scheduler.advanceTime(100);
+    expect(Scheduler).toFlushAndYield(['Foo']);
+
+    ReactNoop.render(<Foo renderContent={true} />);
+    Scheduler.unstable_advanceTime(100);
     await advanceTimers(100);
     // Start rendering
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
     // For some reason it took a long time to render Foo.
-    Scheduler.advanceTime(1250);
+    Scheduler.unstable_advanceTime(1250);
     await advanceTimers(1250);
     expect(Scheduler).toFlushAndYield([
       // A suspends
@@ -1340,7 +1692,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Flush some of the time
-    Scheduler.advanceTime(450);
+    Scheduler.unstable_advanceTime(450);
     await advanceTimers(450);
     // Because we've already been waiting for so long we can
     // wait a bit longer. Still nothing...
@@ -1348,14 +1700,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Eventually we'll show the fallback.
-    Scheduler.advanceTime(500);
+    Scheduler.unstable_advanceTime(500);
     await advanceTimers(500);
     // No need to rerender.
     expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
     // Flush the promise completely
-    Scheduler.advanceTime(4500);
+    Scheduler.unstable_advanceTime(4500);
     await advanceTimers(4500);
     // Renders successfully
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
@@ -1363,9 +1715,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
   });
 
-  it('suspends for longer if a fallback has been shown for a long time', async () => {
+  it('does not suspends if a fallback has been shown for a long time', async () => {
     function Foo() {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
           <AsyncText text="A" ms={5000} />
@@ -1387,17 +1739,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading more...',
       'Loading...',
     ]);
-    // We're now suspended and we haven't shown anything yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Show the fallback.
-    Scheduler.advanceTime(400);
-    await advanceTimers(400);
-    expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
     // Wait a long time.
-    Scheduler.advanceTime(5000);
+    Scheduler.unstable_advanceTime(5000);
     await advanceTimers(5000);
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
 
@@ -1408,46 +1753,96 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Suspend! [B]',
       'Loading more...',
     ]);
-    // Because we've already been waiting for so long we can
-    // wait a bit longer. Still nothing...
-    Scheduler.advanceTime(600);
-    await advanceTimers(600);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    // Eventually we'll show more content with inner fallback.
-    Scheduler.advanceTime(3000);
-    await advanceTimers(3000);
-    // No need to rerender.
-    expect(Scheduler).toFlushWithoutYielding();
+    // Because we've already been waiting for so long we've exceeded
+    // our threshold and we show the next level immediately.
     expect(ReactNoop.getChildren()).toEqual([
       span('A'),
       span('Loading more...'),
     ]);
 
     // Flush the last promise completely
-    Scheduler.advanceTime(4500);
-    await advanceTimers(4500);
+    Scheduler.unstable_advanceTime(5000);
+    await advanceTimers(5000);
     // Renders successfully
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
-  it('does not suspend for very long after a higher priority update', async () => {
+  it('does suspend if a fallback has been shown for a short time', async () => {
     function Foo() {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={5000} />
+          <AsyncText text="A" ms={200} />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" ms={450} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    // Start rendering
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      // A suspends
+      'Suspend! [A]',
+      // B suspends
+      'Suspend! [B]',
+      'Loading more...',
+      'Loading...',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+    // Wait a short time.
+    Scheduler.unstable_advanceTime(250);
+    await advanceTimers(250);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+    // Retry with the new content.
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      // B still suspends
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    // Because we've already been waiting for so long we can
+    // wait a bit longer. Still nothing...
+    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+    Scheduler.unstable_advanceTime(200);
+    await advanceTimers(200);
+
+    // Before we commit another Promise resolves.
+    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+    // We're still showing the first loading state.
+    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    // Restart and render the complete content.
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+  });
+
+  it('does not suspend for very long after a higher priority update', async () => {
+    function Foo({renderContent}) {
+      Scheduler.unstable_yieldValue('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
         </Suspense>
       );
     }
 
-    ReactNoop.discreteUpdates(() => ReactNoop.render(<Foo />));
+    ReactNoop.render(<Foo />);
+    expect(Scheduler).toFlushAndYield(['Foo']);
+
+    ReactNoop.discreteUpdates(() =>
+      ReactNoop.render(<Foo renderContent={true} />),
+    );
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
     // Advance some time.
-    Scheduler.advanceTime(100);
+    Scheduler.unstable_advanceTime(100);
     await advanceTimers(100);
 
     expect(Scheduler).toFlushAndYield([
@@ -1455,18 +1850,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Suspend! [A]',
       'Loading...',
     ]);
+
     // We're now suspended and we haven't shown anything yet.
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Flush some of the time
-    Scheduler.advanceTime(500);
-    expect(() => {
-      jest.advanceTimersByTime(500);
-    }).toWarnDev(
-      'The following components suspended during a user-blocking ' +
-        'update: AsyncText',
-      {withoutStack: true},
-    );
+    Scheduler.unstable_advanceTime(500);
+    jest.advanceTimersByTime(500);
 
     // We should have already shown the fallback.
     // When we wrote this test, we inferred the start time of high priority
@@ -1476,51 +1866,193 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
   });
 
-  it('warns when suspending inside discrete update', async () => {
-    function A() {
-      TextResource.read(['A', 1000]);
-      return 'A';
+  it('warns when a low priority update suspends inside a high priority update for functional components', async () => {
+    let _setShow;
+    function App() {
+      let [show, setShow] = React.useState(false);
+      _setShow = setShow;
+      return (
+        <Suspense fallback="Loading...">
+          {show && <AsyncText text="A" />}
+        </Suspense>
+      );
+    }
+
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App />);
+    });
+
+    expect(() => {
+      ReactNoop.act(() => {
+        Scheduler.unstable_runWithPriority(
+          Scheduler.unstable_UserBlockingPriority,
+          () => _setShow(true),
+        );
+      });
+    }).toErrorDev(
+      'Warning: App triggered a user-blocking update that suspended.' + '\n\n',
+      {withoutStack: true},
+    );
+  });
+
+  it('warns when a low priority update suspends inside a high priority update for class components', async () => {
+    let show;
+    class App extends React.Component {
+      state = {show: false};
+
+      render() {
+        show = () => this.setState({show: true});
+        return (
+          <Suspense fallback="Loading...">
+            {this.state.show && <AsyncText text="A" />}
+          </Suspense>
+        );
+      }
     }
 
-    function B() {
-      return 'B';
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App />);
+    });
+
+    expect(() => {
+      ReactNoop.act(() => {
+        Scheduler.unstable_runWithPriority(
+          Scheduler.unstable_UserBlockingPriority,
+          () => show(),
+        );
+      });
+    }).toErrorDev(
+      'Warning: App triggered a user-blocking update that suspended.' + '\n\n',
+      {withoutStack: true},
+    );
+  });
+
+  it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
+    let showB;
+    class App extends React.Component {
+      state = {showB: false};
+
+      render() {
+        showB = () => this.setState({showB: true});
+        return (
+          <Suspense fallback="Loading...">
+            {<AsyncText text="A" />}
+            {this.state.showB && <AsyncText text="B" />}
+          </Suspense>
+        );
+      }
     }
 
-    function C() {
-      TextResource.read(['C', 1000]);
-      return 'C';
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App />);
+    });
+
+    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    ReactNoop.act(() => {
+      Scheduler.unstable_runWithPriority(
+        Scheduler.unstable_UserBlockingPriority,
+        () => showB(),
+      );
+    });
+
+    expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Suspend! [B]']);
+  });
+
+  it(
+    'warns when component that triggered user-blocking update is between Suspense boundary ' +
+      'and component that suspended',
+    async () => {
+      let _setShow;
+      function A() {
+        const [show, setShow] = React.useState(false);
+        _setShow = setShow;
+        return show && <AsyncText text="A" />;
+      }
+      function App() {
+        return (
+          <Suspense fallback="Loading...">
+            <A />
+          </Suspense>
+        );
+      }
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+
+      expect(() => {
+        ReactNoop.act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => _setShow(true),
+          );
+        });
+      }).toErrorDev(
+        'Warning: A triggered a user-blocking update that suspended.' + '\n\n',
+        {withoutStack: true},
+      );
+    },
+  );
+
+  it('normal priority updates suspending do not warn for class components', async () => {
+    let show;
+    class App extends React.Component {
+      state = {show: false};
+
+      render() {
+        show = () => this.setState({show: true});
+        return (
+          <Suspense fallback="Loading...">
+            {this.state.show && <AsyncText text="A" />}
+          </Suspense>
+        );
+      }
     }
 
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App />);
+    });
+
+    // also make sure lowpriority is okay
+    await ReactNoop.act(async () => show(true));
+
+    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+    Scheduler.unstable_advanceTime(100);
+    await advanceTimers(100);
+
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+  });
+
+  it('normal priority updates suspending do not warn for functional components', async () => {
+    let _setShow;
     function App() {
+      let [show, setShow] = React.useState(false);
+      _setShow = setShow;
       return (
         <Suspense fallback="Loading...">
-          <A />
-          <B />
-          <C />
-          <C />
-          <C />
-          <C />
+          {show && <AsyncText text="A" />}
         </Suspense>
       );
     }
 
-    ReactNoop.discreteUpdates(() => ReactNoop.render(<App />));
-    Scheduler.flushAll();
+    await ReactNoop.act(async () => {
+      ReactNoop.render(<App />);
+    });
 
-    // Warning is not flushed until the commit phase
+    // also make sure lowpriority is okay
+    await ReactNoop.act(async () => _setShow(true));
 
-    // Timeout and commit the fallback
-    expect(() => {
-      jest.advanceTimersByTime(1000);
-    }).toWarnDev(
-      'The following components suspended during a user-blocking update: A, C',
-      {withoutStack: true},
-    );
+    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+    Scheduler.unstable_advanceTime(100);
+    await advanceTimers(100);
+
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
   });
 
   it('shows the parent fallback if the inner fallback should be avoided', async () => {
     function Foo({showC}) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Initial load..." />}>
           <Suspense
@@ -1541,15 +2073,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'B',
       'Initial load...',
     ]);
-    // We're still suspended.
-    expect(ReactNoop.getChildren()).toEqual([]);
-    // Flush to skip suspended time.
-    Scheduler.advanceTime(600);
-    await advanceTimers(600);
     expect(ReactNoop.getChildren()).toEqual([span('Initial load...')]);
 
     // Eventually we resolve and show the data.
-    Scheduler.advanceTime(5000);
+    Scheduler.unstable_advanceTime(5000);
     await advanceTimers(5000);
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A', 'B']);
@@ -1565,7 +2092,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'B',
     ]);
     // Flush to skip suspended time.
-    Scheduler.advanceTime(600);
+    Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
     // Since the optional suspense boundary is already showing its content,
     // we have to use the inner fallback instead.
@@ -1576,7 +2103,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // Later we load the data.
-    Scheduler.advanceTime(5000);
+    Scheduler.unstable_advanceTime(5000);
     await advanceTimers(5000);
     expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
     expect(Scheduler).toFlushAndYield(['A', 'C']);
@@ -1585,7 +2112,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   it('favors showing the inner fallback for nested top level avoided fallback', async () => {
     function Foo({showB}) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense
           unstable_avoidThisFallback={true}
@@ -1608,7 +2135,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading B...',
     ]);
     // Flush to skip suspended time.
-    Scheduler.advanceTime(600);
+    Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
@@ -1616,7 +2143,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   it('keeps showing an avoided parent fallback if it is already showing', async () => {
     function Foo({showB}) {
-      Scheduler.yieldValue('Foo');
+      Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Initial load..." />}>
           <Suspense
@@ -1651,28 +2178,31 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
     // Flush to skip suspended time.
-    Scheduler.advanceTime(600);
+    Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
   });
 
   it('commits a suspended idle pri render within a reasonable time', async () => {
-    function Foo({something}) {
+    function Foo({renderContent}) {
       return (
         <Fragment>
           <Suspense fallback={<Text text="Loading A..." />}>
-            <AsyncText text="A" ms={10000} />
+            {renderContent ? <AsyncText text="A" ms={10000} /> : null}
           </Suspense>
         </Fragment>
       );
     }
 
     ReactNoop.render(<Foo />);
+    expect(Scheduler).toFlushAndYield([]);
+
+    ReactNoop.render(<Foo renderContent={1} />);
 
     // Took a long time to render. This is to ensure we get a long suspense time.
     // Could also use something like withSuspenseConfig to simulate this.
-    Scheduler.advanceTime(1500);
+    Scheduler.unstable_advanceTime(1500);
     await advanceTimers(1500);
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);
@@ -1681,22 +2211,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Schedule an update at idle pri.
     Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () =>
-      ReactNoop.render(<Foo something={true} />),
+      ReactNoop.render(<Foo renderContent={2} />),
     );
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);
+    // We won't even work on Idle priority.
+    expect(Scheduler).toFlushAndYield([]);
 
     // We're still suspended.
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance time a little bit.
-    Scheduler.advanceTime(150);
+    Scheduler.unstable_advanceTime(150);
     await advanceTimers(150);
 
     // We should not have committed yet because we had a long suspense time.
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Flush to skip suspended time.
-    Scheduler.advanceTime(600);
+    Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
     expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);
@@ -1724,12 +2255,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
       // Only a short time is needed to unsuspend the initial loading state.
-      Scheduler.advanceTime(400);
+      Scheduler.unstable_advanceTime(400);
       await advanceTimers(400);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
       // Later we load the data.
-      Scheduler.advanceTime(5000);
+      Scheduler.unstable_advanceTime(5000);
       await advanceTimers(5000);
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
@@ -1742,11 +2273,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-      Scheduler.advanceTime(1000);
+      Scheduler.unstable_advanceTime(1000);
       await advanceTimers(1000);
       // Even after a second, we have still not yet flushed the loading state.
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
-      Scheduler.advanceTime(1100);
+      Scheduler.unstable_advanceTime(1100);
       await advanceTimers(1100);
       // After the timeout, we do show the loading state.
       expect(ReactNoop.getChildren()).toEqual([
@@ -1754,7 +2285,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         span('Loading...'),
       ]);
       // Later we load the data.
-      Scheduler.advanceTime(3000);
+      Scheduler.unstable_advanceTime(3000);
       await advanceTimers(3000);
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
@@ -1788,13 +2319,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
-        Scheduler.advanceTime(400);
+        Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
         expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
       });
 
       // Later we load the data.
-      Scheduler.advanceTime(5000);
+      Scheduler.unstable_advanceTime(5000);
       await advanceTimers(5000);
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
@@ -1808,11 +2339,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         );
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-        Scheduler.advanceTime(1000);
+        Scheduler.unstable_advanceTime(1000);
         await advanceTimers(1000);
         // Even after a second, we have still not yet flushed the loading state.
         expect(ReactNoop.getChildren()).toEqual([span('A')]);
-        Scheduler.advanceTime(1100);
+        Scheduler.unstable_advanceTime(1100);
         await advanceTimers(1100);
         // After the timeout, we do show the loading state.
         expect(ReactNoop.getChildren()).toEqual([
@@ -1821,7 +2352,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         ]);
       });
       // Later we load the data.
-      Scheduler.advanceTime(3000);
+      Scheduler.unstable_advanceTime(3000);
       await advanceTimers(3000);
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
@@ -1858,13 +2389,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
-        Scheduler.advanceTime(400);
+        Scheduler.unstable_advanceTime(400);
         await advanceTimers(400);
         expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
       });
 
       // Later we load the data.
-      Scheduler.advanceTime(5000);
+      Scheduler.unstable_advanceTime(5000);
       await advanceTimers(5000);
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
@@ -1878,11 +2409,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         );
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-        Scheduler.advanceTime(1000);
+        Scheduler.unstable_advanceTime(1000);
         await advanceTimers(1000);
         // Even after a second, we have still not yet flushed the loading state.
         expect(ReactNoop.getChildren()).toEqual([span('A')]);
-        Scheduler.advanceTime(1100);
+        Scheduler.unstable_advanceTime(1100);
         await advanceTimers(1100);
         // After the timeout, we do show the loading state.
         expect(ReactNoop.getChildren()).toEqual([
@@ -1891,7 +2422,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         ]);
       });
       // Later we load the data.
-      Scheduler.advanceTime(3000);
+      Scheduler.unstable_advanceTime(3000);
       await advanceTimers(3000);
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
@@ -1911,7 +2442,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Initial render.
     ReactNoop.render(<App page="A" />);
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.advanceTime(2000);
+    Scheduler.unstable_advanceTime(2000);
     await advanceTimers(2000);
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A']);
@@ -1932,7 +2463,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
     // Suspended
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
-    Scheduler.advanceTime(500);
+    Scheduler.unstable_advanceTime(500);
     await advanceTimers(500);
     // Committed loading state.
     expect(ReactNoop.getChildren()).toEqual([
@@ -1940,7 +2471,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       span('Loading...'),
     ]);
 
-    Scheduler.advanceTime(2000);
+    Scheduler.unstable_advanceTime(2000);
     await advanceTimers(2000);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['B']);
@@ -1965,11 +2496,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading...',
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    Scheduler.advanceTime(1200);
+    Scheduler.unstable_advanceTime(1200);
     await advanceTimers(1200);
     // Even after a second, we have still not yet flushed the loading state.
     expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    Scheduler.advanceTime(1200);
+    Scheduler.unstable_advanceTime(1200);
     await advanceTimers(1200);
     // After the two second timeout we show the loading state.
     expect(ReactNoop.getChildren()).toEqual([
@@ -1995,7 +2526,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Initial render.
     ReactNoop.render(<App page="A" />);
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [A]', 'Loading...']);
-    Scheduler.advanceTime(3000);
+    Scheduler.unstable_advanceTime(3000);
     await advanceTimers(3000);
     expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
@@ -2011,12 +2542,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Suspended
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.advanceTime(1800);
+    Scheduler.unstable_advanceTime(1800);
     await advanceTimers(1800);
     expect(Scheduler).toFlushAndYield([]);
     // We should still be suspended here because this loading state should be avoided.
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.advanceTime(1500);
+    Scheduler.unstable_advanceTime(1500);
     await advanceTimers(1500);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(ReactNoop.getChildren()).toEqual([
@@ -2059,12 +2590,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Suspended
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.advanceTime(1800);
+    Scheduler.unstable_advanceTime(1800);
     await advanceTimers(1800);
     expect(Scheduler).toFlushAndYield([]);
     // We should still be suspended here because this loading state should be avoided.
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.advanceTime(1500);
+    Scheduler.unstable_advanceTime(1500);
     await advanceTimers(1500);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(ReactNoop.getChildren()).toEqual([
@@ -2120,7 +2651,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       transitionToPage('B');
       // Rendering B is quick and we didn't have enough
       // time to show the loading indicator.
-      Scheduler.advanceTime(200);
+      Scheduler.unstable_advanceTime(200);
       await advanceTimers(200);
       expect(Scheduler).toFlushAndYield(['A', 'L', 'B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
@@ -2130,14 +2661,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       transitionToPage('C');
       // Rendering C is a bit slower so we've already showed
       // the loading indicator.
-      Scheduler.advanceTime(600);
+      Scheduler.unstable_advanceTime(600);
       await advanceTimers(600);
       expect(Scheduler).toFlushAndYield(['B', 'L', 'C']);
       // We're technically done now but we haven't shown the
       // loading indicator for long enough yet so we'll suspend
       // while we keep it on the screen a bit longer.
       expect(ReactNoop.getChildren()).toEqual([span('B'), span('L')]);
-      Scheduler.advanceTime(400);
+      Scheduler.unstable_advanceTime(400);
       await advanceTimers(400);
       expect(ReactNoop.getChildren()).toEqual([span('C')]);
     });
@@ -2146,7 +2677,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       transitionToPage('D');
       // Rendering D is very slow so we've already showed
       // the loading indicator.
-      Scheduler.advanceTime(1000);
+      Scheduler.unstable_advanceTime(1000);
       await advanceTimers(1000);
       expect(Scheduler).toFlushAndYield(['C', 'L', 'D']);
       // However, since we exceeded the minimum time to show
@@ -2154,4 +2685,213 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('D')]);
     });
   });
+
+  it("suspended commit remains suspended even if there's another update at same expiration", async () => {
+    // Regression test
+    function App({text}) {
+      return (
+        <Suspense fallback="Loading...">
+          <AsyncText ms={2000} text={text} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App text="Initial" />);
+    });
+
+    // Resolve initial render
+    await ReactNoop.act(async () => {
+      Scheduler.unstable_advanceTime(2000);
+      await advanceTimers(2000);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Suspend! [Initial]',
+      'Promise resolved [Initial]',
+      'Initial',
+    ]);
+    expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+
+    // Update. Since showing a fallback would hide content that's already
+    // visible, it should suspend for a bit without committing.
+    await ReactNoop.act(async () => {
+      root.render(<App text="First update" />);
+
+      expect(Scheduler).toFlushAndYield(['Suspend! [First update]']);
+      // Should not display a fallback
+      expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+    });
+
+    // Update again. This should also suspend for a bit.
+    await ReactNoop.act(async () => {
+      root.render(<App text="Second update" />);
+
+      expect(Scheduler).toFlushAndYield(['Suspend! [Second update]']);
+      // Should not display a fallback
+      expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+    });
+  });
+
+  it('regression test: resets current "debug phase" after suspending', async () => {
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Foo suspend={false} />
+        </Suspense>
+      );
+    }
+
+    const thenable = {then() {}};
+
+    let foo;
+    class Foo extends React.Component {
+      state = {suspend: false};
+      render() {
+        foo = this;
+
+        if (this.state.suspend) {
+          Scheduler.unstable_yieldValue('Suspend!');
+          throw thenable;
+        }
+
+        return <Text text="Foo" />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+
+    expect(Scheduler).toHaveYielded(['Foo']);
+
+    await ReactNoop.act(async () => {
+      foo.setState({suspend: true});
+
+      // In the regression that this covers, we would neglect to reset the
+      // current debug phase after suspending (in the catch block), so React
+      // thinks we're still inside the render phase.
+      expect(Scheduler).toFlushAndYieldThrough(['Suspend!']);
+
+      // Then when this setState happens, React would incorrectly fire a warning
+      // about updates that happen the render phase (only fired by classes).
+      foo.setState({suspend: false});
+    });
+
+    expect(root).toMatchRenderedOutput(<span prop="Foo" />);
+  });
+
+  it('should not render hidden content while suspended on higher pri', async () => {
+    function Offscreen() {
+      Scheduler.unstable_yieldValue('Offscreen');
+      return 'Offscreen';
+    }
+    function App({showContent}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Commit');
+      });
+      return (
+        <>
+          <div hidden={true}>
+            <Offscreen />
+          </div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {showContent ? <AsyncText text="A" ms={2000} /> : null}
+          </Suspense>
+        </>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App showContent={false} />);
+    expect(Scheduler).toFlushAndYieldThrough(['Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+    // Start transition.
+    React.unstable_withSuspenseConfig(
+      () => {
+        ReactNoop.render(<App showContent={true} />);
+      },
+      {timeoutMs: 2000},
+    );
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+    Scheduler.unstable_advanceTime(2000);
+    await advanceTimers(2000);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true} />
+        <span prop="A" />
+      </>,
+    );
+    expect(Scheduler).toFlushAndYield(['Offscreen']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true}>Offscreen</div>
+        <span prop="A" />
+      </>,
+    );
+  });
+
+  it('should be able to unblock higher pri content before suspended hidden', async () => {
+    function Offscreen() {
+      Scheduler.unstable_yieldValue('Offscreen');
+      return 'Offscreen';
+    }
+    function App({showContent}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Commit');
+      });
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <div hidden={true}>
+            <AsyncText text="A" ms={2000} />
+            <Offscreen />
+          </div>
+          {showContent ? <AsyncText text="A" ms={2000} /> : null}
+        </Suspense>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App showContent={false} />);
+    expect(Scheduler).toFlushAndYieldThrough(['Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+    // Partially render through the hidden content.
+    expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
+
+    // Start transition.
+    React.unstable_withSuspenseConfig(
+      () => {
+        ReactNoop.render(<App showContent={true} />);
+      },
+      {timeoutMs: 5000},
+    );
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+    Scheduler.unstable_advanceTime(2000);
+    await advanceTimers(2000);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true} />
+        <span prop="A" />
+      </>,
+    );
+    expect(Scheduler).toFlushAndYield(['A', 'Offscreen']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true}>
+          <span prop="A" />
+          Offscreen
+        </div>
+        <span prop="A" />
+      </>,
+    );
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.internal.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.internal.js
new file mode 100644
index 0000000000000..22451a3bbee40
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.internal.js
@@ -0,0 +1,105 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let ReactFeatureFlags;
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let useState;
+let useTransition;
+let act;
+
+describe('ReactTransition', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+    ReactFeatureFlags.enableSchedulerTracing = true;
+    ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useTransition = React.useTransition;
+    Suspense = React.Suspense;
+    act = ReactNoop.act;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  function createAsyncText(text) {
+    let resolved = false;
+    let Component = function() {
+      if (!resolved) {
+        Scheduler.unstable_yieldValue('Suspend! [' + text + ']');
+        throw promise;
+      }
+      return <Text text={text} />;
+    };
+    let promise = new Promise(resolve => {
+      Component.resolve = function() {
+        resolved = true;
+        return resolve();
+      };
+    });
+    return Component;
+  }
+
+  it.experimental(
+    'isPending works even if called from outside an input event',
+    async () => {
+      const Async = createAsyncText('Async');
+      let start;
+      function App() {
+        const [show, setShow] = useState(false);
+        const [startTransition, isPending] = useTransition();
+        start = () => startTransition(() => setShow(true));
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isPending ? <Text text="Pending..." /> : null}
+            {show ? <Async /> : <Text text="(empty)" />}
+          </Suspense>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(async () => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['(empty)']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      await act(async () => {
+        start();
+
+        expect(Scheduler).toFlushAndYield([
+          'Pending...',
+          '(empty)',
+          'Suspend! [Async]',
+          'Loading...',
+        ]);
+
+        expect(root).toMatchRenderedOutput('Pending...(empty)');
+
+        await Async.resolve();
+      });
+      expect(Scheduler).toHaveYielded(['Async']);
+      expect(root).toMatchRenderedOutput('Async');
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
index 4372eb2baca1f..b438a6f7e6789 100644
--- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
+++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ AllLifecycles [mount]
     ⚛ AllLifecycles.componentWillMount
@@ -15,8 +13,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
   ⚛ (Calling Lifecycle Methods: 1 Total)
     ⚛ AllLifecycles.componentDidMount
 
-⚛ (Waiting for async callback...)
-
 // Update
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ AllLifecycles [update]
@@ -31,8 +27,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
   ⚛ (Calling Lifecycle Methods: 2 Total)
     ⚛ AllLifecycles.componentDidUpdate
 
-⚛ (Waiting for async callback...)
-
 // Unmount
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -45,9 +39,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = `
-"⚛ (Waiting for async callback...)
-
-// The commit phase should mention A and B just once
+"// The commit phase should mention A and B just once
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
     ⚛ A [update]
@@ -62,8 +54,6 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
     ⚛ A.componentDidUpdate
     ⚛ B.componentDidUpdate
 
-⚛ (Waiting for async callback...)
-
 // Because of deduplication, we don't know B was cascading,
 // but we should still see the warning for the commit phase.
 ⚛ (React Tree Reconciliation: Completed Root)
@@ -92,9 +82,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
 `;
 
 exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Profiler [mount]
     ⚛ Parent [mount]
@@ -108,9 +96,7 @@ exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components
 `;
 
 exports[`ReactDebugFiberPerf does not include context provider or consumer in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
@@ -143,9 +129,7 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is
 `;
 
 exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should not print a warning
+"// Should not print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ NotCascading [mount]
@@ -156,8 +140,6 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Should not print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
@@ -172,9 +154,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
 `;
 
 exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
@@ -184,8 +164,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Update
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
@@ -196,8 +174,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
   ⚛ (Committing Host Effects: 2 Total)
   ⚛ (Calling Lifecycle Methods: 2 Total)
 
-⚛ (Waiting for async callback...)
-
 // Unmount
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -209,17 +185,13 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Start rendering through B
+"// Start rendering through B
 ⚛ (React Tree Reconciliation: Yielded)
   ⚛ Parent [mount]
     ⚛ A [mount]
       ⚛ Child [mount]
     ⚛ B [mount]
 
-⚛ (Waiting for async callback...)
-
 // Complete the rest
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
@@ -245,8 +217,6 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Flush the child
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Child [mount]
@@ -259,9 +229,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf properly displays the forwardRef component in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ ForwardRef [mount]
@@ -279,9 +247,7 @@ exports[`ReactDebugFiberPerf properly displays the forwardRef component in measu
 `;
 
 exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Stop on Baddie and restart from Boundary
+"// Stop on Baddie and restart from Boundary
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⛔ Boundary [mount] Warning: An error was thrown inside this error boundary
@@ -313,9 +279,7 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Will fatal
+"// Will fatal
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Baddie [mount]
@@ -329,8 +293,6 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 1 Total)
 
-⚛ (Waiting for async callback...)
-
 // Will reconcile from a clean state
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
@@ -344,9 +306,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should include just A and B, no Parents
+"// Should include just A and B, no Parents
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ A [update]
   ⚛ B [update]
@@ -359,43 +319,65 @@ exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
-    ⛔ Suspense [mount] Warning: Rendering was suspended
     ⚛ Suspense [mount]
-      ⚛ Spinner [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
 "
 `;
 
 exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
-    ⛔ Suspense [mount] Warning: Rendering was suspended
     ⚛ Suspense [mount]
-      ⚛ Spinner [mount]
 
-⚛ (Waiting for async callback...)
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
 
 ⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [update]
+    ⛔ Suspense [update] Warning: Rendering was suspended
+    ⚛ Suspense [update]
+      ⚛ Spinner [mount]
+"
+`;
+
+exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = `
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Suspense [mount]
-      ⚛ Foo [mount]
 
 ⚛ (Committing Changes)
   ⚛ (Committing Snapshot Effects: 0 Total)
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
+
+⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [update]
+    ⛔ Suspense [update] Warning: Rendering was suspended
+    ⚛ Suspense [update]
+      ⚛ Spinner [mount]
+
+⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [update]
+    ⚛ Suspense [update]
+      ⚛ Foo [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 2 Total)
+  ⚛ (Calling Lifecycle Methods: 1 Total)
 "
 `;
 
 exports[`ReactDebugFiberPerf supports memo 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Foo [mount]
 
@@ -407,9 +389,7 @@ exports[`ReactDebugFiberPerf supports memo 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports portals 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
 
@@ -421,18 +401,16 @@ exports[`ReactDebugFiberPerf supports portals 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = `
-"⚛ (Waiting for async callback...)
+"⚛ (React Tree Reconciliation: Yielded)
+  ⚛ Foo [mount]
 
-⚛ (React Tree Reconciliation: Yielded)
+⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render
   ⚛ Foo [mount]
 
-⚛ (Waiting for async callback...)
-  ⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render
-    ⚛ Foo [mount]
-  ⚛ (Committing Changes)
-    ⚛ (Committing Snapshot Effects: 0 Total)
-    ⚛ (Committing Host Effects: 1 Total)
-    ⚛ (Calling Lifecycle Methods: 0 Total)
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
 
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -444,7 +422,8 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =
 `;
 
 exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
-"⛔ (Waiting for async callback...) Warning: Update expired; will flush synchronously
+"⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Foo [mount]
 
 ⚛ (Committing Changes)
   ⚛ (Committing Snapshot Effects: 0 Total)
@@ -454,9 +433,7 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should print a warning
+"// Should print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Cascading [mount]
@@ -478,9 +455,7 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Rendering the first root
+"// Rendering the first root
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Cascading [mount]
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
index e5f0cf4db19bd..d31a45fc8a7c0 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
@@ -10,41 +10,14 @@
 import type {CapturedError} from '../ReactCapturedValue';
 
 // Module provided by RN:
-import {ExceptionsManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {ReactFiberErrorDialog as RNImpl} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import invariant from 'shared/invariant';
 
-/**
- * Intercept lifecycle errors and ensure they are shown with the correct stack
- * trace within the native redbox component.
- */
-export function showErrorDialog(capturedError: CapturedError): boolean {
-  const {componentStack, error} = capturedError;
-
-  let errorToHandle: Error;
-
-  // Typically Errors are thrown but eg strings or null can be thrown as well.
-  if (error instanceof Error) {
-    const {message, name} = error;
+invariant(
+  typeof RNImpl.showErrorDialog === 'function',
+  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+);
 
-    const summary = message ? `${name}: ${message}` : name;
-
-    errorToHandle = error;
-
-    try {
-      errorToHandle.message = `${summary}\n\nThis error is located at:${componentStack}`;
-    } catch (e) {}
-  } else if (typeof error === 'string') {
-    errorToHandle = new Error(
-      `${error}\n\nThis error is located at:${componentStack}`,
-    );
-  } else {
-    errorToHandle = new Error(`Unspecified error at:${componentStack}`);
-  }
-
-  ExceptionsManager.handleException(errorToHandle, false);
-
-  // Return false here to prevent ReactFiberErrorLogger default behavior of
-  // logging error details to console.error. Calls to console.error are
-  // automatically routed to the native redbox controller, which we've already
-  // done above by calling ExceptionsManager.
-  return false;
+export function showErrorDialog(capturedError: CapturedError): boolean {
+  return RNImpl.showErrorDialog(capturedError);
 }
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 98698a68a8416..ae619a24daa56 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -37,14 +37,11 @@ export opaque type UpdatePayload = mixed; // eslint-disable-line no-undef
 export opaque type ChildSet = mixed; // eslint-disable-line no-undef
 export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
 export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
+export type EventResponder = any;
 
 export const getPublicInstance = $$$hostConfig.getPublicInstance;
 export const getRootHostContext = $$$hostConfig.getRootHostContext;
 export const getChildHostContext = $$$hostConfig.getChildHostContext;
-export const getChildHostContextForEventComponent =
-  $$$hostConfig.getChildHostContextForEventComponent;
-export const getChildHostContextForEventTarget =
-  $$$hostConfig.getChildHostContextForEventTarget;
 export const prepareForCommit = $$$hostConfig.prepareForCommit;
 export const resetAfterCommit = $$$hostConfig.resetAfterCommit;
 export const createInstance = $$$hostConfig.createInstance;
@@ -60,14 +57,22 @@ export const cancelTimeout = $$$hostConfig.clearTimeout;
 export const noTimeout = $$$hostConfig.noTimeout;
 export const now = $$$hostConfig.now;
 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
+export const warnsIfNotActing = $$$hostConfig.warnsIfNotActing;
 export const supportsMutation = $$$hostConfig.supportsMutation;
 export const supportsPersistence = $$$hostConfig.supportsPersistence;
 export const supportsHydration = $$$hostConfig.supportsHydration;
-export const mountEventComponent = $$$hostConfig.mountEventComponent;
-export const updateEventComponent = $$$hostConfig.updateEventComponent;
-export const handleEventTarget = $$$hostConfig.handleEventTarget;
-export const getEventTargetChildElement =
-  $$$hostConfig.getEventTargetChildElement;
+export const DEPRECATED_mountResponderInstance =
+  $$$hostConfig.DEPRECATED_mountResponderInstance;
+export const DEPRECATED_unmountResponderInstance =
+  $$$hostConfig.DEPRECATED_unmountResponderInstance;
+export const getFundamentalComponentInstance =
+  $$$hostConfig.getFundamentalComponentInstance;
+export const mountFundamentalComponent =
+  $$$hostConfig.mountFundamentalComponent;
+export const shouldUpdateFundamentalComponent =
+  $$$hostConfig.shouldUpdateFundamentalComponent;
+export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;
+export const beforeRemoveInstance = $$$hostConfig.beforeRemoveInstance;
 
 // -------------------
 //      Mutation
@@ -87,10 +92,10 @@ export const hideInstance = $$$hostConfig.hideInstance;
 export const hideTextInstance = $$$hostConfig.hideTextInstance;
 export const unhideInstance = $$$hostConfig.unhideInstance;
 export const unhideTextInstance = $$$hostConfig.unhideTextInstance;
-export const unmountEventComponent = $$$hostConfig.unmountEventComponent;
-export const commitTouchHitTargetUpdate =
-  $$$hostConfig.commitTouchHitTargetUpdate;
-export const commitEventTarget = $$$hostConfig.commitEventTarget;
+export const updateFundamentalComponent =
+  $$$hostConfig.updateFundamentalComponent;
+export const unmountFundamentalComponent =
+  $$$hostConfig.unmountFundamentalComponent;
 
 // -------------------
 //     Persistence
@@ -105,6 +110,7 @@ export const finalizeContainerChildren =
 export const replaceContainerChildren = $$$hostConfig.replaceContainerChildren;
 export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;
 export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;
+export const cloneFundamentalInstance = $$$hostConfig.cloneInstance;
 
 // -------------------
 //     Hydration
@@ -124,8 +130,12 @@ export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
 export const getFirstHydratableChild = $$$hostConfig.getFirstHydratableChild;
 export const hydrateInstance = $$$hostConfig.hydrateInstance;
 export const hydrateTextInstance = $$$hostConfig.hydrateTextInstance;
+export const hydrateSuspenseInstance = $$$hostConfig.hydrateSuspenseInstance;
 export const getNextHydratableInstanceAfterSuspenseInstance =
   $$$hostConfig.getNextHydratableInstanceAfterSuspenseInstance;
+export const commitHydratedContainer = $$$hostConfig.commitHydratedContainer;
+export const commitHydratedSuspenseInstance =
+  $$$hostConfig.commitHydratedSuspenseInstance;
 export const clearSuspenseBoundary = $$$hostConfig.clearSuspenseBoundary;
 export const clearSuspenseBoundaryFromContainer =
   $$$hostConfig.clearSuspenseBoundaryFromContainer;
diff --git a/packages/react-fresh/README.md b/packages/react-refresh/README.md
similarity index 92%
rename from packages/react-fresh/README.md
rename to packages/react-refresh/README.md
index d8ff49aca67ea..c0fc3ef947fab 100644
--- a/packages/react-fresh/README.md
+++ b/packages/react-refresh/README.md
@@ -1,4 +1,4 @@
-# react-fresh
+# react-refresh
 
 This is an experimental package for hot reloading.
 
diff --git a/packages/react-fresh/babel.js b/packages/react-refresh/babel.js
similarity index 100%
rename from packages/react-fresh/babel.js
rename to packages/react-refresh/babel.js
diff --git a/packages/react-refresh/npm/babel.js b/packages/react-refresh/npm/babel.js
new file mode 100644
index 0000000000000..d222a0d3fd1da
--- /dev/null
+++ b/packages/react-refresh/npm/babel.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-refresh-babel.production.min.js');
+} else {
+  module.exports = require('./cjs/react-refresh-babel.development.js');
+}
diff --git a/packages/react-refresh/npm/runtime.js b/packages/react-refresh/npm/runtime.js
new file mode 100644
index 0000000000000..28e3b0ceeca91
--- /dev/null
+++ b/packages/react-refresh/npm/runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-refresh-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-refresh-runtime.development.js');
+}
diff --git a/packages/react-fresh/package.json b/packages/react-refresh/package.json
similarity index 89%
rename from packages/react-fresh/package.json
rename to packages/react-refresh/package.json
index f027c80465157..95139e456a44a 100644
--- a/packages/react-fresh/package.json
+++ b/packages/react-refresh/package.json
@@ -1,11 +1,10 @@
 {
-  "name": "react-fresh",
-  "private": true,
+  "name": "react-refresh",
   "description": "React is a JavaScript library for building user interfaces.",
   "keywords": [
     "react"
   ],
-  "version": "0.1.0",
+  "version": "0.7.2",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-fresh/runtime.js b/packages/react-refresh/runtime.js
similarity index 100%
rename from packages/react-fresh/runtime.js
rename to packages/react-refresh/runtime.js
diff --git a/packages/react-fresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
similarity index 65%
rename from packages/react-fresh/src/ReactFreshBabelPlugin.js
rename to packages/react-refresh/src/ReactFreshBabelPlugin.js
index a93656aaf398a..567a96d853ccc 100644
--- a/packages/react-fresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -7,8 +7,23 @@
 
 'use strict';
 
-export default function(babel) {
+export default function(babel, opts = {}) {
+  if (typeof babel.getEnv === 'function') {
+    // Only available in Babel 7.
+    const env = babel.getEnv();
+    if (env !== 'development' && !opts.skipEnvCheck) {
+      throw new Error(
+        'React Refresh Babel transform should only be enabled in development environment. ' +
+          'Instead, the environment is: "' +
+          env +
+          '". If you want to override this check, pass {skipEnvCheck: true} as plugin options.',
+      );
+    }
+  }
+
   const {types: t} = babel;
+  const refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$');
+  const refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$');
 
   const registrationsByProgramPath = new Map();
   function createRegistration(programPath, persistentID) {
@@ -102,8 +117,40 @@ export default function(babel) {
         if (!isComponentishName(name)) {
           return false;
         }
-        if (init.type === 'Identifier' || init.type === 'MemberExpression') {
-          return false;
+        switch (init.type) {
+          case 'ArrowFunctionExpression':
+          case 'FunctionExpression':
+            // Likely component definitions.
+            break;
+          case 'CallExpression': {
+            // Maybe a HOC.
+            // Try to determine if this is some form of import.
+            const callee = init.callee;
+            const calleeType = callee.type;
+            if (calleeType === 'Import') {
+              return false;
+            } else if (calleeType === 'Identifier') {
+              if (callee.name.indexOf('require') === 0) {
+                return false;
+              } else if (callee.name.indexOf('import') === 0) {
+                return false;
+              }
+              // Neither require nor import. Might be a HOC.
+              // Pass through.
+            } else if (calleeType === 'MemberExpression') {
+              // Could be something like React.forwardRef(...)
+              // Pass through.
+            } else {
+              // More complicated call.
+              return false;
+            }
+            break;
+          }
+          case 'TaggedTemplateExpression':
+            // Maybe something like styled.div`...`
+            break;
+          default:
+            return false;
         }
         const initPath = path.get('init');
         const foundInside = findInnerComponents(
@@ -163,25 +210,6 @@ export default function(babel) {
     return false;
   }
 
-  let hookCalls = new WeakMap();
-
-  function recordHookCall(functionNode, hookCallPath, hookName) {
-    if (!hookCalls.has(functionNode)) {
-      hookCalls.set(functionNode, []);
-    }
-    let hookCallsForFn = hookCalls.get(functionNode);
-    let key = '';
-    if (hookCallPath.parent.type === 'VariableDeclarator') {
-      // TODO: if there is no LHS, consider some other heuristic.
-      key = hookCallPath.parentPath.get('id').getSource();
-    }
-    hookCallsForFn.push({
-      name: hookName,
-      callee: hookCallPath.node.callee,
-      key,
-    });
-  }
-
   function isBuiltinHook(hookName) {
     switch (hookName) {
       case 'useState':
@@ -219,24 +247,154 @@ export default function(babel) {
       key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
       customHooks: fnHookCalls
         .filter(call => !isBuiltinHook(call.name))
-        .map(call => call.callee),
+        .map(call => t.cloneDeep(call.callee)),
     };
   }
 
-  function createArgumentsForSignature(node, signature) {
+  let hasForceResetCommentByFile = new WeakMap();
+
+  // We let user do /* @refresh reset */ to reset state in the whole file.
+  function hasForceResetComment(path) {
+    const file = path.hub.file;
+    let hasForceReset = hasForceResetCommentByFile.get(file);
+    if (hasForceReset !== undefined) {
+      return hasForceReset;
+    }
+
+    hasForceReset = false;
+    const comments = file.ast.comments;
+    for (let i = 0; i < comments.length; i++) {
+      const cmt = comments[i];
+      if (cmt.value.indexOf('@refresh reset') !== -1) {
+        hasForceReset = true;
+        break;
+      }
+    }
+
+    hasForceResetCommentByFile.set(file, hasForceReset);
+    return hasForceReset;
+  }
+
+  function createArgumentsForSignature(node, signature, scope) {
     const {key, customHooks} = signature;
-    const args = [node, t.stringLiteral(key)];
-    if (customHooks.length > 0) {
-      args.push(t.arrowFunctionExpression([], t.arrayExpression(customHooks)));
+
+    let forceReset = hasForceResetComment(scope.path);
+    let customHooksInScope = [];
+    customHooks.forEach(callee => {
+      // Check if a corresponding binding exists where we emit the signature.
+      let bindingName;
+      switch (callee.type) {
+        case 'MemberExpression':
+          if (callee.object.type === 'Identifier') {
+            bindingName = callee.object.name;
+          }
+          break;
+        case 'Identifier':
+          bindingName = callee.name;
+          break;
+      }
+      if (scope.hasBinding(bindingName)) {
+        customHooksInScope.push(callee);
+      } else {
+        // We don't have anything to put in the array because Hook is out of scope.
+        // Since it could potentially have been edited, remount the component.
+        forceReset = true;
+      }
+    });
+
+    let finalKey = key;
+    if (typeof require === 'function' && !opts.emitFullSignatures) {
+      // Prefer to hash when we can (e.g. outside of ASTExplorer).
+      // This makes it deterministically compact, even if there's
+      // e.g. a useState ininitalizer with some code inside.
+      // We also need it for www that has transforms like cx()
+      // that don't understand if something is part of a string.
+      finalKey = require('crypto')
+        .createHash('sha1')
+        .update(key)
+        .digest('base64');
+    }
+
+    const args = [node, t.stringLiteral(finalKey)];
+    if (forceReset || customHooksInScope.length > 0) {
+      args.push(t.booleanLiteral(forceReset));
+    }
+    if (customHooksInScope.length > 0) {
+      args.push(
+        // TODO: We could use an arrow here to be more compact.
+        // However, don't do it until AMA can run them natively.
+        t.functionExpression(
+          null,
+          [],
+          t.blockStatement([
+            t.returnStatement(t.arrayExpression(customHooksInScope)),
+          ]),
+        ),
+      );
     }
     return args;
   }
 
   let seenForRegistration = new WeakSet();
   let seenForSignature = new WeakSet();
-  let seenForHookCalls = new WeakSet();
   let seenForOutro = new WeakSet();
 
+  let hookCalls = new WeakMap();
+  const HookCallsVisitor = {
+    CallExpression(path) {
+      const node = path.node;
+      const callee = node.callee;
+
+      // Note: this visitor MUST NOT mutate the tree in any way.
+      // It runs early in a separate traversal and should be very fast.
+
+      let name = null;
+      switch (callee.type) {
+        case 'Identifier':
+          name = callee.name;
+          break;
+        case 'MemberExpression':
+          name = callee.property.name;
+          break;
+      }
+      if (name === null || !/^use[A-Z]/.test(name)) {
+        return;
+      }
+      const fnScope = path.scope.getFunctionParent();
+      if (fnScope === null) {
+        return;
+      }
+
+      // This is a Hook call. Record it.
+      const fnNode = fnScope.block;
+      if (!hookCalls.has(fnNode)) {
+        hookCalls.set(fnNode, []);
+      }
+      let hookCallsForFn = hookCalls.get(fnNode);
+      let key = '';
+      if (path.parent.type === 'VariableDeclarator') {
+        // TODO: if there is no LHS, consider some other heuristic.
+        key = path.parentPath.get('id').getSource();
+      }
+
+      // Some built-in Hooks reset on edits to arguments.
+      const args = path.get('arguments');
+      if (name === 'useState' && args.length > 0) {
+        // useState second argument is initial state.
+        key += '(' + args[0].getSource() + ')';
+      } else if (name === 'useReducer' && args.length > 1) {
+        // useReducer second argument is initial state.
+        key += '(' + args[1].getSource() + ')';
+      }
+
+      hookCallsForFn.push({
+        callee: path.node.callee,
+        name,
+        key,
+      });
+    },
+  };
+
   return {
     visitor: {
       ExportDefaultDeclaration(path) {
@@ -356,9 +514,27 @@ export default function(babel) {
             return;
           }
           seenForSignature.add(node);
-          // Don't muatte the tree above this point.
+          // Don't mutate the tree above this point.
 
-          // Unlike with __register__, this needs to work for nested
+          const sigCallID = path.scope.generateUidIdentifier('_s');
+          path.scope.parent.push({
+            id: sigCallID,
+            init: t.callExpression(refreshSig, []),
+          });
+
+          // The signature call is split in two parts. One part is called inside the function.
+          // This is used to signal when first render happens.
+          path
+            .get('body')
+            .unshiftContainer(
+              'body',
+              t.expressionStatement(t.callExpression(sigCallID, [])),
+            );
+
+          // The second call is around the function itself.
+          // This is used to associate a type with a signature.
+
+          // Unlike with $RefreshReg$, this needs to work for nested
           // declarations too. So we need to search for a path where
           // we can insert a statement rather than hardcoding it.
           let insertAfterPath = null;
@@ -375,8 +551,12 @@ export default function(babel) {
           insertAfterPath.insertAfter(
             t.expressionStatement(
               t.callExpression(
-                t.identifier('__signature__'),
-                createArgumentsForSignature(id, signature),
+                sigCallID,
+                createArgumentsForSignature(
+                  id,
+                  signature,
+                  insertAfterPath.scope,
+                ),
               ),
             ),
           );
@@ -398,6 +578,29 @@ export default function(babel) {
           seenForSignature.add(node);
           // Don't mutate the tree above this point.
 
+          const sigCallID = path.scope.generateUidIdentifier('_s');
+          path.scope.parent.push({
+            id: sigCallID,
+            init: t.callExpression(refreshSig, []),
+          });
+
+          // The signature call is split in two parts. One part is called inside the function.
+          // This is used to signal when first render happens.
+          if (path.node.body.type !== 'BlockStatement') {
+            path.node.body = t.blockStatement([
+              t.returnStatement(path.node.body),
+            ]);
+          }
+          path
+            .get('body')
+            .unshiftContainer(
+              'body',
+              t.expressionStatement(t.callExpression(sigCallID, [])),
+            );
+
+          // The second call is around the function itself.
+          // This is used to associate a type with a signature.
+
           if (path.parent.type === 'VariableDeclarator') {
             let insertAfterPath = null;
             path.find(p => {
@@ -417,8 +620,12 @@ export default function(babel) {
             insertAfterPath.insertAfter(
               t.expressionStatement(
                 t.callExpression(
-                  t.identifier('__signature__'),
-                  createArgumentsForSignature(path.parent.id, signature),
+                  sigCallID,
+                  createArgumentsForSignature(
+                    path.parent.id,
+                    signature,
+                    insertAfterPath.scope,
+                  ),
                 ),
               ),
             );
@@ -427,8 +634,8 @@ export default function(babel) {
             // let Foo = hoc(() => {})
             path.replaceWith(
               t.callExpression(
-                t.identifier('__signature__'),
-                createArgumentsForSignature(node, signature),
+                sigCallID,
+                createArgumentsForSignature(node, signature, path.scope),
               ),
             );
             // Result: let Foo = hoc(__signature(() => {}, ...))
@@ -508,38 +715,14 @@ export default function(babel) {
           },
         );
       },
-      CallExpression(path) {
-        const node = path.node;
-        const callee = node.callee;
-
-        let name = null;
-        switch (callee.type) {
-          case 'Identifier':
-            name = callee.name;
-            break;
-          case 'MemberExpression':
-            name = callee.property.name;
-            break;
-        }
-        if (name === null || !/^use[A-Z]/.test(name)) {
-          return;
-        }
-
-        // Make sure we're not recording the same calls twice.
-        // This can happen if another Babel plugin replaces parents.
-        if (seenForHookCalls.has(node)) {
-          return;
-        }
-        seenForHookCalls.add(node);
-        // Don't mutate the tree above this point.
-
-        const fn = path.scope.getFunctionParent();
-        if (fn === null) {
-          return;
-        }
-        recordHookCall(fn.block, path, name);
-      },
       Program: {
+        enter(path) {
+          // This is a separate early visitor because we need to collect Hook calls
+          // and "const [foo, setFoo] = ..." signatures before the destructuring
+          // transform mangles them. This extra traversal is not ideal for perf,
+          // but it's the best we can do until we stop transpiling destructuring.
+          path.traverse(HookCallsVisitor);
+        },
         exit(path) {
           const registrations = registrationsByProgramPath.get(path);
           if (registrations === undefined) {
@@ -562,7 +745,7 @@ export default function(babel) {
             path.pushContainer(
               'body',
               t.expressionStatement(
-                t.callExpression(t.identifier('__register__'), [
+                t.callExpression(refreshReg, [
                   handle,
                   t.stringLiteral(persistentID),
                 ]),
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
new file mode 100644
index 0000000000000..350363ce876ab
--- /dev/null
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -0,0 +1,699 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Instance} from 'react-reconciler/src/ReactFiberHostConfig';
+import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
+import type {
+  Family,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+  FindHostInstancesForRefresh,
+  SetRefreshHandler,
+} from 'react-reconciler/src/ReactFiberHotReloading';
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {REACT_MEMO_TYPE, REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';
+
+type Signature = {|
+  ownKey: string,
+  forceReset: boolean,
+  fullKey: string | null, // Contains keys of nested Hooks. Computed lazily.
+  getCustomHooks: () => Array<Function>,
+|};
+
+type RendererHelpers = {|
+  findHostInstancesForRefresh: FindHostInstancesForRefresh,
+  scheduleRefresh: ScheduleRefresh,
+  scheduleRoot: ScheduleRoot,
+  setRefreshHandler: SetRefreshHandler,
+|};
+
+if (!__DEV__) {
+  throw new Error(
+    'React Refresh runtime should not be included in the production bundle.',
+  );
+}
+
+// In old environments, we'll leak previous types after every edit.
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
+// We never remove these associations.
+// It's OK to reference families, but use WeakMap/Set for types.
+const allFamiliesByID: Map<string, Family> = new Map();
+const allFamiliesByType: // $FlowIssue
+WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
+const allSignaturesByType: // $FlowIssue
+WeakMap<any, Signature> | Map<any, Signature> = new PossiblyWeakMap();
+// This WeakMap is read by React, so we only put families
+// that have actually been edited here. This keeps checks fast.
+// $FlowIssue
+const updatedFamiliesByType: // $FlowIssue
+WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
+
+// This is cleared on every performReactRefresh() call.
+// It is an array of [Family, NextType] tuples.
+let pendingUpdates: Array<[Family, any]> = [];
+
+// This is injected by the renderer via DevTools global hook.
+let helpersByRendererID: Map<number, RendererHelpers> = new Map();
+
+let helpersByRoot: Map<FiberRoot, RendererHelpers> = new Map();
+
+// We keep track of mounted roots so we can schedule updates.
+let mountedRoots: Set<FiberRoot> = new Set();
+// If a root captures an error, we remember it so we can retry on edit.
+let failedRoots: Set<FiberRoot> = new Set();
+
+// In environments that support WeakMap, we also remember the last element for every root.
+// It needs to be weak because we do this even for roots that failed to mount.
+// If there is no WeakMap, we won't attempt to do retrying.
+// $FlowIssue
+let rootElements: WeakMap<any, ReactNodeList> | null = // $FlowIssue
+  typeof WeakMap === 'function' ? new WeakMap() : null;
+
+let isPerformingRefresh = false;
+
+function computeFullKey(signature: Signature): string {
+  if (signature.fullKey !== null) {
+    return signature.fullKey;
+  }
+
+  let fullKey: string = signature.ownKey;
+  let hooks;
+  try {
+    hooks = signature.getCustomHooks();
+  } catch (err) {
+    // This can happen in an edge case, e.g. if expression like Foo.useSomething
+    // depends on Foo which is lazily initialized during rendering.
+    // In that case just assume we'll have to remount.
+    signature.forceReset = true;
+    signature.fullKey = fullKey;
+    return fullKey;
+  }
+
+  for (let i = 0; i < hooks.length; i++) {
+    const hook = hooks[i];
+    if (typeof hook !== 'function') {
+      // Something's wrong. Assume we need to remount.
+      signature.forceReset = true;
+      signature.fullKey = fullKey;
+      return fullKey;
+    }
+    const nestedHookSignature = allSignaturesByType.get(hook);
+    if (nestedHookSignature === undefined) {
+      // No signature means Hook wasn't in the source code, e.g. in a library.
+      // We'll skip it because we can assume it won't change during this session.
+      continue;
+    }
+    const nestedHookKey = computeFullKey(nestedHookSignature);
+    if (nestedHookSignature.forceReset) {
+      signature.forceReset = true;
+    }
+    fullKey += '\n---\n' + nestedHookKey;
+  }
+
+  signature.fullKey = fullKey;
+  return fullKey;
+}
+
+function haveEqualSignatures(prevType, nextType) {
+  const prevSignature = allSignaturesByType.get(prevType);
+  const nextSignature = allSignaturesByType.get(nextType);
+
+  if (prevSignature === undefined && nextSignature === undefined) {
+    return true;
+  }
+  if (prevSignature === undefined || nextSignature === undefined) {
+    return false;
+  }
+  if (computeFullKey(prevSignature) !== computeFullKey(nextSignature)) {
+    return false;
+  }
+  if (nextSignature.forceReset) {
+    return false;
+  }
+
+  return true;
+}
+
+function isReactClass(type) {
+  return type.prototype && type.prototype.isReactComponent;
+}
+
+function canPreserveStateBetween(prevType, nextType) {
+  if (isReactClass(prevType) || isReactClass(nextType)) {
+    return false;
+  }
+  if (haveEqualSignatures(prevType, nextType)) {
+    return true;
+  }
+  return false;
+}
+
+function resolveFamily(type) {
+  // Only check updated types to keep lookups fast.
+  return updatedFamiliesByType.get(type);
+}
+
+// If we didn't care about IE11, we could use new Map/Set(iterable).
+function cloneMap<K, V>(map: Map<K, V>): Map<K, V> {
+  let clone = new Map();
+  map.forEach((value, key) => {
+    clone.set(key, value);
+  });
+  return clone;
+}
+function cloneSet<T>(set: Set<T>): Set<T> {
+  let clone = new Set();
+  set.forEach(value => {
+    clone.add(value);
+  });
+  return clone;
+}
+
+export function performReactRefresh(): RefreshUpdate | null {
+  if (!__DEV__) {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+  if (pendingUpdates.length === 0) {
+    return null;
+  }
+  if (isPerformingRefresh) {
+    return null;
+  }
+
+  isPerformingRefresh = true;
+  try {
+    const staleFamilies = new Set();
+    const updatedFamilies = new Set();
+
+    const updates = pendingUpdates;
+    pendingUpdates = [];
+    updates.forEach(([family, nextType]) => {
+      // Now that we got a real edit, we can create associations
+      // that will be read by the React reconciler.
+      const prevType = family.current;
+      updatedFamiliesByType.set(prevType, family);
+      updatedFamiliesByType.set(nextType, family);
+      family.current = nextType;
+
+      // Determine whether this should be a re-render or a re-mount.
+      if (canPreserveStateBetween(prevType, nextType)) {
+        updatedFamilies.add(family);
+      } else {
+        staleFamilies.add(family);
+      }
+    });
+
+    // TODO: rename these fields to something more meaningful.
+    const update: RefreshUpdate = {
+      updatedFamilies, // Families that will re-render preserving state
+      staleFamilies, // Families that will be remounted
+    };
+
+    helpersByRendererID.forEach(helpers => {
+      // Even if there are no roots, set the handler on first update.
+      // This ensures that if *new* roots are mounted, they'll use the resolve handler.
+      helpers.setRefreshHandler(resolveFamily);
+    });
+
+    let didError = false;
+    let firstError = null;
+
+    // We snapshot maps and sets that are mutated during commits.
+    // If we don't do this, there is a risk they will be mutated while
+    // we iterate over them. For example, trying to recover a failed root
+    // may cause another root to be added to the failed list -- an infinite loop.
+    let failedRootsSnapshot = cloneSet(failedRoots);
+    let mountedRootsSnapshot = cloneSet(mountedRoots);
+    let helpersByRootSnapshot = cloneMap(helpersByRoot);
+
+    failedRootsSnapshot.forEach(root => {
+      const helpers = helpersByRootSnapshot.get(root);
+      if (helpers === undefined) {
+        throw new Error(
+          'Could not find helpers for a root. This is a bug in React Refresh.',
+        );
+      }
+      if (!failedRoots.has(root)) {
+        // No longer failed.
+      }
+      if (rootElements === null) {
+        return;
+      }
+      if (!rootElements.has(root)) {
+        return;
+      }
+      const element = rootElements.get(root);
+      try {
+        helpers.scheduleRoot(root, element);
+      } catch (err) {
+        if (!didError) {
+          didError = true;
+          firstError = err;
+        }
+        // Keep trying other roots.
+      }
+    });
+    mountedRootsSnapshot.forEach(root => {
+      const helpers = helpersByRootSnapshot.get(root);
+      if (helpers === undefined) {
+        throw new Error(
+          'Could not find helpers for a root. This is a bug in React Refresh.',
+        );
+      }
+      if (!mountedRoots.has(root)) {
+        // No longer mounted.
+      }
+      try {
+        helpers.scheduleRefresh(root, update);
+      } catch (err) {
+        if (!didError) {
+          didError = true;
+          firstError = err;
+        }
+        // Keep trying other roots.
+      }
+    });
+    if (didError) {
+      throw firstError;
+    }
+    return update;
+  } finally {
+    isPerformingRefresh = false;
+  }
+}
+
+export function register(type: any, id: string): void {
+  if (__DEV__) {
+    if (type === null) {
+      return;
+    }
+    if (typeof type !== 'function' && typeof type !== 'object') {
+      return;
+    }
+
+    // This can happen in an edge case, e.g. if we register
+    // return value of a HOC but it returns a cached component.
+    // Ignore anything but the first registration for each type.
+    if (allFamiliesByType.has(type)) {
+      return;
+    }
+    // Create family or remember to update it.
+    // None of this bookkeeping affects reconciliation
+    // until the first performReactRefresh() call above.
+    let family = allFamiliesByID.get(id);
+    if (family === undefined) {
+      family = {current: type};
+      allFamiliesByID.set(id, family);
+    } else {
+      pendingUpdates.push([family, type]);
+    }
+    allFamiliesByType.set(type, family);
+
+    // Visit inner types because we might not have registered them.
+    if (typeof type === 'object' && type !== null) {
+      switch (type.$$typeof) {
+        case REACT_FORWARD_REF_TYPE:
+          register(type.render, id + '$render');
+          break;
+        case REACT_MEMO_TYPE:
+          register(type.type, id + '$type');
+          break;
+      }
+    }
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function setSignature(
+  type: any,
+  key: string,
+  forceReset?: boolean = false,
+  getCustomHooks?: () => Array<Function>,
+): void {
+  if (__DEV__) {
+    allSignaturesByType.set(type, {
+      forceReset,
+      ownKey: key,
+      fullKey: null,
+      getCustomHooks: getCustomHooks || (() => []),
+    });
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+// This is lazily called during first render for a type.
+// It captures Hook list at that time so inline requires don't break comparisons.
+export function collectCustomHooksForSignature(type: any) {
+  if (__DEV__) {
+    const signature = allSignaturesByType.get(type);
+    if (signature !== undefined) {
+      computeFullKey(signature);
+    }
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function getFamilyByID(id: string): Family | void {
+  if (__DEV__) {
+    return allFamiliesByID.get(id);
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function getFamilyByType(type: any): Family | void {
+  if (__DEV__) {
+    return allFamiliesByType.get(type);
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function findAffectedHostInstances(
+  families: Array<Family>,
+): Set<Instance> {
+  if (__DEV__) {
+    let affectedInstances = new Set();
+    mountedRoots.forEach(root => {
+      const helpers = helpersByRoot.get(root);
+      if (helpers === undefined) {
+        throw new Error(
+          'Could not find helpers for a root. This is a bug in React Refresh.',
+        );
+      }
+      const instancesForRoot = helpers.findHostInstancesForRefresh(
+        root,
+        families,
+      );
+      instancesForRoot.forEach(inst => {
+        affectedInstances.add(inst);
+      });
+    });
+    return affectedInstances;
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function injectIntoGlobalHook(globalObject: any): void {
+  if (__DEV__) {
+    // For React Native, the global hook will be set up by require('react-devtools-core').
+    // That code will run before us. So we need to monkeypatch functions on existing hook.
+
+    // For React Web, the global hook will be set up by the extension.
+    // This will also run before us.
+    let hook = globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (hook === undefined) {
+      // However, if there is no DevTools extension, we'll need to set up the global hook ourselves.
+      // Note that in this case it's important that renderer code runs *after* this method call.
+      // Otherwise, the renderer will think that there is no global hook, and won't do the injection.
+      let nextID = 0;
+      globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = {
+        renderers: new Map(),
+        supportsFiber: true,
+        inject(injected) {
+          return nextID++;
+        },
+        onScheduleFiberRoot(
+          id: number,
+          root: FiberRoot,
+          children: ReactNodeList,
+        ) {},
+        onCommitFiberRoot(
+          id: number,
+          root: FiberRoot,
+          maybePriorityLevel: mixed,
+          didError: boolean,
+        ) {},
+        onCommitFiberUnmount() {},
+      };
+    }
+
+    // Here, we just want to get a reference to scheduleRefresh.
+    const oldInject = hook.inject;
+    hook.inject = function(injected) {
+      const id = oldInject.apply(this, arguments);
+      if (
+        typeof injected.scheduleRefresh === 'function' &&
+        typeof injected.setRefreshHandler === 'function'
+      ) {
+        // This version supports React Refresh.
+        helpersByRendererID.set(id, ((injected: any): RendererHelpers));
+      }
+      return id;
+    };
+
+    // Do the same for any already injected roots.
+    // This is useful if ReactDOM has already been initialized.
+    // https://github.com/facebook/react/issues/17626
+    hook.renderers.forEach((injected, id) => {
+      if (
+        typeof injected.scheduleRefresh === 'function' &&
+        typeof injected.setRefreshHandler === 'function'
+      ) {
+        // This version supports React Refresh.
+        helpersByRendererID.set(id, ((injected: any): RendererHelpers));
+      }
+    });
+
+    // We also want to track currently mounted roots.
+    const oldOnCommitFiberRoot = hook.onCommitFiberRoot;
+    const oldOnScheduleFiberRoot = hook.onScheduleFiberRoot || (() => {});
+    hook.onScheduleFiberRoot = function(
+      id: number,
+      root: FiberRoot,
+      children: ReactNodeList,
+    ) {
+      if (!isPerformingRefresh) {
+        // If it was intentionally scheduled, don't attempt to restore.
+        // This includes intentionally scheduled unmounts.
+        failedRoots.delete(root);
+        if (rootElements !== null) {
+          rootElements.set(root, children);
+        }
+      }
+      return oldOnScheduleFiberRoot.apply(this, arguments);
+    };
+    hook.onCommitFiberRoot = function(
+      id: number,
+      root: FiberRoot,
+      maybePriorityLevel: mixed,
+      didError: boolean,
+    ) {
+      const helpers = helpersByRendererID.get(id);
+      if (helpers === undefined) {
+        return;
+      }
+      helpersByRoot.set(root, helpers);
+
+      const current = root.current;
+      const alternate = current.alternate;
+
+      // We need to determine whether this root has just (un)mounted.
+      // This logic is copy-pasted from similar logic in the DevTools backend.
+      // If this breaks with some refactoring, you'll want to update DevTools too.
+
+      if (alternate !== null) {
+        const wasMounted =
+          alternate.memoizedState != null &&
+          alternate.memoizedState.element != null;
+        const isMounted =
+          current.memoizedState != null &&
+          current.memoizedState.element != null;
+
+        if (!wasMounted && isMounted) {
+          // Mount a new root.
+          mountedRoots.add(root);
+          failedRoots.delete(root);
+        } else if (wasMounted && isMounted) {
+          // Update an existing root.
+          // This doesn't affect our mounted root Set.
+        } else if (wasMounted && !isMounted) {
+          // Unmount an existing root.
+          mountedRoots.delete(root);
+          if (didError) {
+            // We'll remount it on future edits.
+            failedRoots.add(root);
+          } else {
+            helpersByRoot.delete(root);
+          }
+        } else if (!wasMounted && !isMounted) {
+          if (didError) {
+            // We'll remount it on future edits.
+            failedRoots.add(root);
+          }
+        }
+      } else {
+        // Mount a new root.
+        mountedRoots.add(root);
+      }
+
+      return oldOnCommitFiberRoot.apply(this, arguments);
+    };
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function hasUnrecoverableErrors() {
+  // TODO: delete this after removing dependency in RN.
+  return false;
+}
+
+// Exposed for testing.
+export function _getMountedRootCount() {
+  if (__DEV__) {
+    return mountedRoots.size;
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+// This is a wrapper over more primitive functions for setting signature.
+// Signatures let us decide whether the Hook order has changed on refresh.
+//
+// This function is intended to be used as a transform target, e.g.:
+// var _s = createSignatureFunctionForTransform()
+//
+// function Hello() {
+//   const [foo, setFoo] = useState(0);
+//   const value = useCustomHook();
+//   _s(); /* Second call triggers collecting the custom Hook list.
+//          * This doesn't happen during the module evaluation because we
+//          * don't want to change the module order with inline requires.
+//          * Next calls are noops. */
+//   return <h1>Hi</h1>;
+// }
+//
+// /* First call specifies the signature: */
+// _s(
+//   Hello,
+//   'useState{[foo, setFoo]}(0)',
+//   () => [useCustomHook], /* Lazy to avoid triggering inline requires */
+// );
+type SignatureStatus = 'needsSignature' | 'needsCustomHooks' | 'resolved';
+export function createSignatureFunctionForTransform() {
+  if (__DEV__) {
+    // We'll fill in the signature in two steps.
+    // First, we'll know the signature itself. This happens outside the component.
+    // Then, we'll know the references to custom Hooks. This happens inside the component.
+    // After that, the returned function will be a fast path no-op.
+    let status: SignatureStatus = 'needsSignature';
+    let savedType;
+    let hasCustomHooks;
+    return function<T>(
+      type: T,
+      key: string,
+      forceReset?: boolean,
+      getCustomHooks?: () => Array<Function>,
+    ): T {
+      switch (status) {
+        case 'needsSignature':
+          if (type !== undefined) {
+            // If we received an argument, this is the initial registration call.
+            savedType = type;
+            hasCustomHooks = typeof getCustomHooks === 'function';
+            setSignature(type, key, forceReset, getCustomHooks);
+            // The next call we expect is from inside a function, to fill in the custom Hooks.
+            status = 'needsCustomHooks';
+          }
+          break;
+        case 'needsCustomHooks':
+          if (hasCustomHooks) {
+            collectCustomHooksForSignature(savedType);
+          }
+          status = 'resolved';
+          break;
+        case 'resolved':
+          // Do nothing. Fast path for all future renders.
+          break;
+      }
+      return type;
+    };
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function isLikelyComponentType(type: any): boolean {
+  if (__DEV__) {
+    switch (typeof type) {
+      case 'function': {
+        // First, deal with classes.
+        if (type.prototype != null) {
+          if (type.prototype.isReactComponent) {
+            // React class.
+            return true;
+          }
+          const ownNames = Object.getOwnPropertyNames(type.prototype);
+          if (ownNames.length > 1 || ownNames[0] !== 'constructor') {
+            // This looks like a class.
+            return false;
+          }
+          // eslint-disable-next-line no-proto
+          if (type.prototype.__proto__ !== Object.prototype) {
+            // It has a superclass.
+            return false;
+          }
+          // Pass through.
+          // This looks like a regular function with empty prototype.
+        }
+        // For plain functions and arrows, use name as a heuristic.
+        const name = type.name || type.displayName;
+        return typeof name === 'string' && /^[A-Z]/.test(name);
+      }
+      case 'object': {
+        if (type != null) {
+          switch (type.$$typeof) {
+            case REACT_FORWARD_REF_TYPE:
+            case REACT_MEMO_TYPE:
+              // Definitely React components.
+              return true;
+            default:
+              return false;
+          }
+        }
+        return false;
+      }
+      default: {
+        return false;
+      }
+    }
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
diff --git a/packages/react-fresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
similarity index 64%
rename from packages/react-fresh/src/__tests__/ReactFresh-test.js
rename to packages/react-refresh/src/__tests__/ReactFresh-test.js
index 4cca204c000fc..61bf2934b1e30 100644
--- a/packages/react-fresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -16,36 +16,35 @@ let ReactDOM;
 let ReactFreshRuntime;
 let Scheduler;
 let act;
+let createReactClass;
 
 describe('ReactFresh', () => {
   let container;
-  let lastRoot;
-  let scheduleHotUpdate;
 
   beforeEach(() => {
-    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
-      supportsFiber: true,
-      inject: injected => {
-        scheduleHotUpdate = injected.scheduleHotUpdate;
-      },
-      onCommitFiberRoot: (id, root) => {
-        lastRoot = root;
-      },
-      onCommitFiberUnmount: () => {},
-    };
-
-    jest.resetModules();
-    React = require('react');
-    ReactDOM = require('react-dom');
-    ReactFreshRuntime = require('react-fresh/runtime');
-    Scheduler = require('scheduler');
-    act = require('react-dom/test-utils').act;
-    container = document.createElement('div');
-    document.body.appendChild(container);
+    if (__DEV__) {
+      jest.resetModules();
+      React = require('react');
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+      ReactDOM = require('react-dom');
+      Scheduler = require('scheduler');
+      act = require('react-dom/test-utils').act;
+      createReactClass = require('create-react-class/factory')(
+        React.Component,
+        React.isValidElement,
+        new React.Component().updater,
+      );
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    }
   });
 
   afterEach(() => {
-    document.body.removeChild(container);
+    if (__DEV__) {
+      delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      document.body.removeChild(container);
+    }
   });
 
   function prepare(version) {
@@ -63,17 +62,16 @@ describe('ReactFresh', () => {
 
   function patch(version) {
     const Component = version();
-    const hotUpdate = ReactFreshRuntime.prepareUpdate();
-    scheduleHotUpdate(lastRoot, hotUpdate);
+    ReactFreshRuntime.performReactRefresh();
     return Component;
   }
 
-  function __register__(type, id) {
+  function $RefreshReg$(type, id) {
     ReactFreshRuntime.register(type, id);
   }
 
-  function __signature__(type, key, getCustomHooks) {
-    ReactFreshRuntime.setSignature(type, key, getCustomHooks);
+  function $RefreshSig$(type, key, forceReset, getCustomHooks) {
+    ReactFreshRuntime.setSignature(type, key, forceReset, getCustomHooks);
     return type;
   }
 
@@ -88,7 +86,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         return Hello;
       });
 
@@ -111,7 +109,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         return Hello;
       });
 
@@ -178,10 +176,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.forwardRef(() => <Hello />);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -204,10 +202,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.forwardRef(() => <Hello />);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -244,7 +242,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Note: no forwardRef wrapper this time.
         return Hello;
@@ -269,7 +267,7 @@ describe('ReactFresh', () => {
               </p>
             );
           }
-          __register__(Hello, 'Hello');
+          $RefreshReg$(Hello, 'Hello');
 
           function renderInner() {
             return <Hello />;
@@ -277,14 +275,14 @@ describe('ReactFresh', () => {
           // Both of these are wrappers around the same inner function.
           // They should be treated as distinct types across reloads.
           let ForwardRefA = React.forwardRef(renderInner);
-          __register__(ForwardRefA, 'ForwardRefA');
+          $RefreshReg$(ForwardRefA, 'ForwardRefA');
           let ForwardRefB = React.forwardRef(renderInner);
-          __register__(ForwardRefB, 'ForwardRefB');
+          $RefreshReg$(ForwardRefB, 'ForwardRefB');
 
           function Parent({cond}) {
             return cond ? <ForwardRefA /> : <ForwardRefB />;
           }
-          __register__(Parent, 'Parent');
+          $RefreshReg$(Parent, 'Parent');
 
           return Parent;
         },
@@ -335,7 +333,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         function renderInner() {
           return <Hello />;
@@ -343,14 +341,14 @@ describe('ReactFresh', () => {
         // Both of these are wrappers around the same inner function.
         // They should be treated as distinct types across reloads.
         let ForwardRefA = React.forwardRef(renderInner);
-        __register__(ForwardRefA, 'ForwardRefA');
+        $RefreshReg$(ForwardRefA, 'ForwardRefA');
         let ForwardRefB = React.forwardRef(renderInner);
-        __register__(ForwardRefB, 'ForwardRefB');
+        $RefreshReg$(ForwardRefB, 'ForwardRefB');
 
         function Parent({cond}) {
           return cond ? <ForwardRefA /> : <ForwardRefB />;
         }
-        __register__(Parent, 'Parent');
+        $RefreshReg$(Parent, 'Parent');
 
         return Parent;
       });
@@ -396,10 +394,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.forwardRef(() => <Hello color="blue" />);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -422,10 +420,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.forwardRef(() => <Hello color="red" />);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -447,12 +445,12 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         function renderHello() {
           return <Hello color="blue" />;
         }
-        __register__(renderHello, 'renderHello');
+        $RefreshReg$(renderHello, 'renderHello');
 
         return React.forwardRef(renderHello);
       });
@@ -476,12 +474,12 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         function renderHello() {
           return <Hello color="red" />;
         }
-        __register__(renderHello, 'renderHello');
+        $RefreshReg$(renderHello, 'renderHello');
 
         // Not updating the wrapper.
       });
@@ -504,10 +502,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.memo(Hello);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -530,10 +528,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.memo(Hello);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -570,7 +568,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Note: no wrapper this time.
         return Hello;
@@ -596,7 +594,7 @@ describe('ReactFresh', () => {
         }
 
         const Outer = React.memo(Hello, () => true);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -621,7 +619,7 @@ describe('ReactFresh', () => {
         }
 
         const Outer = React.memo(Hello, () => true);
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -658,7 +656,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Note: no wrapper this time.
         return Hello;
@@ -682,7 +680,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         return React.memo(Hello);
       });
@@ -706,7 +704,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Not updating the wrapper.
       });
@@ -729,10 +727,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.memo(React.forwardRef(() => <Hello />));
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -755,10 +753,10 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.memo(React.forwardRef(() => <Hello />));
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
         return Outer;
       });
 
@@ -795,7 +793,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Note: no wrapper this time.
         return Hello;
@@ -819,7 +817,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -827,7 +825,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -836,7 +834,7 @@ describe('ReactFresh', () => {
             </React.Suspense>
           );
         }
-        __register__(App, 'App');
+        $RefreshReg$(App, 'App');
 
         return App;
       });
@@ -866,7 +864,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -874,7 +872,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -883,7 +881,7 @@ describe('ReactFresh', () => {
             </React.Suspense>
           );
         }
-        __register__(App, 'App');
+        $RefreshReg$(App, 'App');
 
         return App;
       });
@@ -921,7 +919,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         // Note: no lazy wrapper this time.
 
@@ -932,7 +930,7 @@ describe('ReactFresh', () => {
             </React.Suspense>
           );
         }
-        __register__(App, 'App');
+        $RefreshReg$(App, 'App');
 
         return App;
       });
@@ -955,7 +953,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -963,7 +961,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -988,7 +986,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       await act(async () => {
@@ -1018,7 +1016,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild).toBe(el);
       expect(el.textContent).toBe('1');
@@ -1038,7 +1036,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.forwardRef(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -1046,7 +1044,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -1072,7 +1070,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.forwardRef(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       await act(async () => {
@@ -1103,7 +1101,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.forwardRef(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild).toBe(el);
       expect(el.textContent).toBe('1');
@@ -1123,7 +1121,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -1131,7 +1129,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -1157,7 +1155,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       await act(async () => {
@@ -1188,7 +1186,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(renderHello);
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild).toBe(el);
       expect(el.textContent).toBe('1');
@@ -1208,7 +1206,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(React.forwardRef(renderHello));
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         const Outer = React.lazy(
           () =>
@@ -1216,7 +1214,7 @@ describe('ReactFresh', () => {
               setTimeout(() => resolve({default: Hello}), 100);
             }),
         );
-        __register__(Outer, 'Outer');
+        $RefreshReg$(Outer, 'Outer');
 
         function App() {
           return (
@@ -1242,7 +1240,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(React.forwardRef(renderHello));
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       await act(async () => {
@@ -1273,7 +1271,7 @@ describe('ReactFresh', () => {
           );
         }
         const Hello = React.memo(React.forwardRef(renderHello));
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild).toBe(el);
       expect(el.textContent).toBe('1');
@@ -1293,7 +1291,7 @@ describe('ReactFresh', () => {
               </p>
             );
           }
-          __register__(Hello, 'Hello');
+          $RefreshReg$(Hello, 'Hello');
 
           function Never() {
             throw new Promise(resolve => {});
@@ -1340,7 +1338,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.childNodes.length).toBe(1);
       expect(container.childNodes[0]).toBe(primaryChild);
@@ -1386,7 +1384,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // Colors inside both trees should change:
@@ -1418,7 +1416,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.childNodes.length).toBe(1);
       expect(container.childNodes[0]).toBe(primaryChild);
@@ -1441,12 +1439,12 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         function App() {
           appRenders++;
           return <Hello />;
         }
-        __register__(App, 'App');
+        $RefreshReg$(App, 'App');
         return App;
       });
 
@@ -1474,7 +1472,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // Assert the state was preserved but color changed.
@@ -1505,7 +1503,7 @@ describe('ReactFresh', () => {
           helloRenders++;
           return <div>X{children}X</div>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         function App() {
           return (
@@ -1530,7 +1528,7 @@ describe('ReactFresh', () => {
           helloRenders++;
           return <div>O{children}O</div>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(helloRenders).toBe(5);
       expect(container.textContent).toBe('OOOOOOOOOO');
@@ -1549,7 +1547,7 @@ describe('ReactFresh', () => {
               </p>
             );
           }
-          __register__(Hello1, 'Hello1');
+          $RefreshReg$(Hello1, 'Hello1');
           function Hello2() {
             const [val, setVal] = React.useState(0);
             return (
@@ -1558,11 +1556,11 @@ describe('ReactFresh', () => {
               </p>
             );
           }
-          __register__(Hello2, 'Hello2');
+          $RefreshReg$(Hello2, 'Hello2');
           function App({cond}) {
             return cond ? <Hello1 /> : <Hello2 />;
           }
-          __register__(App, 'App');
+          $RefreshReg$(App, 'App');
           return App;
         },
         {cond: false},
@@ -1601,7 +1599,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello1, 'Hello1');
+        $RefreshReg$(Hello1, 'Hello1');
         function Hello2() {
           const [val, setVal] = React.useState(0);
           return (
@@ -1610,7 +1608,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello2, 'Hello2');
+        $RefreshReg$(Hello2, 'Hello2');
       });
 
       // Assert the state was preserved but color changed.
@@ -1638,9 +1636,9 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         // When this changes, we'll expect a remount:
-        __signature__(Hello, '1');
+        $RefreshSig$(Hello, '1');
         return Hello;
       });
 
@@ -1663,9 +1661,9 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         // The signature hasn't changed since the last time:
-        __signature__(Hello, '1');
+        $RefreshSig$(Hello, '1');
         return Hello;
       });
 
@@ -1685,8 +1683,8 @@ describe('ReactFresh', () => {
           );
         }
         // We're changing the signature now so it will remount:
-        __register__(Hello, 'Hello');
-        __signature__(Hello, '2');
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '2');
         return Hello;
       });
 
@@ -1726,8 +1724,8 @@ describe('ReactFresh', () => {
           );
         }
         // Same signature as last time.
-        __register__(Hello, 'Hello');
-        __signature__(Hello, '2');
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '2');
         return Hello;
       });
 
@@ -1746,7 +1744,7 @@ describe('ReactFresh', () => {
           );
         }
         // No signature this time.
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         return Hello;
       });
 
@@ -1764,8 +1762,8 @@ describe('ReactFresh', () => {
         function Hello() {
           return null;
         }
-        __register__(Hello, 'Hello');
-        __signature__(Hello, '1');
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '1');
         return Hello;
       });
 
@@ -1819,12 +1817,14 @@ describe('ReactFresh', () => {
             <span />
             Hello
             <span />
-          </HelloV1>,
+          </HelloV1>
+          ,
           <HelloV1>
-            <React.Fragment>
+            <>
               <HelloV1 />
-            </React.Fragment>
-          </HelloV1>,
+            </>
+          </HelloV1>
+          ,
         </div>,
         <HelloV1>
           <HelloV1>
@@ -1910,14 +1910,14 @@ describe('ReactFresh', () => {
       function Hello({children}) {
         return <section data-color="blue">{children}</section>;
       }
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '1');
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '1');
       return Hello;
     });
 
     ReactDOM.render(tree, container);
     const elements = container.querySelectorAll('section');
-    // Each tree above products exactly three <section> elements:
+    // Each tree above produces exactly three <section> elements:
     expect(elements.length).toBe(3);
     elements.forEach(el => {
       expect(el.dataset.color).toBe('blue');
@@ -1928,8 +1928,8 @@ describe('ReactFresh', () => {
       function Hello({children}) {
         return <section data-color="red">{children}</section>;
       }
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '1');
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '1');
       return Hello;
     });
 
@@ -1947,8 +1947,8 @@ describe('ReactFresh', () => {
       function Hello({children}) {
         return <section data-color="orange">{children}</section>;
       }
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '2'); // Remount
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2'); // Remount
       return Hello;
     });
 
@@ -1966,8 +1966,8 @@ describe('ReactFresh', () => {
       function Hello({children}) {
         return <section data-color="black">{children}</section>;
       }
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '2'); // Same signature as before
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2'); // Same signature as before
       return Hello;
     });
 
@@ -2114,9 +2114,9 @@ describe('ReactFresh', () => {
     if (__DEV__) {
       testRemountingWithWrapper(Hello => {
         const child = (
-          <React.Fragment>
+          <>
             <Hello />
-          </React.Fragment>
+          </>
         );
         return function Wrapper() {
           return child;
@@ -2129,13 +2129,13 @@ describe('ReactFresh', () => {
     if (__DEV__) {
       testRemountingWithWrapper(Hello => {
         const child = (
-          <React.Fragment>
-            <React.Fragment>
+          <>
+            <>
               <React.Fragment />
-            </React.Fragment>
+            </>
             <Hello />
             <React.Fragment />
-          </React.Fragment>
+          </>
         );
         return function Wrapper() {
           return child;
@@ -2169,9 +2169,9 @@ describe('ReactFresh', () => {
           </p>
         );
       }
-      __register__(Hello, 'Hello');
+      $RefreshReg$(Hello, 'Hello');
       // When this changes, we'll expect a remount:
-      __signature__(Hello, '1');
+      $RefreshSig$(Hello, '1');
 
       // Use the passed wrapper.
       // This will be different in every test.
@@ -2197,9 +2197,9 @@ describe('ReactFresh', () => {
           </p>
         );
       }
-      __register__(Hello, 'Hello');
+      $RefreshReg$(Hello, 'Hello');
       // The signature hasn't changed since the last time:
-      __signature__(Hello, '1');
+      $RefreshSig$(Hello, '1');
       return Hello;
     });
 
@@ -2219,8 +2219,8 @@ describe('ReactFresh', () => {
         );
       }
       // We're changing the signature now so it will remount:
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '2');
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2');
       return Hello;
     });
 
@@ -2248,8 +2248,8 @@ describe('ReactFresh', () => {
         );
       }
       // Same signature as last time.
-      __register__(Hello, 'Hello');
-      __signature__(Hello, '2');
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2');
       return Hello;
     });
 
@@ -2268,7 +2268,7 @@ describe('ReactFresh', () => {
         );
       }
       // No signature this time.
-      __register__(Hello, 'Hello');
+      $RefreshReg$(Hello, 'Hello');
       return Hello;
     });
 
@@ -2299,7 +2299,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
         return Hello;
       });
 
@@ -2332,7 +2332,7 @@ describe('ReactFresh', () => {
               </p>
             );
           }
-          __register__(Hello, 'Hello');
+          $RefreshReg$(Hello, 'Hello');
           return Hello;
         });
       });
@@ -2353,12 +2353,55 @@ describe('ReactFresh', () => {
     }
   });
 
-  it('can hot reload offscreen components', () => {
+  // This pattern is inspired by useSubscription and similar mechanisms.
+  it('does not get into infinite loops during render phase updates', () => {
     if (__DEV__) {
+      render(() => {
+        function Hello() {
+          const source = React.useMemo(() => ({value: 10}), []);
+          const [state, setState] = React.useState({value: null});
+          if (state !== source) {
+            setState(source);
+          }
+          return <p style={{color: 'blue'}}>{state.value}</p>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      const el = container.firstChild;
+      expect(el.textContent).toBe('10');
+      expect(el.style.color).toBe('blue');
+
+      // Perform a hot update.
+      act(() => {
+        patch(() => {
+          function Hello() {
+            const source = React.useMemo(() => ({value: 20}), []);
+            const [state, setState] = React.useState({value: null});
+            if (state !== source) {
+              // This should perform a single render-phase update.
+              setState(source);
+            }
+            return <p style={{color: 'red'}}>{state.value}</p>;
+          }
+          $RefreshReg$(Hello, 'Hello');
+          return Hello;
+        });
+      });
+
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('20');
+      expect(el.style.color).toBe('red');
+    }
+  });
+
+  it('can hot reload offscreen components', () => {
+    if (__DEV__ && __EXPERIMENTAL__) {
       const AppV1 = prepare(() => {
         function Hello() {
           React.useLayoutEffect(() => {
-            Scheduler.yieldValue('Hello#layout');
+            Scheduler.unstable_yieldValue('Hello#layout');
           });
           const [val, setVal] = React.useState(0);
           return (
@@ -2367,11 +2410,11 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         return function App({offscreen}) {
           React.useLayoutEffect(() => {
-            Scheduler.yieldValue('App#layout');
+            Scheduler.unstable_yieldValue('App#layout');
           });
           return (
             <div hidden={offscreen}>
@@ -2381,7 +2424,7 @@ describe('ReactFresh', () => {
         };
       });
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<AppV1 offscreen={true} />);
       expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
       const el = container.firstChild;
@@ -2392,7 +2435,7 @@ describe('ReactFresh', () => {
       patch(() => {
         function Hello() {
           React.useLayoutEffect(() => {
-            Scheduler.yieldValue('Hello#layout');
+            Scheduler.unstable_yieldValue('Hello#layout');
           });
           const [val, setVal] = React.useState(0);
           return (
@@ -2401,7 +2444,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // It's still offscreen so we don't see anything.
@@ -2426,7 +2469,7 @@ describe('ReactFresh', () => {
       patch(() => {
         function Hello() {
           React.useLayoutEffect(() => {
-            Scheduler.yieldValue('Hello#layout');
+            Scheduler.unstable_yieldValue('Hello#layout');
           });
           const [val, setVal] = React.useState(0);
           return (
@@ -2435,7 +2478,7 @@ describe('ReactFresh', () => {
             </p>
           );
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // It's still offscreen so we don't see the updates.
@@ -2457,7 +2500,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Hi</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         class Boundary extends React.Component {
           state = {error: null};
@@ -2474,13 +2517,13 @@ describe('ReactFresh', () => {
 
         function App() {
           return (
-            <React.Fragment>
+            <>
               <p>A</p>
               <Boundary>
                 <Hello />
               </Boundary>
               <p>B</p>
-            </React.Fragment>
+            </>
           );
         }
 
@@ -2496,7 +2539,7 @@ describe('ReactFresh', () => {
         function Hello() {
           throw new Error('No');
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       expect(container.innerHTML).toBe('<p>A</p><h1>Oops: No</h1><p>B</p>');
@@ -2508,7 +2551,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Fixed!</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // This should remount the error boundary (but not anything above it).
@@ -2522,7 +2565,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Nice.</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild.nextSibling).toBe(helloNode);
       expect(helloNode.textContent).toBe('Nice.');
@@ -2535,7 +2578,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Hi</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         class Boundary extends React.Component {
           state = {error: null};
@@ -2552,13 +2595,13 @@ describe('ReactFresh', () => {
 
         function App() {
           return (
-            <React.Fragment>
+            <>
               <p>A</p>
               <Boundary>
                 <Hello />
               </Boundary>
               <p>B</p>
-            </React.Fragment>
+            </>
           );
         }
 
@@ -2574,7 +2617,7 @@ describe('ReactFresh', () => {
         function Hello() {
           throw new Error('No');
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       expect(container.innerHTML).toBe('<p>A</p><h1>Oops: No</h1><p>B</p>');
@@ -2586,7 +2629,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Fixed!</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
 
       // This should remount the error boundary (but not anything above it).
@@ -2600,7 +2643,7 @@ describe('ReactFresh', () => {
         function Hello() {
           return <h1>Nice.</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
       expect(container.firstChild.nextSibling).toBe(helloNode);
       expect(helloNode.textContent).toBe('Nice.');
@@ -2616,7 +2659,7 @@ describe('ReactFresh', () => {
           x.slice(); // Doesn't throw initially.
           return <h1>Hi</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
 
         class Boundary extends React.Component {
           state = {error: null};
@@ -2633,13 +2676,13 @@ describe('ReactFresh', () => {
 
         function App() {
           return (
-            <React.Fragment>
+            <>
               <p>A</p>
               <Boundary>
                 <Hello />
               </Boundary>
               <p>B</p>
-            </React.Fragment>
+            </>
           );
         }
 
@@ -2663,7 +2706,7 @@ describe('ReactFresh', () => {
             x.slice();
             return <h1>Hi</h1>;
           }
-          __register__(Hello, 'Hello');
+          $RefreshReg$(Hello, 'Hello');
         });
       });
 
@@ -2679,14 +2722,16 @@ describe('ReactFresh', () => {
       expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
 
       // Perform a hot update that fixes the error.
-      patch(() => {
-        function Hello() {
-          const [x] = React.useState('');
-          React.useEffect(() => {}, []); // Removes the bad effect code.
-          x.slice(); // Doesn't throw initially.
-          return <h1>Fixed!</h1>;
-        }
-        __register__(Hello, 'Hello');
+      act(() => {
+        patch(() => {
+          function Hello() {
+            const [x] = React.useState('');
+            React.useEffect(() => {}, []); // Removes the bad effect code.
+            x.slice(); // Doesn't throw initially.
+            return <h1>Fixed!</h1>;
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
       });
 
       // This should remount the error boundary (but not anything above it).
@@ -2696,17 +2741,1049 @@ describe('ReactFresh', () => {
 
       // Verify next hot reload doesn't remount anything.
       const helloNode = container.firstChild.nextSibling;
+      act(() => {
+        patch(() => {
+          function Hello() {
+            const [x] = React.useState('');
+            React.useEffect(() => {}, []);
+            x.slice();
+            return <h1>Nice.</h1>;
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      });
+
+      expect(container.firstChild.nextSibling).toBe(helloNode);
+      expect(helloNode.textContent).toBe('Nice.');
+    }
+  });
+
+  it('remounts a failed root on mount', () => {
+    if (__DEV__) {
+      expect(() => {
+        render(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          return Hello;
+        });
+      }).toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // A bad retry
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('Not yet');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('Not yet');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      patch(() => {
+        function Hello() {
+          return <h1>Fixed!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      // This should mount the root.
+      expect(container.innerHTML).toBe('<h1>Fixed!</h1>');
+
+      // Ensure we can keep failing and recovering later.
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('No 2');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('No 2');
+      expect(container.innerHTML).toBe('');
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('Not yet 2');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('Not yet 2');
+      expect(container.innerHTML).toBe('');
+      patch(() => {
+        function Hello() {
+          return <h1>Fixed 2!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('<h1>Fixed 2!</h1>');
+
+      // Updates after intentional unmount are ignored.
+      ReactDOM.unmountComponentAtNode(container);
+      patch(() => {
+        function Hello() {
+          throw new Error('Ignored');
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+      patch(() => {
+        function Hello() {
+          return <h1>Ignored</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+    }
+  });
+
+  it('does not retry an intentionally unmounted failed root', () => {
+    if (__DEV__) {
+      expect(() => {
+        render(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          return Hello;
+        });
+      }).toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // Intentional unmount.
+      ReactDOM.unmountComponentAtNode(container);
+
+      // Perform a hot update that fixes the error.
+      patch(() => {
+        function Hello() {
+          return <h1>Fixed!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      // This should stay unmounted.
+      expect(container.innerHTML).toBe('');
+    }
+  });
+
+  it('remounts a failed root on update', () => {
+    if (__DEV__) {
+      render(() => {
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        return Hello;
+      });
+      expect(container.innerHTML).toBe('<h1>Hi</h1>');
+
+      // Perform a hot update that fails.
+      // This removes the root.
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // A bad retry
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('Not yet');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('Not yet');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      patch(() => {
+        function Hello() {
+          return <h1>Fixed!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      // This should remount the root.
+      expect(container.innerHTML).toBe('<h1>Fixed!</h1>');
+
+      // Verify next hot reload doesn't remount anything.
+      let helloNode = container.firstChild;
       patch(() => {
         function Hello() {
-          const [x] = React.useState('');
-          React.useEffect(() => {}, []);
-          x.slice();
           return <h1>Nice.</h1>;
         }
-        __register__(Hello, 'Hello');
+        $RefreshReg$(Hello, 'Hello');
       });
-      expect(container.firstChild.nextSibling).toBe(helloNode);
+      expect(container.firstChild).toBe(helloNode);
       expect(helloNode.textContent).toBe('Nice.');
+
+      // Break again.
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('Oops');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('Oops');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      patch(() => {
+        function Hello() {
+          return <h1>At last.</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      // This should remount the root.
+      expect(container.innerHTML).toBe('<h1>At last.</h1>');
+
+      // Check we don't attempt to reverse an intentional unmount.
+      ReactDOM.unmountComponentAtNode(container);
+      expect(container.innerHTML).toBe('');
+      patch(() => {
+        function Hello() {
+          return <h1>Never mind me!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+
+      // Mount a new container.
+      render(() => {
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        return Hello;
+      });
+      expect(container.innerHTML).toBe('<h1>Hi</h1>');
+
+      // Break again.
+      expect(() => {
+        patch(() => {
+          function Hello() {
+            throw new Error('Oops');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).toThrow('Oops');
+      expect(container.innerHTML).toBe('');
+
+      // Check we don't attempt to reverse an intentional unmount, even after an error.
+      ReactDOM.unmountComponentAtNode(container);
+      expect(container.innerHTML).toBe('');
+      patch(() => {
+        function Hello() {
+          return <h1>Never mind me!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+    }
+  });
+
+  it('regression test: does not get into an infinite loop', () => {
+    if (__DEV__) {
+      let containerA = document.createElement('div');
+      let containerB = document.createElement('div');
+
+      // Initially, nothing interesting.
+      let RootAV1 = () => {
+        return 'A1';
+      };
+      $RefreshReg$(RootAV1, 'RootA');
+      let RootBV1 = () => {
+        return 'B1';
+      };
+      $RefreshReg$(RootBV1, 'RootB');
+
+      act(() => {
+        ReactDOM.render(<RootAV1 />, containerA);
+        ReactDOM.render(<RootBV1 />, containerB);
+      });
+      expect(containerA.innerHTML).toBe('A1');
+      expect(containerB.innerHTML).toBe('B1');
+
+      // Then make the first root fail.
+      let RootAV2 = () => {
+        throw new Error('A2!');
+      };
+      $RefreshReg$(RootAV2, 'RootA');
+      expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A2!');
+      expect(containerA.innerHTML).toBe('');
+      expect(containerB.innerHTML).toBe('B1');
+
+      // Then patch the first root, but make it fail in the commit phase.
+      // This used to trigger an infinite loop due to a list of failed roots
+      // being mutated while it was being iterated on.
+      let RootAV3 = () => {
+        React.useLayoutEffect(() => {
+          throw new Error('A3!');
+        }, []);
+        return 'A3';
+      };
+      $RefreshReg$(RootAV3, 'RootA');
+      expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A3!');
+      expect(containerA.innerHTML).toBe('');
+      expect(containerB.innerHTML).toBe('B1');
+
+      let RootAV4 = () => {
+        return 'A4';
+      };
+      $RefreshReg$(RootAV4, 'RootA');
+      ReactFreshRuntime.performReactRefresh();
+      expect(containerA.innerHTML).toBe('A4');
+      expect(containerB.innerHTML).toBe('B1');
+    }
+  });
+
+  it('remounts classes on every edit', () => {
+    if (__DEV__) {
+      let HelloV1 = render(() => {
+        class Hello extends React.Component {
+          state = {count: 0};
+          handleClick = () => {
+            this.setState(prev => ({
+              count: prev.count + 1,
+            }));
+          };
+          render() {
+            return (
+              <p style={{color: 'blue'}} onClick={this.handleClick}>
+                {this.state.count}
+              </p>
+            );
+          }
+        }
+        // For classes, we wouldn't do this call via Babel plugin.
+        // Instead, we'd do it at module boundaries.
+        // Normally classes would get a different type and remount anyway,
+        // but at module boundaries we may want to prevent propagation.
+        // However we still want to force a remount and use latest version.
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      let HelloV2 = patch(() => {
+        class Hello extends React.Component {
+          state = {count: 0};
+          handleClick = () => {
+            this.setState(prev => ({
+              count: prev.count + 1,
+            }));
+          };
+          render() {
+            return (
+              <p style={{color: 'red'}} onClick={this.handleClick}>
+                {this.state.count}
+              </p>
+            );
+          }
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // It should have remounted the class.
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('red');
+      act(() => {
+        newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(newEl.textContent).toBe('1');
+
+      // Now top-level renders of both types resolve to latest.
+      render(() => HelloV1);
+      render(() => HelloV2);
+      expect(container.firstChild).toBe(newEl);
+      expect(newEl.style.color).toBe('red');
+      expect(newEl.textContent).toBe('1');
+
+      let HelloV3 = patch(() => {
+        class Hello extends React.Component {
+          state = {count: 0};
+          handleClick = () => {
+            this.setState(prev => ({
+              count: prev.count + 1,
+            }));
+          };
+          render() {
+            return (
+              <p style={{color: 'orange'}} onClick={this.handleClick}>
+                {this.state.count}
+              </p>
+            );
+          }
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // It should have remounted the class again.
+      expect(container.firstChild).not.toBe(el);
+      const finalEl = container.firstChild;
+      expect(finalEl.textContent).toBe('0');
+      expect(finalEl.style.color).toBe('orange');
+      act(() => {
+        finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(finalEl.textContent).toBe('1');
+
+      render(() => HelloV3);
+      render(() => HelloV2);
+      render(() => HelloV1);
+      expect(container.firstChild).toBe(finalEl);
+      expect(finalEl.style.color).toBe('orange');
+      expect(finalEl.textContent).toBe('1');
+    }
+  });
+
+  it('updates refs when remounting', () => {
+    if (__DEV__) {
+      const testRef = React.createRef();
+      render(
+        () => {
+          class Hello extends React.Component {
+            getColor() {
+              return 'green';
+            }
+            render() {
+              return <p />;
+            }
+          }
+          $RefreshReg$(Hello, 'Hello');
+          return Hello;
+        },
+        {ref: testRef},
+      );
+      expect(testRef.current.getColor()).toBe('green');
+
+      patch(() => {
+        class Hello extends React.Component {
+          getColor() {
+            return 'orange';
+          }
+          render() {
+            return <p />;
+          }
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('orange');
+
+      patch(() => {
+        const Hello = React.forwardRef((props, ref) => {
+          React.useImperativeHandle(ref, () => ({
+            getColor() {
+              return 'pink';
+            },
+          }));
+          return <p />;
+        });
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('pink');
+
+      patch(() => {
+        const Hello = React.forwardRef((props, ref) => {
+          React.useImperativeHandle(ref, () => ({
+            getColor() {
+              return 'yellow';
+            },
+          }));
+          return <p />;
+        });
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('yellow');
+
+      patch(() => {
+        const Hello = React.forwardRef((props, ref) => {
+          React.useImperativeHandle(ref, () => ({
+            getColor() {
+              return 'yellow';
+            },
+          }));
+          return <p />;
+        });
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('yellow');
+    }
+  });
+
+  it('remounts on conversion from class to function and back', () => {
+    if (__DEV__) {
+      let HelloV1 = render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update that turns it into a class.
+      let HelloV2 = patch(() => {
+        class Hello extends React.Component {
+          state = {count: 0};
+          handleClick = () => {
+            this.setState(prev => ({
+              count: prev.count + 1,
+            }));
+          };
+          render() {
+            return (
+              <p style={{color: 'red'}} onClick={this.handleClick}>
+                {this.state.count}
+              </p>
+            );
+          }
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // It should have remounted.
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('red');
+      act(() => {
+        newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(newEl.textContent).toBe('1');
+
+      // Now top-level renders of both types resolve to latest.
+      render(() => HelloV1);
+      render(() => HelloV2);
+      expect(container.firstChild).toBe(newEl);
+      expect(newEl.style.color).toBe('red');
+      expect(newEl.textContent).toBe('1');
+
+      // Now convert it back to a function.
+      let HelloV3 = patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // It should have remounted again.
+      expect(container.firstChild).not.toBe(el);
+      const finalEl = container.firstChild;
+      expect(finalEl.textContent).toBe('0');
+      expect(finalEl.style.color).toBe('orange');
+      act(() => {
+        finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(finalEl.textContent).toBe('1');
+
+      render(() => HelloV3);
+      render(() => HelloV2);
+      render(() => HelloV1);
+      expect(container.firstChild).toBe(finalEl);
+      expect(finalEl.style.color).toBe('orange');
+      expect(finalEl.textContent).toBe('1');
+
+      // Now that it's a function, verify edits keep state.
+      patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'purple'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+      expect(container.firstChild).toBe(finalEl);
+      expect(finalEl.style.color).toBe('purple');
+      expect(finalEl.textContent).toBe('1');
+    }
+  });
+
+  it('can find host instances for a family', () => {
+    if (__DEV__) {
+      render(() => {
+        function Child({children}) {
+          return <div className="Child">{children}</div>;
+        }
+        $RefreshReg$(Child, 'Child');
+
+        function Parent({children}) {
+          return (
+            <div className="Parent">
+              <div>
+                <Child />
+              </div>
+              <div>
+                <Child />
+              </div>
+            </div>
+          );
+        }
+        $RefreshReg$(Parent, 'Parent');
+
+        function App() {
+          return (
+            <div className="App">
+              <Parent />
+              <Cls>
+                <Parent />
+              </Cls>
+              <Indirection>
+                <Empty />
+              </Indirection>
+            </div>
+          );
+        }
+        $RefreshReg$(App, 'App');
+
+        class Cls extends React.Component {
+          render() {
+            return this.props.children;
+          }
+        }
+
+        function Indirection({children}) {
+          return children;
+        }
+
+        function Empty() {
+          return null;
+        }
+        $RefreshReg$(Empty, 'Empty');
+
+        function Frag() {
+          return (
+            <>
+              <div className="Frag">
+                <div />
+              </div>
+              <div className="Frag">
+                <div />
+              </div>
+            </>
+          );
+        }
+        $RefreshReg$(Frag, 'Frag');
+
+        return App;
+      });
+
+      const parentFamily = ReactFreshRuntime.getFamilyByID('Parent');
+      const childFamily = ReactFreshRuntime.getFamilyByID('Child');
+      const emptyFamily = ReactFreshRuntime.getFamilyByID('Empty');
+
+      testFindHostInstancesForFamilies(
+        [parentFamily],
+        container.querySelectorAll('.Parent'),
+      );
+
+      testFindHostInstancesForFamilies(
+        [childFamily],
+        container.querySelectorAll('.Child'),
+      );
+
+      // When searching for both Parent and Child,
+      // we'll stop visual highlighting at the Parent.
+      testFindHostInstancesForFamilies(
+        [parentFamily, childFamily],
+        container.querySelectorAll('.Parent'),
+      );
+
+      // When we can't find host nodes, use the closest parent.
+      testFindHostInstancesForFamilies(
+        [emptyFamily],
+        container.querySelectorAll('.App'),
+      );
+    }
+  });
+
+  function testFindHostInstancesForFamilies(families, expectedNodes) {
+    const foundInstances = Array.from(
+      ReactFreshRuntime.findAffectedHostInstances(families),
+    );
+    expect(foundInstances.length).toEqual(expectedNodes.length);
+    foundInstances.forEach((node, i) => {
+      expect(node).toBe(expectedNodes[i]);
+    });
+  }
+
+  it('can update multiple roots independently', () => {
+    if (__DEV__) {
+      // Declare the first version.
+      const HelloV1 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV1, 'Hello');
+
+      // Perform a hot update before any roots exist.
+      const HelloV2 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV2, 'Hello');
+      ReactFreshRuntime.performReactRefresh();
+
+      // Mount three roots.
+      let cont1 = document.createElement('div');
+      let cont2 = document.createElement('div');
+      let cont3 = document.createElement('div');
+      document.body.appendChild(cont1);
+      document.body.appendChild(cont2);
+      document.body.appendChild(cont3);
+      try {
+        ReactDOM.render(<HelloV1 id={1} />, cont1);
+        ReactDOM.render(<HelloV2 id={2} />, cont2);
+        ReactDOM.render(<HelloV1 id={3} />, cont3);
+
+        // Expect we see the V2 color.
+        expect(cont1.firstChild.style.color).toBe('red');
+        expect(cont2.firstChild.style.color).toBe('red');
+        expect(cont3.firstChild.style.color).toBe('red');
+        expect(cont1.firstChild.textContent).toBe('0');
+        expect(cont2.firstChild.textContent).toBe('0');
+        expect(cont3.firstChild.textContent).toBe('0');
+
+        // Bump the state for each of them.
+        act(() => {
+          cont1.firstChild.dispatchEvent(
+            new MouseEvent('click', {bubbles: true}),
+          );
+          cont2.firstChild.dispatchEvent(
+            new MouseEvent('click', {bubbles: true}),
+          );
+          cont3.firstChild.dispatchEvent(
+            new MouseEvent('click', {bubbles: true}),
+          );
+        });
+        expect(cont1.firstChild.style.color).toBe('red');
+        expect(cont2.firstChild.style.color).toBe('red');
+        expect(cont3.firstChild.style.color).toBe('red');
+        expect(cont1.firstChild.textContent).toBe('1');
+        expect(cont2.firstChild.textContent).toBe('1');
+        expect(cont3.firstChild.textContent).toBe('1');
+
+        // Perform another hot update.
+        const HelloV3 = () => {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'green'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        };
+        $RefreshReg$(HelloV3, 'Hello');
+        ReactFreshRuntime.performReactRefresh();
+
+        // It should affect all roots.
+        expect(cont1.firstChild.style.color).toBe('green');
+        expect(cont2.firstChild.style.color).toBe('green');
+        expect(cont3.firstChild.style.color).toBe('green');
+        expect(cont1.firstChild.textContent).toBe('1');
+        expect(cont2.firstChild.textContent).toBe('1');
+        expect(cont3.firstChild.textContent).toBe('1');
+
+        // Unmount the second root.
+        ReactDOM.unmountComponentAtNode(cont2);
+        // Make the first root throw and unmount on hot update.
+        const HelloV4 = ({id}) => {
+          if (id === 1) {
+            throw new Error('Oops.');
+          }
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        };
+        $RefreshReg$(HelloV4, 'Hello');
+        expect(() => {
+          ReactFreshRuntime.performReactRefresh();
+        }).toThrow('Oops.');
+
+        // Still, we expect the last root to be updated.
+        expect(cont1.innerHTML).toBe('');
+        expect(cont2.innerHTML).toBe('');
+        expect(cont3.firstChild.style.color).toBe('orange');
+        expect(cont3.firstChild.textContent).toBe('1');
+      } finally {
+        document.body.removeChild(cont1);
+        document.body.removeChild(cont2);
+        document.body.removeChild(cont3);
+      }
+    }
+  });
+
+  // Module runtimes can use this to decide whether
+  // to propagate an update up to the modules that imported it,
+  // or to stop at the current module because it's a component.
+  // This can't and doesn't need to be 100% precise.
+  it('can detect likely component types', () => {
+    function useTheme() {}
+    function Widget() {}
+
+    if (__DEV__) {
+      expect(ReactFreshRuntime.isLikelyComponentType(false)).toBe(false);
+      expect(ReactFreshRuntime.isLikelyComponentType(null)).toBe(false);
+      expect(ReactFreshRuntime.isLikelyComponentType('foo')).toBe(false);
+
+      // We need to hit a balance here.
+      // If we lean towards assuming everything is a component,
+      // editing modules that export plain functions won't trigger
+      // a proper reload because we will bottle up the update.
+      // So we're being somewhat conservative.
+      expect(ReactFreshRuntime.isLikelyComponentType(() => {})).toBe(false);
+      expect(ReactFreshRuntime.isLikelyComponentType(function() {})).toBe(
+        false,
+      );
+      expect(
+        ReactFreshRuntime.isLikelyComponentType(function lightenColor() {}),
+      ).toBe(false);
+      const loadUser = () => {};
+      expect(ReactFreshRuntime.isLikelyComponentType(loadUser)).toBe(false);
+      const useStore = () => {};
+      expect(ReactFreshRuntime.isLikelyComponentType(useStore)).toBe(false);
+      expect(ReactFreshRuntime.isLikelyComponentType(useTheme)).toBe(false);
+
+      // These seem like function components.
+      let Button = () => {};
+      expect(ReactFreshRuntime.isLikelyComponentType(Button)).toBe(true);
+      expect(ReactFreshRuntime.isLikelyComponentType(Widget)).toBe(true);
+      let anon = (() => () => {})();
+      anon.displayName = 'Foo';
+      expect(ReactFreshRuntime.isLikelyComponentType(anon)).toBe(true);
+
+      // These seem like class components.
+      class Btn extends React.Component {}
+      class PureBtn extends React.PureComponent {}
+      expect(ReactFreshRuntime.isLikelyComponentType(Btn)).toBe(true);
+      expect(ReactFreshRuntime.isLikelyComponentType(PureBtn)).toBe(true);
+      expect(
+        ReactFreshRuntime.isLikelyComponentType(
+          createReactClass({render() {}}),
+        ),
+      ).toBe(true);
+
+      // These don't.
+      class Figure {
+        move() {}
+      }
+      expect(ReactFreshRuntime.isLikelyComponentType(Figure)).toBe(false);
+      class Point extends Figure {}
+      expect(ReactFreshRuntime.isLikelyComponentType(Point)).toBe(false);
+
+      // Run the same tests without Babel.
+      // This tests real arrow functions and classes, as implemented in Node.
+
+      // eslint-disable-next-line no-new-func
+      new Function(
+        'global',
+        'React',
+        'ReactFreshRuntime',
+        'expect',
+        'createReactClass',
+        `
+        expect(ReactFreshRuntime.isLikelyComponentType(() => {})).toBe(false);
+        expect(ReactFreshRuntime.isLikelyComponentType(function() {})).toBe(false);
+        expect(
+          ReactFreshRuntime.isLikelyComponentType(function lightenColor() {}),
+        ).toBe(false);
+        const loadUser = () => {};
+        expect(ReactFreshRuntime.isLikelyComponentType(loadUser)).toBe(false);
+        const useStore = () => {};
+        expect(ReactFreshRuntime.isLikelyComponentType(useStore)).toBe(false);
+        function useTheme() {}
+        expect(ReactFreshRuntime.isLikelyComponentType(useTheme)).toBe(false);
+
+        // These seem like function components.
+        let Button = () => {};
+        expect(ReactFreshRuntime.isLikelyComponentType(Button)).toBe(true);
+        function Widget() {}
+        expect(ReactFreshRuntime.isLikelyComponentType(Widget)).toBe(true);
+        let anon = (() => () => {})();
+        anon.displayName = 'Foo';
+        expect(ReactFreshRuntime.isLikelyComponentType(anon)).toBe(true);
+
+        // These seem like class components.
+        class Btn extends React.Component {}
+        class PureBtn extends React.PureComponent {}
+        expect(ReactFreshRuntime.isLikelyComponentType(Btn)).toBe(true);
+        expect(ReactFreshRuntime.isLikelyComponentType(PureBtn)).toBe(true);
+        expect(
+          ReactFreshRuntime.isLikelyComponentType(createReactClass({render() {}})),
+        ).toBe(true);
+
+        // These don't.
+        class Figure {
+          move() {}
+        }
+        expect(ReactFreshRuntime.isLikelyComponentType(Figure)).toBe(false);
+        class Point extends Figure {}
+        expect(ReactFreshRuntime.isLikelyComponentType(Point)).toBe(false);
+      `,
+      )(global, React, ReactFreshRuntime, expect, createReactClass);
+    }
+  });
+
+  it('reports updated and remounted families to the caller', () => {
+    if (__DEV__) {
+      const HelloV1 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV1, 'Hello');
+
+      const HelloV2 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV2, 'Hello');
+
+      const update = ReactFreshRuntime.performReactRefresh();
+      expect(update.updatedFamilies.size).toBe(1);
+      expect(update.staleFamilies.size).toBe(0);
+      const family = update.updatedFamilies.values().next().value;
+      expect(family.current.name).toBe('HelloV2');
+      // For example, we can use this to print a log of what was updated.
+    }
+  });
+
+  // This simulates the scenario in https://github.com/facebook/react/issues/17626.
+  it('can inject the runtime after the renderer executes', () => {
+    if (__DEV__) {
+      // This is a minimal shim for the global hook installed by DevTools.
+      // The real one is in packages/react-devtools-shared/src/hook.js.
+      let idCounter = 0;
+      let renderers = new Map();
+      global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+        renderers,
+        supportsFiber: true,
+        inject(renderer) {
+          const id = ++idCounter;
+          renderers.set(id, renderer);
+          return id;
+        },
+        onCommitFiberRoot() {},
+        onCommitFiberUnmount() {},
+      };
+
+      // Load these first, as if they're coming from a CDN.
+      jest.resetModules();
+      React = require('react');
+      ReactDOM = require('react-dom');
+      Scheduler = require('scheduler');
+      act = require('react-dom/test-utils').act;
+
+      // Important! Inject into the global hook *after* ReactDOM runs:
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+
+      // We're verifying that we're able to track roots mounted after this point.
+      // The rest of this test is taken from the simplest first test case.
+
+      render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
     }
   });
 });
diff --git a/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
similarity index 75%
rename from packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
rename to packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
index e5eb1db316f5b..8c2cc3b0a139f 100644
--- a/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -7,14 +7,31 @@
 
 'use strict';
 
-let babel = require('babel-core');
-let freshPlugin = require('react-fresh/babel');
+let babel = require('@babel/core');
+let {wrap} = require('jest-snapshot-serializer-raw');
+let freshPlugin = require('react-refresh/babel');
 
 function transform(input, options = {}) {
-  return babel.transform(input, {
-    babelrc: false,
-    plugins: ['syntax-jsx', freshPlugin],
-  }).code;
+  return wrap(
+    babel.transform(input, {
+      babelrc: false,
+      configFile: false,
+      plugins: [
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
+        [
+          freshPlugin,
+          {
+            skipEnvCheck: true,
+            // To simplify debugging tests:
+            emitFullSignatures: true,
+            ...options.freshOptions,
+          },
+        ],
+        ...(options.plugins || []),
+      ],
+    }).code,
+  );
 }
 
 describe('ReactFreshBabelPlugin', () => {
@@ -383,4 +400,102 @@ describe('ReactFreshBabelPlugin', () => {
     `),
     ).toMatchSnapshot();
   });
+
+  it('includes custom hooks into the signatures when commonjs target is used', () => {
+    // this test is passing with Babel 6
+    // but would fail for Babel 7 _without_ custom hook node being cloned for signature
+    expect(
+      transform(
+        `
+        import {useFancyState} from './hooks';
+        
+        export default function App() {
+          const bar = useFancyState();
+          return <h1>{bar}</h1>;
+        }
+    `,
+        {
+          plugins: ['transform-es2015-modules-commonjs'],
+        },
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it('generates valid signature for exotic ways to call Hooks', () => {
+    expect(
+      transform(`
+        import FancyHook from 'fancy';
+
+        export default function App() {
+          function useFancyState() {
+            const [foo, setFoo] = React.useState(0);
+            useFancyEffect();
+            return foo;
+          }
+          const bar = useFancyState();
+          const baz = FancyHook.useThing();
+          React.useState();
+          useThePlatform();
+          return <h1>{bar}{baz}</h1>;
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('does not consider require-like methods to be HOCs', () => {
+    // None of these were declared in this file.
+    // It's bad to register them because that would trigger
+    // modules to execute in an environment with inline requires.
+    // So we expect the transform to skip all of them even though
+    // they are used in JSX.
+    expect(
+      transform(`
+        const A = require('A');
+        const B = foo ? require('X') : require('Y');
+        const C = requireCond(gk, 'C');
+        const D = import('D');
+
+        export default function App() {
+          return (
+            <div>
+              <A />
+              <B />
+              <C />
+              <D />
+            </div>
+          );
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('can handle implicit arrow returns', () => {
+    expect(
+      transform(`
+        export default () => useContext(X);
+        export const Foo = () => useContext(X);
+        module.exports = () => useContext(X);
+        const Bar = () => useContext(X);
+        const Baz = memo(() => useContext(X));
+        const Qux = () => (0, useContext(X));
+      `),
+    ).toMatchSnapshot();
+  });
+
+  it('uses custom identifiers for $RefreshReg$ and $RefreshSig$', () => {
+    expect(
+      transform(
+        `export default function Bar () {
+        useContext(X)
+        return <Foo />
+      };`,
+        {
+          freshOptions: {
+            refreshReg: 'import.meta.refreshReg',
+            refreshSig: 'import.meta.refreshSig',
+          },
+        },
+      ),
+    ).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
new file mode 100644
index 0000000000000..a86ca14d98ea7
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -0,0 +1,1727 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactFreshRuntime;
+let act;
+
+let babel = require('@babel/core');
+let freshPlugin = require('react-refresh/babel');
+
+describe('ReactFreshIntegration', () => {
+  let container;
+  let exportsObj;
+
+  beforeEach(() => {
+    if (__DEV__) {
+      jest.resetModules();
+      React = require('react');
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+      ReactDOM = require('react-dom');
+      act = require('react-dom/test-utils').act;
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      exportsObj = undefined;
+    }
+  });
+
+  afterEach(() => {
+    if (__DEV__) {
+      ReactDOM.unmountComponentAtNode(container);
+      // Ensure we don't leak memory by holding onto dead roots.
+      expect(ReactFreshRuntime._getMountedRootCount()).toBe(0);
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('with compiled destructuring', () => {
+    runTests(true);
+  });
+
+  describe('without compiled destructuring', () => {
+    runTests(false);
+  });
+
+  function runTests(compileDestructuring) {
+    function execute(source) {
+      const compiled = babel.transform(source, {
+        babelrc: false,
+        presets: ['@babel/react'],
+        plugins: [
+          [freshPlugin, {skipEnvCheck: true}],
+          '@babel/plugin-transform-modules-commonjs',
+          compileDestructuring && '@babel/plugin-transform-destructuring',
+        ].filter(Boolean),
+      }).code;
+      exportsObj = {};
+      // eslint-disable-next-line no-new-func
+      new Function(
+        'global',
+        'React',
+        'exports',
+        '$RefreshReg$',
+        '$RefreshSig$',
+        compiled,
+      )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);
+      // Module systems will register exports as a fallback.
+      // This is useful for cases when e.g. a class is exported,
+      // and we don't want to propagate the update beyond this module.
+      $RefreshReg$(exportsObj.default, 'exports.default');
+      return exportsObj.default;
+    }
+
+    function render(source) {
+      const Component = execute(source);
+      act(() => {
+        ReactDOM.render(<Component />, container);
+      });
+      // Module initialization shouldn't be counted as a hot update.
+      expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
+    }
+
+    function patch(source) {
+      const prevExports = exportsObj;
+      execute(source);
+      const nextExports = exportsObj;
+
+      // Check if exported families have changed.
+      // (In a real module system we'd do this for *all* exports.)
+      // For example, this can happen if you convert a class to a function.
+      // Or if you wrap something in a HOC.
+      let didExportsChange =
+        ReactFreshRuntime.getFamilyByType(prevExports.default) !==
+        ReactFreshRuntime.getFamilyByType(nextExports.default);
+      if (didExportsChange) {
+        // In a real module system, we would propagate such updates upwards,
+        // and re-execute modules that imported this one. (Just like if we edited them.)
+        // This makes adding/removing/renaming exports re-render references to them.
+        // Here, we'll just force a re-render using the newer type to emulate this.
+        const NextComponent = nextExports.default;
+        act(() => {
+          ReactDOM.render(<NextComponent />, container);
+        });
+      }
+      act(() => {
+        const result = ReactFreshRuntime.performReactRefresh();
+        if (!didExportsChange) {
+          // Normally we expect that some components got updated in our tests.
+          expect(result).not.toBe(null);
+        } else {
+          // However, we have tests where we convert functions to classes,
+          // and in those cases it's expected nothing would get updated.
+          // (Instead, the export change branch above would take care of it.)
+        }
+      });
+      expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
+    }
+
+    function $RefreshReg$(type, id) {
+      ReactFreshRuntime.register(type, id);
+    }
+
+    function $RefreshSig$() {
+      return ReactFreshRuntime.createSignatureFunctionForTransform();
+    }
+
+    it('reloads function declarations', () => {
+      if (__DEV__) {
+        render(`
+          function Parent() {
+            return <Child prop="A" />;
+          };
+
+          function Child({prop}) {
+            return <h1>{prop}1</h1>;
+          };
+
+          export default Parent;
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          function Parent() {
+            return <Child prop="B" />;
+          };
+
+          function Child({prop}) {
+            return <h1>{prop}2</h1>;
+          };
+
+          export default Parent;
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+
+    it('reloads arrow functions', () => {
+      if (__DEV__) {
+        render(`
+          const Parent = () => {
+            return <Child prop="A" />;
+          };
+
+          const Child = ({prop}) => {
+            return <h1>{prop}1</h1>;
+          };
+
+          export default Parent;
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          const Parent = () => {
+            return <Child prop="B" />;
+          };
+
+          const Child = ({prop}) => {
+            return <h1>{prop}2</h1>;
+          };
+
+          export default Parent;
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+
+    it('reloads a combination of memo and forwardRef', () => {
+      if (__DEV__) {
+        render(`
+          const {memo} = React;
+
+          const Parent = memo(React.forwardRef(function (props, ref) {
+            return <Child prop="A" ref={ref} />;
+          }));
+
+          const Child = React.memo(({prop}) => {
+            return <h1>{prop}1</h1>;
+          });
+
+          export default React.memo(Parent);
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          const {memo} = React;
+
+          const Parent = memo(React.forwardRef(function (props, ref) {
+            return <Child prop="B" ref={ref} />;
+          }));
+
+          const Child = React.memo(({prop}) => {
+            return <h1>{prop}2</h1>;
+          });
+
+          export default React.memo(Parent);
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+
+    it('reloads default export with named memo', () => {
+      if (__DEV__) {
+        render(`
+          const {memo} = React;
+
+          const Child = React.memo(({prop}) => {
+            return <h1>{prop}1</h1>;
+          });
+
+          export default memo(React.forwardRef(function Parent(props, ref) {
+            return <Child prop="A" ref={ref} />;
+          }));
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          const {memo} = React;
+
+          const Child = React.memo(({prop}) => {
+            return <h1>{prop}2</h1>;
+          });
+
+          export default memo(React.forwardRef(function Parent(props, ref) {
+            return <Child prop="B" ref={ref} />;
+          }));
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+
+    it('reloads HOCs if they return functions', () => {
+      if (__DEV__) {
+        render(`
+          function hoc(letter) {
+            return function() {
+              return <h1>{letter}1</h1>;
+            }
+          }
+
+          export default function Parent() {
+            return <Child />;
+          }
+
+          const Child = hoc('A');
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          function hoc(letter) {
+            return function() {
+              return <h1>{letter}2</h1>;
+            }
+          }
+
+          export default function Parent() {
+            return React.createElement(Child);
+          }
+
+          const Child = hoc('B');
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+
+    it('resets state when renaming a state variable', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+          const S = 1;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>A{foo}</h1>;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useState} = React;
+          const S = 2;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>B{foo}</h1>;
+          }
+        `);
+        // Same state variable name, so state is preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+          const S = 3;
+
+          export default function App() {
+            const [bar, setBar] = useState(S);
+            return <h1>C{bar}</h1>;
+          }
+        `);
+        // Different state variable name, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('C3');
+      }
+    });
+
+    it('resets state when renaming a state variable in a HOC', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+          const S = 1;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [foo, setFoo] = useState(S);
+              return <Wrapped value={foo} />;
+            };
+          }
+
+          export default hoc(({ value }) => {
+            return <h1>A{value}</h1>;
+          });
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useState} = React;
+          const S = 2;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [foo, setFoo] = useState(S);
+              return <Wrapped value={foo} />;
+            };
+          }
+
+          export default hoc(({ value }) => {
+            return <h1>B{value}</h1>;
+          });
+        `);
+        // Same state variable name, so state is preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+          const S = 3;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [bar, setBar] = useState(S);
+              return <Wrapped value={bar} />;
+            };
+          }
+
+          export default hoc(({ value }) => {
+            return <h1>C{value}</h1>;
+          });
+        `);
+        // Different state variable name, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('C3');
+      }
+    });
+
+    it('resets state when renaming a state variable in a HOC with indirection', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+          const S = 1;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [foo, setFoo] = useState(S);
+              return <Wrapped value={foo} />;
+            };
+          }
+
+          function Indirection({ value }) {
+            return <h1>A{value}</h1>;
+          }
+
+          export default hoc(Indirection);
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useState} = React;
+          const S = 2;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [foo, setFoo] = useState(S);
+              return <Wrapped value={foo} />;
+            };
+          }
+
+          function Indirection({ value }) {
+            return <h1>B{value}</h1>;
+          }
+
+          export default hoc(Indirection);
+        `);
+        // Same state variable name, so state is preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+          const S = 3;
+
+          function hoc(Wrapped) {
+            return function Generated() {
+              const [bar, setBar] = useState(S);
+              return <Wrapped value={bar} />;
+            };
+          }
+
+          function Indirection({ value }) {
+            return <h1>C{value}</h1>;
+          }
+
+          export default hoc(Indirection);
+        `);
+        // Different state variable name, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('C3');
+      }
+    });
+
+    it('resets effects while preserving state', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            return <h1>A{value}</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A0');
+
+        // Add an effect.
+        patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            React.useEffect(() => {
+              const id = setInterval(() => {
+                setValue(v => v + 1);
+              }, 1000);
+              return () => clearInterval(id);
+            }, []);
+            return <h1>B{value}</h1>;
+          }
+        `);
+        // We added an effect, thereby changing Hook order.
+        // This causes a remount.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B0');
+
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            React.useEffect(() => {
+              const id = setInterval(() => {
+                setValue(v => v + 10);
+              }, 1000);
+              return () => clearInterval(id);
+            }, []);
+            return <h1>C{value}</h1>;
+          }
+        `);
+        // Same Hooks are called, so state is preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C1');
+
+        // Effects are always reset, so timer was reinstalled.
+        // The new version increments by 10 rather than 1.
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+        expect(el.textContent).toBe('C11');
+
+        patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            return <h1>D{value}</h1>;
+          }
+        `);
+        // Removing the effect changes the signature
+        // and causes the component to remount.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('D0');
+      }
+    });
+
+    it('does not get confused when custom hooks are reordered', () => {
+      if (__DEV__) {
+        render(`
+          function useFancyState(initialState) {
+            return React.useState(initialState);
+          }
+
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>A{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('AXY');
+
+        patch(`
+          function useFancyState(initialState) {
+            return React.useState(initialState);
+          }
+
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+        // Same state variables, so no remount.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('BXY');
+
+        patch(`
+          function useFancyState(initialState) {
+            return React.useState(initialState);
+          }
+
+          const App = () => {
+            const [y, setY] = useFancyState('Y');
+            const [x, setX] = useFancyState('X');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+        // Hooks were re-ordered. This causes a remount.
+        // Therefore, Hook calls don't accidentally share state.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('BXY');
+      }
+    });
+
+    it('does not get confused when component is called early', () => {
+      if (__DEV__) {
+        render(`
+          // This isn't really a valid pattern but it's close enough
+          // to simulate what happens when you call ReactDOM.render
+          // in the same file. We want to ensure this doesn't confuse
+          // the runtime.
+          App();
+
+          function App() {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>A{x}{y}</h1>;
+          };
+
+          function useFancyState(initialState) {
+            // No real Hook calls to avoid triggering invalid call invariant.
+            // We only want to verify that we can still call this function early.
+            return initialState;
+          }
+
+          export default App;
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('AXY');
+
+        patch(`
+          // This isn't really a valid pattern but it's close enough
+          // to simulate what happens when you call ReactDOM.render
+          // in the same file. We want to ensure this doesn't confuse
+          // the runtime.
+          App();
+
+          function App() {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          function useFancyState(initialState) {
+            // No real Hook calls to avoid triggering invalid call invariant.
+            // We only want to verify that we can still call this function early.
+            return initialState;
+          }
+
+          export default App;
+        `);
+        // Same state variables, so no remount.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('BXY');
+
+        patch(`
+          // This isn't really a valid pattern but it's close enough
+          // to simulate what happens when you call ReactDOM.render
+          // in the same file. We want to ensure this doesn't confuse
+          // the runtime.
+          App();
+
+          function App() {
+            const [y, setY] = useFancyState('Y');
+            const [x, setX] = useFancyState('X');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          function useFancyState(initialState) {
+            // No real Hook calls to avoid triggering invalid call invariant.
+            // We only want to verify that we can still call this function early.
+            return initialState;
+          }
+
+          export default App;
+        `);
+        // Hooks were re-ordered. This causes a remount.
+        // Therefore, Hook calls don't accidentally share state.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('BXY');
+      }
+    });
+
+    it('does not get confused by Hooks defined inline', () => {
+      // This is not a recommended pattern but at least it shouldn't break.
+      if (__DEV__) {
+        render(`
+          const App = () => {
+            const useFancyState = (initialState) => {
+              const result = React.useState(initialState);
+              return result;
+            };
+            const [x, setX] = useFancyState('X1');
+            const [y, setY] = useFancyState('Y1');
+            return <h1>A{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('AX1Y1');
+
+        patch(`
+          const App = () => {
+            const useFancyState = (initialState) => {
+              const result = React.useState(initialState);
+              return result;
+            };
+            const [x, setX] = useFancyState('X2');
+            const [y, setY] = useFancyState('Y2');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+        // Remount even though nothing changed because
+        // the custom Hook is inside -- and so we don't
+        // really know whether its signature has changed.
+        // We could potentially make it work, but for now
+        // let's assert we don't crash with confusing errors.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('BX2Y2');
+      }
+    });
+
+    it('remounts component if custom hook it uses changes order', () => {
+      if (__DEV__) {
+        render(`
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>A{x}{y}</h1>;
+          };
+
+          const useFancyState = (initialState) => {
+            const result = useIndirection(initialState);
+            return result;
+          };
+
+          function useIndirection(initialState) {
+            return React.useState(initialState);
+          }
+
+          export default App;
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('AXY');
+
+        patch(`
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          const useFancyState = (initialState) => {
+            const result = useIndirection();
+            return result;
+          };
+
+          function useIndirection(initialState) {
+            return React.useState(initialState);
+          }
+
+          export default App;
+        `);
+        // We didn't change anything except the header text.
+        // So we don't expect a remount.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('BXY');
+
+        patch(`
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>C{x}{y}</h1>;
+          };
+
+          const useFancyState = (initialState) => {
+            const result = useIndirection(initialState);
+            return result;
+          };
+
+          function useIndirection(initialState) {
+            React.useEffect(() => {});
+            return React.useState(initialState);
+          }
+
+          export default App;
+        `);
+        // The useIndirection Hook added an affect,
+        // so we had to remount the component.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('CXY');
+
+        patch(`
+          const App = () => {
+            const [x, setX] = useFancyState('X');
+            const [y, setY] = useFancyState('Y');
+            return <h1>D{x}{y}</h1>;
+          };
+
+          const useFancyState = (initialState) => {
+            const result = useIndirection();
+            return result;
+          };
+
+          function useIndirection(initialState) {
+            React.useEffect(() => {});
+            return React.useState(initialState);
+          }
+
+          export default App;
+        `);
+        // We didn't change anything except the header text.
+        // So we don't expect a remount.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('DXY');
+      }
+    });
+
+    it('does not lose the inferred arrow names', () => {
+      if (__DEV__) {
+        render(`
+          const Parent = () => {
+            return <Child/>;
+          };
+
+          const Child = () => {
+            useMyThing();
+            return <h1>{Parent.name} {Child.name} {useMyThing.name}</h1>;
+          };
+
+          const useMyThing = () => {
+            React.useState();
+          };
+
+          export default Parent;
+        `);
+        expect(container.textContent).toBe('Parent Child useMyThing');
+      }
+    });
+
+    it('does not lose the inferred function names', () => {
+      if (__DEV__) {
+        render(`
+          var Parent = function() {
+            return <Child/>;
+          };
+
+          var Child = function() {
+            useMyThing();
+            return <h1>{Parent.name} {Child.name} {useMyThing.name}</h1>;
+          };
+
+          var useMyThing = function() {
+            React.useState();
+          };
+
+          export default Parent;
+        `);
+        expect(container.textContent).toBe('Parent Child useMyThing');
+      }
+    });
+
+    it('resets state on every edit with @refresh reset annotation', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+          const S = 1;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>A{foo}</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useState} = React;
+          const S = 2;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>B{foo}</h1>;
+          }
+        `);
+        // Same state variable name, so state is preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+          const S = 3;
+
+          /* @refresh reset */
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>C{foo}</h1>;
+          }
+        `);
+        // Found remount annotation, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C3');
+
+        patch(`
+          const {useState} = React;
+          const S = 4;
+
+          export default function App() {
+
+            // @refresh reset
+
+            const [foo, setFoo] = useState(S);
+            return <h1>D{foo}</h1>;
+          }
+        `);
+        // Found remount annotation, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('D4');
+
+        patch(`
+          const {useState} = React;
+          const S = 5;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>E{foo}</h1>;
+          }
+        `);
+        // There is no remount annotation anymore,
+        // so preserve the previous state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('E4');
+
+        patch(`
+          const {useState} = React;
+          const S = 6;
+
+          export default function App() {
+            const [foo, setFoo] = useState(S);
+            return <h1>F{foo}</h1>;
+          }
+        `);
+        // Continue editing.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('F4');
+
+        patch(`
+          const {useState} = React;
+          const S = 7;
+
+          export default function App() {
+
+            /* @refresh reset */
+
+            const [foo, setFoo] = useState(S);
+            return <h1>G{foo}</h1>;
+          }
+        `);
+        // Force remount one last time.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('G7');
+      }
+    });
+
+    // This is best effort for simple cases.
+    // We won't attempt to resolve identifiers.
+    it('resets state when useState initial state is edited', () => {
+      if (__DEV__) {
+        render(`
+          const {useState} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useState(1);
+            return <h1>A{foo}</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useState(1);
+            return <h1>B{foo}</h1>;
+          }
+        `);
+        // Same initial state, so it's preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useState(2);
+            return <h1>C{foo}</h1>;
+          }
+        `);
+        // Different initial state, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    // This is best effort for simple cases.
+    // We won't attempt to resolve identifiers.
+    it('resets state when useReducer initial state is edited', () => {
+      if (__DEV__) {
+        render(`
+          const {useReducer} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useReducer(x => x, 1);
+            return <h1>A{foo}</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        patch(`
+          const {useReducer} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useReducer(x => x, 1);
+            return <h1>B{foo}</h1>;
+          }
+        `);
+        // Same initial state, so it's preserved.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B1');
+
+        patch(`
+          const {useReducer} = React;
+
+          export default function App() {
+            const [foo, setFoo] = useReducer(x => x, 2);
+            return <h1>C{foo}</h1>;
+          }
+        `);
+        // Different initial state, so state is reset.
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    it('remounts when switching export from function to class', () => {
+      if (__DEV__) {
+        render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        patch(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>B1</h1>
+            }
+          }
+        `);
+        // Reset (function -> class).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B1');
+        patch(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>B2</h1>
+            }
+          }
+        `);
+        // Reset (classes always do).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B2');
+
+        patch(`
+          export default function App() {
+            return <h1>C1</h1>;
+          }
+        `);
+        // Reset (class -> function).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C1');
+        patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+
+        patch(`
+          export default function App() {
+            return <h1>D1</h1>;
+          }
+        `);
+        el = container.firstChild;
+        expect(el.textContent).toBe('D1');
+        patch(`
+          export default function App() {
+            return <h1>D2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('D2');
+      }
+    });
+
+    it('remounts when switching export from class to function', () => {
+      if (__DEV__) {
+        render(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>A1</h1>
+            }
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>A2</h1>
+            }
+          }
+        `);
+        // Reset (classes always do).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('A2');
+
+        patch(`
+          export default function App() {
+            return <h1>B1</h1>;
+          }
+        `);
+        // Reset (class -> function).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B1');
+        patch(`
+          export default function App() {
+            return <h1>B2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        patch(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>C1</h1>
+            }
+          }
+        `);
+        // Reset (function -> class).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C1');
+      }
+    });
+
+    it('remounts when wrapping export in a HOC', () => {
+      if (__DEV__) {
+        render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        patch(`
+          function hoc(Inner) {
+            return function Wrapper() {
+              return <Inner />;
+            }
+          }
+
+          function App() {
+            return <h1>B1</h1>;
+          }
+
+          export default hoc(App);
+        `);
+        // Reset (wrapped in HOC).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B1');
+        patch(`
+          function hoc(Inner) {
+            return function Wrapper() {
+              return <Inner />;
+            }
+          }
+
+          function App() {
+            return <h1>B2</h1>;
+          }
+
+          export default hoc(App);
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        patch(`
+          export default function App() {
+            return <h1>C1</h1>;
+          }
+        `);
+        // Reset (unwrapped).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C1');
+        patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    it('remounts when wrapping export in memo()', () => {
+      if (__DEV__) {
+        render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        patch(`
+          function App() {
+            return <h1>B1</h1>;
+          }
+
+          export default React.memo(App);
+        `);
+        // Reset (wrapped in HOC).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B1');
+        patch(`
+          function App() {
+            return <h1>B2</h1>;
+          }
+
+          export default React.memo(App);
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        patch(`
+          export default function App() {
+            return <h1>C1</h1>;
+          }
+        `);
+        // Reset (unwrapped).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C1');
+        patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    it('remounts when wrapping export in forwardRef()', () => {
+      if (__DEV__) {
+        render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        patch(`
+          function App() {
+            return <h1>B1</h1>;
+          }
+
+          export default React.forwardRef(App);
+        `);
+        // Reset (wrapped in HOC).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('B1');
+        patch(`
+          function App() {
+            return <h1>B2</h1>;
+          }
+
+          export default React.forwardRef(App);
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        patch(`
+          export default function App() {
+            return <h1>C1</h1>;
+          }
+        `);
+        // Reset (unwrapped).
+        expect(container.firstChild).not.toBe(el);
+        el = container.firstChild;
+        expect(el.textContent).toBe('C1');
+        patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    it('remounts deprecated factory components', () => {
+      if (__DEV__) {
+        expect(() => {
+          render(`
+            function Parent() {
+              return {
+                render() {
+                  return <Child prop="A" />;
+                }
+              };
+            };
+
+            function Child({prop}) {
+              return <h1>{prop}1</h1>;
+            };
+
+            export default Parent;
+          `);
+        }).toErrorDev(
+          'The <Parent /> component appears to be a function component ' +
+            'that returns a class instance.',
+        );
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          function Parent() {
+            return {
+              render() {
+                return <Child prop="B" />;
+              }
+            };
+          };
+
+          function Child({prop}) {
+            return <h1>{prop}2</h1>;
+          };
+
+          export default Parent;
+        `);
+        // Like classes, factory components always remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B2');
+      }
+    });
+
+    describe('with inline requires', () => {
+      beforeEach(() => {
+        global.FakeModuleSystem = {};
+      });
+
+      afterEach(() => {
+        delete global.FakeModuleSystem;
+      });
+
+      it('remounts component if custom hook it uses changes order on first edit', () => {
+        // This test verifies that remounting works even if calls to custom Hooks
+        // were transformed with an inline requires transform, like we have on RN.
+        // Inline requires make it harder to compare previous and next signatures
+        // because useFancyState inline require always resolves to the newest version.
+        // We're not actually using inline requires in the test, but it has similar semantics.
+        if (__DEV__) {
+          render(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>A{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          let el = container.firstChild;
+          expect(el.textContent).toBe('AXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>B{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          // The useFancyState Hook added an effect,
+          // so we had to remount the component.
+          expect(container.firstChild).not.toBe(el);
+          el = container.firstChild;
+          expect(el.textContent).toBe('BXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>C{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          // We didn't change anything except the header text.
+          // So we don't expect a remount.
+          expect(container.firstChild).toBe(el);
+          expect(el.textContent).toBe('CXY');
+        }
+      });
+
+      it('remounts component if custom hook it uses changes order on second edit', () => {
+        if (__DEV__) {
+          render(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>A{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          let el = container.firstChild;
+          expect(el.textContent).toBe('AXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>B{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          expect(container.firstChild).toBe(el);
+          expect(el.textContent).toBe('BXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>C{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          // The useFancyState Hook added an effect,
+          // so we had to remount the component.
+          expect(container.firstChild).not.toBe(el);
+          el = container.firstChild;
+          expect(el.textContent).toBe('CXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>D{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          // We didn't change anything except the header text.
+          // So we don't expect a remount.
+          expect(container.firstChild).toBe(el);
+          expect(el.textContent).toBe('DXY');
+        }
+      });
+
+      it('recovers if evaluating Hook list throws', () => {
+        if (__DEV__) {
+          render(`
+          let FakeModuleSystem = null;
+
+          global.FakeModuleSystem.useFancyState = function(initialState) {
+            return React.useState(initialState);
+          };
+
+          const App = () => {
+            FakeModuleSystem = global.FakeModuleSystem;
+            const [x, setX] = FakeModuleSystem.useFancyState('X');
+            const [y, setY] = FakeModuleSystem.useFancyState('Y');
+            return <h1>A{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+          let el = container.firstChild;
+          expect(el.textContent).toBe('AXY');
+
+          patch(`
+          let FakeModuleSystem = null;
+
+          global.FakeModuleSystem.useFancyState = function(initialState) {
+            React.useEffect(() => {});
+            return React.useState(initialState);
+          };
+
+          const App = () => {
+            FakeModuleSystem = global.FakeModuleSystem;
+            const [x, setX] = FakeModuleSystem.useFancyState('X');
+            const [y, setY] = FakeModuleSystem.useFancyState('Y');
+            return <h1>B{x}{y}</h1>;
+          };
+
+          export default App;
+        `);
+          // We couldn't evaluate the Hook signatures
+          // so we had to remount the component.
+          expect(container.firstChild).not.toBe(el);
+          el = container.firstChild;
+          expect(el.textContent).toBe('BXY');
+        }
+      });
+
+      it('remounts component if custom hook it uses changes order behind an indirection', () => {
+        if (__DEV__) {
+          render(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return FakeModuleSystem.useIndirection(initialState);
+            };
+
+            FakeModuleSystem.useIndirection = function(initialState) {
+              return FakeModuleSystem.useOtherIndirection(initialState);
+            };
+
+            FakeModuleSystem.useOtherIndirection = function(initialState) {
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>A{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          let el = container.firstChild;
+          expect(el.textContent).toBe('AXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return FakeModuleSystem.useIndirection(initialState);
+            };
+
+            FakeModuleSystem.useIndirection = function(initialState) {
+              return FakeModuleSystem.useOtherIndirection(initialState);
+            };
+
+            FakeModuleSystem.useOtherIndirection = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>B{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+
+          // The useFancyState Hook added an effect,
+          // so we had to remount the component.
+          expect(container.firstChild).not.toBe(el);
+          el = container.firstChild;
+          expect(el.textContent).toBe('BXY');
+
+          patch(`
+            const FakeModuleSystem = global.FakeModuleSystem;
+
+            FakeModuleSystem.useFancyState = function(initialState) {
+              return FakeModuleSystem.useIndirection(initialState);
+            };
+
+            FakeModuleSystem.useIndirection = function(initialState) {
+              return FakeModuleSystem.useOtherIndirection(initialState);
+            };
+
+            FakeModuleSystem.useOtherIndirection = function(initialState) {
+              React.useEffect(() => {});
+              return React.useState(initialState);
+            };
+
+            const App = () => {
+              const [x, setX] = FakeModuleSystem.useFancyState('X');
+              const [y, setY] = FakeModuleSystem.useFancyState('Y');
+              return <h1>C{x}{y}</h1>;
+            };
+
+            export default App;
+          `);
+          // We didn't change anything except the header text.
+          // So we don't expect a remount.
+          expect(container.firstChild).toBe(el);
+          expect(el.textContent).toBe('CXY');
+        }
+      });
+    });
+  }
+});
diff --git a/packages/react-refresh/src/__tests__/ReactFreshMultipleRenderer-test.internal.js b/packages/react-refresh/src/__tests__/ReactFreshMultipleRenderer-test.internal.js
new file mode 100644
index 0000000000000..2b260a5283597
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFreshMultipleRenderer-test.internal.js
@@ -0,0 +1,99 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+jest.resetModules();
+let React = require('react');
+let ReactFreshRuntime;
+if (__DEV__) {
+  ReactFreshRuntime = require('react-refresh/runtime');
+  ReactFreshRuntime.injectIntoGlobalHook(global);
+}
+let ReactDOM = require('react-dom');
+
+jest.resetModules();
+let ReactART = require('react-art');
+let ARTSVGMode = require('art/modes/svg');
+let ARTCurrentMode = require('art/modes/current');
+ARTCurrentMode.setCurrent(ARTSVGMode);
+
+describe('ReactFresh', () => {
+  let container;
+
+  beforeEach(() => {
+    if (__DEV__) {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    }
+  });
+
+  afterEach(() => {
+    if (__DEV__) {
+      document.body.removeChild(container);
+      container = null;
+    }
+  });
+
+  it('can update components managd by different renderers independently', () => {
+    if (__DEV__) {
+      let InnerV1 = function() {
+        return <ReactART.Shape fill="blue" />;
+      };
+      ReactFreshRuntime.register(InnerV1, 'Inner');
+
+      let OuterV1 = function() {
+        return (
+          <div style={{color: 'blue'}}>
+            <ReactART.Surface>
+              <InnerV1 />
+            </ReactART.Surface>
+          </div>
+        );
+      };
+      ReactFreshRuntime.register(OuterV1, 'Outer');
+
+      ReactDOM.render(<OuterV1 />, container);
+      const el = container.firstChild;
+      const pathEl = el.querySelector('path');
+      expect(el.style.color).toBe('blue');
+      expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(0, 0, 255)');
+
+      // Perform a hot update to the ART-rendered component.
+      let InnerV2 = function() {
+        return <ReactART.Shape fill="red" />;
+      };
+      ReactFreshRuntime.register(InnerV2, 'Inner');
+
+      ReactFreshRuntime.performReactRefresh();
+      expect(container.firstChild).toBe(el);
+      expect(el.querySelector('path')).toBe(pathEl);
+      expect(el.style.color).toBe('blue');
+      expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');
+
+      // Perform a hot update to the DOM-rendered component.
+      let OuterV2 = function() {
+        return (
+          <div style={{color: 'red'}}>
+            <ReactART.Surface>
+              <InnerV1 />
+            </ReactART.Surface>
+          </div>
+        );
+      };
+      ReactFreshRuntime.register(OuterV2, 'Outer');
+
+      ReactFreshRuntime.performReactRefresh();
+      expect(el.style.color).toBe('red');
+      expect(container.firstChild).toBe(el);
+      expect(el.querySelector('path')).toBe(pathEl);
+      expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');
+    }
+  });
+});
diff --git a/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
similarity index 53%
rename from packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
rename to packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 52abe647466d9..547369d5a2846 100644
--- a/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -1,151 +1,326 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ReactFreshBabelPlugin can handle implicit arrow returns 1`] = `
+var _s = $RefreshSig$(),
+    _s2 = $RefreshSig$(),
+    _s3 = $RefreshSig$(),
+    _s4 = $RefreshSig$(),
+    _s5 = $RefreshSig$(),
+    _s6 = $RefreshSig$();
+
+export default _s(() => {
+  _s();
+
+  return useContext(X);
+}, "useContext{}");
+export const Foo = () => {
+  _s2();
+
+  return useContext(X);
+};
+
+_s2(Foo, "useContext{}");
+
+_c = Foo;
+module.exports = _s3(() => {
+  _s3();
+
+  return useContext(X);
+}, "useContext{}");
+
+const Bar = () => {
+  _s4();
+
+  return useContext(X);
+};
+
+_s4(Bar, "useContext{}");
+
+_c2 = Bar;
+
+const Baz = _c4 = memo(_c3 = _s5(() => {
+  _s5();
+
+  return useContext(X);
+}, "useContext{}"));
+
+const Qux = () => {
+  _s6();
+
+  return 0, useContext(X);
+};
+
+_s6(Qux, "useContext{}");
+
+_c5 = Qux;
+
+var _c, _c2, _c3, _c4, _c5;
+
+$RefreshReg$(_c, "Foo");
+$RefreshReg$(_c2, "Bar");
+$RefreshReg$(_c3, "Baz$memo");
+$RefreshReg$(_c4, "Baz");
+$RefreshReg$(_c5, "Qux");
+`;
+
+exports[`ReactFreshBabelPlugin does not consider require-like methods to be HOCs 1`] = `
+const A = require('A');
+
+const B = foo ? require('X') : require('Y');
+const C = requireCond(gk, 'C');
+const D = import('D');
+export default function App() {
+  return <div>
+              <A />
+              <B />
+              <C />
+              <D />
+            </div>;
+}
+_c = App;
+
+var _c;
+
+$RefreshReg$(_c, "App");
+`;
+
 exports[`ReactFreshBabelPlugin generates signatures for function declarations calling hooks 1`] = `
-"
+var _s = $RefreshSig$();
+
 export default function App() {
+  _s();
+
   const [foo, setFoo] = useState(0);
   React.useEffect(() => {});
   return <h1>{foo}</h1>;
 }
 
-__signature__(App, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
+_s(App, "useState{[foo, setFoo](0)}\\nuseEffect{}");
 
 _c = App;
 
 var _c;
 
-__register__(_c, \\"App\\");"
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin generates signatures for function expressions calling hooks 1`] = `
-"
-export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = __signature__((props, ref) => {
+var _s = $RefreshSig$(),
+    _s2 = $RefreshSig$();
+
+export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = _s((props, ref) => {
+  _s();
+
   const [foo, setFoo] = useState(0);
   React.useEffect(() => {});
   return <h1 ref={ref}>{foo}</h1>;
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
+}, "useState{[foo, setFoo](0)}\\nuseEffect{}")));
+export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = _s2(function (props, ref) {
+  _s2();
 
-export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = __signature__(function (props, ref) {
   const [foo, setFoo] = useState(0);
   React.useEffect(() => {});
   return <h1 ref={ref}>{foo}</h1>;
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
+}, "useState{[foo, setFoo](0)}\\nuseEffect{}")));
 
 function hoc() {
-  return __signature__(function Inner() {
+  var _s3 = $RefreshSig$();
+
+  return _s3(function Inner() {
+    _s3();
+
     const [foo, setFoo] = useState(0);
     React.useEffect(() => {});
     return <h1 ref={ref}>{foo}</h1>;
-  }, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
+  }, "useState{[foo, setFoo](0)}\\nuseEffect{}");
 }
 
 export let C = hoc();
 
 var _c, _c2, _c3, _c4, _c5, _c6;
 
-__register__(_c, \\"A$React.memo$React.forwardRef\\");
+$RefreshReg$(_c, "A$React.memo$React.forwardRef");
+$RefreshReg$(_c2, "A$React.memo");
+$RefreshReg$(_c3, "A");
+$RefreshReg$(_c4, "B$React.memo$React.forwardRef");
+$RefreshReg$(_c5, "B$React.memo");
+$RefreshReg$(_c6, "B");
+`;
+
+exports[`ReactFreshBabelPlugin generates valid signature for exotic ways to call Hooks 1`] = `
+var _s2 = $RefreshSig$();
 
-__register__(_c2, \\"A$React.memo\\");
+import FancyHook from 'fancy';
+export default function App() {
+  _s2();
+
+  var _s = $RefreshSig$();
+
+  function useFancyState() {
+    _s();
+
+    const [foo, setFoo] = React.useState(0);
+    useFancyEffect();
+    return foo;
+  }
 
-__register__(_c3, \\"A\\");
+  _s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", true);
+
+  const bar = useFancyState();
+  const baz = FancyHook.useThing();
+  React.useState();
+  useThePlatform();
+  return <h1>{bar}{baz}</h1>;
+}
+
+_s2(App, "useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}", true, function () {
+  return [FancyHook.useThing];
+});
 
-__register__(_c4, \\"B$React.memo$React.forwardRef\\");
+_c = App;
 
-__register__(_c5, \\"B$React.memo\\");
+var _c;
 
-__register__(_c6, \\"B\\");"
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = `
-"
 let connect = () => {
   function Comp() {
     const handleClick = () => {};
+
     return <h1 onClick={handleClick}>Hi</h1>;
   }
+
   return Comp;
 };
+
 function withRouter() {
   return function Child() {
     const handleClick = () => {};
+
     return <h1 onClick={handleClick}>Hi</h1>;
   };
-};"
+}
+
+;
 `;
 
 exports[`ReactFreshBabelPlugin ignores complex definitions 1`] = `
-"
 let A = foo ? () => {
   return <h1>Hi</h1>;
 } : null;
+
 const B = function Foo() {
   return <h1>Hi</h1>;
 }();
+
 let C = () => () => {
   return <h1>Hi</h1>;
 };
+
 let D = bar && (() => {
   return <h1>Hi</h1>;
-});"
+});
 `;
 
 exports[`ReactFreshBabelPlugin ignores higher-order functions that are not HOCs 1`] = `
-"
 const throttledAlert = throttle(function () {
   alert('Hi');
 });
+
 const TooComplex = function () {
   return hello;
 }(() => {});
+
 if (cond) {
   const Foo = thing(() => {});
-}"
+}
 `;
 
-exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `
-"
-export default function () {}"
-`;
+exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `export default function () {}`;
 
 exports[`ReactFreshBabelPlugin includes custom hooks into the signatures 1`] = `
-"
+var _s = $RefreshSig$(),
+    _s2 = $RefreshSig$(),
+    _s3 = $RefreshSig$();
+
 function useFancyState() {
+  _s();
+
   const [foo, setFoo] = React.useState(0);
   useFancyEffect();
   return foo;
 }
 
-__signature__(useFancyState, \\"useState{[foo, setFoo]}\\\\nuseFancyEffect{}\\", () => [useFancyEffect]);
+_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, function () {
+  return [useFancyEffect];
+});
 
 const useFancyEffect = () => {
+  _s2();
+
   React.useEffect(() => {});
 };
 
-__signature__(useFancyEffect, \\"useEffect{}\\");
+_s2(useFancyEffect, "useEffect{}");
 
 export default function App() {
+  _s3();
+
   const bar = useFancyState();
   return <h1>{bar}</h1>;
 }
 
-__signature__(App, \\"useFancyState{bar}\\", () => [useFancyState]);
+_s3(App, "useFancyState{bar}", false, function () {
+  return [useFancyState];
+});
+
+_c = App;
+
+var _c;
+
+$RefreshReg$(_c, "App");
+`;
+
+exports[`ReactFreshBabelPlugin includes custom hooks into the signatures when commonjs target is used 1`] = `
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _s = $RefreshSig$();
+
+exports.default = App;
+
+var _hooks = require("./hooks");
+
+function App() {
+  _s();
+
+  const bar = (0, _hooks.useFancyState)();
+  return <h1>{bar}</h1>;
+}
+
+_s(App, "useFancyState{bar}", false, function () {
+  return [_hooks.useFancyState];
+});
 
 _c = App;
 
 var _c;
 
-__register__(_c, \\"App\\");"
+$RefreshReg$(_c, "App");
 `;
 
 exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
-"
 function hello() {
   return 2 * 2;
-}"
+}
 `;
 
 exports[`ReactFreshBabelPlugin registers capitalized identifiers in HOC calls 1`] = `
-"
 function Foo() {
   return <h1>Hi</h1>;
 }
@@ -153,29 +328,23 @@ function Foo() {
 _c = Foo;
 export default _c2 = hoc(Foo);
 export const A = _c3 = hoc(Foo);
+
 const B = _c4 = hoc(Foo);
 
 var _c, _c2, _c3, _c4;
 
-__register__(_c, \\"Foo\\");
-
-__register__(_c2, \\"%default%\\");
-
-__register__(_c3, \\"A\\");
-
-__register__(_c4, \\"B\\");"
+$RefreshReg$(_c, "Foo");
+$RefreshReg$(_c2, "%default%");
+$RefreshReg$(_c3, "A");
+$RefreshReg$(_c4, "B");
 `;
 
 exports[`ReactFreshBabelPlugin registers identifiers used in JSX at definition site 1`] = `
-"
 import A from './A';
 import Store from './Store';
-
 Store.subscribe();
-
 const Header = _c = styled.div\`color: red\`;
 const Factory = funny.factory\`\`;
-
 let Alias1 = A;
 let Alias2 = A.Foo;
 const Dict = {};
@@ -185,32 +354,27 @@ function Foo() {
 }
 
 _c2 = Foo;
-const B = _c3 = hoc(A);
-// This is currently registered as a false positive:
-const NotAComponent = _c4 = wow(A);
-// We could avoid it but it also doesn't hurt.
 
-var _c, _c2, _c3, _c4;
+const B = _c3 = hoc(A); // This is currently registered as a false positive:
+
 
-__register__(_c, 'Header');
+const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
 
-__register__(_c2, 'Foo');
 
-__register__(_c3, 'B');
+var _c, _c2, _c3, _c4;
 
-__register__(_c4, 'NotAComponent');"
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "Foo");
+$RefreshReg$(_c3, "B");
+$RefreshReg$(_c4, "NotAComponent");
 `;
 
 exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = `
-"
 import A from './A';
 import Store from './Store';
-
 Store.subscribe();
-
 const Header = _c = styled.div\`color: red\`;
 const Factory = funny.factory\`\`;
-
 let Alias1 = A;
 let Alias2 = A.Foo;
 const Dict = {};
@@ -222,96 +386,81 @@ function Foo() {
 _c2 = Foo;
 React.createContext(Store);
 
-const B = _c3 = hoc(A);
-// This is currently registered as a false positive:
-const NotAComponent = _c4 = wow(A);
-// We could avoid it but it also doesn't hurt.
+const B = _c3 = hoc(A); // This is currently registered as a false positive:
 
-var _c, _c2, _c3, _c4;
 
-__register__(_c, 'Header');
+const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
 
-__register__(_c2, 'Foo');
 
-__register__(_c3, 'B');
+var _c, _c2, _c3, _c4;
 
-__register__(_c4, 'NotAComponent');"
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "Foo");
+$RefreshReg$(_c3, "B");
+$RefreshReg$(_c4, "NotAComponent");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
-"
 const A = _c2 = forwardRef(_c = function () {
   return <h1>Foo</h1>;
 });
+
 const B = _c5 = memo(_c4 = React.forwardRef(_c3 = () => {
   return <h1>Foo</h1>;
 }));
+
 export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
   return <h1>Foo</h1>;
 }));
 
 var _c, _c2, _c3, _c4, _c5, _c6, _c7, _c8;
 
-__register__(_c, \\"A$forwardRef\\");
-
-__register__(_c2, \\"A\\");
-
-__register__(_c3, \\"B$memo$React.forwardRef\\");
-
-__register__(_c4, \\"B$memo\\");
-
-__register__(_c5, \\"B\\");
-
-__register__(_c6, \\"%default%$React.memo$forwardRef\\");
-
-__register__(_c7, \\"%default%$React.memo\\");
-
-__register__(_c8, \\"%default%\\");"
+$RefreshReg$(_c, "A$forwardRef");
+$RefreshReg$(_c2, "A");
+$RefreshReg$(_c3, "B$memo$React.forwardRef");
+$RefreshReg$(_c4, "B$memo");
+$RefreshReg$(_c5, "B");
+$RefreshReg$(_c6, "%default%$React.memo$forwardRef");
+$RefreshReg$(_c7, "%default%$React.memo");
+$RefreshReg$(_c8, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 2`] = `
-"
 export default _c3 = React.memo(_c2 = forwardRef(_c = function (props, ref) {
   return <h1>Foo</h1>;
 }));
 
 var _c, _c2, _c3;
 
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
-
-__register__(_c2, \\"%default%$React.memo\\");
-
-__register__(_c3, \\"%default%\\");"
+$RefreshReg$(_c, "%default%$React.memo$forwardRef");
+$RefreshReg$(_c2, "%default%$React.memo");
+$RefreshReg$(_c3, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 3`] = `
-"
 export default _c3 = React.memo(_c2 = forwardRef(_c = function Named(props, ref) {
   return <h1>Foo</h1>;
 }));
 
 var _c, _c2, _c3;
 
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
-
-__register__(_c2, \\"%default%$React.memo\\");
-
-__register__(_c3, \\"%default%\\");"
+$RefreshReg$(_c, "%default%$React.memo$forwardRef");
+$RefreshReg$(_c2, "%default%$React.memo");
+$RefreshReg$(_c3, "%default%");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level exported function declarations 1`] = `
-"
 export function Hello() {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 }
-
 _c = Hello;
 export default function Bar() {
   return <Hello />;
 }
-
 _c2 = Bar;
+
 function Baz() {
   return <h1>OK</h1>;
 }
@@ -319,29 +468,24 @@ function Baz() {
 _c3 = Baz;
 const NotAComp = 'hi';
 export { Baz, NotAComp };
-
 export function sum() {}
 export const Bad = 42;
 
 var _c, _c2, _c3;
 
-__register__(_c, 'Hello');
-
-__register__(_c2, 'Bar');
-
-__register__(_c3, 'Baz');"
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
+$RefreshReg$(_c3, "Baz");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level exported named arrow functions 1`] = `
-"
 export const Hello = () => {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
-
 _c = Hello;
 export let Bar = props => <Hello />;
-
 _c2 = Bar;
 export default (() => {
   // This one should be ignored.
@@ -351,86 +495,114 @@ export default (() => {
 
 var _c, _c2;
 
-__register__(_c, \\"Hello\\");
-
-__register__(_c2, \\"Bar\\");"
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level function declarations 1`] = `
-"
 function Hello() {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 }
 
 _c = Hello;
+
 function Bar() {
   return <Hello />;
 }
+
 _c2 = Bar;
 
 var _c, _c2;
 
-__register__(_c, \\"Hello\\");
-
-__register__(_c2, \\"Bar\\");"
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level variable declarations with arrow functions 1`] = `
-"
 let Hello = () => {
   const handleClick = () => {};
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
+
 _c = Hello;
+
 const Bar = () => {
   return <Hello />;
 };
+
 _c2 = Bar;
+
 var Baz = () => <div />;
+
 _c3 = Baz;
+
 var sum = () => {};
 
 var _c, _c2, _c3;
 
-__register__(_c, \\"Hello\\");
-
-__register__(_c2, \\"Bar\\");
-
-__register__(_c3, \\"Baz\\");"
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
+$RefreshReg$(_c3, "Baz");
 `;
 
 exports[`ReactFreshBabelPlugin registers top-level variable declarations with function expressions 1`] = `
-"
 let Hello = function () {
   function handleClick() {}
+
   return <h1 onClick={handleClick}>Hi</h1>;
 };
+
 _c = Hello;
+
 const Bar = function Baz() {
   return <Hello />;
 };
+
 _c2 = Bar;
+
 function sum() {}
+
 let Baz = 10;
 var Qux;
 
 var _c, _c2;
 
-__register__(_c, \\"Hello\\");
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
+`;
+
+exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
+var _s = import.meta.refreshSig();
+
+export default function Bar() {
+  _s();
+
+  useContext(X);
+  return <Foo />;
+}
+
+_s(Bar, "useContext{}");
+
+_c = Bar;
+;
 
-__register__(_c2, \\"Bar\\");"
+var _c;
+
+import.meta.refreshReg(_c, "Bar");
 `;
 
 exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
-"
 function Hello() {
   return <h1>Hi</h1>;
 }
+
 _c = Hello;
 Hello = connect(Hello);
 
 var _c;
 
-__register__(_c, \\"Hello\\");"
+$RefreshReg$(_c, "Hello");
 `;
diff --git a/packages/react-server/README.md b/packages/react-server/README.md
new file mode 100644
index 0000000000000..2e5808da7581f
--- /dev/null
+++ b/packages/react-server/README.md
@@ -0,0 +1,7 @@
+# react-server
+
+This is an experimental package for creating custom React streaming server renderers.
+
+**Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.**
+
+**Use it at your own risk.**
diff --git a/packages/react-server/flight.inline-typed.js b/packages/react-server/flight.inline-typed.js
new file mode 100644
index 0000000000000..8afc4525e9559
--- /dev/null
+++ b/packages/react-server/flight.inline-typed.js
@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+// This file must have the Flow annotation.
+//
+// This is the Flow-typed entry point for the renderer. It should not be
+// imported directly in code. Instead, our Flow configuration uses this entry
+// point for the currently checked renderer (the one you passed to `yarn flow`).
+//
+// For example, if you run `yarn flow dom`, `react-server/flight.inline.dom` points
+// to this module (and thus will be considered Flow-typed). But other renderers
+// (e.g. `react-test-renderer`) will see stream as untyped during the check.
+//
+// We can't make all entry points typed at the same time because different
+// renderers have different host config types. So we check them one by one.
+// We run Flow on all renderers on CI.
+
+export * from './src/ReactFlightServer';
diff --git a/packages/react-server/flight.inline.dom-browser.js b/packages/react-server/flight.inline.dom-browser.js
new file mode 100644
index 0000000000000..2c140b0a7e498
--- /dev/null
+++ b/packages/react-server/flight.inline.dom-browser.js
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
+
+export * from './src/ReactFlightServer';
diff --git a/packages/react-server/flight.inline.dom.js b/packages/react-server/flight.inline.dom.js
new file mode 100644
index 0000000000000..2c140b0a7e498
--- /dev/null
+++ b/packages/react-server/flight.inline.dom.js
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+// This file intentionally does *not* have the Flow annotation.
+// Don't add it. See `./inline-typed.js` for an explanation.
+
+export * from './src/ReactFlightServer';
diff --git a/packages/react-server/flight.js b/packages/react-server/flight.js
new file mode 100644
index 0000000000000..26fd4bd3ed558
--- /dev/null
+++ b/packages/react-server/flight.js
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+// This entry point is intentionally not typed. It exists only for third-party
+// renderers. The renderers we ship (such as React DOM) instead import a named
+// "inline" entry point (for example, `react-server/flight.inline.dom`). It uses
+// the same code, but the Flow configuration redirects the host config to its
+// real implementation so we can check it against exact intended host types.
+//
+// Only one renderer (the one you passed to `yarn flow <renderer>`) is fully
+// type-checked at any given time. The Flow config maps the
+// `react-server/flight.inline.<renderer>` import (which is *not* Flow typed) to
+// `react-server/flight.inline-typed` (which *is*) for the current renderer.
+// On CI, we run Flow checks for each renderer separately.
+
+'use strict';
+
+const ReactFlightServer = require('./src/ReactFlightServer');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest.
+module.exports = ReactFlightServer.default || ReactFlightServer;
diff --git a/packages/react-stream/index.js b/packages/react-server/index.js
similarity index 83%
rename from packages/react-stream/index.js
rename to packages/react-server/index.js
index 66445f67bf3eb..21657bf4e366a 100644
--- a/packages/react-stream/index.js
+++ b/packages/react-server/index.js
@@ -7,14 +7,14 @@
 
 // This entry point is intentionally not typed. It exists only for third-party
 // renderers. The renderers we ship (such as React DOM) instead import a named
-// "inline" entry point (for example, `react-stream/inline.dom`). It uses
+// "inline" entry point (for example, `react-server/inline.dom`). It uses
 // the same code, but the Flow configuration redirects the host config to its
 // real implementation so we can check it against exact intended host types.
 //
 // Only one renderer (the one you passed to `yarn flow <renderer>`) is fully
 // type-checked at any given time. The Flow config maps the
-// `react-stream/inline.<renderer>` import (which is *not* Flow typed) to
-// `react-stream/inline-typed` (which *is*) for the current renderer.
+// `react-server/inline.<renderer>` import (which is *not* Flow typed) to
+// `react-server/inline-typed` (which *is*) for the current renderer.
 // On CI, we run Flow checks for each renderer separately.
 
 'use strict';
diff --git a/packages/react-stream/inline-typed.js b/packages/react-server/inline-typed.js
similarity index 93%
rename from packages/react-stream/inline-typed.js
rename to packages/react-server/inline-typed.js
index 32358e21e457b..27f5e86c80780 100644
--- a/packages/react-stream/inline-typed.js
+++ b/packages/react-server/inline-typed.js
@@ -13,7 +13,7 @@
 // imported directly in code. Instead, our Flow configuration uses this entry
 // point for the currently checked renderer (the one you passed to `yarn flow`).
 //
-// For example, if you run `yarn flow dom`, `react-stream/inline.dom` points
+// For example, if you run `yarn flow dom`, `react-server/inline.dom` points
 // to this module (and thus will be considered Flow-typed). But other renderers
 // (e.g. `react-test-renderer`) will see stream as untyped during the check.
 //
diff --git a/packages/react-stream/inline.dom-browser.js b/packages/react-server/inline.dom-browser.js
similarity index 100%
rename from packages/react-stream/inline.dom-browser.js
rename to packages/react-server/inline.dom-browser.js
diff --git a/packages/react-stream/inline.dom.js b/packages/react-server/inline.dom.js
similarity index 100%
rename from packages/react-stream/inline.dom.js
rename to packages/react-server/inline.dom.js
diff --git a/packages/react-server/npm/flight.js b/packages/react-server/npm/flight.js
new file mode 100644
index 0000000000000..7e1d00ca14f13
--- /dev/null
+++ b/packages/react-server/npm/flight.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-flight.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-flight.development.js');
+}
diff --git a/packages/react-server/npm/index.js b/packages/react-server/npm/index.js
new file mode 100644
index 0000000000000..e9f3d0324e3b9
--- /dev/null
+++ b/packages/react-server/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server.development.js');
+}
diff --git a/packages/react-stream/package.json b/packages/react-server/package.json
similarity index 89%
rename from packages/react-stream/package.json
rename to packages/react-server/package.json
index f5fb76f3aecbc..77ff922fcd536 100644
--- a/packages/react-stream/package.json
+++ b/packages/react-server/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-stream",
+  "name": "react-server",
   "description": "React package for creating custom streaming server renderers.",
   "version": "0.1.0",
   "private": true,
@@ -13,13 +13,14 @@
     "LICENSE",
     "README.md",
     "index.js",
+    "flight.js",
     "cjs/"
   ],
   "main": "index.js",
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",
-    "directory": "packages/react-stream"
+    "directory": "packages/react-server"
   },
   "engines": {
     "node": ">=0.10.0"
diff --git a/packages/react-server/src/ReactDOMServerFormatConfig.js b/packages/react-server/src/ReactDOMServerFormatConfig.js
new file mode 100644
index 0000000000000..ece3e63890582
--- /dev/null
+++ b/packages/react-server/src/ReactDOMServerFormatConfig.js
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {convertStringToBuffer} from 'react-server/src/ReactServerHostConfig';
+
+import ReactDOMServer from 'react-dom/server';
+
+export function formatChunkAsString(type: string, props: Object): string {
+  let str = '<' + type + '>';
+  if (typeof props.children === 'string') {
+    str += props.children;
+  }
+  str += '</' + type + '>';
+  return str;
+}
+
+export function formatChunk(type: string, props: Object): Uint8Array {
+  return convertStringToBuffer(formatChunkAsString(type, props));
+}
+
+export function renderHostChildrenToString(
+  children: React$Element<any>,
+): string {
+  // TODO: This file is used to actually implement a server renderer
+  // so we can't actually reference the renderer here. Instead, we
+  // should replace this method with a reference to Fizz which
+  // then uses this file to implement the server renderer.
+  return ReactDOMServer.renderToStaticMarkup(children);
+}
diff --git a/packages/react-stream/src/ReactFizzStreamer.js b/packages/react-server/src/ReactFizzStreamer.js
similarity index 88%
rename from packages/react-stream/src/ReactFizzStreamer.js
rename to packages/react-server/src/ReactFizzStreamer.js
index 80239287c2160..eeadab8c14d21 100644
--- a/packages/react-stream/src/ReactFizzStreamer.js
+++ b/packages/react-server/src/ReactFizzStreamer.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Destination} from './ReactFizzHostConfig';
+import type {Destination} from './ReactServerHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {
@@ -17,8 +17,8 @@ import {
   completeWriting,
   flushBuffered,
   close,
-} from './ReactFizzHostConfig';
-import {formatChunk} from './ReactFizzFormatConfig';
+} from './ReactServerHostConfig';
+import {formatChunk} from './ReactServerFormatConfig';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 type OpaqueRequest = {
@@ -26,6 +26,7 @@ type OpaqueRequest = {
   children: ReactNodeList,
   completedChunks: Array<Uint8Array>,
   flowing: boolean,
+  ...
 };
 
 export function createRequest(
@@ -76,10 +77,7 @@ export function startWork(request: OpaqueRequest): void {
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(
-  request: OpaqueRequest,
-  desiredBytes: number,
-): void {
+export function startFlowing(request: OpaqueRequest): void {
   request.flowing = false;
   flushCompletedChunks(request);
 }
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
new file mode 100644
index 0000000000000..9f896a1b0a2b0
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -0,0 +1,352 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {Destination} from './ReactServerHostConfig';
+
+import {
+  scheduleWork,
+  beginWriting,
+  writeChunk,
+  completeWriting,
+  flushBuffered,
+  close,
+  convertStringToBuffer,
+} from './ReactServerHostConfig';
+import {renderHostChildrenToString} from './ReactServerFormatConfig';
+import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+
+/*
+
+FLIGHT PROTOCOL GRAMMAR
+
+Response
+- JSONData RowSequence
+- JSONData
+
+RowSequence
+- Row RowSequence
+- Row
+
+Row
+- "J" RowID JSONData
+- "H" RowID HTMLData
+- "B" RowID BlobData
+- "U" RowID URLData
+- "E" RowID ErrorData
+
+RowID
+- HexDigits ":"
+
+HexDigits
+- HexDigit HexDigits
+- HexDigit
+
+HexDigit
+- 0-F
+
+URLData
+- (UTF8 encoded URL) "\n"
+
+ErrorData
+- (UTF8 encoded JSON: {message: "...", stack: "..."}) "\n"
+
+JSONData
+- (UTF8 encoded JSON) "\n"
+  - String values that begin with $ are escaped with a "$" prefix.
+  - References to other rows are encoding as JSONReference strings.
+
+JSONReference
+- "$" HexDigits
+
+HTMLData
+- ByteSize (UTF8 encoded HTML)
+
+BlobData
+- ByteSize (Binary Data)
+
+ByteSize
+- (unsigned 32-bit integer)
+*/
+
+// TODO: Implement HTMLData, BlobData and URLData.
+
+const stringify = JSON.stringify;
+
+export type ReactModel =
+  | React$Element<any>
+  | string
+  | boolean
+  | number
+  | null
+  | Iterable<ReactModel>
+  | ReactModelObject;
+
+type ReactJSONValue =
+  | string
+  | boolean
+  | number
+  | null
+  | Array<ReactModel>
+  | ReactModelObject;
+
+type ReactModelObject = {+[key: string]: ReactModel, ...};
+
+type Segment = {
+  id: number,
+  model: ReactModel,
+  ping: () => void,
+  ...
+};
+
+type OpaqueRequest = {
+  destination: Destination,
+  nextChunkId: number,
+  pendingChunks: number,
+  pingedSegments: Array<Segment>,
+  completedJSONChunks: Array<Uint8Array>,
+  completedErrorChunks: Array<Uint8Array>,
+  flowing: boolean,
+  toJSON: (key: string, value: ReactModel) => ReactJSONValue,
+  ...
+};
+
+export function createRequest(
+  model: ReactModel,
+  destination: Destination,
+): OpaqueRequest {
+  let pingedSegments = [];
+  let request = {
+    destination,
+    nextChunkId: 0,
+    pendingChunks: 0,
+    pingedSegments: pingedSegments,
+    completedJSONChunks: [],
+    completedErrorChunks: [],
+    flowing: false,
+    toJSON: (key: string, value: ReactModel) =>
+      resolveModelToJSON(request, value),
+  };
+  request.pendingChunks++;
+  let rootSegment = createSegment(request, model);
+  pingedSegments.push(rootSegment);
+  return request;
+}
+
+function attemptResolveModelComponent(element: React$Element<any>): ReactModel {
+  let type = element.type;
+  let props = element.props;
+  if (typeof type === 'function') {
+    // This is a nested view model.
+    return type(props);
+  } else if (typeof type === 'string') {
+    // This is a host element. E.g. HTML.
+    return renderHostChildrenToString(element);
+  } else {
+    throw new Error('Unsupported type.');
+  }
+}
+
+function pingSegment(request: OpaqueRequest, segment: Segment): void {
+  let pingedSegments = request.pingedSegments;
+  pingedSegments.push(segment);
+  if (pingedSegments.length === 1) {
+    scheduleWork(() => performWork(request));
+  }
+}
+
+function createSegment(request: OpaqueRequest, model: ReactModel): Segment {
+  let id = request.nextChunkId++;
+  let segment = {
+    id,
+    model,
+    ping: () => pingSegment(request, segment),
+  };
+  return segment;
+}
+
+function serializeIDRef(id: number): string {
+  return '$' + id.toString(16);
+}
+
+function serializeRowHeader(tag: string, id: number) {
+  return tag + id.toString(16) + ':';
+}
+
+function escapeStringValue(value: string): string {
+  if (value[0] === '$') {
+    // We need to escape $ prefixed strings since we use that to encode
+    // references to IDs.
+    return '$' + value;
+  } else {
+    return value;
+  }
+}
+
+function resolveModelToJSON(
+  request: OpaqueRequest,
+  value: ReactModel,
+): ReactJSONValue {
+  if (typeof value === 'string') {
+    return escapeStringValue(value);
+  }
+
+  while (
+    typeof value === 'object' &&
+    value !== null &&
+    value.$$typeof === REACT_ELEMENT_TYPE
+  ) {
+    let element: React$Element<any> = (value: any);
+    try {
+      value = attemptResolveModelComponent(element);
+    } catch (x) {
+      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+        // Something suspended, we'll need to create a new segment and resolve it later.
+        request.pendingChunks++;
+        let newSegment = createSegment(request, element);
+        let ping = newSegment.ping;
+        x.then(ping, ping);
+        return serializeIDRef(newSegment.id);
+      } else {
+        request.pendingChunks++;
+        let errorId = request.nextChunkId++;
+        emitErrorChunk(request, errorId, x);
+        return serializeIDRef(errorId);
+      }
+    }
+  }
+
+  return value;
+}
+
+function emitErrorChunk(
+  request: OpaqueRequest,
+  id: number,
+  error: mixed,
+): void {
+  // TODO: We should not leak error messages to the client in prod.
+  // Give this an error code instead and log on the server.
+  // We can serialize the error in DEV as a convenience.
+  let message;
+  let stack = '';
+  try {
+    if (error instanceof Error) {
+      message = '' + error.message;
+      stack = '' + error.stack;
+    } else {
+      message = 'Error: ' + (error: any);
+    }
+  } catch (x) {
+    message = 'An error occurred but serializing the error message failed.';
+  }
+  let errorInfo = {message, stack};
+  let row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
+  request.completedErrorChunks.push(convertStringToBuffer(row));
+}
+
+function retrySegment(request: OpaqueRequest, segment: Segment): void {
+  let value = segment.model;
+  try {
+    while (
+      typeof value === 'object' &&
+      value !== null &&
+      value.$$typeof === REACT_ELEMENT_TYPE
+    ) {
+      // If this is a nested model, there's no need to create another chunk,
+      // we can reuse the existing one and try again.
+      let element: React$Element<any> = (value: any);
+      segment.model = element;
+      value = attemptResolveModelComponent(element);
+    }
+    let json = stringify(value, request.toJSON);
+    let row;
+    let id = segment.id;
+    if (id === 0) {
+      row = json + '\n';
+    } else {
+      row = serializeRowHeader('J', id) + json + '\n';
+    }
+    request.completedJSONChunks.push(convertStringToBuffer(row));
+  } catch (x) {
+    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+      // Something suspended again, let's pick it back up later.
+      let ping = segment.ping;
+      x.then(ping, ping);
+      return;
+    } else {
+      // This errored, we need to serialize this error to the
+      emitErrorChunk(request, segment.id, x);
+    }
+  }
+}
+
+function performWork(request: OpaqueRequest): void {
+  let pingedSegments = request.pingedSegments;
+  request.pingedSegments = [];
+  for (let i = 0; i < pingedSegments.length; i++) {
+    let segment = pingedSegments[i];
+    retrySegment(request, segment);
+  }
+  if (request.flowing) {
+    flushCompletedChunks(request);
+  }
+}
+
+let reentrant = false;
+function flushCompletedChunks(request: OpaqueRequest): void {
+  if (reentrant) {
+    return;
+  }
+  reentrant = true;
+  let destination = request.destination;
+  beginWriting(destination);
+  try {
+    let jsonChunks = request.completedJSONChunks;
+    let i = 0;
+    for (; i < jsonChunks.length; i++) {
+      request.pendingChunks--;
+      let chunk = jsonChunks[i];
+      if (!writeChunk(destination, chunk)) {
+        request.flowing = false;
+        i++;
+        break;
+      }
+    }
+    jsonChunks.splice(0, i);
+    let errorChunks = request.completedErrorChunks;
+    i = 0;
+    for (; i < errorChunks.length; i++) {
+      request.pendingChunks--;
+      let chunk = errorChunks[i];
+      if (!writeChunk(destination, chunk)) {
+        request.flowing = false;
+        i++;
+        break;
+      }
+    }
+    errorChunks.splice(0, i);
+  } finally {
+    reentrant = false;
+    completeWriting(destination);
+  }
+  flushBuffered(destination);
+  if (request.pendingChunks === 0) {
+    // We're done.
+    close(destination);
+  }
+}
+
+export function startWork(request: OpaqueRequest): void {
+  request.flowing = true;
+  scheduleWork(() => performWork(request));
+}
+
+export function startFlowing(request: OpaqueRequest): void {
+  request.flowing = true;
+  flushCompletedChunks(request);
+}
diff --git a/packages/react-stream/src/ReactFizzHostConfig.js b/packages/react-server/src/ReactServerFormatConfig.js
similarity index 91%
rename from packages/react-stream/src/ReactFizzHostConfig.js
rename to packages/react-server/src/ReactServerFormatConfig.js
index 6b4d9f24fcdc7..49c9752540528 100644
--- a/packages/react-stream/src/ReactFizzHostConfig.js
+++ b/packages/react-server/src/ReactServerFormatConfig.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 import invariant from 'shared/invariant';
 
diff --git a/packages/react-server/src/ReactServerHostConfig.js b/packages/react-server/src/ReactServerHostConfig.js
new file mode 100644
index 0000000000000..49c9752540528
--- /dev/null
+++ b/packages/react-server/src/ReactServerHostConfig.js
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+/* eslint-disable react-internal/invariant-args */
+
+import invariant from 'shared/invariant';
+
+// We expect that our Rollup, Jest, and Flow configurations
+// always shim this module with the corresponding host config
+// (either provided by a renderer, or a generic shim for npm).
+//
+// We should never resolve to this file, but it exists to make
+// sure that if we *do* accidentally break the configuration,
+// the failure isn't silent.
+
+invariant(false, 'This module must be shimmed by a specific renderer.');
diff --git a/packages/react-stream/src/ReactFizzHostConfigBrowser.js b/packages/react-server/src/ReactServerHostConfigBrowser.js
similarity index 87%
rename from packages/react-stream/src/ReactFizzHostConfigBrowser.js
rename to packages/react-server/src/ReactServerHostConfigBrowser.js
index 390a6efc82749..aa17656ceebe8 100644
--- a/packages/react-stream/src/ReactFizzHostConfigBrowser.js
+++ b/packages/react-server/src/ReactServerHostConfigBrowser.js
@@ -20,8 +20,12 @@ export function flushBuffered(destination: Destination) {
 
 export function beginWriting(destination: Destination) {}
 
-export function writeChunk(destination: Destination, buffer: Uint8Array) {
+export function writeChunk(
+  destination: Destination,
+  buffer: Uint8Array,
+): boolean {
   destination.enqueue(buffer);
+  return destination.desiredSize > 0;
 }
 
 export function completeWriting(destination: Destination) {}
diff --git a/packages/react-stream/src/ReactFizzHostConfigNode.js b/packages/react-server/src/ReactServerHostConfigNode.js
similarity index 53%
rename from packages/react-stream/src/ReactFizzHostConfigNode.js
rename to packages/react-server/src/ReactServerHostConfigNode.js
index 2ee9ddec354d9..c3d080ca47dfc 100644
--- a/packages/react-stream/src/ReactFizzHostConfigNode.js
+++ b/packages/react-server/src/ReactServerHostConfigNode.js
@@ -9,7 +9,12 @@
 
 import type {Writable} from 'stream';
 
-type MightBeFlushable = {flush?: () => void};
+type MightBeFlushable = {
+  flush?: () => void,
+  // Legacy
+  flushHeaders?: () => void,
+  ...
+};
 
 export type Destination = Writable & MightBeFlushable;
 
@@ -21,22 +26,35 @@ export function flushBuffered(destination: Destination) {
   // If we don't have any more data to send right now.
   // Flush whatever is in the buffer to the wire.
   if (typeof destination.flush === 'function') {
-    // By convention the Zlib streams provide a flush function for this purpose.
-    destination.flush();
+    // http.createServer response have flush(), but it has a different meaning and
+    // is deprecated in favor of flushHeaders(). Detect to avoid a warning.
+    if (typeof destination.flushHeaders !== 'function') {
+      // By convention the Zlib streams provide a flush function for this purpose.
+      destination.flush();
+    }
   }
 }
 
 export function beginWriting(destination: Destination) {
-  destination.cork();
+  // Older Node streams like http.createServer don't have this.
+  if (typeof destination.cork === 'function') {
+    destination.cork();
+  }
 }
 
-export function writeChunk(destination: Destination, buffer: Uint8Array) {
+export function writeChunk(
+  destination: Destination,
+  buffer: Uint8Array,
+): boolean {
   let nodeBuffer = ((buffer: any): Buffer); // close enough
-  destination.write(nodeBuffer);
+  return destination.write(nodeBuffer);
 }
 
 export function completeWriting(destination: Destination) {
-  destination.uncork();
+  // Older Node streams like http.createServer don't have this.
+  if (typeof destination.uncork === 'function') {
+    destination.uncork();
+  }
 }
 
 export function close(destination: Destination) {
diff --git a/packages/react-stream/src/__tests__/ReactServer-test.js b/packages/react-server/src/__tests__/ReactServer-test.js
similarity index 100%
rename from packages/react-stream/src/__tests__/ReactServer-test.js
rename to packages/react-server/src/__tests__/ReactServer-test.js
diff --git a/packages/react-stream/src/forks/ReactFizzFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
similarity index 67%
rename from packages/react-stream/src/forks/ReactFizzFormatConfig.custom.js
rename to packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 9c4e181652265..a864d5f6beb92 100644
--- a/packages/react-stream/src/forks/ReactFizzFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -7,14 +7,14 @@
  * @flow
  */
 
-// This is a host config that's used for the `react-stream` package on npm.
+// This is a host config that's used for the `react-server` package on npm.
 // It is only used by third-party renderers.
 //
 // Its API lets you pass the host config as an argument.
-// However, inside the `react-stream` we treat host config as a module.
+// However, inside the `react-server` we treat host config as a module.
 // This file is a shim between two worlds.
 //
-// It works because the `react-stream` bundle is wrapped in something like:
+// It works because the `react-server` bundle is wrapped in something like:
 //
 // module.exports = function ($$$config) {
 //   /* renderer code */
@@ -26,4 +26,7 @@
 declare var $$$hostConfig: any;
 export opaque type Destination = mixed; // eslint-disable-line no-undef
 
+export const formatChunkAsString = $$$hostConfig.formatChunkAsString;
 export const formatChunk = $$$hostConfig.formatChunk;
+export const renderHostChildrenToString =
+  $$$hostConfig.renderHostChildrenToString;
diff --git a/packages/react-stream/src/forks/ReactFizzHostConfig.dom-browser.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
similarity index 81%
rename from packages/react-stream/src/forks/ReactFizzHostConfig.dom-browser.js
rename to packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
index ff949e1c746a1..e06662579e5a2 100644
--- a/packages/react-stream/src/forks/ReactFizzHostConfig.dom-browser.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactFizzHostConfigBrowser';
+export * from '../ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom.js
new file mode 100644
index 0000000000000..e06662579e5a2
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export * from '../ReactDOMServerFormatConfig';
diff --git a/packages/react-stream/src/forks/ReactFizzHostConfig.custom.js b/packages/react-server/src/forks/ReactServerHostConfig.custom.js
similarity index 84%
rename from packages/react-stream/src/forks/ReactFizzHostConfig.custom.js
rename to packages/react-server/src/forks/ReactServerHostConfig.custom.js
index 71d876a10e5a1..c3dc6d83d64b0 100644
--- a/packages/react-stream/src/forks/ReactFizzHostConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerHostConfig.custom.js
@@ -7,14 +7,14 @@
  * @flow
  */
 
-// This is a host config that's used for the `react-stream` package on npm.
+// This is a host config that's used for the `react-server` package on npm.
 // It is only used by third-party renderers.
 //
 // Its API lets you pass the host config as an argument.
-// However, inside the `react-stream` we treat host config as a module.
+// However, inside the `react-server` we treat host config as a module.
 // This file is a shim between two worlds.
 //
-// It works because the `react-stream` bundle is wrapped in something like:
+// It works because the `react-server` bundle is wrapped in something like:
 //
 // module.exports = function ($$$config) {
 //   /* renderer code */
diff --git a/packages/react-server/src/forks/ReactServerHostConfig.dom-browser.js b/packages/react-server/src/forks/ReactServerHostConfig.dom-browser.js
new file mode 100644
index 0000000000000..2937762e0c840
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerHostConfig.dom-browser.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export * from '../ReactServerHostConfigBrowser';
diff --git a/packages/react-stream/src/forks/ReactFizzHostConfig.dom.js b/packages/react-server/src/forks/ReactServerHostConfig.dom.js
similarity index 81%
rename from packages/react-stream/src/forks/ReactFizzHostConfig.dom.js
rename to packages/react-server/src/forks/ReactServerHostConfig.dom.js
index 88d44bc2e4519..6f560aa1b4962 100644
--- a/packages/react-stream/src/forks/ReactFizzHostConfig.dom.js
+++ b/packages/react-server/src/forks/ReactServerHostConfig.dom.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactFizzHostConfigNode';
+export * from '../ReactServerHostConfigNode';
diff --git a/packages/react-stream/README.md b/packages/react-stream/README.md
deleted file mode 100644
index 087175bb7dc31..0000000000000
--- a/packages/react-stream/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# react-stream
-
-This is an experimental package for creating custom React streaming server renderers.
-
-**Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.**
-
-**Use it at your own risk.**
-
-## API
-
-```js
-var Renderer = require('react-stream');
-
-var HostConfig = {
-  // You'll need to implement some methods here.
-  // See below for more information and examples.
-};
-
-var MyRenderer = Renderer(HostConfig);
-
-var RendererPublicAPI = {
-};
-
-module.exports = RendererPublicAPI;
-```
diff --git a/packages/react-stream/npm/index.js b/packages/react-stream/npm/index.js
deleted file mode 100644
index fb7a252fd61a1..0000000000000
--- a/packages/react-stream/npm/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-stream.production.min.js');
-} else {
-  module.exports = require('./cjs/react-stream.development.js');
-}
diff --git a/packages/react-stream/src/forks/ReactFizzFormatConfig.dom-browser.js b/packages/react-stream/src/forks/ReactFizzFormatConfig.dom-browser.js
deleted file mode 100644
index e3b8782adee7c..0000000000000
--- a/packages/react-stream/src/forks/ReactFizzFormatConfig.dom-browser.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-export * from 'react-dom/src/server/ReactDOMFizzServerFormatConfig';
diff --git a/packages/react-stream/src/forks/ReactFizzFormatConfig.dom.js b/packages/react-stream/src/forks/ReactFizzFormatConfig.dom.js
deleted file mode 100644
index e3b8782adee7c..0000000000000
--- a/packages/react-stream/src/forks/ReactFizzFormatConfig.dom.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-export * from 'react-dom/src/server/ReactDOMFizzServerFormatConfig';
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index be69ad23c5367..85e8653c0bd6f 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "16.8.6",
+  "version": "16.12.0",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -22,7 +22,7 @@
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.2",
     "react-is": "^16.8.6",
-    "scheduler": "^0.14.0"
+    "scheduler": "^0.18.0"
   },
   "peerDependencies": {
     "react": "^16.0.0"
diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
index 850b2b37417b2..ab303b180573b 100644
--- a/packages/react-test-renderer/src/ReactShallowRenderer.js
+++ b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -15,31 +15,33 @@ import shallowEqual from 'shared/shallowEqual';
 import invariant from 'shared/invariant';
 import checkPropTypes from 'prop-types/checkPropTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import warning from 'shared/warning';
 import is from 'shared/objectIs';
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
 import type {ReactElement} from 'shared/ReactElementType';
 
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-type Update<A> = {
+type Update<A> = {|
   action: A,
   next: Update<A> | null,
-};
+|};
 
-type UpdateQueue<A> = {
+type UpdateQueue<A> = {|
   first: Update<A> | null,
   dispatch: any,
-};
+|};
 
-type Hook = {
+type Hook = {|
   memoizedState: any,
   queue: UpdateQueue<any> | null,
   next: Hook | null,
-};
+|};
 
 const {ReactCurrentDispatcher} = ReactSharedInternals;
 
@@ -58,29 +60,31 @@ function areHookInputsEqual(
   prevDeps: Array<mixed> | null,
 ) {
   if (prevDeps === null) {
-    warning(
-      false,
-      '%s received a final argument during this render, but not during ' +
-        'the previous render. Even though the final argument is optional, ' +
-        'its type cannot change between renders.',
-      currentHookNameInDev,
-    );
+    if (__DEV__) {
+      console.error(
+        '%s received a final argument during this render, but not during ' +
+          'the previous render. Even though the final argument is optional, ' +
+          'its type cannot change between renders.',
+        currentHookNameInDev,
+      );
+    }
     return false;
   }
 
-  // Don't bother comparing lengths in prod because these arrays should be
-  // passed inline.
-  if (nextDeps.length !== prevDeps.length) {
-    warning(
-      false,
-      'The final argument passed to %s changed size between renders. The ' +
-        'order and size of this array must remain constant.\n\n' +
-        'Previous: %s\n' +
-        'Incoming: %s',
-      currentHookNameInDev,
-      `[${nextDeps.join(', ')}]`,
-      `[${prevDeps.join(', ')}]`,
-    );
+  if (__DEV__) {
+    // Don't bother comparing lengths in prod because these arrays should be
+    // passed inline.
+    if (nextDeps.length !== prevDeps.length) {
+      console.error(
+        'The final argument passed to %s changed size between renders. The ' +
+          'order and size of this array must remain constant.\n\n' +
+          'Previous: %s\n' +
+          'Incoming: %s',
+        currentHookNameInDev,
+        `[${nextDeps.join(', ')}]`,
+        `[${prevDeps.join(', ')}]`,
+      );
+    }
   }
   for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
     if (is(nextDeps[i], prevDeps[i])) {
@@ -291,9 +295,10 @@ class ReactShallowRenderer {
           first: null,
           dispatch: null,
         });
-        const dispatch: Dispatch<
-          A,
-        > = (queue.dispatch = (this._dispatchAction.bind(this, queue): any));
+        const dispatch: Dispatch<A> = (queue.dispatch = (this._dispatchAction.bind(
+          this,
+          queue,
+        ): any));
         return [workInProgressHook.memoizedState, dispatch];
       }
     };
@@ -335,7 +340,7 @@ class ReactShallowRenderer {
       return nextValue;
     };
 
-    const useRef = <T>(initialValue: T): {current: T} => {
+    const useRef = <T>(initialValue: T): {|current: T|} => {
       this._validateCurrentlyRenderingComponent();
       this._createWorkInProgressHook();
       const previousRef = (this._workInProgressHook: any).memoizedState;
@@ -366,6 +371,31 @@ class ReactShallowRenderer {
       return fn;
     };
 
+    const useResponder = (
+      responder,
+      props,
+    ): ReactEventResponderListener<any, any> => ({
+      props: props,
+      responder,
+    });
+
+    // TODO: implement if we decide to keep the shallow renderer
+    const useTransition = (
+      config,
+    ): [(callback: () => void) => void, boolean] => {
+      this._validateCurrentlyRenderingComponent();
+      const startTransition = callback => {
+        callback();
+      };
+      return [startTransition, false];
+    };
+
+    // TODO: implement if we decide to keep the shallow renderer
+    const useDeferredValue = <T>(value: T, config): T => {
+      this._validateCurrentlyRenderingComponent();
+      return value;
+    };
+
     return {
       readContext,
       useCallback: (identity: any),
@@ -381,6 +411,9 @@ class ReactShallowRenderer {
       useReducer,
       useRef,
       useState,
+      useResponder,
+      useTransition,
+      useDeferredValue,
     };
   }
 
@@ -497,7 +530,7 @@ class ReactShallowRenderer {
       'ReactShallowRenderer render(): Invalid component element.%s',
       typeof element === 'function'
         ? ' Instead of passing a component class, make sure to instantiate ' +
-          'it by passing it to React.createElement.'
+            'it by passing it to React.createElement.'
         : '',
     );
     element = ((element: any): ReactElement);
@@ -511,14 +544,15 @@ class ReactShallowRenderer {
     );
     invariant(
       isForwardRef(element) ||
-        (typeof element.type === 'function' || isMemo(element.type)),
+        typeof element.type === 'function' ||
+        isMemo(element),
       'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
         'components, but the provided element type was `%s`.',
       Array.isArray(element.type)
         ? 'array'
         : element.type === null
-          ? 'null'
-          : typeof element.type,
+        ? 'null'
+        : typeof element.type,
     );
 
     if (this._rendering) {
@@ -528,7 +562,7 @@ class ReactShallowRenderer {
       this._reset();
     }
 
-    const elementType = isMemo(element.type) ? element.type.type : element.type;
+    const elementType = isMemo(element) ? element.type.type : element.type;
     const previousElement = this._element;
 
     this._rendering = true;
@@ -536,7 +570,7 @@ class ReactShallowRenderer {
     this._context = getMaskedContext(elementType.contextTypes, context);
 
     // Inner memo component props aren't currently validated in createElement.
-    if (isMemo(element.type) && elementType.propTypes) {
+    if (isMemo(element) && elementType.propTypes) {
       currentlyValidatingElement = element;
       checkPropTypes(
         elementType.propTypes,
@@ -587,7 +621,7 @@ class ReactShallowRenderer {
         this._mountClassComponent(elementType, element, this._context);
       } else {
         let shouldRender = true;
-        if (isMemo(element.type) && previousElement !== null) {
+        if (isMemo(element) && previousElement !== null) {
           // This is a Memo component that is being re-rendered.
           const compare = element.type.compare || shallowEqual;
           if (compare(previousElement.props, element.props)) {
@@ -776,7 +810,7 @@ function getDisplayName(element) {
   } else if (typeof element.type === 'string') {
     return element.type;
   } else {
-    const elementType = isMemo(element.type) ? element.type.type : element.type;
+    const elementType = isMemo(element) ? element.type.type : element.type;
     return elementType.displayName || elementType.name || 'Unknown';
   }
 }
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index f765c9d6d928c..58ea9749a1a53 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -7,25 +7,14 @@
  * @flow
  */
 
-import warning from 'shared/warning';
+import type {
+  ReactEventResponder,
+  ReactEventResponderInstance,
+  ReactFundamentalComponentInstance,
+} from 'shared/ReactTypes';
 
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
-import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
+import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
 
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-
-type EventTargetChildElement = {
-  type: string,
-  props: null | {
-    style?: {
-      position?: string,
-      bottom?: string,
-      left?: string,
-      right?: string,
-      top?: string,
-    },
-  },
-};
 export type Type = string;
 export type Props = Object;
 export type Container = {|
@@ -38,6 +27,7 @@ export type Instance = {|
   props: Object,
   isHidden: boolean,
   children: Array<Instance | TextInstance>,
+  internalInstanceHandle: Object,
   rootContainerInstance: Container,
   tag: 'INSTANCE',
 |};
@@ -53,15 +43,16 @@ export type UpdatePayload = Object;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = any;
 
 export * from 'shared/HostConfigWithNoPersistence';
 export * from 'shared/HostConfigWithNoHydration';
 
 const EVENT_COMPONENT_CONTEXT = {};
-const EVENT_TARGET_CONTEXT = {};
-const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};
 const NO_CONTEXT = {};
 const UPDATE_SIGNAL = {};
+const nodeToInstanceMap = new WeakMap();
+
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
   Object.freeze(UPDATE_SIGNAL);
@@ -71,10 +62,14 @@ export function getPublicInstance(inst: Instance | TextInstance): * {
   switch (inst.tag) {
     case 'INSTANCE':
       const createNodeMock = inst.rootContainerInstance.createNodeMock;
-      return createNodeMock({
+      const mockNode = createNodeMock({
         type: inst.type,
         props: inst.props,
       });
+      if (typeof mockNode === 'object' && mockNode !== null) {
+        nodeToInstanceMap.set(mockNode, inst);
+      }
+      return mockNode;
     default:
       return inst;
   }
@@ -85,13 +80,14 @@ export function appendChild(
   child: Instance | TextInstance,
 ): void {
   if (__DEV__) {
-    warning(
-      Array.isArray(parentInstance.children),
-      'An invalid container has been provided. ' +
-        'This may indicate that another renderer is being used in addition to the test renderer. ' +
-        '(For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) ' +
-        'This is not supported.',
-    );
+    if (!Array.isArray(parentInstance.children)) {
+      console.error(
+        'An invalid container has been provided. ' +
+          'This may indicate that another renderer is being used in addition to the test renderer. ' +
+          '(For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) ' +
+          'This is not supported.',
+      );
+    }
   }
   const index = parentInstance.children.indexOf(child);
   if (index !== -1) {
@@ -135,38 +131,6 @@ export function getChildHostContext(
   return NO_CONTEXT;
 }
 
-export function getChildHostContextForEventComponent(
-  parentHostContext: HostContext,
-): HostContext {
-  if (__DEV__ && enableEventAPI) {
-    warning(
-      parentHostContext !== EVENT_TARGET_CONTEXT &&
-        parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,
-      'validateDOMNesting: React event targets must not have event components as children.',
-    );
-    return EVENT_COMPONENT_CONTEXT;
-  }
-  return NO_CONTEXT;
-}
-
-export function getChildHostContextForEventTarget(
-  parentHostContext: HostContext,
-  type: Symbol | number,
-): HostContext {
-  if (__DEV__ && enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      warning(
-        parentHostContext !== EVENT_COMPONENT_CONTEXT,
-        'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-      return EVENT_TOUCH_HIT_TARGET_CONTEXT;
-    }
-    return EVENT_TARGET_CONTEXT;
-  }
-  return NO_CONTEXT;
-}
-
 export function prepareForCommit(containerInfo: Container): void {
   // noop
 }
@@ -182,11 +146,22 @@ export function createInstance(
   hostContext: Object,
   internalInstanceHandle: Object,
 ): Instance {
+  let propsToUse = props;
+  if (enableDeprecatedFlareAPI) {
+    if (props.DEPRECATED_flareListeners != null) {
+      // We want to remove the "DEPRECATED_flareListeners" prop
+      // as we don't want it in the test renderer's
+      // instance props.
+      const {DEPRECATED_flareListeners, ...otherProps} = props; // eslint-disable-line
+      propsToUse = otherProps;
+    }
+  }
   return {
     type,
-    props,
+    props: propsToUse,
     isHidden: false,
     children: [],
+    internalInstanceHandle,
     rootContainerInstance,
     tag: 'INSTANCE',
   };
@@ -220,7 +195,7 @@ export function prepareUpdate(
   newProps: Props,
   rootContainerInstance: Container,
   hostContext: Object,
-): null | {} {
+): null | {...} {
   return UPDATE_SIGNAL;
 }
 
@@ -238,19 +213,16 @@ export function createTextInstance(
   hostContext: Object,
   internalInstanceHandle: Object,
 ): TextInstance {
-  if (__DEV__ && enableEventAPI) {
-    warning(
-      hostContext !== EVENT_COMPONENT_CONTEXT,
-      'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-        'Wrap the child text "%s" in an element.',
-      text,
-    );
-    warning(
-      hostContext !== EVENT_TARGET_CONTEXT,
-      'validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +
-        'Wrap the child text "%s" in an element.',
-      text,
-    );
+  if (__DEV__) {
+    if (enableDeprecatedFlareAPI) {
+      if (hostContext === EVENT_COMPONENT_CONTEXT) {
+        console.error(
+          'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
+            'Wrap the child text "%s" in an element.',
+          text,
+        );
+      }
+    }
   }
   return {
     text,
@@ -260,6 +232,7 @@ export function createTextInstance(
 }
 
 export const isPrimaryRenderer = false;
+export const warnsIfNotActing = true;
 
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
@@ -273,7 +246,7 @@ export const supportsMutation = true;
 
 export function commitUpdate(
   instance: Instance,
-  updatePayload: {},
+  updatePayload: {...},
   type: string,
   oldProps: Props,
   newProps: Props,
@@ -327,76 +300,78 @@ export function unhideTextInstance(
   textInstance.isHidden = false;
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
+export function DEPRECATED_mountResponderInstance(
+  responder: ReactEventResponder<any, any>,
+  responderInstance: ReactEventResponderInstance<any, any>,
+  props: Object,
+  state: Object,
+  instance: Instance,
+) {
   // noop
 }
 
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+export function DEPRECATED_unmountResponderInstance(
+  responderInstance: ReactEventResponderInstance<any, any>,
 ): void {
   // noop
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
-): void {
-  // noop
+export function getFundamentalComponentInstance(
+  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
+): Instance {
+  const {impl, props, state} = fundamentalInstance;
+  return impl.getInstance(null, props, state);
 }
 
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null | EventTargetChildElement {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      const {bottom, left, right, top} = props;
-
-      if (!bottom && !left && !right && !top) {
-        return null;
-      }
-      return {
-        type: 'div',
-        props: {
-          style: {
-            position: 'absolute',
-            zIndex: -1,
-            bottom: bottom ? `-${bottom}px` : '0px',
-            left: left ? `-${left}px` : '0px',
-            right: right ? `-${right}px` : '0px',
-            top: top ? `-${top}px` : '0px',
-          },
-        },
-      };
-    }
+export function mountFundamentalComponent(
+  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
+): void {
+  const {impl, instance, props, state} = fundamentalInstance;
+  const onMount = impl.onMount;
+  if (onMount !== undefined) {
+    onMount(null, instance, props, state);
   }
-  return null;
 }
 
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+export function shouldUpdateFundamentalComponent(
+  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
 ): boolean {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      // In DEV we do a computed style check on the position to ensure
-      // the parent host component is correctly position in the document.
-      if (__DEV__) {
-        return true;
-      }
-    }
+  const {impl, prevProps, props, state} = fundamentalInstance;
+  const shouldUpdate = impl.shouldUpdate;
+  if (shouldUpdate !== undefined) {
+    return shouldUpdate(null, prevProps, props, state);
   }
-  return false;
+  return true;
 }
 
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
+export function updateFundamentalComponent(
+  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
+): void {
+  const {impl, instance, prevProps, props, state} = fundamentalInstance;
+  const onUpdate = impl.onUpdate;
+  if (onUpdate !== undefined) {
+    onUpdate(null, instance, prevProps, props, state);
+  }
+}
+
+export function unmountFundamentalComponent(
+  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
 ): void {
+  const {impl, instance, props, state} = fundamentalInstance;
+  const onUnmount = impl.onUnmount;
+  if (onUnmount !== undefined) {
+    onUnmount(null, instance, props, state);
+  }
+}
+
+export function getInstanceFromNode(mockNode: Object) {
+  const instance = nodeToInstanceMap.get(mockNode);
+  if (instance !== undefined) {
+    return instance.internalInstanceHandle;
+  }
+  return null;
+}
+
+export function beforeRemoveInstance(instance: any) {
   // noop
 }
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 11b6fed109697..ca56ffaaa2685 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -36,7 +36,9 @@ import {
   Profiler,
   MemoComponent,
   SimpleMemoComponent,
+  Chunk,
   IncompleteClassComponent,
+  ScopeComponent,
 } from 'shared/ReactWorkTags';
 import invariant from 'shared/invariant';
 import ReactVersion from 'shared/ReactVersion';
@@ -48,11 +50,12 @@ import {ConcurrentRoot, LegacyRoot} from 'shared/ReactRootTags';
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
+  ...
 };
 
 type ReactTestRendererJSON = {|
   type: string,
-  props: {[propName: string]: any},
+  props: {[propName: string]: any, ...},
   children: null | Array<ReactTestRendererNode>,
   $$typeof?: Symbol, // Optional because we add it with defineProperty().
 |};
@@ -62,6 +65,7 @@ type FindOptions = $Shape<{
   // performs a "greedy" search: if a matching node is found, will continue
   // to search within the matching node's children. (default: true)
   deep: boolean,
+  ...
 }>;
 
 export type Predicate = (node: ReactTestInstance) => ?boolean;
@@ -184,6 +188,14 @@ function toTree(node: ?Fiber) {
         instance: null,
         rendered: childrenToTree(node.child),
       };
+    case Chunk:
+      return {
+        nodeType: 'chunk',
+        type: node.type,
+        props: {...node.memoizedProps},
+        instance: null,
+        rendered: childrenToTree(node.child),
+      };
     case HostComponent: {
       return {
         nodeType: 'host',
@@ -203,6 +215,7 @@ function toTree(node: ?Fiber) {
     case ForwardRef:
     case MemoComponent:
     case IncompleteClassComponent:
+    case ScopeComponent:
       return childrenToTree(node.child);
     default:
       invariant(
@@ -220,6 +233,7 @@ const validWrapperTypes = new Set([
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
+  Chunk,
   // Normally skipped, but used when there's more than one root child.
   HostRoot,
 ]);
@@ -442,6 +456,7 @@ const ReactTestRendererFiber = {
       container,
       isConcurrent ? ConcurrentRoot : LegacyRoot,
       false,
+      null,
     );
     invariant(root != null, 'something went wrong');
     updateContainer(element, root, null, null);
diff --git a/packages/react-test-renderer/src/ReactTestRendererAct.js b/packages/react-test-renderer/src/ReactTestRendererAct.js
index ffd55af9eb579..362de4e2b22ae 100644
--- a/packages/react-test-renderer/src/ReactTestRendererAct.js
+++ b/packages/react-test-renderer/src/ReactTestRendererAct.js
@@ -11,38 +11,28 @@ import type {Thenable} from 'react-reconciler/src/ReactFiberWorkLoop';
 import {
   batchedUpdates,
   flushPassiveEffects,
-  ReactActingRendererSigil,
+  IsThisRendererActing,
 } from 'react-reconciler/inline.test';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import warningWithoutStack from 'shared/warningWithoutStack';
-import {warnAboutMissingMockScheduler} from 'shared/ReactFeatureFlags';
 import enqueueTask from 'shared/enqueueTask';
 import * as Scheduler from 'scheduler';
 
-const {ReactCurrentActingRendererSigil} = ReactSharedInternals;
+const {IsSomeRendererActing} = ReactSharedInternals;
 
 // this implementation should be exactly the same in
 // ReactTestUtilsAct.js, ReactTestRendererAct.js, createReactNoop.js
 
-let hasWarnedAboutMissingMockScheduler = false;
+const isSchedulerMocked =
+  typeof Scheduler.unstable_flushAllWithoutAsserting === 'function';
 const flushWork =
-  Scheduler.unstable_flushWithoutYielding ||
+  Scheduler.unstable_flushAllWithoutAsserting ||
   function() {
-    if (warnAboutMissingMockScheduler === true) {
-      if (hasWarnedAboutMissingMockScheduler === false) {
-        warningWithoutStack(
-          null,
-          'Starting from React v17, the "scheduler" module will need to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. To fix this, add the following ' +
-            "to the top of your tests, or in your framework's global config file -\n\n" +
-            'As an example, for jest - \n' +
-            "jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://fb.me/react-mock-scheduler',
-        );
-        hasWarnedAboutMissingMockScheduler = true;
-      }
+    let didFlushWork = false;
+    while (flushPassiveEffects()) {
+      didFlushWork = true;
     }
-    while (flushPassiveEffects()) {}
+
+    return didFlushWork;
   };
 
 function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
@@ -64,24 +54,36 @@ function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
 // so we can tell if any async act() calls try to run in parallel.
 
 let actingUpdatesScopeDepth = 0;
+let didWarnAboutUsingActInProd = false;
 
 function act(callback: () => Thenable) {
+  if (!__DEV__) {
+    if (didWarnAboutUsingActInProd === false) {
+      didWarnAboutUsingActInProd = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.error(
+        'act(...) is not supported in production builds of React, and might not behave as expected.',
+      );
+    }
+  }
   let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  let previousActingUpdatesSigil;
+  let previousIsSomeRendererActing;
+  let previousIsThisRendererActing;
   actingUpdatesScopeDepth++;
-  if (__DEV__) {
-    previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-    ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
-  }
+
+  previousIsSomeRendererActing = IsSomeRendererActing.current;
+  previousIsThisRendererActing = IsThisRendererActing.current;
+  IsSomeRendererActing.current = true;
+  IsThisRendererActing.current = true;
 
   function onDone() {
     actingUpdatesScopeDepth--;
+    IsSomeRendererActing.current = previousIsSomeRendererActing;
+    IsThisRendererActing.current = previousIsThisRendererActing;
     if (__DEV__) {
-      ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
       if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
         // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-        warningWithoutStack(
-          null,
+        console.error(
           'You seem to have overlapping act() calls, this is not supported. ' +
             'Be sure to await previous act() calls before making a new one. ',
         );
@@ -89,7 +91,15 @@ function act(callback: () => Thenable) {
     }
   }
 
-  const result = batchedUpdates(callback);
+  let result;
+  try {
+    result = batchedUpdates(callback);
+  } catch (error) {
+    // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
+    onDone();
+    throw error;
+  }
+
   if (
     result !== null &&
     typeof result === 'object' &&
@@ -105,8 +115,7 @@ function act(callback: () => Thenable) {
           .then(() => {})
           .then(() => {
             if (called === false) {
-              warningWithoutStack(
-                null,
+              console.error(
                 'You called act(async () => ...) without await. ' +
                   'This could lead to unexpected testing behaviour, interleaving multiple act ' +
                   'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -124,7 +133,11 @@ function act(callback: () => Thenable) {
         called = true;
         result.then(
           () => {
-            if (actingUpdatesScopeDepth > 1) {
+            if (
+              actingUpdatesScopeDepth > 1 ||
+              (isSchedulerMocked === true &&
+                previousIsSomeRendererActing === true)
+            ) {
               onDone();
               resolve();
               return;
@@ -149,17 +162,21 @@ function act(callback: () => Thenable) {
     };
   } else {
     if (__DEV__) {
-      warningWithoutStack(
-        result === undefined,
-        'The callback passed to act(...) function ' +
-          'must return undefined, or a Promise. You returned %s',
-        result,
-      );
+      if (result !== undefined) {
+        console.error(
+          'The callback passed to act(...) function ' +
+            'must return undefined, or a Promise. You returned %s',
+          result,
+        );
+      }
     }
 
     // flush effects until none remain, and cleanup
     try {
-      if (actingUpdatesScopeDepth === 1) {
+      if (
+        actingUpdatesScopeDepth === 1 &&
+        (isSchedulerMocked === false || previousIsSomeRendererActing === false)
+      ) {
         // we're about to exit the act() scope,
         // now's the time to flush effects
         flushWork();
@@ -174,8 +191,7 @@ function act(callback: () => Thenable) {
     return {
       then(resolve: () => void) {
         if (__DEV__) {
-          warningWithoutStack(
-            false,
+          console.error(
             'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
           );
         }
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
index eb6d3d0de08ad..68c8299cfe963 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
@@ -433,22 +433,22 @@ describe('ReactShallowRenderer', () => {
     class Fragment extends React.Component {
       render() {
         return (
-          <React.Fragment>
+          <>
             <div />
             <span />
             <SomeComponent />
-          </React.Fragment>
+          </>
         );
       }
     }
     const shallowRenderer = createRenderer();
     const result = shallowRenderer.render(<Fragment />);
     expect(result).toEqual(
-      <React.Fragment>
+      <>
         <div />
         <span />
         <SomeComponent />
-      </React.Fragment>,
+      </>,
     );
   });
 
@@ -1195,7 +1195,7 @@ describe('ReactShallowRenderer', () => {
     }
 
     const shallowRenderer = createRenderer();
-    expect(() => shallowRenderer.render(<SimpleComponent />)).toWarnDev(
+    expect(() => shallowRenderer.render(<SimpleComponent />)).toErrorDev(
       'Warning: Failed context type: The context `name` is marked as ' +
         'required in `SimpleComponent`, but its value is `undefined`.\n' +
         '    in SimpleComponent (at **)',
@@ -1216,7 +1216,7 @@ describe('ReactShallowRenderer', () => {
     const shallowRenderer = createRenderer();
     expect(() =>
       shallowRenderer.render(React.createElement(SimpleComponent, {name: 123})),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: Invalid prop `name` of type `number` ' +
         'supplied to `SimpleComponent`, expected `string`.\n' +
         '    in SimpleComponent',
@@ -1344,7 +1344,7 @@ describe('ReactShallowRenderer', () => {
 
     const renderAndVerifyWarningAndError = (Component, typeString) => {
       expect(() => {
-        expect(() => shallowRenderer.render(<Component />)).toWarnDev(
+        expect(() => shallowRenderer.render(<Component />)).toErrorDev(
           'React.createElement: type is invalid -- expected a string ' +
             '(for built-in components) or a class/function (for composite components) ' +
             `but got: ${typeString}.`,
@@ -1555,7 +1555,7 @@ describe('ReactShallowRenderer', () => {
       expect(() => {
         const SomeComponent = React.forwardRef(SomeMemoComponent);
         shallowRenderer.render(<SomeComponent ref={testRef} />);
-      }).toWarnDev(
+      }).toErrorDev(
         'Warning: forwardRef requires a render function but received ' +
           'a `memo` component. Instead of forwardRef(memo(...)), use ' +
           'memo(forwardRef(...))',
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
index f9a08a1790483..9ed3bc681593b 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
@@ -436,22 +436,22 @@ describe('ReactShallowRendererMemo', () => {
     class Fragment extends React.Component {
       render() {
         return (
-          <React.Fragment>
+          <>
             <div />
             <span />
             <SomeComponent />
-          </React.Fragment>
+          </>
         );
       }
     }
     const shallowRenderer = createRenderer();
     const result = shallowRenderer.render(<Fragment />);
     expect(result).toEqual(
-      <React.Fragment>
+      <>
         <div />
         <span />
         <SomeComponent />
-      </React.Fragment>,
+      </>,
     );
   });
 
@@ -1242,7 +1242,7 @@ describe('ReactShallowRendererMemo', () => {
     );
 
     const shallowRenderer = createRenderer();
-    expect(() => shallowRenderer.render(<SimpleComponent />)).toWarnDev(
+    expect(() => shallowRenderer.render(<SimpleComponent />)).toErrorDev(
       'Warning: Failed context type: The context `name` is marked as ' +
         'required in `SimpleComponent`, but its value is `undefined`.\n' +
         '    in SimpleComponent (at **)',
@@ -1265,7 +1265,7 @@ describe('ReactShallowRendererMemo', () => {
     const shallowRenderer = createRenderer();
     expect(() =>
       shallowRenderer.render(React.createElement(SimpleComponent, {name: 123})),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: Invalid prop `name` of type `number` ' +
         'supplied to `SimpleComponent`, expected `string`.\n' +
         '    in SimpleComponent',
@@ -1401,7 +1401,7 @@ describe('ReactShallowRendererMemo', () => {
 
     const renderAndVerifyWarningAndError = (Component, typeString) => {
       expect(() => {
-        expect(() => shallowRenderer.render(<Component />)).toWarnDev(
+        expect(() => shallowRenderer.render(<Component />)).toErrorDev(
           'React.createElement: type is invalid -- expected a string ' +
             '(for built-in components) or a class/function (for composite components) ' +
             `but got: ${typeString}.`,
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
index 37820febaf67d..d9c8d5b1c5208 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
@@ -281,7 +281,7 @@ describe('ReactTestRenderer', () => {
       }
     }
     ReactTestRenderer.create(<Baz />);
-    expect(() => ReactTestRenderer.create(<Foo />)).toWarnDev(
+    expect(() => ReactTestRenderer.create(<Foo />)).toErrorDev(
       'Warning: Function components cannot be given refs. Attempts ' +
         'to access this ref will fail. ' +
         'Did you mean to use React.forwardRef()?\n\n' +
@@ -544,9 +544,9 @@ describe('ReactTestRenderer', () => {
 
   it('toTree() handles nested Fragments', () => {
     const Foo = () => (
-      <React.Fragment>
-        <React.Fragment>foo</React.Fragment>
-      </React.Fragment>
+      <>
+        <>foo</>
+      </>
     );
     const renderer = ReactTestRenderer.create(<Foo />);
     const tree = renderer.toTree();
@@ -707,16 +707,16 @@ describe('ReactTestRenderer', () => {
 
   it('toTree() handles complicated tree of fragments', () => {
     const renderer = ReactTestRenderer.create(
-      <React.Fragment>
-        <React.Fragment>
+      <>
+        <>
           <div>One</div>
           <div>Two</div>
-          <React.Fragment>
+          <>
             <div>Three</div>
-          </React.Fragment>
-        </React.Fragment>
+          </>
+        </>
         <div>Four</div>
-      </React.Fragment>,
+      </>,
     );
 
     const tree = renderer.toTree();
@@ -1022,20 +1022,4 @@ describe('ReactTestRenderer', () => {
     expect(Scheduler).toFlushWithoutYielding();
     ReactTestRenderer.create(<App />);
   });
-
-  // we run this test here because we need a dom-less scope
-  it('warns and throws if you use TestUtils.act instead of TestRenderer.act in node', () => {
-    // we warn when you try to load 2 renderers in the same 'scope'
-    // so as suggested, we call resetModules() to carry on with the test
-    jest.resetModules();
-    const {act} = require('react-dom/test-utils');
-    expect(() => {
-      expect(() => act(() => {})).toThrow('document is not defined');
-    }).toWarnDev(
-      [
-        'It looks like you called ReactTestUtils.act(...) in a non-browser environment',
-      ],
-      {withoutStack: 1},
-    );
-  });
 });
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
index 50de254aa3022..6f1536d7de13f 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
@@ -34,7 +34,7 @@ describe('ReactTestRenderer', () => {
       expect(() => {
         ReactTestRenderer.create(ReactDOM.createPortal('foo', container));
       }).toThrow();
-    }).toWarnDev('An invalid container has been provided.', {
+    }).toErrorDev('An invalid container has been provided.', {
       withoutStack: true,
     });
   });
@@ -72,7 +72,7 @@ describe('ReactTestRenderer', () => {
       const root = ReactTestRenderer.create(<App text="initial" />);
       PendingResources.initial('initial');
       await Promise.resolve();
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(root.toJSON()).toEqual('initial');
 
       root.update(<App text="dynamic" />);
@@ -80,7 +80,7 @@ describe('ReactTestRenderer', () => {
 
       PendingResources.dynamic('dynamic');
       await Promise.resolve();
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(root.toJSON()).toEqual('dynamic');
 
       done();
@@ -100,7 +100,7 @@ describe('ReactTestRenderer', () => {
       const root = ReactTestRenderer.create(<App text="initial" />);
       PendingResources.initial('initial');
       await Promise.resolve();
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(root.toJSON().children).toEqual(['initial']);
 
       root.update(<App text="dynamic" />);
@@ -108,7 +108,7 @@ describe('ReactTestRenderer', () => {
 
       PendingResources.dynamic('dynamic');
       await Promise.resolve();
-      Scheduler.flushAll();
+      Scheduler.unstable_flushAll();
       expect(root.toJSON().children).toEqual(['dynamic']);
 
       done();
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
index 9390c4ccfc74d..ccb3a47acae4c 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
@@ -50,7 +50,7 @@ describe('ReactTestRenderer.act()', () => {
 
     expect(() => {
       setCtr(1);
-    }).toWarnDev([
+    }).toErrorDev([
       'An update to App inside a test was not wrapped in act(...)',
     ]);
   });
@@ -92,9 +92,9 @@ describe('ReactTestRenderer.act()', () => {
         // This component will keep updating itself until step === 3
         const [step, proceed] = useReducer(s => (s === 3 ? 3 : s + 1), 1);
         useEffect(() => {
-          Scheduler.yieldValue('Effect');
+          Scheduler.unstable_yieldValue('Effect');
           alreadyResolvedPromise.then(() => {
-            Scheduler.yieldValue('Microtask');
+            Scheduler.unstable_yieldValue('Microtask');
             proceed();
           });
         });
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
index b88fcf89b262b..461490b096cf0 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
@@ -48,16 +48,16 @@ describe('ReactTestRendererAsync', () => {
 
   it('flushAll returns array of yielded values', () => {
     function Child(props) {
-      Scheduler.yieldValue(props.children);
+      Scheduler.unstable_yieldValue(props.children);
       return props.children;
     }
     function Parent(props) {
       return (
-        <React.Fragment>
+        <>
           <Child>{'A:' + props.step}</Child>
           <Child>{'B:' + props.step}</Child>
           <Child>{'C:' + props.step}</Child>
-        </React.Fragment>
+        </>
       );
     }
     const renderer = ReactTestRenderer.create(<Parent step={1} />, {
@@ -74,16 +74,16 @@ describe('ReactTestRendererAsync', () => {
 
   it('flushThrough flushes until the expected values is yielded', () => {
     function Child(props) {
-      Scheduler.yieldValue(props.children);
+      Scheduler.unstable_yieldValue(props.children);
       return props.children;
     }
     function Parent(props) {
       return (
-        <React.Fragment>
+        <>
           <Child>{'A:' + props.step}</Child>
           <Child>{'B:' + props.step}</Child>
           <Child>{'C:' + props.step}</Child>
-        </React.Fragment>
+        </>
       );
     }
     const renderer = ReactTestRenderer.create(<Parent step={1} />, {
@@ -102,7 +102,7 @@ describe('ReactTestRendererAsync', () => {
 
   it('supports high priority interruptions', () => {
     function Child(props) {
-      Scheduler.yieldValue(props.children);
+      Scheduler.unstable_yieldValue(props.children);
       return props.children;
     }
 
@@ -115,10 +115,10 @@ describe('ReactTestRendererAsync', () => {
       }
       render() {
         return (
-          <React.Fragment>
+          <>
             <Child>{'A:' + this.props.step}</Child>
             <Child>{'B:' + this.props.step}</Child>
-          </React.Fragment>
+          </>
         );
       }
     }
@@ -143,7 +143,7 @@ describe('ReactTestRendererAsync', () => {
   describe('Jest matchers', () => {
     it('toFlushAndYieldThrough', () => {
       const Yield = ({id}) => {
-        Scheduler.yieldValue(id);
+        Scheduler.unstable_yieldValue(id);
         return id;
       };
 
@@ -160,12 +160,12 @@ describe('ReactTestRendererAsync', () => {
 
       expect(() =>
         expect(Scheduler).toFlushAndYieldThrough(['foo', 'baz']),
-      ).toThrow('Expected value to equal:');
+      ).toThrow('// deep equality');
     });
 
     it('toFlushAndYield', () => {
       const Yield = ({id}) => {
-        Scheduler.yieldValue(id);
+        Scheduler.unstable_yieldValue(id);
         return id;
       };
 
@@ -181,7 +181,7 @@ describe('ReactTestRendererAsync', () => {
       );
 
       expect(() => expect(Scheduler).toFlushWithoutYielding()).toThrowError(
-        'Expected value to equal:',
+        '// deep equality',
       );
 
       renderer.update(
@@ -193,13 +193,13 @@ describe('ReactTestRendererAsync', () => {
       );
 
       expect(() => expect(Scheduler).toFlushAndYield(['foo', 'baz'])).toThrow(
-        'Expected value to equal:',
+        '// deep equality',
       );
     });
 
     it('toFlushAndThrow', () => {
       const Yield = ({id}) => {
-        Scheduler.yieldValue(id);
+        Scheduler.unstable_yieldValue(id);
         return id;
       };
 
@@ -238,7 +238,7 @@ describe('ReactTestRendererAsync', () => {
 
   it('toHaveYielded', () => {
     const Yield = ({id}) => {
-      Scheduler.yieldValue(id);
+      Scheduler.unstable_yieldValue(id);
       return id;
     };
 
@@ -254,7 +254,7 @@ describe('ReactTestRendererAsync', () => {
 
     ReactTestRenderer.create(<App />);
     expect(() => expect(Scheduler).toHaveYielded(['A', 'B'])).toThrow(
-      'Expected value to equal:',
+      '// deep equality',
     );
   });
 
@@ -262,7 +262,7 @@ describe('ReactTestRendererAsync', () => {
     ReactTestRenderer.create(<div />, {
       unstable_isConcurrent: true,
     });
-    Scheduler.yieldValue('Something');
+    Scheduler.unstable_yieldValue('Something');
     expect(() => expect(Scheduler).toFlushWithoutYielding()).toThrow(
       'Log of yielded values is not empty.',
     );
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
index bb20669a9263d..7c99254816996 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
@@ -42,17 +42,17 @@ describe('ReactTestRendererTraversal', () => {
             <React.Profiler id="test" onRender={() => {}}>
               <ExampleForwardRef qux="qux" />
             </React.Profiler>
-            <React.Fragment>
-              <React.Fragment>
+            <>
+              <>
                 <Context.Provider value={null}>
                   <Context.Consumer>
                     {() => <View nested={true} />}
                   </Context.Consumer>
                 </Context.Provider>
-              </React.Fragment>
+              </>
               <View nested={true} />
               <View nested={true} />
-            </React.Fragment>
+            </>
           </View>
         </View>
       );
@@ -212,10 +212,10 @@ describe('ReactTestRendererTraversal', () => {
     ).toBe(2);
     expect(
       ReactTestRenderer.create(
-        <React.Fragment>
+        <>
           <div />
           <div />
-        </React.Fragment>,
+        </>,
       ).root.findAllByType('div').length,
     ).toBe(2);
     expect(
diff --git a/packages/react/package.json b/packages/react/package.json
index e73700f41e8ec..a1d1a21e0d93d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "16.8.6",
+  "version": "16.12.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-dom/src/fire/ReactFireHostConfig.js b/packages/react/src/IsSomeRendererActing.js
similarity index 54%
rename from packages/react-dom/src/fire/ReactFireHostConfig.js
rename to packages/react/src/IsSomeRendererActing.js
index 129f511e31e34..b2462fc6c24ce 100644
--- a/packages/react-dom/src/fire/ReactFireHostConfig.js
+++ b/packages/react/src/IsSomeRendererActing.js
@@ -7,8 +7,11 @@
  * @flow
  */
 
-// This is just to get the setup running.
-// TODO: real implementation.
-// console.log('Hello from Fire host config.');
+/**
+ * Used by act() to track whether you're inside an act() scope.
+ */
 
-export * from '../client/ReactDOMHostConfig';
+const IsSomeRendererActing = {
+  current: (false: boolean),
+};
+export default IsSomeRendererActing;
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 7196344adef8e..ad515bd321dfc 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -11,10 +11,10 @@ import {
   REACT_PROFILER_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
 } from 'shared/ReactSymbols';
 
 import {Component, PureComponent} from './ReactBaseClasses';
-import {createEventComponent} from './ReactCreateEventComponent';
 import {createRef} from './ReactCreateRef';
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import {
@@ -28,6 +28,7 @@ import {createContext} from './ReactContext';
 import {lazy} from './ReactLazy';
 import forwardRef from './forwardRef';
 import memo from './memo';
+import chunk from './chunk';
 import {
   useCallback,
   useContext,
@@ -39,6 +40,9 @@ import {
   useReducer,
   useRef,
   useState,
+  useResponder,
+  useTransition,
+  useDeferredValue,
 } from './ReactHooks';
 import {withSuspenseConfig} from './ReactBatchConfig';
 import {
@@ -50,8 +54,18 @@ import {
   jsxWithValidationDynamic,
 } from './ReactElementValidator';
 import ReactSharedInternals from './ReactSharedInternals';
-import {error, warn} from './withComponentStack';
-import {enableEventAPI, enableJSXTransformAPI} from 'shared/ReactFeatureFlags';
+import createFundamental from 'shared/createFundamentalComponent';
+import createResponder from 'shared/createEventResponder';
+import createScope from 'shared/createScope';
+import {
+  enableJSXTransformAPI,
+  enableDeprecatedFlareAPI,
+  enableFundamentalAPI,
+  enableScopeAPI,
+  exposeConcurrentModeAPIs,
+  enableChunksAPI,
+  disableCreateFactory,
+} from 'shared/ReactFeatureFlags';
 const React = {
   Children: {
     map,
@@ -70,9 +84,6 @@ const React = {
   lazy,
   memo,
 
-  error,
-  warn,
-
   useCallback,
   useContext,
   useEffect,
@@ -91,25 +102,46 @@ const React = {
 
   createElement: __DEV__ ? createElementWithValidation : createElement,
   cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
-  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
   isValidElement: isValidElement,
 
   version: ReactVersion,
 
-  unstable_withSuspenseConfig: withSuspenseConfig,
-
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
 };
 
+if (!disableCreateFactory) {
+  React.createFactory = __DEV__ ? createFactoryWithValidation : createFactory;
+}
+
+if (exposeConcurrentModeAPIs) {
+  React.useTransition = useTransition;
+  React.useDeferredValue = useDeferredValue;
+  React.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+  React.unstable_withSuspenseConfig = withSuspenseConfig;
+}
+
+if (enableChunksAPI) {
+  React.chunk = chunk;
+}
+
+if (enableDeprecatedFlareAPI) {
+  React.DEPRECATED_useResponder = useResponder;
+  React.DEPRECATED_createResponder = createResponder;
+}
+
+if (enableFundamentalAPI) {
+  React.unstable_createFundamental = createFundamental;
+}
+
+if (enableScopeAPI) {
+  React.unstable_createScope = createScope;
+}
+
 // Note: some APIs are added with feature flags.
 // Make sure that stable builds for open source
 // don't modify the React object to avoid deopts.
 // Also let's not expose their names in stable builds.
 
-if (enableEventAPI) {
-  React.unstable_createEventComponent = createEventComponent;
-}
-
 if (enableJSXTransformAPI) {
   if (__DEV__) {
     React.jsxDEV = jsxWithValidation;
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
index 23be1d579ba95..94dbd19eb8110 100644
--- a/packages/react/src/ReactBaseClasses.js
+++ b/packages/react/src/ReactBaseClasses.js
@@ -6,7 +6,6 @@
  */
 
 import invariant from 'shared/invariant';
-import lowPriorityWarning from 'shared/lowPriorityWarning';
 
 import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
 
@@ -105,8 +104,7 @@ if (__DEV__) {
   const defineDeprecationWarning = function(methodName, info) {
     Object.defineProperty(Component.prototype, methodName, {
       get: function() {
-        lowPriorityWarning(
-          false,
+        console.warn(
           '%s(...) is deprecated in plain JavaScript React classes. %s',
           info[0],
           info[1],
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index ab17ebc83da79..5941e1a75150c 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -6,7 +6,6 @@
  */
 
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -162,12 +161,13 @@ function traverseAllChildrenImpl(
       if (__DEV__) {
         // Warn about using Maps as children
         if (iteratorFn === children.entries) {
-          warning(
-            didWarnAboutMaps,
-            'Using Maps as children is unsupported and will likely yield ' +
-              'unexpected results. Convert it to a sequence/iterable of keyed ' +
-              'ReactElements instead.',
-          );
+          if (!didWarnAboutMaps) {
+            console.error(
+              'Using Maps as children is unsupported and will likely yield ' +
+                'unexpected results. Convert it to a sequence/iterable of keyed ' +
+                'ReactElements instead.',
+            );
+          }
           didWarnAboutMaps = true;
         }
       }
diff --git a/packages/react/src/ReactContext.js b/packages/react/src/ReactContext.js
index 643a13019e074..cbcd3373c8166 100644
--- a/packages/react/src/ReactContext.js
+++ b/packages/react/src/ReactContext.js
@@ -11,9 +11,6 @@ import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import type {ReactContext} from 'shared/ReactTypes';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-import warning from 'shared/warning';
-
 export function createContext<T>(
   defaultValue: T,
   calculateChangedBits: ?(a: T, b: T) => number,
@@ -22,13 +19,16 @@ export function createContext<T>(
     calculateChangedBits = null;
   } else {
     if (__DEV__) {
-      warningWithoutStack(
-        calculateChangedBits === null ||
-          typeof calculateChangedBits === 'function',
-        'createContext: Expected the optional second argument to be a ' +
-          'function. Instead received: %s',
-        calculateChangedBits,
-      );
+      if (
+        calculateChangedBits !== null &&
+        typeof calculateChangedBits !== 'function'
+      ) {
+        console.error(
+          'createContext: Expected the optional second argument to be a ' +
+            'function. Instead received: %s',
+          calculateChangedBits,
+        );
+      }
     }
   }
 
@@ -73,8 +73,7 @@ export function createContext<T>(
         get() {
           if (!hasWarnedAboutUsingConsumerProvider) {
             hasWarnedAboutUsingConsumerProvider = true;
-            warning(
-              false,
+            console.error(
               'Rendering <Context.Consumer.Provider> is not supported and will be removed in ' +
                 'a future major release. Did you mean to render <Context.Provider> instead?',
             );
@@ -113,8 +112,7 @@ export function createContext<T>(
         get() {
           if (!hasWarnedAboutUsingNestedContextConsumers) {
             hasWarnedAboutUsingNestedContextConsumers = true;
-            warning(
-              false,
+            console.error(
               'Rendering <Context.Consumer.Consumer> is not supported and will be removed in ' +
                 'a future major release. Did you mean to render <Context.Consumer> instead?',
             );
diff --git a/packages/react/src/ReactCreateEventComponent.js b/packages/react/src/ReactCreateEventComponent.js
deleted file mode 100644
index 70bd83e989959..0000000000000
--- a/packages/react/src/ReactCreateEventComponent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * 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.
- * @flow
- */
-
-import type {ReactEventComponent, ReactEventResponder} from 'shared/ReactTypes';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
-
-export function createEventComponent(
-  responder: ReactEventResponder,
-  displayName: string,
-): ?ReactEventComponent {
-  if (enableEventAPI) {
-    if (__DEV__) {
-      Object.freeze(responder);
-    }
-    const eventComponent = {
-      $$typeof: REACT_EVENT_COMPONENT_TYPE,
-      displayName: displayName,
-      props: null,
-      responder: responder,
-    };
-    if (__DEV__) {
-      Object.freeze(eventComponent);
-    }
-    return eventComponent;
-  }
-}
diff --git a/packages/react/src/ReactCurrentActingRendererSigil.js b/packages/react/src/ReactCurrentActingRendererSigil.js
deleted file mode 100644
index 09e05c8362d7b..0000000000000
--- a/packages/react/src/ReactCurrentActingRendererSigil.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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.
- *
- * @flow
- */
-
-/**
- * Used by act() to track whether you're outside an act() scope.
- * We use a renderer's flushPassiveEffects as the sigil value
- * so we can track identity of the renderer.
- */
-
-const ReactCurrentActingRendererSigil = {
-  current: (null: null | (() => boolean)),
-};
-export default ReactCurrentActingRendererSigil;
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 9416a313b9648..9a0f208696d67 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
@@ -20,7 +20,13 @@ const RESERVED_PROPS = {
   __source: true,
 };
 
-let specialPropKeyWarningShown, specialPropRefWarningShown;
+let specialPropKeyWarningShown,
+  specialPropRefWarningShown,
+  didWarnAboutStringRefs;
+
+if (__DEV__) {
+  didWarnAboutStringRefs = {};
+}
 
 function hasValidRef(config) {
   if (__DEV__) {
@@ -48,16 +54,17 @@ function hasValidKey(config) {
 
 function defineKeyPropWarningGetter(props, displayName) {
   const warnAboutAccessingKey = function() {
-    if (!specialPropKeyWarningShown) {
-      specialPropKeyWarningShown = true;
-      warningWithoutStack(
-        false,
-        '%s: `key` is not a prop. Trying to access it will result ' +
-          'in `undefined` being returned. If you need to access the same ' +
-          'value within the child component, you should pass it as a different ' +
-          'prop. (https://fb.me/react-special-props)',
-        displayName,
-      );
+    if (__DEV__) {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+        console.error(
+          '%s: `key` is not a prop. Trying to access it will result ' +
+            'in `undefined` being returned. If you need to access the same ' +
+            'value within the child component, you should pass it as a different ' +
+            'prop. (https://fb.me/react-special-props)',
+          displayName,
+        );
+      }
     }
   };
   warnAboutAccessingKey.isReactWarning = true;
@@ -69,16 +76,17 @@ function defineKeyPropWarningGetter(props, displayName) {
 
 function defineRefPropWarningGetter(props, displayName) {
   const warnAboutAccessingRef = function() {
-    if (!specialPropRefWarningShown) {
-      specialPropRefWarningShown = true;
-      warningWithoutStack(
-        false,
-        '%s: `ref` is not a prop. Trying to access it will result ' +
-          'in `undefined` being returned. If you need to access the same ' +
-          'value within the child component, you should pass it as a different ' +
-          'prop. (https://fb.me/react-special-props)',
-        displayName,
-      );
+    if (__DEV__) {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+        console.error(
+          '%s: `ref` is not a prop. Trying to access it will result ' +
+            'in `undefined` being returned. If you need to access the same ' +
+            'value within the child component, you should pass it as a different ' +
+            'prop. (https://fb.me/react-special-props)',
+          displayName,
+        );
+      }
     }
   };
   warnAboutAccessingRef.isReactWarning = true;
@@ -88,10 +96,37 @@ function defineRefPropWarningGetter(props, displayName) {
   });
 }
 
+function warnIfStringRefCannotBeAutoConverted(config) {
+  if (__DEV__) {
+    if (
+      typeof config.ref === 'string' &&
+      ReactCurrentOwner.current &&
+      config.__self &&
+      ReactCurrentOwner.current.stateNode !== config.__self
+    ) {
+      const componentName = getComponentName(ReactCurrentOwner.current.type);
+
+      if (!didWarnAboutStringRefs[componentName]) {
+        console.error(
+          'Component "%s" contains the string ref "%s". ' +
+            'Support for string refs will be removed in a future major release. ' +
+            'This case cannot be automatically converted to an arrow function. ' +
+            'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
+            'Learn more about using refs safely here: ' +
+            'https://fb.me/react-strict-mode-string-ref',
+          getComponentName(ReactCurrentOwner.current.type),
+          config.ref,
+        );
+        didWarnAboutStringRefs[componentName] = true;
+      }
+    }
+  }
+}
+
 /**
  * Factory method to create a new React element. This no longer adheres to
- * the class pattern, so do not use new to call it. Also, no instanceof check
- * will work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * the class pattern, so do not use new to call it. Also, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
  * if something is a React Element.
  *
  * @param {*} type
@@ -179,14 +214,24 @@ export function jsx(type, config, maybeKey) {
   let key = null;
   let ref = null;
 
-  if (hasValidRef(config)) {
-    ref = config.ref;
+  // Currently, key can be spread in as a prop. This causes a potential
+  // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+  // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+  // but as an intermediary step, we will use jsxDEV for everything except
+  // <div {...props} key="Hi" />, because we aren't currently able to tell if
+  // key is explicitly declared to be undefined or not.
+  if (maybeKey !== undefined) {
+    key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
     key = '' + config.key;
   }
 
+  if (hasValidRef(config)) {
+    ref = config.ref;
+  }
+
   // Remaining properties are added to a new props object
   for (propName in config) {
     if (
@@ -197,12 +242,6 @@ export function jsx(type, config, maybeKey) {
     }
   }
 
-  // intentionally not checking if key was set above
-  // this key is higher priority as it's static
-  if (maybeKey !== undefined) {
-    key = '' + maybeKey;
-  }
-
   // Resolve default props
   if (type && type.defaultProps) {
     const defaultProps = type.defaultProps;
@@ -239,14 +278,25 @@ export function jsxDEV(type, config, maybeKey, source, self) {
   let key = null;
   let ref = null;
 
-  if (hasValidRef(config)) {
-    ref = config.ref;
+  // Currently, key can be spread in as a prop. This causes a potential
+  // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+  // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+  // but as an intermediary step, we will use jsxDEV for everything except
+  // <div {...props} key="Hi" />, because we aren't currently able to tell if
+  // key is explicitly declared to be undefined or not.
+  if (maybeKey !== undefined) {
+    key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
     key = '' + config.key;
   }
 
+  if (hasValidRef(config)) {
+    ref = config.ref;
+    warnIfStringRefCannotBeAutoConverted(config);
+  }
+
   // Remaining properties are added to a new props object
   for (propName in config) {
     if (
@@ -257,12 +307,6 @@ export function jsxDEV(type, config, maybeKey, source, self) {
     }
   }
 
-  // intentionally not checking if key was set above
-  // this key is higher priority as it's static
-  if (maybeKey !== undefined) {
-    key = '' + maybeKey;
-  }
-
   // Resolve default props
   if (type && type.defaultProps) {
     const defaultProps = type.defaultProps;
@@ -315,6 +359,10 @@ export function createElement(type, config, children) {
   if (config != null) {
     if (hasValidRef(config)) {
       ref = config.ref;
+
+      if (__DEV__) {
+        warnIfStringRefCannotBeAutoConverted(config);
+      }
     }
     if (hasValidKey(config)) {
       key = '' + config.key;
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index 6a1626a2e27e8..fa00f30d47d91 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -12,7 +12,6 @@
  * that support it.
  */
 
-import lowPriorityWarning from 'shared/lowPriorityWarning';
 import isValidElementType from 'shared/isValidElementType';
 import getComponentName from 'shared/getComponentName';
 import {
@@ -23,8 +22,6 @@ import {
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
 import checkPropTypes from 'prop-types/checkPropTypes';
-import warning from 'shared/warning';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -43,6 +40,8 @@ if (__DEV__) {
   propTypesMisspellWarningShown = false;
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function getDeclarationErrorAddendum() {
   if (ReactCurrentOwner.current) {
     const name = getComponentName(ReactCurrentOwner.current.type);
@@ -131,8 +130,7 @@ function validateExplicitKey(element, parentType) {
 
   setCurrentlyValidatingElement(element);
   if (__DEV__) {
-    warning(
-      false,
+    console.error(
       'Each child in a list should have a unique "key" prop.' +
         '%s%s See https://fb.me/react-warning-keys for more information.',
       currentComponentErrorInfo,
@@ -192,49 +190,52 @@ function validateChildKeys(node, parentType) {
  * @param {ReactElement} element
  */
 function validatePropTypes(element) {
-  const type = element.type;
-  if (type === null || type === undefined || typeof type === 'string') {
-    return;
-  }
-  const name = getComponentName(type);
-  let propTypes;
-  if (typeof type === 'function') {
-    propTypes = type.propTypes;
-  } else if (
-    typeof type === 'object' &&
-    (type.$$typeof === REACT_FORWARD_REF_TYPE ||
-      // Note: Memo only checks outer props here.
-      // Inner props are checked in the reconciler.
-      type.$$typeof === REACT_MEMO_TYPE)
-  ) {
-    propTypes = type.propTypes;
-  } else {
-    return;
-  }
-  if (propTypes) {
-    setCurrentlyValidatingElement(element);
-    checkPropTypes(
-      propTypes,
-      element.props,
-      'prop',
-      name,
-      ReactDebugCurrentFrame.getStackAddendum,
-    );
-    setCurrentlyValidatingElement(null);
-  } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
-    propTypesMisspellWarningShown = true;
-    warningWithoutStack(
-      false,
-      'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
-      name || 'Unknown',
-    );
-  }
-  if (typeof type.getDefaultProps === 'function') {
-    warningWithoutStack(
-      type.getDefaultProps.isReactClassApproved,
-      'getDefaultProps is only used on classic React.createClass ' +
-        'definitions. Use a static property named `defaultProps` instead.',
-    );
+  if (__DEV__) {
+    const type = element.type;
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+    const name = getComponentName(type);
+    let propTypes;
+    if (typeof type === 'function') {
+      propTypes = type.propTypes;
+    } else if (
+      typeof type === 'object' &&
+      (type.$$typeof === REACT_FORWARD_REF_TYPE ||
+        // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        type.$$typeof === REACT_MEMO_TYPE)
+    ) {
+      propTypes = type.propTypes;
+    } else {
+      return;
+    }
+    if (propTypes) {
+      setCurrentlyValidatingElement(element);
+      checkPropTypes(
+        propTypes,
+        element.props,
+        'prop',
+        name,
+        ReactDebugCurrentFrame.getStackAddendum,
+      );
+      setCurrentlyValidatingElement(null);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true;
+      console.error(
+        'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
+        name || 'Unknown',
+      );
+    }
+    if (
+      typeof type.getDefaultProps === 'function' &&
+      !type.getDefaultProps.isReactClassApproved
+    ) {
+      console.error(
+        'getDefaultProps is only used on classic React.createClass ' +
+          'definitions. Use a static property named `defaultProps` instead.',
+      );
+    }
   }
 }
 
@@ -243,27 +244,28 @@ function validatePropTypes(element) {
  * @param {ReactElement} fragment
  */
 function validateFragmentProps(fragment) {
-  setCurrentlyValidatingElement(fragment);
-
-  const keys = Object.keys(fragment.props);
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-    if (key !== 'children' && key !== 'key') {
-      warning(
-        false,
-        'Invalid prop `%s` supplied to `React.Fragment`. ' +
-          'React.Fragment can only have `key` and `children` props.',
-        key,
-      );
-      break;
+  if (__DEV__) {
+    setCurrentlyValidatingElement(fragment);
+
+    const keys = Object.keys(fragment.props);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (key !== 'children' && key !== 'key') {
+        console.error(
+          'Invalid prop `%s` supplied to `React.Fragment`. ' +
+            'React.Fragment can only have `key` and `children` props.',
+          key,
+        );
+        break;
+      }
     }
-  }
 
-  if (fragment.ref !== null) {
-    warning(false, 'Invalid attribute `ref` supplied to `React.Fragment`.');
-  }
+    if (fragment.ref !== null) {
+      console.error('Invalid attribute `ref` supplied to `React.Fragment`.');
+    }
 
-  setCurrentlyValidatingElement(null);
+    setCurrentlyValidatingElement(null);
+  }
 }
 
 export function jsxWithValidation(
@@ -311,14 +313,15 @@ export function jsxWithValidation(
       typeString = typeof type;
     }
 
-    warning(
-      false,
-      'React.jsx: type is invalid -- expected a string (for ' +
-        'built-in components) or a class/function (for composite ' +
-        'components) but got: %s.%s',
-      typeString,
-      info,
-    );
+    if (__DEV__) {
+      console.error(
+        'React.jsx: type is invalid -- expected a string (for ' +
+          'built-in components) or a class/function (for composite ' +
+          'components) but got: %s.%s',
+        typeString,
+        info,
+      );
+    }
   }
 
   const element = jsxDEV(type, props, key, source, self);
@@ -334,12 +337,27 @@ export function jsxWithValidation(
   // We don't want exception behavior to differ between dev and prod.
   // (Rendering will throw with a helpful message and as soon as the type is
   // fixed, the key warnings will appear.)
+
   if (validType) {
     const children = props.children;
     if (children !== undefined) {
       if (isStaticChildren) {
-        for (let i = 0; i < children.length; i++) {
-          validateChildKeys(children[i], type);
+        if (Array.isArray(children)) {
+          for (let i = 0; i < children.length; i++) {
+            validateChildKeys(children[i], type);
+          }
+
+          if (Object.freeze) {
+            Object.freeze(children);
+          }
+        } else {
+          if (__DEV__) {
+            console.error(
+              'React.jsx: Static children should always be an array. ' +
+                'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
+                'Use the Babel transform instead.',
+            );
+          }
         }
       } else {
         validateChildKeys(children, type);
@@ -347,13 +365,14 @@ export function jsxWithValidation(
     }
   }
 
-  if (props.key !== undefined) {
-    warning(
-      false,
-      'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
-        'Explicitly pass a key after spreading props in your JSX call. ' +
-        'E.g. <ComponentName {...props} key={key} />',
-    );
+  if (hasOwnProperty.call(props, 'key')) {
+    if (__DEV__) {
+      console.error(
+        'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
+          'Explicitly pass a key after spreading props in your JSX call. ' +
+          'E.g. <ComponentName {...props} key={key} />',
+      );
+    }
   }
 
   if (type === REACT_FRAGMENT_TYPE) {
@@ -415,14 +434,15 @@ export function createElementWithValidation(type, props, children) {
       typeString = typeof type;
     }
 
-    warning(
-      false,
-      'React.createElement: type is invalid -- expected a string (for ' +
-        'built-in components) or a class/function (for composite ' +
-        'components) but got: %s.%s',
-      typeString,
-      info,
-    );
+    if (__DEV__) {
+      console.error(
+        'React.createElement: type is invalid -- expected a string (for ' +
+          'built-in components) or a class/function (for composite ' +
+          'components) but got: %s.%s',
+        typeString,
+        info,
+      );
+    }
   }
 
   const element = createElement.apply(this, arguments);
@@ -453,16 +473,25 @@ export function createElementWithValidation(type, props, children) {
   return element;
 }
 
+let didWarnAboutDeprecatedCreateFactory = false;
+
 export function createFactoryWithValidation(type) {
   const validatedFactory = createElementWithValidation.bind(null, type);
   validatedFactory.type = type;
-  // Legacy hook: remove it
   if (__DEV__) {
+    if (!didWarnAboutDeprecatedCreateFactory) {
+      didWarnAboutDeprecatedCreateFactory = true;
+      console.warn(
+        'React.createFactory() is deprecated and will be removed in ' +
+          'a future major release. Consider using JSX ' +
+          'or use React.createElement() directly instead.',
+      );
+    }
+    // Legacy hook: remove it
     Object.defineProperty(validatedFactory, 'type', {
       enumerable: false,
       get: function() {
-        lowPriorityWarning(
-          false,
+        console.warn(
           'Factory.type is deprecated. Access the class directly ' +
             'before passing it to createFactory.',
         );
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 9c325b32a4321..c725b0e7c54e0 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -7,12 +7,19 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactEventResponder,
+  ReactEventResponderListener,
+} from 'shared/ReactTypes';
 import invariant from 'shared/invariant';
-import warning from 'shared/warning';
+import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 
+type BasicStateAction<S> = (S => S) | S;
+type Dispatch<A> = A => void;
+
 function resolveDispatcher() {
   const dispatcher = ReactCurrentDispatcher.current;
   invariant(
@@ -33,18 +40,19 @@ export function useContext<T>(
 ) {
   const dispatcher = resolveDispatcher();
   if (__DEV__) {
-    warning(
-      unstable_observedBits === undefined,
-      'useContext() second argument is reserved for future ' +
-        'use in React. Passing it is not supported. ' +
-        'You passed: %s.%s',
-      unstable_observedBits,
-      typeof unstable_observedBits === 'number' && Array.isArray(arguments[2])
-        ? '\n\nDid you call array.map(useContext)? ' +
-          'Calling Hooks inside a loop is not supported. ' +
-          'Learn more at https://fb.me/rules-of-hooks'
-        : '',
-    );
+    if (unstable_observedBits !== undefined) {
+      console.error(
+        'useContext() second argument is reserved for future ' +
+          'use in React. Passing it is not supported. ' +
+          'You passed: %s.%s',
+        unstable_observedBits,
+        typeof unstable_observedBits === 'number' && Array.isArray(arguments[2])
+          ? '\n\nDid you call array.map(useContext)? ' +
+              'Calling Hooks inside a loop is not supported. ' +
+              'Learn more at https://fb.me/rules-of-hooks'
+          : '',
+      );
+    }
 
     // TODO: add a more generic warning for invalid values.
     if ((Context: any)._context !== undefined) {
@@ -52,14 +60,12 @@ export function useContext<T>(
       // Don't deduplicate because this legitimately causes bugs
       // and nobody should be using this in existing code.
       if (realContext.Consumer === Context) {
-        warning(
-          false,
+        console.error(
           'Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +
             'removed in a future major release. Did you mean to call useContext(Context) instead?',
         );
       } else if (realContext.Provider === Context) {
-        warning(
-          false,
+        console.error(
           'Calling useContext(Context.Provider) is not supported. ' +
             'Did you mean to call useContext(Context) instead?',
         );
@@ -69,7 +75,9 @@ export function useContext<T>(
   return dispatcher.useContext(Context, unstable_observedBits);
 }
 
-export function useState<S>(initialState: (() => S) | S) {
+export function useState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
   const dispatcher = resolveDispatcher();
   return dispatcher.useState(initialState);
 }
@@ -78,60 +86,94 @@ export function useReducer<S, I, A>(
   reducer: (S, A) => S,
   initialArg: I,
   init?: I => S,
-) {
+): [S, Dispatch<A>] {
   const dispatcher = resolveDispatcher();
   return dispatcher.useReducer(reducer, initialArg, init);
 }
 
-export function useRef<T>(initialValue: T): {current: T} {
+export function useRef<T>(initialValue: T): {|current: T|} {
   const dispatcher = resolveDispatcher();
   return dispatcher.useRef(initialValue);
 }
 
 export function useEffect(
   create: () => (() => void) | void,
-  inputs: Array<mixed> | void | null,
-) {
+  deps: Array<mixed> | void | null,
+): void {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useEffect(create, inputs);
+  return dispatcher.useEffect(create, deps);
 }
 
 export function useLayoutEffect(
   create: () => (() => void) | void,
-  inputs: Array<mixed> | void | null,
-) {
+  deps: Array<mixed> | void | null,
+): void {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useLayoutEffect(create, inputs);
+  return dispatcher.useLayoutEffect(create, deps);
 }
 
-export function useCallback(
-  callback: () => mixed,
-  inputs: Array<mixed> | void | null,
-) {
+export function useCallback<T>(
+  callback: T,
+  deps: Array<mixed> | void | null,
+): T {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useCallback(callback, inputs);
+  return dispatcher.useCallback(callback, deps);
 }
 
-export function useMemo(
-  create: () => mixed,
-  inputs: Array<mixed> | void | null,
-) {
+export function useMemo<T>(
+  create: () => T,
+  deps: Array<mixed> | void | null,
+): T {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useMemo(create, inputs);
+  return dispatcher.useMemo(create, deps);
 }
 
 export function useImperativeHandle<T>(
-  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
-  inputs: Array<mixed> | void | null,
+  deps: Array<mixed> | void | null,
 ): void {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useImperativeHandle(ref, create, inputs);
+  return dispatcher.useImperativeHandle(ref, create, deps);
 }
 
-export function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
+export function useDebugValue<T>(
+  value: T,
+  formatterFn: ?(value: T) => mixed,
+): void {
   if (__DEV__) {
     const dispatcher = resolveDispatcher();
     return dispatcher.useDebugValue(value, formatterFn);
   }
 }
+
+export const emptyObject = {};
+
+export function useResponder(
+  responder: ReactEventResponder<any, any>,
+  listenerProps: ?Object,
+): ?ReactEventResponderListener<any, any> {
+  const dispatcher = resolveDispatcher();
+  if (__DEV__) {
+    if (responder == null || responder.$$typeof !== REACT_RESPONDER_TYPE) {
+      console.error(
+        'useResponder: invalid first argument. Expected an event responder, but instead got %s',
+        responder,
+      );
+      return;
+    }
+  }
+  return dispatcher.useResponder(responder, listenerProps || emptyObject);
+}
+
+export function useTransition(
+  config: ?Object,
+): [(() => void) => void, boolean] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useTransition(config);
+}
+
+export function useDeferredValue<T>(value: T, config: ?Object): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useDeferredValue(value, config);
+}
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 2014fec66ce94..c804c53741a60 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -8,7 +8,6 @@
 import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';
 
 import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
-import warning from 'shared/warning';
 
 export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
   let lazyType = {
@@ -30,8 +29,7 @@ export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
           return defaultProps;
         },
         set(newDefaultProps) {
-          warning(
-            false,
+          console.error(
             'React.lazy(...): It is not supported to assign `defaultProps` to ' +
               'a lazy component import. Either specify them where the component ' +
               'is defined, or create a wrapping component around it.',
@@ -49,8 +47,7 @@ export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
           return propTypes;
         },
         set(newPropTypes) {
-          warning(
-            false,
+          console.error(
             'React.lazy(...): It is not supported to assign `propTypes` to ' +
               'a lazy component import. Either specify them where the component ' +
               'is defined, or create a wrapping component around it.',
diff --git a/packages/react/src/ReactNoopUpdateQueue.js b/packages/react/src/ReactNoopUpdateQueue.js
index 8d227dab5d919..a7f4611ab0fb4 100644
--- a/packages/react/src/ReactNoopUpdateQueue.js
+++ b/packages/react/src/ReactNoopUpdateQueue.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-
 const didWarnStateUpdateForUnmountedComponent = {};
 
 function warnNoop(publicInstance, callerName) {
@@ -19,8 +17,7 @@ function warnNoop(publicInstance, callerName) {
     if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
       return;
     }
-    warningWithoutStack(
-      false,
+    console.error(
       "Can't call %s on a component that is not yet mounted. " +
         'This is a no-op, but it might indicate a bug in your application. ' +
         'Instead, assign to `this.state` directly or define a `state = {};` ' +
diff --git a/packages/react/src/ReactSharedInternals.js b/packages/react/src/ReactSharedInternals.js
index 1d993139c4194..9209a86a954fc 100644
--- a/packages/react/src/ReactSharedInternals.js
+++ b/packages/react/src/ReactSharedInternals.js
@@ -10,13 +10,13 @@ import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
 import ReactCurrentOwner from './ReactCurrentOwner';
 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
-import ReactCurrentActingRendererSigil from './ReactCurrentActingRendererSigil';
+import IsSomeRendererActing from './IsSomeRendererActing';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentBatchConfig,
   ReactCurrentOwner,
-  ReactCurrentActingRendererSigil,
+  IsSomeRendererActing,
   // Used by renderers to avoid bundling object-assign twice in UMD bundles:
   assign,
 };
diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
index 68165197ef12d..06aaf633f3d7d 100644
--- a/packages/react/src/__tests__/ReactChildren-test.js
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -319,7 +319,7 @@ describe('ReactChildren', () => {
     });
 
     let instance;
-    expect(() => (instance = <div>{threeDivIterable}</div>)).toWarnDev(
+    expect(() => (instance = <div>{threeDivIterable}</div>)).toErrorDev(
       'Warning: Each child in a list should have a unique "key" prop.',
     );
 
@@ -903,7 +903,7 @@ describe('ReactChildren', () => {
 
       expect(() =>
         ReactTestUtils.renderIntoDocument(<ComponentReturningArray />),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: ' +
           'Each child in a list should have a unique "key" prop.' +
           ' See https://fb.me/react-warning-keys for more information.' +
@@ -924,7 +924,7 @@ describe('ReactChildren', () => {
     it('warns for keys for arrays at the top level', () => {
       expect(() =>
         ReactTestUtils.renderIntoDocument([<div />, <div />]),
-      ).toWarnDev(
+      ).toErrorDev(
         'Warning: ' +
           'Each child in a list should have a unique "key" prop.' +
           ' See https://fb.me/react-warning-keys for more information.',
diff --git a/packages/react/src/__tests__/ReactClassEquivalence-test.js b/packages/react/src/__tests__/ReactClassEquivalence-test.js
index 963403e535193..d4815792add8b 100644
--- a/packages/react/src/__tests__/ReactClassEquivalence-test.js
+++ b/packages/react/src/__tests__/ReactClassEquivalence-test.js
@@ -28,7 +28,13 @@ describe('ReactClassEquivalence', () => {
 function runJest(testFile) {
   const cwd = process.cwd();
   const extension = process.platform === 'win32' ? '.cmd' : '';
-  const result = spawnSync('yarn' + extension, ['test', testFile], {
+  const command = process.env.npm_lifecycle_event;
+  if (!command.startsWith('test')) {
+    throw new Error(
+      'Expected this test to run as a result of one of test commands.',
+    );
+  }
+  const result = spawnSync('yarn' + extension, [command, testFile], {
     cwd,
     env: Object.assign({}, process.env, {
       REACT_CLASS_EQUIVALENCE_TEST: 'true',
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 813082c9a552a..c07f7e4b990bd 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -10,10 +10,8 @@ ReactDOM = null
 PropTypes = null
 
 describe 'ReactCoffeeScriptClass', ->
-  div = null
-  span = null
   container = null
-  Inner = null
+  InnerComponent = null
   attachedListener = null;
   renderedName = null;
 
@@ -24,15 +22,12 @@ describe 'ReactCoffeeScriptClass', ->
     container = document.createElement 'div'
     attachedListener = null
     renderedName = null
-    div = React.createFactory 'div'
-    span = React.createFactory 'span'
-    class InnerComponent extends React.Component
+    InnerComponent = class extends React.Component
       getName: -> this.props.name
       render: ->
         attachedListener = this.props.onClick
         renderedName = this.props.name
-        return div className: this.props.name
-    Inner = React.createFactory InnerComponent
+        return React.createElement('div', className: this.props.name)
 
   test = (element, expectedTag, expectedClassName) ->
     instance = ReactDOM.render(element, container)
@@ -51,18 +46,19 @@ describe 'ReactCoffeeScriptClass', ->
       expect(->
         ReactDOM.render React.createElement(Foo), container
       ).toThrow()
-    ).toWarnDev([
+    ).toErrorDev([
       # A failed component renders twice in DEV
       'No `render` method found on the returned component instance',
       'No `render` method found on the returned component instance',
-    ], {withoutStack: true})
+    ])
     undefined
 
   it 'renders a simple stateless component with prop', ->
     class Foo extends React.Component
       render: ->
-        Inner
+        React.createElement(InnerComponent,
           name: @props.bar
+        )
 
     test React.createElement(Foo, bar: 'foo'), 'DIV', 'foo'
     test React.createElement(Foo, bar: 'bar'), 'DIV', 'bar'
@@ -75,8 +71,9 @@ describe 'ReactCoffeeScriptClass', ->
         @state = bar: @props.initialValue
 
       render: ->
-        span
+        React.createElement('span',
           className: @state.bar
+        )
 
     test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'foo'
     undefined
@@ -91,11 +88,12 @@ describe 'ReactCoffeeScriptClass', ->
 
       render: ->
         if @state.bar is 'foo'
-          return div(
+          return React.createElement('div',
             className: 'foo'
           )
-        span
+        React.createElement('span',
           className: @state.bar
+        )
 
     instance = test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
     instance.changeState()
@@ -108,8 +106,9 @@ describe 'ReactCoffeeScriptClass', ->
         super props
         @state = foo: null
       render: ->
-        div
+        React.createElement('div',
           className: "#{@state.foo} #{@state.bar}"
+        )
     Foo.getDerivedStateFromProps = (nextProps, prevState) ->
       {
         foo: nextProps.foo
@@ -121,41 +120,42 @@ describe 'ReactCoffeeScriptClass', ->
   it 'warns if getDerivedStateFromProps is not static', ->
     class Foo extends React.Component
       render: ->
-        div()
+        React.createElement('div')
       getDerivedStateFromProps: ->
         {}
     expect(->
       ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
-    ).toWarnDev 'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.', {withoutStack: true}
+    ).toErrorDev 'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
     undefined
 
   it 'warns if getDerivedStateFromError is not static', ->
     class Foo extends React.Component
       render: ->
-        div()
+        React.createElement('div')
       getDerivedStateFromError: ->
         {}
     expect(->
       ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
-    ).toWarnDev 'Foo: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.', {withoutStack: true}
+    ).toErrorDev 'Foo: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
     undefined
 
   it 'warns if getSnapshotBeforeUpdate is static', ->
     class Foo extends React.Component
       render: ->
-        div()
+        React.createElement('div')
     Foo.getSnapshotBeforeUpdate = () ->
       {}
     expect(->
       ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
-    ).toWarnDev 'Foo: getSnapshotBeforeUpdate() is defined as a static method and will be ignored. Instead, declare it as an instance method.', {withoutStack: true}
+    ).toErrorDev 'Foo: getSnapshotBeforeUpdate() is defined as a static method and will be ignored. Instead, declare it as an instance method.'
     undefined
 
   it 'warns if state not initialized before static getDerivedStateFromProps', ->
     class Foo extends React.Component
       render: ->
-        div
+        React.createElement('div',
           className: "#{@state.foo} #{@state.bar}"
+        )
     Foo.getDerivedStateFromProps = (nextProps, prevState) ->
       {
         foo: nextProps.foo
@@ -163,12 +163,12 @@ describe 'ReactCoffeeScriptClass', ->
       }
     expect(->
       ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
-    ).toWarnDev (
+    ).toErrorDev (
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
       'undefined. This is not recommended. Instead, define the initial state by ' +
       'assigning an object to `this.state` in the constructor of `Foo`. ' +
       'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'
-    ), {withoutStack: true}
+    )
     undefined
 
   it 'updates initial state with values returned by static getDerivedStateFromProps', ->
@@ -179,8 +179,9 @@ describe 'ReactCoffeeScriptClass', ->
           foo: 'foo'
           bar: 'bar'
       render: ->
-        div
+        React.createElement('div',
           className: "#{@state.foo} #{@state.bar}"
+        )
     Foo.getDerivedStateFromProps = (nextProps, prevState) ->
       {
         foo: "not-#{prevState.foo}"
@@ -195,8 +196,9 @@ describe 'ReactCoffeeScriptClass', ->
         @state =
           value: 'initial'
       render: ->
-        div
+        React.createElement('div',
           className: @state.value
+        )
     Foo.getDerivedStateFromProps = (nextProps, prevState) ->
       if nextProps.update
         return {
@@ -250,7 +252,7 @@ describe 'ReactCoffeeScriptClass', ->
 
       render: ->
         renderCount++
-        span className: @state.bar
+        React.createElement('span', className: @state.bar)
 
     test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'bar'
     expect(renderCount).toBe 1
@@ -263,11 +265,11 @@ describe 'ReactCoffeeScriptClass', ->
           @state = state
 
         render: ->
-          span()
+          React.createElement('span')
 
       expect(->
         test React.createElement(Foo), 'SPAN', ''
-      ).toWarnDev('Foo.state: must be set to an object or null', {withoutStack: true})
+      ).toErrorDev('Foo.state: must be set to an object or null')
     undefined
 
   it 'should render with null in the initial state property', ->
@@ -276,7 +278,7 @@ describe 'ReactCoffeeScriptClass', ->
         @state = null
 
       render: ->
-        span()
+        React.createElement('span')
 
     test React.createElement(Foo), 'SPAN', ''
     undefined
@@ -290,9 +292,10 @@ describe 'ReactCoffeeScriptClass', ->
         @setState bar: 'bar'
 
       render: ->
-        Inner
+        React.createElement(InnerComponent,
           name: @state.bar
           onClick: @handleClick
+        )
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
     attachedListener()
@@ -308,9 +311,10 @@ describe 'ReactCoffeeScriptClass', ->
         @setState bar: 'bar'
 
       render: ->
-        Inner
+        React.createElement(InnerComponent,
           name: @state.bar
           onClick: @handleClick
+        )
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
     expect(attachedListener).toThrow()
@@ -326,9 +330,10 @@ describe 'ReactCoffeeScriptClass', ->
         @forceUpdate()
 
       render: ->
-        Inner
+        React.createElement(InnerComponent,
           name: @mutativeValue
           onClick: @handleClick
+        )
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
     attachedListener()
@@ -364,8 +369,9 @@ describe 'ReactCoffeeScriptClass', ->
         lifeCycles.push 'will-unmount'
 
       render: ->
-        span
+        React.createElement('span',
           className: @props.value
+        )
 
     test React.createElement(Foo, value: 'foo'), 'SPAN', 'foo'
     expect(lifeCycles).toEqual [
@@ -404,18 +410,19 @@ describe 'ReactCoffeeScriptClass', ->
         {}
 
       render: ->
-        span
+        React.createElement('span',
           className: 'foo'
+        )
 
     expect(->
       test React.createElement(Foo), 'SPAN', 'foo'
-    ).toWarnDev([
+    ).toErrorDev([
       'getInitialState was defined on Foo, a plain JavaScript class.',
       'getDefaultProps was defined on Foo, a plain JavaScript class.',
       'propTypes was defined as an instance property on Foo.',
       'contextTypes was defined as an instance property on Foo.',
       'contextType was defined as an instance property on Foo.',
-    ], {withoutStack: true})
+    ])
     expect(getInitialStateWasCalled).toBe false
     expect(getDefaultPropsWasCalled).toBe false
     undefined
@@ -431,8 +438,9 @@ describe 'ReactCoffeeScriptClass', ->
         {}
 
       render: ->
-        span
+        React.createElement('span',
           className: 'foo'
+        )
 
     test React.createElement(Foo), 'SPAN', 'foo'
     undefined
@@ -443,16 +451,16 @@ describe 'ReactCoffeeScriptClass', ->
         false
 
       render: ->
-        span
+        React.createElement('span',
           className: 'foo'
+        )
 
     expect(->
       test React.createElement(NamedComponent), 'SPAN', 'foo'
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: NamedComponent has a method called componentShouldUpdate().
        Did you mean shouldComponentUpdate()? The name is phrased as a
-       question because the function is expected to return a value.',
-       {withoutStack: true}
+       question because the function is expected to return a value.'
     )
     undefined
 
@@ -462,15 +470,15 @@ describe 'ReactCoffeeScriptClass', ->
         false
 
       render: ->
-        span
+        React.createElement('span',
           className: 'foo'
+        )
 
     expect(->
       test React.createElement(NamedComponent), 'SPAN', 'foo'
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: NamedComponent has a method called componentWillRecieveProps().
-       Did you mean componentWillReceiveProps()?',
-       {withoutStack: true}
+       Did you mean componentWillReceiveProps()?'
     )
     undefined
 
@@ -480,30 +488,30 @@ describe 'ReactCoffeeScriptClass', ->
         false
 
       render: ->
-        span
+        React.createElement('span',
           className: 'foo'
+        )
 
     expect(->
       test React.createElement(NamedComponent), 'SPAN', 'foo'
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: NamedComponent has a method called UNSAFE_componentWillRecieveProps().
-       Did you mean UNSAFE_componentWillReceiveProps()?',
-       {withoutStack: true}
+       Did you mean UNSAFE_componentWillReceiveProps()?'
     )
     undefined
 
   it 'should throw AND warn when trying to access classic APIs', ->
     instance =
-      test Inner(name: 'foo'), 'DIV', 'foo'
+      test React.createElement(InnerComponent, name: 'foo'), 'DIV', 'foo'
     expect(->
       expect(-> instance.replaceState {}).toThrow()
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     )
     expect(->
       expect(-> instance.isMounted()).toThrow()
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     )
@@ -514,7 +522,7 @@ describe 'ReactCoffeeScriptClass', ->
       @contextTypes:
         bar: PropTypes.string
       render: ->
-        div className: @context.bar
+        React.createElement('div', className: @context.bar)
 
     class Foo extends React.Component
       @childContextTypes:
@@ -530,16 +538,18 @@ describe 'ReactCoffeeScriptClass', ->
   it 'supports classic refs', ->
     class Foo extends React.Component
       render: ->
-        Inner
+        React.createElement(InnerComponent,
           name: 'foo'
           ref: 'inner'
+        )
 
     instance = test(React.createElement(Foo), 'DIV', 'foo')
     expect(instance.refs.inner.getName()).toBe 'foo'
     undefined
 
   it 'supports drilling through to the DOM using findDOMNode', ->
-    instance = test Inner(name: 'foo'), 'DIV', 'foo'
+    instance = test React.createElement(InnerComponent, name: 'foo'), 'DIV', 'foo'
     node = ReactDOM.findDOMNode(instance)
     expect(node).toBe container.firstChild
     undefined
+  undefined
diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js
index bc935753b6e55..0123d7091755f 100644
--- a/packages/react/src/__tests__/ReactContextValidator-test.js
+++ b/packages/react/src/__tests__/ReactContextValidator-test.js
@@ -154,7 +154,7 @@ describe('ReactContextValidator', () => {
       foo: PropTypes.string.isRequired,
     };
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Warning: Failed context type: ' +
         'The context `foo` is marked as required in `Component`, but its value ' +
         'is `undefined`.\n' +
@@ -200,7 +200,7 @@ describe('ReactContextValidator', () => {
       ReactTestUtils.renderIntoDocument(
         <ComponentInFooNumberContext fooValue={123} />,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed context type: ' +
         'Invalid context `foo` of type `number` supplied ' +
         'to `Component`, expected `string`.\n' +
@@ -226,7 +226,7 @@ describe('ReactContextValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<Component testContext={{bar: 123}} />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed child context type: ' +
         'The child context `foo` is marked as required in `Component`, but its ' +
         'value is `undefined`.\n' +
@@ -235,7 +235,7 @@ describe('ReactContextValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<Component testContext={{foo: 123}} />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed child context type: ' +
         'Invalid child context `foo` of type `number` ' +
         'supplied to `Component`, expected `string`.\n' +
@@ -265,7 +265,7 @@ describe('ReactContextValidator', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
       'Warning: Failed prop type: The prop `value` is marked as required in ' +
         '`Context.Provider`, but its value is `undefined`.\n' +
         '    in Component (at **)',
@@ -292,21 +292,19 @@ describe('ReactContextValidator', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toErrorDev(
       'Warning: ComponentA.childContextTypes is specified but there is no ' +
         'getChildContext() method on the instance. You can either define ' +
         'getChildContext() on ComponentA or remove childContextTypes from it.',
-      {withoutStack: true},
     );
 
     // Warnings should be deduped by component type
     ReactTestUtils.renderIntoDocument(<ComponentA />);
 
-    expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toErrorDev(
       'Warning: ComponentB.childContextTypes is specified but there is no ' +
         'getChildContext() method on the instance. You can either define ' +
         'getChildContext() on ComponentB or remove childContextTypes from it.',
-      {withoutStack: true},
     );
   });
 
@@ -350,16 +348,13 @@ describe('ReactContextValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<ParentContextProvider />),
-    ).toWarnDev(
-      [
-        'Warning: MiddleMissingContext.childContextTypes is specified but there is no ' +
-          'getChildContext() method on the instance. You can either define getChildContext() ' +
-          'on MiddleMissingContext or remove childContextTypes from it.',
-        'Warning: Failed context type: The context `bar` is marked as required ' +
-          'in `ChildContextConsumer`, but its value is `undefined`.',
-      ],
-      {withoutStack: 1},
-    );
+    ).toErrorDev([
+      'Warning: MiddleMissingContext.childContextTypes is specified but there is no ' +
+        'getChildContext() method on the instance. You can either define getChildContext() ' +
+        'on MiddleMissingContext or remove childContextTypes from it.',
+      'Warning: Failed context type: The context `bar` is marked as required ' +
+        'in `ChildContextConsumer`, but its value is `undefined`.',
+    ]);
     expect(childContext.bar).toBeUndefined();
     expect(childContext.foo).toBe('FOO');
   });
@@ -513,10 +508,9 @@ describe('ReactContextValidator', () => {
           <ComponentA />
         </ParentContextProvider>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: ComponentA declares both contextTypes and contextType static properties. ' +
         'The legacy contextTypes property will be ignored.',
-      {withoutStack: true},
     );
 
     // Warnings should be deduped by component type
@@ -532,10 +526,9 @@ describe('ReactContextValidator', () => {
           <ComponentB />
         </ParentContextProvider>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: ComponentB declares both contextTypes and contextType static properties. ' +
         'The legacy contextTypes property will be ignored.',
-      {withoutStack: true},
     );
   });
 
@@ -558,11 +551,10 @@ describe('ReactContextValidator', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<ComponentA />);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: ComponentA defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'Did you accidentally pass the Context.Consumer instead?',
-      {withoutStack: true},
     );
 
     // Warnings should be deduped by component type
@@ -570,11 +562,10 @@ describe('ReactContextValidator', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<ComponentB />);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: ComponentB defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'Did you accidentally pass the Context.Provider instead?',
-      {withoutStack: true},
     );
   });
 
@@ -604,14 +595,13 @@ describe('ReactContextValidator', () => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<Foo />);
       }).toThrow("Cannot read property 'world' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to undefined. ' +
         'This can be caused by a typo or by mixing up named and default imports. ' +
         'This can also happen due to a circular dependency, ' +
         'so try moving the createContext() call to a separate file.',
-      {withoutStack: true},
     );
   });
 
@@ -631,11 +621,10 @@ describe('ReactContextValidator', () => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<Foo />);
       }).toThrow("Cannot read property 'hello' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to an object with keys {x, y}.',
-      {withoutStack: true},
     );
   });
 
@@ -651,11 +640,10 @@ describe('ReactContextValidator', () => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<Foo />);
       }).toThrow("Cannot read property 'world' of undefined");
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
         'However, it is set to a string.',
-      {withoutStack: true},
     );
   });
 
@@ -672,17 +660,15 @@ describe('ReactContextValidator', () => {
     }
     ComponentB.contextType = Context;
 
-    expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toErrorDev(
       'Warning: ComponentA: Function components do not support contextType.',
-      {withoutStack: true},
     );
 
     // Warnings should be deduped by component type
     ReactTestUtils.renderIntoDocument(<ComponentA />);
 
-    expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toErrorDev(
       'Warning: ComponentB: Function components do not support contextType.',
-      {withoutStack: true},
     );
   });
 });
diff --git a/packages/react/src/__tests__/ReactCreateRef-test.js b/packages/react/src/__tests__/ReactCreateRef-test.js
index 846e4b44b9ea7..91d3e9424699e 100644
--- a/packages/react/src/__tests__/ReactCreateRef-test.js
+++ b/packages/react/src/__tests__/ReactCreateRef-test.js
@@ -37,7 +37,7 @@ describe('ReactCreateRef', () => {
           <div ref={{}} />
         </Wrapper>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Unexpected ref object provided for div. ' +
         'Use either a ref-setter function or React.createRef().\n' +
         '    in div (at **)\n' +
@@ -50,7 +50,7 @@ describe('ReactCreateRef', () => {
           <ExampleComponent ref={{}} />
         </Wrapper>,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Unexpected ref object provided for ExampleComponent. ' +
         'Use either a ref-setter function or React.createRef().\n' +
         '    in ExampleComponent (at **)\n' +
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
new file mode 100644
index 0000000000000..1e9fe3100653d
--- /dev/null
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -0,0 +1,794 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let Scheduler;
+let SchedulerTracing;
+let TestUtils;
+let onInteractionScheduledWorkCompleted;
+let onInteractionTraced;
+let onWorkCanceled;
+let onWorkScheduled;
+let onWorkStarted;
+let onWorkStopped;
+
+function loadModules() {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  ReactFeatureFlags.enableProfilerTimer = true;
+  ReactFeatureFlags.enableSchedulerTracing = true;
+  ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMServer = require('react-dom/server');
+  Scheduler = require('scheduler');
+  SchedulerTracing = require('scheduler/tracing');
+  TestUtils = require('react-dom/test-utils');
+
+  onInteractionScheduledWorkCompleted = jest.fn();
+  onInteractionTraced = jest.fn();
+  onWorkCanceled = jest.fn();
+  onWorkScheduled = jest.fn();
+  onWorkStarted = jest.fn();
+  onWorkStopped = jest.fn();
+
+  // Verify interaction subscriber methods are called as expected.
+  SchedulerTracing.unstable_subscribe({
+    onInteractionScheduledWorkCompleted,
+    onInteractionTraced,
+    onWorkCanceled,
+    onWorkScheduled,
+    onWorkStarted,
+    onWorkStopped,
+  });
+}
+
+describe('ReactDOMTracing', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    loadModules();
+  });
+
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  describe('interaction tracing', () => {
+    describe('hidden', () => {
+      it('traces interaction through hidden subtree', () => {
+        const Child = () => {
+          const [didMount, setDidMount] = React.useState(false);
+          Scheduler.unstable_yieldValue('Child');
+          React.useEffect(() => {
+            if (didMount) {
+              Scheduler.unstable_yieldValue('Child:update');
+            } else {
+              Scheduler.unstable_yieldValue('Child:mount');
+              setDidMount(true);
+            }
+          }, [didMount]);
+          return <div />;
+        };
+
+        const App = () => {
+          Scheduler.unstable_yieldValue('App');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('App:mount');
+          }, []);
+          return (
+            <div hidden={true}>
+              <Child />
+            </div>
+          );
+        };
+
+        let interaction;
+
+        const onRender = jest.fn();
+
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+          TestUtils.act(() => {
+            root.render(
+              <React.Profiler id="test" onRender={onRender}>
+                <App />
+              </React.Profiler>,
+            );
+            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+              interaction,
+            );
+            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(1);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+            expect(Scheduler).toFlushAndYieldThrough(['Child', 'Child:mount']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(2);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+
+            expect(Scheduler).toFlushAndYield(['Child', 'Child:update']);
+          });
+        });
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+        // TODO: This is 4 instead of 3 because this update was scheduled at
+        // idle priority, and idle updates are slightly higher priority than
+        // offscreen work. So it takes two render passes to finish it. Profiler
+        // calls `onRender` for the first render even though everything
+        // bails out.
+        expect(onRender).toHaveBeenCalledTimes(4);
+        expect(onRender).toHaveLastRenderedWithInteractions(
+          new Set([interaction]),
+        );
+      });
+
+      it('traces interaction through hidden subtree when there is other pending traced work', () => {
+        const Child = () => {
+          Scheduler.unstable_yieldValue('Child');
+          return <div />;
+        };
+
+        let wrapped = null;
+
+        const App = () => {
+          Scheduler.unstable_yieldValue('App');
+          React.useEffect(() => {
+            wrapped = SchedulerTracing.unstable_wrap(() => {});
+            Scheduler.unstable_yieldValue('App:mount');
+          }, []);
+          return (
+            <div hidden={true}>
+              <Child />
+            </div>
+          );
+        };
+
+        let interaction;
+
+        const onRender = jest.fn();
+
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+
+          TestUtils.act(() => {
+            root.render(
+              <React.Profiler id="test" onRender={onRender}>
+                <App />
+              </React.Profiler>,
+            );
+            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+              interaction,
+            );
+
+            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(1);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+
+            expect(wrapped).not.toBeNull();
+
+            expect(Scheduler).toFlushAndYield(['Child']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(2);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+          });
+        });
+
+        wrapped();
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+      });
+
+      it('traces interaction through hidden subtree that schedules more idle/never work', () => {
+        const Child = () => {
+          const [didMount, setDidMount] = React.useState(false);
+          Scheduler.unstable_yieldValue('Child');
+          React.useLayoutEffect(() => {
+            if (didMount) {
+              Scheduler.unstable_yieldValue('Child:update');
+            } else {
+              Scheduler.unstable_yieldValue('Child:mount');
+              Scheduler.unstable_runWithPriority(
+                Scheduler.unstable_IdlePriority,
+                () => setDidMount(true),
+              );
+            }
+          }, [didMount]);
+          return <div />;
+        };
+
+        const App = () => {
+          Scheduler.unstable_yieldValue('App');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('App:mount');
+          }, []);
+          return (
+            <div hidden={true}>
+              <Child />
+            </div>
+          );
+        };
+
+        let interaction;
+
+        const onRender = jest.fn();
+
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+          TestUtils.act(() => {
+            root.render(
+              <React.Profiler id="test" onRender={onRender}>
+                <App />
+              </React.Profiler>,
+            );
+            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+              interaction,
+            );
+
+            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(1);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+
+            expect(Scheduler).toFlushAndYieldThrough(['Child', 'Child:mount']);
+            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+            expect(onRender).toHaveBeenCalledTimes(2);
+            expect(onRender).toHaveLastRenderedWithInteractions(
+              new Set([interaction]),
+            );
+
+            expect(Scheduler).toFlushAndYield(['Child', 'Child:update']);
+          });
+        });
+
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+        // TODO: This is 4 instead of 3 because this update was scheduled at
+        // idle priority, and idle updates are slightly higher priority than
+        // offscreen work. So it takes two render passes to finish it. Profiler
+        // calls `onRender` for the first render even though everything
+        // bails out.
+        expect(onRender).toHaveBeenCalledTimes(4);
+        expect(onRender).toHaveLastRenderedWithInteractions(
+          new Set([interaction]),
+        );
+      });
+
+      it('does not continue interactions across pre-existing idle work', () => {
+        const Child = () => {
+          Scheduler.unstable_yieldValue('Child');
+          return <div />;
+        };
+
+        let update = null;
+
+        const WithHiddenWork = () => {
+          Scheduler.unstable_yieldValue('WithHiddenWork');
+          return (
+            <div hidden={true}>
+              <Child />
+            </div>
+          );
+        };
+
+        const Updater = () => {
+          Scheduler.unstable_yieldValue('Updater');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('Updater:effect');
+          });
+
+          const setCount = React.useState(0)[1];
+          update = () => {
+            setCount(current => current + 1);
+          };
+
+          return <div />;
+        };
+
+        const App = () => {
+          Scheduler.unstable_yieldValue('App');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('App:effect');
+          });
+
+          return (
+            <>
+              <WithHiddenWork />
+              <Updater />
+            </>
+          );
+        };
+
+        const onRender = jest.fn();
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+
+        // Schedule some idle work without any interactions.
+        TestUtils.act(() => {
+          root.render(
+            <React.Profiler id="test" onRender={onRender}>
+              <App />
+            </React.Profiler>,
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            'App',
+            'WithHiddenWork',
+            'Updater',
+            'Updater:effect',
+            'App:effect',
+          ]);
+          expect(update).not.toBeNull();
+
+          // Trace a higher-priority update.
+          let interaction = null;
+          SchedulerTracing.unstable_trace('update', 0, () => {
+            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+            update();
+          });
+          expect(interaction).not.toBeNull();
+          expect(onRender).toHaveBeenCalledTimes(1);
+          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+            interaction,
+          );
+
+          // Ensure the traced interaction completes without being attributed to the pre-existing idle work.
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Updater',
+            'Updater:effect',
+          ]);
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+          expect(
+            onInteractionScheduledWorkCompleted,
+          ).toHaveBeenLastNotifiedOfInteraction(interaction);
+          expect(onRender).toHaveBeenCalledTimes(2);
+          expect(onRender).toHaveLastRenderedWithInteractions(
+            new Set([interaction]),
+          );
+
+          // Complete low-priority work and ensure no lingering interaction.
+          expect(Scheduler).toFlushAndYield(['Child']);
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+          expect(onRender).toHaveBeenCalledTimes(3);
+          expect(onRender).toHaveLastRenderedWithInteractions(new Set([]));
+        });
+      });
+
+      it('should properly trace interactions when there is work of interleaved priorities', () => {
+        const Child = () => {
+          Scheduler.unstable_yieldValue('Child');
+          return <div />;
+        };
+
+        let scheduleUpdate = null;
+        let scheduleUpdateWithHidden = null;
+
+        const MaybeHiddenWork = () => {
+          const [flag, setFlag] = React.useState(false);
+          scheduleUpdateWithHidden = () => setFlag(true);
+          Scheduler.unstable_yieldValue('MaybeHiddenWork');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('MaybeHiddenWork:effect');
+          });
+          return flag ? (
+            <div hidden={true}>
+              <Child />
+            </div>
+          ) : null;
+        };
+
+        const Updater = () => {
+          Scheduler.unstable_yieldValue('Updater');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('Updater:effect');
+          });
+
+          const setCount = React.useState(0)[1];
+          scheduleUpdate = () => setCount(current => current + 1);
+
+          return <div />;
+        };
+
+        const App = () => {
+          Scheduler.unstable_yieldValue('App');
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('App:effect');
+          });
+
+          return (
+            <>
+              <MaybeHiddenWork />
+              <Updater />
+            </>
+          );
+        };
+
+        const onRender = jest.fn();
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+
+        TestUtils.act(() => {
+          root.render(
+            <React.Profiler id="test" onRender={onRender}>
+              <App />
+            </React.Profiler>,
+          );
+          expect(Scheduler).toFlushAndYield([
+            'App',
+            'MaybeHiddenWork',
+            'Updater',
+            'MaybeHiddenWork:effect',
+            'Updater:effect',
+            'App:effect',
+          ]);
+          expect(scheduleUpdate).not.toBeNull();
+          expect(scheduleUpdateWithHidden).not.toBeNull();
+          expect(onRender).toHaveBeenCalledTimes(1);
+
+          // schedule traced high-pri update and a (non-traced) low-pri update.
+          let interaction = null;
+          SchedulerTracing.unstable_trace('update', 0, () => {
+            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+            Scheduler.unstable_runWithPriority(
+              Scheduler.unstable_UserBlockingPriority,
+              () => scheduleUpdateWithHidden(),
+            );
+          });
+          scheduleUpdate();
+          expect(interaction).not.toBeNull();
+          expect(onRender).toHaveBeenCalledTimes(1);
+          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+            interaction,
+          );
+
+          // high-pri update should leave behind idle work and should not complete the interaction
+          expect(Scheduler).toFlushAndYieldThrough([
+            'MaybeHiddenWork',
+            'MaybeHiddenWork:effect',
+          ]);
+          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+          expect(onRender).toHaveBeenCalledTimes(2);
+          expect(onRender).toHaveLastRenderedWithInteractions(
+            new Set([interaction]),
+          );
+
+          // low-pri update should not have the interaction
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Updater',
+            'Updater:effect',
+          ]);
+          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+          expect(onRender).toHaveBeenCalledTimes(3);
+          expect(onRender).toHaveLastRenderedWithInteractions(new Set([]));
+
+          // idle work should complete the interaction
+          expect(Scheduler).toFlushAndYield(['Child']);
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+          expect(
+            onInteractionScheduledWorkCompleted,
+          ).toHaveBeenLastNotifiedOfInteraction(interaction);
+          expect(onRender).toHaveBeenCalledTimes(4);
+          expect(onRender).toHaveLastRenderedWithInteractions(
+            new Set([interaction]),
+          );
+        });
+      });
+
+      it('should properly trace interactions through a multi-pass SuspenseList render', () => {
+        const SuspenseList = React.SuspenseList;
+        const Suspense = React.Suspense;
+        function Text({text}) {
+          Scheduler.unstable_yieldValue(text);
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('Commit ' + text);
+          });
+          return <span>{text}</span>;
+        }
+        function App() {
+          return (
+            <SuspenseList revealOrder="forwards">
+              <Suspense fallback={<Text text="Loading A" />}>
+                <Text text="A" />
+              </Suspense>
+              <Suspense fallback={<Text text="Loading B" />}>
+                <Text text="B" />
+              </Suspense>
+              <Suspense fallback={<Text text="Loading C" />}>
+                <Text text="C" />
+              </Suspense>
+            </SuspenseList>
+          );
+        }
+
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+
+        let interaction;
+
+        TestUtils.act(() => {
+          SchedulerTracing.unstable_trace('initialization', 0, () => {
+            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+            // This render is only CPU bound. Nothing suspends.
+            root.render(<App />);
+          });
+
+          expect(Scheduler).toFlushAndYieldThrough(['A']);
+
+          Scheduler.unstable_advanceTime(200);
+          jest.advanceTimersByTime(200);
+
+          expect(Scheduler).toFlushAndYieldThrough(['B']);
+
+          Scheduler.unstable_advanceTime(300);
+          jest.advanceTimersByTime(300);
+
+          // Time has now elapsed for so long that we're just going to give up
+          // rendering the rest of the content. So that we can at least show
+          // something.
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Loading C',
+            'Commit A',
+            'Commit B',
+            'Commit Loading C',
+          ]);
+
+          // Schedule an unrelated low priority update that shouldn't be included
+          // in the previous interaction. This is meant to ensure that we don't
+          // rely on the whole tree completing to cover up bugs.
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_IdlePriority,
+            () => root.render(<App />),
+          );
+
+          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+            interaction,
+          );
+          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
+          // Then we do a second pass to commit the last item.
+          expect(Scheduler).toFlushAndYieldThrough(['C', 'Commit C']);
+
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+          expect(
+            onInteractionScheduledWorkCompleted,
+          ).toHaveBeenLastNotifiedOfInteraction(interaction);
+        });
+      });
+    });
+
+    describe('hydration', () => {
+      it('traces interaction across hydration', async done => {
+        let ref = React.createRef();
+
+        function Child() {
+          return 'Hello';
+        }
+
+        function App() {
+          return (
+            <div>
+              <span ref={ref}>
+                <Child />
+              </span>
+            </div>
+          );
+        }
+
+        // Render the final HTML.
+        const finalHTML = ReactDOMServer.renderToString(<App />);
+
+        const container = document.createElement('div');
+        container.innerHTML = finalHTML;
+
+        let interaction;
+
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+
+        // Hydrate it.
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+
+          root.render(<App />);
+        });
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+
+        expect(ref.current).not.toBe(null);
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+          interaction,
+        );
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+
+        done();
+      });
+
+      it('traces interaction across suspended hydration', async done => {
+        let suspend = false;
+        let resolve;
+        let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+        let ref = React.createRef();
+
+        function Child() {
+          if (suspend) {
+            throw promise;
+          } else {
+            return 'Hello';
+          }
+        }
+
+        function App() {
+          return (
+            <div>
+              <React.Suspense fallback="Loading...">
+                <span ref={ref}>
+                  <Child />
+                </span>
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        // Render the final HTML.
+        // Don't suspend on the server.
+        const finalHTML = ReactDOMServer.renderToString(<App />);
+
+        const container = document.createElement('div');
+        container.innerHTML = finalHTML;
+
+        let interaction;
+
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+
+        // Start hydrating but simulate blocking for suspense data.
+        suspend = true;
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+
+          root.render(<App />);
+        });
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+
+        expect(ref.current).toBe(null);
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+          interaction,
+        );
+        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
+        // Resolving the promise should continue hydration
+        suspend = false;
+        resolve();
+        await promise;
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+
+        expect(ref.current).not.toBe(null);
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+
+        done();
+      });
+
+      it('traces interaction across client-rendered hydration', async done => {
+        let suspend = false;
+        let promise = new Promise(() => {});
+        let ref = React.createRef();
+
+        function Child() {
+          if (suspend) {
+            throw promise;
+          } else {
+            return 'Hello';
+          }
+        }
+
+        function App() {
+          return (
+            <div>
+              <React.Suspense fallback="Loading...">
+                <span ref={ref}>
+                  <Child />
+                </span>
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        // Render the final HTML.
+        suspend = true;
+        const finalHTML = ReactDOMServer.renderToString(<App />);
+
+        const container = document.createElement('div');
+        container.innerHTML = finalHTML;
+
+        let interaction;
+
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+
+        // Hydrate without suspending to fill in the client-rendered content.
+        suspend = false;
+        SchedulerTracing.unstable_trace('initialization', 0, () => {
+          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
+
+          root.render(<App />);
+        });
+
+        expect(onWorkStopped).toHaveBeenCalledTimes(1);
+
+        // Advance time a bit so that we get into a new expiration bucket.
+        Scheduler.unstable_advanceTime(300);
+        jest.advanceTimersByTime(300);
+
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+
+        expect(ref.current).not.toBe(null);
+
+        // We should've had two commits that was traced.
+        // First one that hydrates the parent, and then one that hydrates
+        // the boundary at higher than Never priority.
+        expect(onWorkStopped).toHaveBeenCalledTimes(3);
+
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+          interaction,
+        );
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+
+        done();
+      });
+    });
+  });
+});
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index bc4d33d24417f..1d554ca9f4580 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -59,16 +59,13 @@ describe('ReactES6Class', () => {
     class Foo extends React.Component {}
     expect(() =>
       expect(() => ReactDOM.render(<Foo />, container)).toThrow(),
-    ).toWarnDev(
-      [
-        // A failed component renders twice in DEV
-        'Warning: Foo(...): No `render` method found on the returned component ' +
-          'instance: you may have forgotten to define `render`.',
-        'Warning: Foo(...): No `render` method found on the returned component ' +
-          'instance: you may have forgotten to define `render`.',
-      ],
-      {withoutStack: true},
-    );
+    ).toErrorDev([
+      // A failed component renders twice in DEV
+      'Warning: Foo(...): No `render` method found on the returned component ' +
+        'instance: you may have forgotten to define `render`.',
+      'Warning: Foo(...): No `render` method found on the returned component ' +
+        'instance: you may have forgotten to define `render`.',
+    ]);
   });
 
   it('renders a simple stateless component with prop', () => {
@@ -140,10 +137,9 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
       'Foo: getDerivedStateFromProps() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
-      {withoutStack: true},
     );
   });
 
@@ -156,10 +152,9 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
       'Foo: getDerivedStateFromError() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
-      {withoutStack: true},
     );
   });
 
@@ -170,10 +165,9 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
       'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
         'and will be ignored. Instead, declare it as an instance method.',
-      {withoutStack: true},
     );
   });
 
@@ -189,12 +183,11 @@ describe('ReactES6Class', () => {
         return <div className={`${this.state.foo} ${this.state.bar}`} />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
         'undefined. This is not recommended. Instead, define the initial state by ' +
         'assigning an object to `this.state` in the constructor of `Foo`. ' +
         'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
-      {withoutStack: true},
     );
   });
 
@@ -298,9 +291,8 @@ describe('ReactES6Class', () => {
           return <span />;
         }
       }
-      expect(() => test(<Foo />, 'SPAN', '')).toWarnDev(
+      expect(() => test(<Foo />, 'SPAN', '')).toErrorDev(
         'Foo.state: must be set to an object or null',
-        {withoutStack: true},
       );
     });
   });
@@ -451,16 +443,13 @@ describe('ReactES6Class', () => {
       }
     }
 
-    expect(() => test(<Foo />, 'SPAN', 'foo')).toWarnDev(
-      [
-        'getInitialState was defined on Foo, a plain JavaScript class.',
-        'getDefaultProps was defined on Foo, a plain JavaScript class.',
-        'propTypes was defined as an instance property on Foo.',
-        'contextType was defined as an instance property on Foo.',
-        'contextTypes was defined as an instance property on Foo.',
-      ],
-      {withoutStack: true},
-    );
+    expect(() => test(<Foo />, 'SPAN', 'foo')).toErrorDev([
+      'getInitialState was defined on Foo, a plain JavaScript class.',
+      'getDefaultProps was defined on Foo, a plain JavaScript class.',
+      'propTypes was defined as an instance property on Foo.',
+      'contextType was defined as an instance property on Foo.',
+      'contextTypes was defined as an instance property on Foo.',
+    ]);
     expect(getInitialStateWasCalled).toBe(false);
     expect(getDefaultPropsWasCalled).toBe(false);
   });
@@ -488,12 +477,11 @@ describe('ReactES6Class', () => {
       }
     }
 
-    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toWarnDev(
+    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toErrorDev(
       'Warning: ' +
         'NamedComponent has a method called componentShouldUpdate(). Did you ' +
         'mean shouldComponentUpdate()? The name is phrased as a question ' +
         'because the function is expected to return a value.',
-      {withoutStack: true},
     );
   });
 
@@ -507,11 +495,10 @@ describe('ReactES6Class', () => {
       }
     }
 
-    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toWarnDev(
+    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toErrorDev(
       'Warning: ' +
         'NamedComponent has a method called componentWillRecieveProps(). Did ' +
         'you mean componentWillReceiveProps()?',
-      {withoutStack: true},
     );
   });
 
@@ -525,11 +512,10 @@ describe('ReactES6Class', () => {
       }
     }
 
-    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toWarnDev(
+    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toErrorDev(
       'Warning: ' +
         'NamedComponent has a method called UNSAFE_componentWillRecieveProps(). ' +
         'Did you mean UNSAFE_componentWillReceiveProps()?',
-      {withoutStack: true},
     );
   });
 
@@ -537,13 +523,13 @@ describe('ReactES6Class', () => {
     const instance = test(<Inner name="foo" />, 'DIV', 'foo');
     expect(() =>
       expect(() => instance.replaceState({})).toThrow(),
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true},
     );
     expect(() =>
       expect(() => instance.isMounted()).toThrow(),
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true},
     );
diff --git a/packages/react/src/__tests__/ReactElement-test.js b/packages/react/src/__tests__/ReactElement-test.js
index a495c8bbd5eeb..af99767220a1c 100644
--- a/packages/react/src/__tests__/ReactElement-test.js
+++ b/packages/react/src/__tests__/ReactElement-test.js
@@ -13,6 +13,8 @@ let React;
 let ReactDOM;
 let ReactTestUtils;
 
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 describe('ReactElement', () => {
   let ComponentClass;
   let originalSymbol;
@@ -42,11 +44,11 @@ describe('ReactElement', () => {
   });
 
   it('uses the fallback value when in an environment without Symbol', () => {
-    expect(<div />.$$typeof).toBe(0xeac7);
+    expect((<div />).$$typeof).toBe(0xeac7);
   });
 
   it('returns a complete element according to spec', () => {
-    const element = React.createFactory(ComponentClass)();
+    const element = React.createElement(ComponentClass);
     expect(element.type).toBe(ComponentClass);
     expect(element.key).toBe(null);
     expect(element.ref).toBe(null);
@@ -75,18 +77,19 @@ describe('ReactElement', () => {
         );
       }
     }
-    expect(() => ReactDOM.render(<Parent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
       'Child: `key` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
         'prop. (https://fb.me/react-special-props)',
-      {withoutStack: true},
     );
   });
 
   it('should warn when `key` is being accessed on a host element', () => {
     const element = <div key="3" />;
-    expect(() => void element.props.key).toWarnDev(
+    expect(
+      () => void element.props.key,
+    ).toErrorDev(
       'div: `key` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
@@ -111,17 +114,16 @@ describe('ReactElement', () => {
         );
       }
     }
-    expect(() => ReactDOM.render(<Parent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
       'Child: `ref` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
         'prop. (https://fb.me/react-special-props)',
-      {withoutStack: true},
     );
   });
 
   it('allows a string to be passed as the type', () => {
-    const element = React.createFactory('div')();
+    const element = React.createElement('div');
     expect(element.type).toBe('div');
     expect(element.key).toBe(null);
     expect(element.ref).toBe(null);
@@ -133,7 +135,7 @@ describe('ReactElement', () => {
   });
 
   it('returns an immutable element', () => {
-    const element = React.createFactory(ComponentClass)();
+    const element = React.createElement(ComponentClass);
     if (__DEV__) {
       expect(() => (element.type = 'div')).toThrow();
     } else {
@@ -143,7 +145,7 @@ describe('ReactElement', () => {
 
   it('does not reuse the original config object', () => {
     const config = {foo: 1};
-    const element = React.createFactory(ComponentClass)(config);
+    const element = React.createElement(ComponentClass, config);
     expect(element.props.foo).toBe(1);
     config.foo = 2;
     expect(element.props.foo).toBe(1);
@@ -151,12 +153,12 @@ describe('ReactElement', () => {
 
   it('does not fail if config has no prototype', () => {
     const config = Object.create(null, {foo: {value: 1, enumerable: true}});
-    const element = React.createFactory(ComponentClass)(config);
+    const element = React.createElement(ComponentClass, config);
     expect(element.props.foo).toBe(1);
   });
 
   it('extracts key and ref from the config', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       key: '12',
       ref: '34',
       foo: '56',
@@ -172,7 +174,7 @@ describe('ReactElement', () => {
   });
 
   it('extracts null key and ref', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       key: null,
       ref: null,
       foo: '12',
@@ -193,7 +195,7 @@ describe('ReactElement', () => {
       key: undefined,
       ref: undefined,
     };
-    const element = React.createFactory(ComponentClass)(props);
+    const element = React.createElement(ComponentClass, props);
     expect(element.type).toBe(ComponentClass);
     expect(element.key).toBe(null);
     expect(element.ref).toBe(null);
@@ -212,7 +214,7 @@ describe('ReactElement', () => {
   });
 
   it('coerces the key to a string', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       key: 12,
       foo: '56',
     });
@@ -227,12 +229,11 @@ describe('ReactElement', () => {
   });
 
   it('preserves the owner on the element', () => {
-    const Component = React.createFactory(ComponentClass);
     let element;
 
     class Wrapper extends React.Component {
       render() {
-        element = Component();
+        element = React.createElement(ComponentClass);
         return element;
       }
     }
@@ -245,7 +246,8 @@ describe('ReactElement', () => {
 
   it('merges an additional argument onto the children prop', () => {
     const a = 1;
-    const element = React.createFactory(ComponentClass)(
+    const element = React.createElement(
+      ComponentClass,
       {
         children: 'text',
       },
@@ -255,14 +257,15 @@ describe('ReactElement', () => {
   });
 
   it('does not override children if no rest args are provided', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       children: 'text',
     });
     expect(element.props.children).toBe('text');
   });
 
   it('overrides children if null is provided as an argument', () => {
-    const element = React.createFactory(ComponentClass)(
+    const element = React.createElement(
+      ComponentClass,
       {
         children: 'text',
       },
@@ -275,7 +278,7 @@ describe('ReactElement', () => {
     const a = 1;
     const b = 2;
     const c = 3;
-    const element = React.createFactory(ComponentClass)(null, a, b, c);
+    const element = React.createElement(ComponentClass, null, a, b, c);
     expect(element.props.children).toEqual([1, 2, 3]);
   });
 
@@ -309,7 +312,18 @@ describe('ReactElement', () => {
     expect(React.isValidElement(true)).toEqual(false);
     expect(React.isValidElement({})).toEqual(false);
     expect(React.isValidElement('string')).toEqual(false);
-    expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
+    if (!ReactFeatureFlags.disableCreateFactory) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
     expect(React.isValidElement(Component)).toEqual(false);
     expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
 
@@ -467,7 +481,18 @@ describe('ReactElement', () => {
     expect(React.isValidElement(true)).toEqual(false);
     expect(React.isValidElement({})).toEqual(false);
     expect(React.isValidElement('string')).toEqual(false);
-    expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
+    if (!ReactFeatureFlags.disableCreateFactory) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
     expect(React.isValidElement(Component)).toEqual(false);
     expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
 
diff --git a/packages/react/src/__tests__/ReactElementClone-test.js b/packages/react/src/__tests__/ReactElementClone-test.js
index 2220a7b112535..b428787a7bf78 100644
--- a/packages/react/src/__tests__/ReactElementClone-test.js
+++ b/packages/react/src/__tests__/ReactElementClone-test.js
@@ -259,7 +259,7 @@ describe('ReactElementClone', () => {
   it('warns for keys for arrays of elements in rest args', () => {
     expect(() =>
       React.cloneElement(<div />, null, [<div />, <div />]),
-    ).toWarnDev('Each child in a list should have a unique "key" prop.');
+    ).toErrorDev('Each child in a list should have a unique "key" prop.');
   });
 
   it('does not warns for arrays of elements with keys', () => {
@@ -297,7 +297,7 @@ describe('ReactElementClone', () => {
     }
     expect(() =>
       ReactTestUtils.renderIntoDocument(React.createElement(GrandParent)),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `color` of type `number` supplied to `Component`, ' +
         'expected `string`.\n' +
@@ -315,7 +315,7 @@ describe('ReactElementClone', () => {
   });
 
   it('should ignore undefined key and ref', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       key: '12',
       ref: '34',
       foo: '56',
@@ -337,7 +337,7 @@ describe('ReactElementClone', () => {
   });
 
   it('should extract null key and ref', () => {
-    const element = React.createFactory(ComponentClass)({
+    const element = React.createElement(ComponentClass, {
       key: '12',
       ref: '34',
       foo: '56',
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.internal.js b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
index db62a2c51ec15..fce448208c0dc 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.internal.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
@@ -11,9 +11,10 @@
 
 let React;
 let ReactDOM;
-let ReactFeatureFlags;
 let ReactTestUtils;
 
+let ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 // NOTE: We're explicitly not using JSX here. This is intended to test
 // a new React.jsx api which does not have a JSX transformer yet.
 // A lot of these tests are pulled from ReactElement-test because
@@ -67,7 +68,18 @@ describe('ReactElement.jsx', () => {
     expect(React.isValidElement(true)).toEqual(false);
     expect(React.isValidElement({})).toEqual(false);
     expect(React.isValidElement('string')).toEqual(false);
-    expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
+    if (!ReactFeatureFlags.disableCreateFactory) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
     expect(React.isValidElement(Component)).toEqual(false);
     expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
 
@@ -206,18 +218,31 @@ describe('ReactElement.jsx', () => {
         });
       }
     }
-    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toWarnDev(
+    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Child: `key` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
         'prop. (https://fb.me/react-special-props)',
+    );
+  });
+
+  it('warns when a jsxs is passed something that is not an array', () => {
+    const container = document.createElement('div');
+    expect(() =>
+      ReactDOM.render(React.jsxs('div', {children: 'foo'}, null), container),
+    ).toErrorDev(
+      'React.jsx: Static children should always be an array. ' +
+        'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
+        'Use the Babel transform instead.',
       {withoutStack: true},
     );
   });
 
   it('should warn when `key` is being accessed on a host element', () => {
     const element = React.jsxs('div', {}, '3');
-    expect(() => void element.props.key).toWarnDev(
+    expect(
+      () => void element.props.key,
+    ).toErrorDev(
       'div: `key` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
@@ -240,12 +265,11 @@ describe('ReactElement.jsx', () => {
         });
       }
     }
-    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toWarnDev(
+    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Child: `ref` is not a prop. Trying to access it will result ' +
         'in `undefined` being returned. If you need to access the same ' +
         'value within the child component, you should pass it as a different ' +
         'prop. (https://fb.me/react-special-props)',
-      {withoutStack: true},
     );
   });
 
@@ -285,7 +309,18 @@ describe('ReactElement.jsx', () => {
     expect(React.isValidElement(true)).toEqual(false);
     expect(React.isValidElement({})).toEqual(false);
     expect(React.isValidElement('string')).toEqual(false);
-    expect(React.isValidElement(React.createFactory('div'))).toEqual(false);
+    if (!ReactFeatureFlags.disableCreateFactory) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
     expect(React.isValidElement(Component)).toEqual(false);
     expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
 
@@ -311,7 +346,7 @@ describe('ReactElement.jsx', () => {
         });
       }
     }
-    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toWarnDev(
+    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Warning: Each child in a list should have a unique "key" prop.\n\n' +
         'Check the render method of `Parent`. See https://fb.me/react-warning-keys for more information.\n' +
         '    in Child (created by Parent)\n' +
@@ -333,7 +368,7 @@ describe('ReactElement.jsx', () => {
         });
       }
     }
-    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toWarnDev(
+    expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Warning: React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
         'Explicitly pass a key after spreading props in your JSX call. ' +
         'E.g. <ComponentName {...props} key={key} />',
diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
index d4c7f9bf2a316..c4016387e159e 100644
--- a/packages/react/src/__tests__/ReactElementValidator-test.internal.js
+++ b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
@@ -13,11 +13,12 @@
 // classic JS without JSX.
 
 let PropTypes;
-let ReactFeatureFlags;
 let React;
 let ReactDOM;
 let ReactTestUtils;
 
+let ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 describe('ReactElementValidator', () => {
   let ComponentClass;
 
@@ -38,33 +39,35 @@ describe('ReactElementValidator', () => {
   });
 
   it('warns for keys for arrays of elements in rest args', () => {
-    const Component = React.createFactory(ComponentClass);
-
     expect(() => {
-      Component(null, [Component(), Component()]);
-    }).toWarnDev('Each child in a list should have a unique "key" prop.');
+      React.createElement(ComponentClass, null, [
+        React.createElement(ComponentClass),
+        React.createElement(ComponentClass),
+      ]);
+    }).toErrorDev('Each child in a list should have a unique "key" prop.');
   });
 
   it('warns for keys for arrays of elements with owner info', () => {
-    const Component = React.createFactory(ComponentClass);
-
     class InnerClass extends React.Component {
       render() {
-        return Component(null, this.props.childSet);
+        return React.createElement(ComponentClass, null, this.props.childSet);
       }
     }
 
-    const InnerComponent = React.createFactory(InnerClass);
-
     class ComponentWrapper extends React.Component {
       render() {
-        return InnerComponent({childSet: [Component(), Component()]});
+        return React.createElement(InnerClass, {
+          childSet: [
+            React.createElement(ComponentClass),
+            React.createElement(ComponentClass),
+          ],
+        });
       }
     }
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(React.createElement(ComponentWrapper));
-    }).toWarnDev(
+    }).toErrorDev(
       'Each child in a list should have a unique "key" prop.' +
         '\n\nCheck the render method of `InnerClass`. ' +
         'It was passed a child from ComponentWrapper. ',
@@ -81,7 +84,7 @@ describe('ReactElementValidator', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<Anonymous>{divs}</Anonymous>);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Each child in a list should have a unique ' +
         '"key" prop. See https://fb.me/react-warning-keys for more information.\n' +
         '    in div (at **)',
@@ -93,7 +96,7 @@ describe('ReactElementValidator', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(<div>{divs}</div>);
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Each child in a list should have a unique ' +
         '"key" prop.\n\nCheck the top-level render call using <div>. See ' +
         'https://fb.me/react-warning-keys for more information.\n' +
@@ -114,7 +117,7 @@ describe('ReactElementValidator', () => {
       return <Parent child={<Component />} />;
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toErrorDev(
       'Warning: Each child in a list should have a unique ' +
         '"key" prop.\n\nCheck the render method of `Component`. See ' +
         'https://fb.me/react-warning-keys for more information.\n' +
@@ -144,34 +147,34 @@ describe('ReactElementValidator', () => {
   });
 
   it('warns for keys for iterables of elements in rest args', () => {
-    const Component = React.createFactory(ComponentClass);
-
     const iterable = {
       '@@iterator': function() {
         let i = 0;
         return {
           next: function() {
             const done = ++i > 2;
-            return {value: done ? undefined : Component(), done: done};
+            return {
+              value: done ? undefined : React.createElement(ComponentClass),
+              done: done,
+            };
           },
         };
       },
     };
 
-    expect(() => Component(null, iterable)).toWarnDev(
-      'Each child in a list should have a unique "key" prop.',
-    );
+    expect(() =>
+      React.createElement(ComponentClass, null, iterable),
+    ).toErrorDev('Each child in a list should have a unique "key" prop.');
   });
 
   it('does not warns for arrays of elements with keys', () => {
-    const Component = React.createFactory(ComponentClass);
-
-    Component(null, [Component({key: '#1'}), Component({key: '#2'})]);
+    React.createElement(ComponentClass, null, [
+      React.createElement(ComponentClass, {key: '#1'}),
+      React.createElement(ComponentClass, {key: '#2'}),
+    ]);
   });
 
   it('does not warns for iterable elements with keys', () => {
-    const Component = React.createFactory(ComponentClass);
-
     const iterable = {
       '@@iterator': function() {
         let i = 0;
@@ -179,7 +182,9 @@ describe('ReactElementValidator', () => {
           next: function() {
             const done = ++i > 2;
             return {
-              value: done ? undefined : Component({key: '#' + i}),
+              value: done
+                ? undefined
+                : React.createElement(ComponentClass, {key: '#' + i}),
               done: done,
             };
           },
@@ -187,19 +192,20 @@ describe('ReactElementValidator', () => {
       },
     };
 
-    Component(null, iterable);
+    React.createElement(ComponentClass, null, iterable);
   });
 
   it('does not warn when the element is directly in rest args', () => {
-    const Component = React.createFactory(ComponentClass);
-
-    Component(null, Component(), Component());
+    React.createElement(
+      ComponentClass,
+      null,
+      React.createElement(ComponentClass),
+      React.createElement(ComponentClass),
+    );
   });
 
   it('does not warn when the array contains a non-element', () => {
-    const Component = React.createFactory(ComponentClass);
-
-    Component(null, [{}, {}]);
+    React.createElement(ComponentClass, null, [{}, {}]);
   });
 
   it('should give context for PropType errors in nested components.', () => {
@@ -217,7 +223,7 @@ describe('ReactElementValidator', () => {
     }
     expect(() => {
       ReactTestUtils.renderIntoDocument(React.createElement(ParentComp));
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
         'expected `string`.\n' +
@@ -238,7 +244,7 @@ describe('ReactElementValidator', () => {
       React.createElement(React.createElement(Foo));
       React.createElement(React.createElement(React.createContext().Consumer));
       React.createElement({$$typeof: 'non-react-thing'});
-    }).toWarnDev(
+    }).toErrorDev(
       [
         'Warning: React.createElement: type is invalid -- expected a string ' +
           '(for built-in components) or a class/function (for composite ' +
@@ -295,7 +301,7 @@ describe('ReactElementValidator', () => {
           'or a class/function (for composite components) but got: null.' +
           (__DEV__ ? '\n\nCheck the render method of `ParentComp`.' : ''),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string ' +
         '(for built-in components) or a class/function (for composite ' +
         'components) but got: null.' +
@@ -314,7 +320,7 @@ describe('ReactElementValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(React.createElement(Component)),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `prop` is marked as required in ' +
         '`Component`, but its value is `null`.\n' +
         '    in Component',
@@ -334,7 +340,7 @@ describe('ReactElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         React.createElement(Component, {prop: null}),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Failed prop type: The prop `prop` is marked as required in ' +
         '`Component`, but its value is `null`.\n' +
         '    in Component',
@@ -356,7 +362,7 @@ describe('ReactElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         React.createElement(Component, {prop: 42}),
       );
-    }).toWarnDev([
+    }).toErrorDev([
       'Warning: Failed prop type: ' +
         'The prop `prop` is marked as required in `Component`, but its value ' +
         'is `undefined`.\n' +
@@ -387,7 +393,7 @@ describe('ReactElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         React.createElement(Component, {myProp: {value: 'hi'}}),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Component: type specification of prop `myProp` is invalid; ' +
         'the type checker function must return `null` or an `Error` but ' +
         'returned a function. You may have forgotten to pass an argument to ' +
@@ -411,7 +417,7 @@ describe('ReactElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         React.createElement(MisspelledPropTypesComponent, {prop: 'Hi'}),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
         'instead of `propTypes`. Did you misspell the property assignment?',
       {withoutStack: true},
@@ -427,27 +433,41 @@ describe('ReactElementValidator', () => {
 
     expect(() => {
       ReactTestUtils.renderIntoDocument(React.createElement(Foo));
-    }).toWarnDev(
+    }).toErrorDev(
       'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
         'can only have `key` and `children` props.',
     );
   });
 
-  it('should warn when accessing .type on an element factory', () => {
-    function TestComponent() {
-      return <div />;
-    }
+  if (!ReactFeatureFlags.disableCreateFactory) {
+    it('should warn when accessing .type on an element factory', () => {
+      function TestComponent() {
+        return <div />;
+      }
 
-    let TestFactory = React.createFactory(TestComponent);
-    expect(() => TestFactory.type).toLowPriorityWarnDev(
-      'Warning: Factory.type is deprecated. Access the class directly before ' +
-        'passing it to createFactory.',
-      {withoutStack: true},
-    );
+      let TestFactory;
 
-    // Warn once, not again
-    expect(TestFactory.type).toBe(TestComponent);
-  });
+      expect(() => {
+        TestFactory = React.createFactory(TestComponent);
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+
+      expect(
+        () => TestFactory.type,
+      ).toWarnDev(
+        'Warning: Factory.type is deprecated. Access the class directly before ' +
+          'passing it to createFactory.',
+        {withoutStack: true},
+      );
+
+      // Warn once, not again
+      expect(TestFactory.type).toBe(TestComponent);
+    });
+  }
 
   it('does not warn when using DOM node as children', () => {
     class DOMContainer extends React.Component {
@@ -489,7 +509,7 @@ describe('ReactElementValidator', () => {
     // shouldn't blow up either.
 
     const child = {
-      $$typeof: <div />.$$typeof,
+      $$typeof: (<div />).$$typeof,
       type: 'span',
       key: null,
       ref: null,
@@ -497,14 +517,14 @@ describe('ReactElementValidator', () => {
       _owner: null,
     };
 
-    void <div>{[child]}</div>;
+    void (<div>{[child]}</div>);
   });
 
   it('does not blow up on key warning with undefined type', () => {
     const Foo = undefined;
     expect(() => {
-      void <Foo>{[<div />]}</Foo>;
-    }).toWarnDev(
+      void (<Foo>{[<div />]}</Foo>);
+    }).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string ' +
         '(for built-in components) or a class/function (for composite ' +
         'components) but got: undefined. You likely forgot to export your ' +
diff --git a/packages/react/src/__tests__/ReactJSXElementValidator-test.js b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
index 0321e5cd228ff..a0f9640b10b06 100644
--- a/packages/react/src/__tests__/ReactJSXElementValidator-test.js
+++ b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
@@ -48,7 +48,7 @@ describe('ReactJSXElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         <Component>{[<Component />, <Component />]}</Component>,
       ),
-    ).toWarnDev('Each child in a list should have a unique "key" prop.');
+    ).toErrorDev('Each child in a list should have a unique "key" prop.');
   });
 
   it('warns for keys for arrays of elements with owner info', () => {
@@ -66,7 +66,7 @@ describe('ReactJSXElementValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<ComponentWrapper />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Each child in a list should have a unique "key" prop.' +
         '\n\nCheck the render method of `InnerComponent`. ' +
         'It was passed a child from ComponentWrapper. ',
@@ -88,7 +88,7 @@ describe('ReactJSXElementValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>),
-    ).toWarnDev('Each child in a list should have a unique "key" prop.');
+    ).toErrorDev('Each child in a list should have a unique "key" prop.');
   });
 
   it('does not warn for arrays of elements with keys', () => {
@@ -143,7 +143,7 @@ describe('ReactJSXElementValidator', () => {
   });
 
   it('does not warn when the child array contains non-elements', () => {
-    void <Component>{[{}, {}]}</Component>;
+    void (<Component>{[{}, {}]}</Component>);
   });
 
   it('should give context for PropType errors in nested components.', () => {
@@ -163,7 +163,7 @@ describe('ReactJSXElementValidator', () => {
         return <MyComp color={123} />;
       }
     }
-    expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
         'expected `string`.\n' +
@@ -195,7 +195,7 @@ describe('ReactJSXElementValidator', () => {
     ReactDOM.render(<ParentComp warn={false} />, container);
     expect(() =>
       ReactDOM.render(<ParentComp warn={true} />, container),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
         'expected `string`.\n' +
@@ -210,7 +210,9 @@ describe('ReactJSXElementValidator', () => {
     const Null = null;
     const True = true;
     const Div = 'div';
-    expect(() => void <Undefined />).toWarnDev(
+    expect(
+      () => void (<Undefined />),
+    ).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string ' +
         '(for built-in components) or a class/function (for composite ' +
         'components) but got: undefined. You likely forgot to export your ' +
@@ -219,14 +221,18 @@ describe('ReactJSXElementValidator', () => {
         '\n\nCheck your code at **.',
       {withoutStack: true},
     );
-    expect(() => void <Null />).toWarnDev(
+    expect(
+      () => void (<Null />),
+    ).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string ' +
         '(for built-in components) or a class/function (for composite ' +
         'components) but got: null.' +
         '\n\nCheck your code at **.',
       {withoutStack: true},
     );
-    expect(() => void <True />).toWarnDev(
+    expect(
+      () => void (<True />),
+    ).toErrorDev(
       'Warning: React.createElement: type is invalid -- expected a string ' +
         '(for built-in components) or a class/function (for composite ' +
         'components) but got: boolean.' +
@@ -234,7 +240,7 @@ describe('ReactJSXElementValidator', () => {
       {withoutStack: true},
     );
     // No error expected
-    void <Div />;
+    void (<Div />);
   });
 
   it('should check default prop values', () => {
@@ -242,7 +248,7 @@ describe('ReactJSXElementValidator', () => {
 
     expect(() =>
       ReactTestUtils.renderIntoDocument(<RequiredPropComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `prop` is marked as required in ' +
         '`RequiredPropComponent`, but its value is `null`.\n' +
         '    in RequiredPropComponent (at **)',
@@ -252,7 +258,7 @@ describe('ReactJSXElementValidator', () => {
   it('should not check the default for explicit null', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(<RequiredPropComponent prop={null} />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `prop` is marked as required in ' +
         '`RequiredPropComponent`, but its value is `null`.\n' +
         '    in RequiredPropComponent (at **)',
@@ -262,7 +268,7 @@ describe('ReactJSXElementValidator', () => {
   it('should check declared prop types', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(<RequiredPropComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: ' +
         'The prop `prop` is marked as required in `RequiredPropComponent`, but ' +
         'its value is `undefined`.\n' +
@@ -270,7 +276,7 @@ describe('ReactJSXElementValidator', () => {
     );
     expect(() =>
       ReactTestUtils.renderIntoDocument(<RequiredPropComponent prop={42} />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `prop` of type `number` supplied to ' +
         '`RequiredPropComponent`, expected `string`.\n' +
@@ -296,7 +302,7 @@ describe('ReactJSXElementValidator', () => {
     };
     expect(() =>
       ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
         'function, usually from the `prop-types` package,',
     );
@@ -313,7 +319,7 @@ describe('ReactJSXElementValidator', () => {
     };
     expect(() =>
       ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'NullContextTypeComponent: context type `prop` is invalid; it must ' +
         'be a function, usually from the `prop-types` package,',
     );
@@ -330,7 +336,7 @@ describe('ReactJSXElementValidator', () => {
     });
     expect(() =>
       ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />),
-    ).toWarnDev(
+    ).toErrorDev(
       'getDefaultProps is only used on classic React.createClass definitions.' +
         ' Use a static property named `defaultProps` instead.',
       {withoutStack: true},
@@ -350,7 +356,7 @@ describe('ReactJSXElementValidator', () => {
       ReactTestUtils.renderIntoDocument(
         <MisspelledPropTypesComponent prop="hi" />,
       ),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
         'instead of `propTypes`. Did you misspell the property assignment?',
       {withoutStack: true},
@@ -364,7 +370,7 @@ describe('ReactJSXElementValidator', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
       'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
         'can only have `key` and `children` props.',
     );
@@ -384,30 +390,30 @@ describe('ReactJSXElementValidator', () => {
       }
     }
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toWarnDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
       'Invalid attribute `ref` supplied to `React.Fragment`.',
     );
   });
 
   it('does not warn for fragments of multiple elements without keys', () => {
     ReactTestUtils.renderIntoDocument(
-      <React.Fragment>
+      <>
         <span>1</span>
         <span>2</span>
-      </React.Fragment>,
+      </>,
     );
   });
 
   it('warns for fragments of multiple elements with same key', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(
-        <React.Fragment>
+        <>
           <span key="a">1</span>
           <span key="a">2</span>
           <span key="b">3</span>
-        </React.Fragment>,
+        </>,
       ),
-    ).toWarnDev('Encountered two children with the same key, `a`.', {
+    ).toErrorDev('Encountered two children with the same key, `a`.', {
       withoutStack: true,
     });
   });
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 508d7814c821a..ad47793c8259a 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -30,7 +30,6 @@ function loadModules({
   useNoopRenderer = false,
 } = {}) {
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.debugRenderPhaseSideEffects = false;
   ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
   ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
   ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
@@ -59,53 +58,47 @@ function loadModules({
     }
     render() {
       // Simulate time passing when this component is rendered
-      Scheduler.advanceTime(this.props.byAmount);
+      Scheduler.unstable_advanceTime(this.props.byAmount);
       return this.props.children || null;
     }
   };
 
   resourcePromise = null;
 
-  TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-    resourcePromise = new Promise((resolve, reject) =>
-      setTimeout(() => {
-        Scheduler.yieldValue(`Promise resolved [${text}]`);
-        resolve(text);
-      }, ms),
-    );
-    return resourcePromise;
-  }, ([text, ms]) => text);
+  TextResource = ReactCache.unstable_createResource(
+    ([text, ms = 0]) => {
+      resourcePromise = new Promise((resolve, reject) =>
+        setTimeout(() => {
+          Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+          resolve(text);
+        }, ms),
+      );
+      return resourcePromise;
+    },
+    ([text, ms]) => text,
+  );
 
   AsyncText = ({ms, text}) => {
     try {
       TextResource.read([text, ms]);
-      Scheduler.yieldValue(`AsyncText [${text}]`);
+      Scheduler.unstable_yieldValue(`AsyncText [${text}]`);
       return text;
     } catch (promise) {
       if (typeof promise.then === 'function') {
-        Scheduler.yieldValue(`Suspend [${text}]`);
+        Scheduler.unstable_yieldValue(`Suspend [${text}]`);
       } else {
-        Scheduler.yieldValue(`Error [${text}]`);
+        Scheduler.unstable_yieldValue(`Error [${text}]`);
       }
       throw promise;
     }
   };
 
   Text = ({text}) => {
-    Scheduler.yieldValue(`Text [${text}]`);
+    Scheduler.unstable_yieldValue(`Text [${text}]`);
     return text;
   };
 }
 
-const mockDevToolsForTest = () => {
-  jest.mock('react-reconciler/src/ReactFiberDevToolsHook', () => ({
-    injectInternals: () => {},
-    onCommitRoot: () => {},
-    onCommitUnmount: () => {},
-    isDevToolsPresent: true,
-  }));
-};
-
 describe('Profiler', () => {
   describe('works in profiling and non-profiling bundles', () => {
     [true, false].forEach(enableSchedulerTracing => {
@@ -126,10 +119,8 @@ describe('Profiler', () => {
           if (__DEV__ && enableProfilerTimer) {
             it('should warn if required params are missing', () => {
               expect(() => {
-                expect(() => {
-                  ReactTestRenderer.create(<React.Profiler />);
-                }).toThrow('onRender is not a function');
-              }).toWarnDev(
+                ReactTestRenderer.create(<React.Profiler />);
+              }).toErrorDev(
                 'Profiler must specify an "id" string and "onRender" function as props',
                 {withoutStack: true},
               );
@@ -237,7 +228,7 @@ describe('Profiler', () => {
         const callback = jest.fn();
 
         const Yield = ({value}) => {
-          Scheduler.yieldValue(value);
+          Scheduler.unstable_yieldValue(value);
           return null;
         };
 
@@ -268,7 +259,7 @@ describe('Profiler', () => {
           return {
             ...ActualScheduler,
             unstable_now: function mockUnstableNow() {
-              ActualScheduler.yieldValue('read current time');
+              ActualScheduler.unstable_yieldValue('read current time');
               return ActualScheduler.unstable_now();
             },
           };
@@ -306,10 +297,86 @@ describe('Profiler', () => {
         );
       });
 
+      it('does not report work done on a sibling', () => {
+        const callback = jest.fn();
+
+        const DoesNotUpdate = React.memo(
+          function DoesNotUpdateInner() {
+            Scheduler.unstable_advanceTime(10);
+            return null;
+          },
+          () => true,
+        );
+
+        let updateProfilerSibling;
+
+        function ProfilerSibling() {
+          const [count, setCount] = React.useState(0);
+          updateProfilerSibling = () => setCount(count + 1);
+          return null;
+        }
+
+        function App() {
+          return (
+            <React.Fragment>
+              <React.Profiler id="test" onRender={callback}>
+                <DoesNotUpdate />
+              </React.Profiler>
+              <ProfilerSibling />
+            </React.Fragment>
+          );
+        }
+
+        const renderer = ReactTestRenderer.create(<App />);
+
+        expect(callback).toHaveBeenCalledTimes(1);
+
+        let call = callback.mock.calls[0];
+
+        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);
+        expect(call[0]).toBe('test');
+        expect(call[1]).toBe('mount');
+        expect(call[2]).toBe(10); // actual time
+        expect(call[3]).toBe(10); // base time
+        expect(call[4]).toBe(0); // start time
+        expect(call[5]).toBe(10); // commit time
+        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+
+        callback.mockReset();
+
+        Scheduler.unstable_advanceTime(20); // 10 -> 30
+
+        // Updating a parent should report a re-render,
+        // since React technically did a little bit of work between the Profiler and the bailed out subtree.
+        renderer.update(<App />);
+
+        expect(callback).toHaveBeenCalledTimes(1);
+
+        call = callback.mock.calls[0];
+
+        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);
+        expect(call[0]).toBe('test');
+        expect(call[1]).toBe('update');
+        expect(call[2]).toBe(0); // actual time
+        expect(call[3]).toBe(10); // base time
+        expect(call[4]).toBe(30); // start time
+        expect(call[5]).toBe(30); // commit time
+        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+
+        callback.mockReset();
+
+        Scheduler.unstable_advanceTime(20); // 30 -> 50
+
+        // Updating a sibling should not report a re-render.
+        ReactTestRenderer.act(updateProfilerSibling);
+
+        expect(callback).not.toHaveBeenCalled();
+      });
+
       it('logs render times for both mount and update', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="test" onRender={callback}>
@@ -332,7 +399,7 @@ describe('Profiler', () => {
 
         callback.mockReset();
 
-        Scheduler.advanceTime(20); // 15 -> 35
+        Scheduler.unstable_advanceTime(20); // 15 -> 35
 
         renderer.update(
           <React.Profiler id="test" onRender={callback}>
@@ -355,7 +422,7 @@ describe('Profiler', () => {
 
         callback.mockReset();
 
-        Scheduler.advanceTime(20); // 45 -> 65
+        Scheduler.unstable_advanceTime(20); // 45 -> 65
 
         renderer.update(
           <React.Profiler id="test" onRender={callback}>
@@ -380,7 +447,7 @@ describe('Profiler', () => {
       it('includes render times of nested Profilers in their parent times', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         ReactTestRenderer.create(
           <React.Fragment>
@@ -415,7 +482,7 @@ describe('Profiler', () => {
       it('traces sibling Profilers separately', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         ReactTestRenderer.create(
           <React.Fragment>
@@ -448,7 +515,7 @@ describe('Profiler', () => {
       it('does not include time spent outside of profile root', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         ReactTestRenderer.create(
           <React.Fragment>
@@ -482,28 +549,18 @@ describe('Profiler', () => {
           }
         }
 
-        class Pure extends React.PureComponent {
-          render() {
-            return this.props.children;
-          }
-        }
-
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="outer" onRender={callback}>
             <Updater>
-              <React.Profiler id="middle" onRender={callback}>
-                <Pure>
-                  <React.Profiler id="inner" onRender={callback}>
-                    <div />
-                  </React.Profiler>
-                </Pure>
+              <React.Profiler id="inner" onRender={callback}>
+                <div />
               </React.Profiler>
             </Updater>
           </React.Profiler>,
         );
 
         // All profile callbacks are called for initial render
-        expect(callback).toHaveBeenCalledTimes(3);
+        expect(callback).toHaveBeenCalledTimes(2);
 
         callback.mockReset();
 
@@ -513,17 +570,17 @@ describe('Profiler', () => {
           });
         });
 
-        // Only call profile updates for paths that have re-rendered
-        // Since "inner" is beneath a pure component, it isn't called
-        expect(callback).toHaveBeenCalledTimes(2);
-        expect(callback.mock.calls[0][0]).toBe('middle');
-        expect(callback.mock.calls[1][0]).toBe('outer');
+        // Only call onRender for paths that have re-rendered.
+        // Since the Updater's props didn't change,
+        // React does not re-render its children.
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0]).toBe('outer');
       });
 
       it('decreases actual time but not base time when sCU prevents an update', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="test" onRender={callback}>
@@ -535,7 +592,7 @@ describe('Profiler', () => {
 
         expect(callback).toHaveBeenCalledTimes(1);
 
-        Scheduler.advanceTime(30); // 28 -> 58
+        Scheduler.unstable_advanceTime(30); // 28 -> 58
 
         renderer.update(
           <React.Profiler id="test" onRender={callback}>
@@ -566,22 +623,22 @@ describe('Profiler', () => {
         class WithLifecycles extends React.Component {
           state = {};
           static getDerivedStateFromProps() {
-            Scheduler.advanceTime(3);
+            Scheduler.unstable_advanceTime(3);
             return null;
           }
           shouldComponentUpdate() {
-            Scheduler.advanceTime(7);
+            Scheduler.unstable_advanceTime(7);
             return true;
           }
           render() {
-            Scheduler.advanceTime(5);
+            Scheduler.unstable_advanceTime(5);
             return null;
           }
         }
 
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="test" onRender={callback}>
@@ -589,7 +646,7 @@ describe('Profiler', () => {
           </React.Profiler>,
         );
 
-        Scheduler.advanceTime(15); // 13 -> 28
+        Scheduler.unstable_advanceTime(15); // 13 -> 28
 
         renderer.update(
           <React.Profiler id="test" onRender={callback}>
@@ -619,12 +676,12 @@ describe('Profiler', () => {
           const callback = jest.fn();
 
           const Yield = ({renderTime}) => {
-            Scheduler.advanceTime(renderTime);
-            Scheduler.yieldValue('Yield:' + renderTime);
+            Scheduler.unstable_advanceTime(renderTime);
+            Scheduler.unstable_yieldValue('Yield:' + renderTime);
             return null;
           };
 
-          Scheduler.advanceTime(5); // 0 -> 5
+          Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           // Render partially, but run out of time before completing.
           ReactTestRenderer.create(
@@ -653,12 +710,12 @@ describe('Profiler', () => {
           const callback = jest.fn();
 
           const Yield = ({renderTime}) => {
-            Scheduler.advanceTime(renderTime);
-            Scheduler.yieldValue('Yield:' + renderTime);
+            Scheduler.unstable_advanceTime(renderTime);
+            Scheduler.unstable_yieldValue('Yield:' + renderTime);
             return null;
           };
 
-          Scheduler.advanceTime(5); // 0 -> 5
+          Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           // Render partially, but don't finish.
           // This partial render should take 5ms of simulated time.
@@ -676,7 +733,7 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(0);
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(50); // 10 -> 60
+          Scheduler.unstable_advanceTime(50); // 10 -> 60
 
           // Flush the remaining work,
           // Which should take an additional 10ms of simulated time.
@@ -703,12 +760,12 @@ describe('Profiler', () => {
           const callback = jest.fn();
 
           const Yield = ({renderTime}) => {
-            Scheduler.advanceTime(renderTime);
-            Scheduler.yieldValue('Yield:' + renderTime);
+            Scheduler.unstable_advanceTime(renderTime);
+            Scheduler.unstable_yieldValue('Yield:' + renderTime);
             return null;
           };
 
-          Scheduler.advanceTime(5); // 0 -> 5
+          Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           // Render a partially update, but don't finish.
           // This partial render should take 10ms of simulated time.
@@ -723,7 +780,7 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(0);
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(100); // 15 -> 115
+          Scheduler.unstable_advanceTime(100); // 15 -> 115
 
           // Interrupt with higher priority work.
           // The interrupted work simulates an additional 5ms of time.
@@ -756,12 +813,12 @@ describe('Profiler', () => {
           const callback = jest.fn();
 
           const Yield = ({renderTime}) => {
-            Scheduler.advanceTime(renderTime);
-            Scheduler.yieldValue('Yield:' + renderTime);
+            Scheduler.unstable_advanceTime(renderTime);
+            Scheduler.unstable_yieldValue('Yield:' + renderTime);
             return null;
           };
 
-          Scheduler.advanceTime(5); // 0 -> 5
+          Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           const renderer = ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
@@ -783,7 +840,7 @@ describe('Profiler', () => {
 
           callback.mockReset();
 
-          Scheduler.advanceTime(30); // 26 -> 56
+          Scheduler.unstable_advanceTime(30); // 26 -> 56
 
           // Render a partially update, but don't finish.
           // This partial render should take 3ms of simulated time.
@@ -798,14 +855,14 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(0);
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(100); // 59 -> 159
+          Scheduler.unstable_advanceTime(100); // 59 -> 159
 
           // Render another 5ms of simulated time.
           expect(Scheduler).toFlushAndYieldThrough(['Yield:5']);
           expect(callback).toHaveBeenCalledTimes(0);
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(100); // 164 -> 264
+          Scheduler.unstable_advanceTime(100); // 164 -> 264
 
           // Interrupt with higher priority work.
           // The interrupted work simulates an additional 11ms of time.
@@ -837,8 +894,8 @@ describe('Profiler', () => {
           const callback = jest.fn();
 
           const Yield = ({renderTime}) => {
-            Scheduler.advanceTime(renderTime);
-            Scheduler.yieldValue('Yield:' + renderTime);
+            Scheduler.unstable_advanceTime(renderTime);
+            Scheduler.unstable_yieldValue('Yield:' + renderTime);
             return null;
           };
 
@@ -847,8 +904,10 @@ describe('Profiler', () => {
             state = {renderTime: 1};
             render() {
               first = this;
-              Scheduler.advanceTime(this.state.renderTime);
-              Scheduler.yieldValue('FirstComponent:' + this.state.renderTime);
+              Scheduler.unstable_advanceTime(this.state.renderTime);
+              Scheduler.unstable_yieldValue(
+                'FirstComponent:' + this.state.renderTime,
+              );
               return <Yield renderTime={4} />;
             }
           }
@@ -857,13 +916,15 @@ describe('Profiler', () => {
             state = {renderTime: 2};
             render() {
               second = this;
-              Scheduler.advanceTime(this.state.renderTime);
-              Scheduler.yieldValue('SecondComponent:' + this.state.renderTime);
+              Scheduler.unstable_advanceTime(this.state.renderTime);
+              Scheduler.unstable_yieldValue(
+                'SecondComponent:' + this.state.renderTime,
+              );
               return <Yield renderTime={7} />;
             }
           }
 
-          Scheduler.advanceTime(5); // 0 -> 5
+          Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           const renderer = ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
@@ -891,7 +952,7 @@ describe('Profiler', () => {
 
           callback.mockClear();
 
-          Scheduler.advanceTime(100); // 19 -> 119
+          Scheduler.unstable_advanceTime(100); // 19 -> 119
 
           // Render a partially update, but don't finish.
           // This partial render will take 10ms of actual render time.
@@ -900,7 +961,7 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(0);
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(100); // 129 -> 229
+          Scheduler.unstable_advanceTime(100); // 129 -> 229
 
           // Interrupt with higher priority work.
           // This simulates a total of 37ms of actual render time.
@@ -921,7 +982,7 @@ describe('Profiler', () => {
           callback.mockClear();
 
           // Simulate time moving forward while frame is paused.
-          Scheduler.advanceTime(100); // 266 -> 366
+          Scheduler.unstable_advanceTime(100); // 266 -> 366
 
           // Resume the original low priority update, with rebased state.
           // This simulates a total of 14ms of actual render time,
@@ -957,7 +1018,7 @@ describe('Profiler', () => {
                 const callback = jest.fn();
 
                 const ThrowsError = () => {
-                  Scheduler.advanceTime(3);
+                  Scheduler.unstable_advanceTime(3);
                   throw Error('expected error');
                 };
 
@@ -967,7 +1028,7 @@ describe('Profiler', () => {
                     this.setState({error});
                   }
                   render() {
-                    Scheduler.advanceTime(2);
+                    Scheduler.unstable_advanceTime(2);
                     return this.state.error === null ? (
                       this.props.children
                     ) : (
@@ -976,7 +1037,7 @@ describe('Profiler', () => {
                   }
                 }
 
-                Scheduler.advanceTime(5); // 0 -> 5
+                Scheduler.unstable_advanceTime(5); // 0 -> 5
 
                 ReactTestRenderer.create(
                   <React.Profiler id="test" onRender={callback}>
@@ -1036,7 +1097,7 @@ describe('Profiler', () => {
                 const callback = jest.fn();
 
                 const ThrowsError = () => {
-                  Scheduler.advanceTime(10);
+                  Scheduler.unstable_advanceTime(10);
                   throw Error('expected error');
                 };
 
@@ -1046,7 +1107,7 @@ describe('Profiler', () => {
                     return {error};
                   }
                   render() {
-                    Scheduler.advanceTime(2);
+                    Scheduler.unstable_advanceTime(2);
                     return this.state.error === null ? (
                       this.props.children
                     ) : (
@@ -1055,7 +1116,7 @@ describe('Profiler', () => {
                   }
                 }
 
-                Scheduler.advanceTime(5); // 0 -> 5
+                Scheduler.unstable_advanceTime(5); // 0 -> 5
 
                 ReactTestRenderer.create(
                   <React.Profiler id="test" onRender={callback}>
@@ -1135,7 +1196,7 @@ describe('Profiler', () => {
       it('reflects the most recently rendered id value', () => {
         const callback = jest.fn();
 
-        Scheduler.advanceTime(5); // 0 -> 5
+        Scheduler.unstable_advanceTime(5); // 0 -> 5
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="one" onRender={callback}>
@@ -1145,7 +1206,7 @@ describe('Profiler', () => {
 
         expect(callback).toHaveBeenCalledTimes(1);
 
-        Scheduler.advanceTime(20); // 7 -> 27
+        Scheduler.unstable_advanceTime(20); // 7 -> 27
 
         renderer.update(
           <React.Profiler id="two" onRender={callback}>
@@ -1183,11 +1244,11 @@ describe('Profiler', () => {
 
         class ClassComponent extends React.Component {
           componentDidMount() {
-            Scheduler.advanceTime(5);
+            Scheduler.unstable_advanceTime(5);
             classComponentMounted = true;
           }
           render() {
-            Scheduler.advanceTime(2);
+            Scheduler.unstable_advanceTime(2);
             return null;
           }
         }
@@ -1203,69 +1264,6 @@ describe('Profiler', () => {
     });
   });
 
-  it('should handle interleaved async yields and batched commits', () => {
-    jest.resetModules();
-    mockDevToolsForTest();
-    loadModules({useNoopRenderer: true});
-
-    const Child = ({duration, id}) => {
-      Scheduler.advanceTime(duration);
-      Scheduler.yieldValue(`Child:render:${id}`);
-      return null;
-    };
-
-    class Parent extends React.Component {
-      componentDidMount() {
-        Scheduler.yieldValue(`Parent:componentDidMount:${this.props.id}`);
-      }
-      render() {
-        const {duration, id} = this.props;
-        return (
-          <React.Fragment>
-            <Child duration={duration} id={id} />
-            <Child duration={duration} id={id} />
-          </React.Fragment>
-        );
-      }
-    }
-
-    Scheduler.advanceTime(50);
-
-    ReactNoop.renderToRootWithID(<Parent duration={3} id="one" />, 'one');
-
-    // Process up to the <Parent> component, but yield before committing.
-    // This ensures that the profiler timer still has paused fibers.
-    const commitFirstRender = ReactNoop.flushWithoutCommitting(
-      ['Child:render:one', 'Child:render:one'],
-      'one',
-    );
-
-    expect(ReactNoop.getRoot('one').current.actualDuration).toBe(0);
-
-    Scheduler.advanceTime(100);
-
-    // Process some async work, but yield before committing it.
-    ReactNoop.renderToRootWithID(<Parent duration={7} id="two" />, 'two');
-    expect(Scheduler).toFlushAndYieldThrough(['Child:render:two']);
-
-    Scheduler.advanceTime(150);
-
-    // Commit the previously paused, batched work.
-    commitFirstRender(['Parent:componentDidMount:one']);
-
-    expect(ReactNoop.getRoot('one').current.actualDuration).toBe(6);
-    expect(ReactNoop.getRoot('two').current.actualDuration).toBe(0);
-
-    Scheduler.advanceTime(200);
-
-    expect(Scheduler).toFlushAndYield([
-      'Child:render:two',
-      'Parent:componentDidMount:two',
-    ]);
-
-    expect(ReactNoop.getRoot('two').current.actualDuration).toBe(14);
-  });
-
   describe('interaction tracing', () => {
     let onInteractionScheduledWorkCompleted;
     let onInteractionTraced;
@@ -1333,7 +1331,7 @@ describe('Profiler', () => {
     describe('error handling', () => {
       it('should cover errors thrown in onWorkScheduled', () => {
         function Component({children}) {
-          Scheduler.yieldValue('Component:' + children);
+          Scheduler.unstable_yieldValue('Component:' + children);
           return children;
         }
 
@@ -1368,7 +1366,7 @@ describe('Profiler', () => {
 
       it('should cover errors thrown in onWorkStarted', () => {
         function Component({children}) {
-          Scheduler.yieldValue('Component:' + children);
+          Scheduler.unstable_yieldValue('Component:' + children);
           return children;
         }
 
@@ -1403,7 +1401,7 @@ describe('Profiler', () => {
 
       it('should cover errors thrown in onWorkStopped', () => {
         function Component({children}) {
-          Scheduler.yieldValue('Component:' + children);
+          Scheduler.unstable_yieldValue('Component:' + children);
           return children;
         }
 
@@ -1438,7 +1436,7 @@ describe('Profiler', () => {
 
       it('should cover errors thrown in onInteractionScheduledWorkCompleted', () => {
         function Component({children}) {
-          Scheduler.yieldValue('Component:' + children);
+          Scheduler.unstable_yieldValue('Component:' + children);
           return children;
         }
 
@@ -1513,8 +1511,8 @@ describe('Profiler', () => {
       let instance = null;
 
       const Yield = ({duration = 10, value}) => {
-        Scheduler.advanceTime(duration);
-        Scheduler.yieldValue(value);
+        Scheduler.unstable_advanceTime(duration);
+        Scheduler.unstable_yieldValue(value);
         return null;
       };
 
@@ -1534,7 +1532,7 @@ describe('Profiler', () => {
         }
       }
 
-      Scheduler.advanceTime(1);
+      Scheduler.unstable_advanceTime(1);
 
       const interactionCreation = {
         id: 0,
@@ -1608,7 +1606,7 @@ describe('Profiler', () => {
       onWorkStarted.mockClear();
       onWorkStopped.mockClear();
 
-      Scheduler.advanceTime(3);
+      Scheduler.unstable_advanceTime(3);
 
       let didRunCallback = false;
 
@@ -1684,7 +1682,7 @@ describe('Profiler', () => {
       onWorkStarted.mockClear();
       onWorkStopped.mockClear();
 
-      Scheduler.advanceTime(17);
+      Scheduler.unstable_advanceTime(17);
 
       // Verify that updating state again does not re-log our interaction.
       instance.setState({count: 3});
@@ -1708,7 +1706,7 @@ describe('Profiler', () => {
 
       onRender.mockClear();
 
-      Scheduler.advanceTime(3);
+      Scheduler.unstable_advanceTime(3);
 
       // Verify that root updates are also associated with traced events.
       const interactionTwo = {
@@ -1781,7 +1779,7 @@ describe('Profiler', () => {
         state = {count: 0};
         render() {
           first = this;
-          Scheduler.yieldValue('FirstComponent');
+          Scheduler.unstable_yieldValue('FirstComponent');
           return null;
         }
       }
@@ -1790,12 +1788,12 @@ describe('Profiler', () => {
         state = {count: 0};
         render() {
           second = this;
-          Scheduler.yieldValue('SecondComponent');
+          Scheduler.unstable_yieldValue('SecondComponent');
           return null;
         }
       }
 
-      Scheduler.advanceTime(5);
+      Scheduler.unstable_advanceTime(5);
 
       const renderer = ReactTestRenderer.create(
         <React.Profiler id="test" onRender={onRender}>
@@ -1813,7 +1811,7 @@ describe('Profiler', () => {
 
       onRender.mockClear();
 
-      Scheduler.advanceTime(100);
+      Scheduler.unstable_advanceTime(100);
 
       const interactionLowPri = {
         id: 0,
@@ -1847,7 +1845,7 @@ describe('Profiler', () => {
           ).toMatchInteractions([interactionLowPri]);
           expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
 
-          Scheduler.advanceTime(100);
+          Scheduler.unstable_advanceTime(100);
 
           const interactionHighPri = {
             id: 1,
@@ -1898,7 +1896,7 @@ describe('Profiler', () => {
 
           onRender.mockClear();
 
-          Scheduler.advanceTime(100);
+          Scheduler.unstable_advanceTime(100);
 
           // Resume the original low priority update, with rebased state.
           // Verify the low priority update was retained.
@@ -1949,18 +1947,18 @@ describe('Profiler', () => {
           count: 0,
         };
         componentDidMount() {
-          Scheduler.advanceTime(10); // Advance timer to keep commits separate
+          Scheduler.unstable_advanceTime(10); // Advance timer to keep commits separate
           this.setState({count: 1}); // Intentional cascading update
         }
         componentDidUpdate(prevProps, prevState) {
           if (this.state.count === 2 && prevState.count === 1) {
-            Scheduler.advanceTime(10); // Advance timer to keep commits separate
+            Scheduler.unstable_advanceTime(10); // Advance timer to keep commits separate
             this.setState({count: 3}); // Intentional cascading update
           }
         }
         render() {
           instance = this;
-          Scheduler.yieldValue('Example:' + this.state.count);
+          Scheduler.unstable_yieldValue('Example:' + this.state.count);
           return null;
         }
       }
@@ -2056,7 +2054,7 @@ describe('Profiler', () => {
       expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(2);
       expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(2);
 
-      Scheduler.advanceTime(5);
+      Scheduler.unstable_advanceTime(5);
 
       // Flush async work (outside of traced scope)
       // This will cause an intentional cascading update from did-update
@@ -2174,7 +2172,7 @@ describe('Profiler', () => {
 
       class Child extends React.Component {
         render() {
-          Scheduler.yieldValue('Child:' + this.props.count);
+          Scheduler.unstable_yieldValue('Child:' + this.props.count);
           return null;
         }
       }
@@ -2193,7 +2191,7 @@ describe('Profiler', () => {
         }
       }
 
-      Scheduler.advanceTime(1);
+      Scheduler.unstable_advanceTime(1);
 
       ReactTestRenderer.create(<Parent />, {
         unstable_isConcurrent: true,
@@ -2267,7 +2265,7 @@ describe('Profiler', () => {
         const monkey = React.createRef();
         class Monkey extends React.Component {
           render() {
-            Scheduler.yieldValue('Monkey');
+            Scheduler.unstable_yieldValue('Monkey');
             return null;
           }
         }
@@ -2303,17 +2301,6 @@ describe('Profiler', () => {
           'Text [Sync]',
           'Monkey',
         ]);
-        // The update hasn't expired yet, so we commit nothing.
-        expect(ReactNoop.getChildrenAsJSX()).toEqual(null);
-        expect(onRender).not.toHaveBeenCalled();
-
-        // Advance both React's virtual time and Jest's timers by enough to expire
-        // the update, but not by enough to flush the suspending promise.
-        ReactNoop.expire(10000);
-        await awaitableAdvanceTimers(10000);
-        // No additional rendering work is required, since we already prepared
-        // the placeholder.
-        expect(Scheduler).toHaveYielded([]);
         // Should have committed the placeholder.
         expect(ReactNoop.getChildrenAsJSX()).toEqual('Loading...Sync');
         expect(onRender).toHaveBeenCalledTimes(1);
@@ -2333,7 +2320,7 @@ describe('Profiler', () => {
         expect(onRender).toHaveBeenCalledTimes(2);
 
         // Once the promise resolves, we render the suspended view
-        await awaitableAdvanceTimers(10000);
+        await awaitableAdvanceTimers(20000);
         expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
         expect(Scheduler).toFlushAndYield(['AsyncText [Async]']);
         expect(ReactNoop.getChildrenAsJSX()).toEqual('AsyncSync');
@@ -2475,7 +2462,7 @@ describe('Profiler', () => {
           },
         );
 
-        Scheduler.advanceTime(400);
+        Scheduler.unstable_advanceTime(400);
         await awaitableAdvanceTimers(400);
 
         expect(Scheduler).toFlushAndYield([
@@ -2484,7 +2471,7 @@ describe('Profiler', () => {
         ]);
         expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
 
-        Scheduler.advanceTime(500);
+        Scheduler.unstable_advanceTime(500);
         await awaitableAdvanceTimers(500);
 
         expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
@@ -2613,7 +2600,7 @@ describe('Profiler', () => {
         ).toMatchInteraction(highPriUpdateInteraction);
         onInteractionScheduledWorkCompleted.mockClear();
 
-        Scheduler.advanceTime(100);
+        Scheduler.unstable_advanceTime(100);
         jest.advanceTimersByTime(100);
         await originalPromise;
 
@@ -2633,6 +2620,16 @@ describe('Profiler', () => {
       });
 
       it('handles high-pri renderers between suspended and resolved (async) trees', async () => {
+        // Set up an initial shell. We need to set this up before the test sceanrio
+        // because we want initial render to suspend on navigation to the initial state.
+        let renderer = ReactTestRenderer.create(
+          <React.Profiler id="app" onRender={() => {}}>
+            <React.Suspense fallback={<Text text="loading" />} />
+          </React.Profiler>,
+          {unstable_isConcurrent: true},
+        );
+        expect(Scheduler).toFlushAndYield([]);
+
         const initialRenderInteraction = {
           id: 0,
           name: 'initial render',
@@ -2640,19 +2637,17 @@ describe('Profiler', () => {
         };
 
         const onRender = jest.fn();
-        let renderer;
         SchedulerTracing.unstable_trace(
           initialRenderInteraction.name,
           initialRenderInteraction.timestamp,
           () => {
-            renderer = ReactTestRenderer.create(
+            renderer.update(
               <React.Profiler id="app" onRender={onRender}>
                 <React.Suspense fallback={<Text text="loading" />}>
                   <AsyncText text="loaded" ms={100} />
                 </React.Suspense>
                 <Text text="initial" />
               </React.Profiler>,
-              {unstable_isConcurrent: true},
             );
           },
         );
@@ -2665,7 +2660,7 @@ describe('Profiler', () => {
         expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
         expect(onRender).not.toHaveBeenCalled();
 
-        Scheduler.advanceTime(50);
+        Scheduler.unstable_advanceTime(50);
         jest.advanceTimersByTime(50);
 
         const highPriUpdateInteraction = {
@@ -2707,7 +2702,7 @@ describe('Profiler', () => {
 
         expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
 
-        Scheduler.advanceTime(50);
+        Scheduler.unstable_advanceTime(50);
         jest.advanceTimersByTime(50);
         await originalPromise;
         expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
@@ -2728,6 +2723,91 @@ describe('Profiler', () => {
           onInteractionScheduledWorkCompleted.mock.calls[1][0],
         ).toMatchInteraction(highPriUpdateInteraction);
       });
+
+      it('does not trace Promises flagged with __reactDoNotTraceInteractions', async () => {
+        loadModulesForTracing({useNoopRenderer: true});
+
+        const interaction = {
+          id: 0,
+          name: 'initial render',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        AsyncText = ({ms, text}) => {
+          try {
+            TextResource.read([text, ms]);
+            Scheduler.unstable_yieldValue(`AsyncText [${text}]`);
+            return text;
+          } catch (promise) {
+            promise.__reactDoNotTraceInteractions = true;
+
+            if (typeof promise.then === 'function') {
+              Scheduler.unstable_yieldValue(`Suspend [${text}]`);
+            } else {
+              Scheduler.unstable_yieldValue(`Error [${text}]`);
+            }
+            throw promise;
+          }
+        };
+
+        const onRender = jest.fn();
+        SchedulerTracing.unstable_trace(
+          interaction.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.render(
+              <React.Profiler id="test-profiler" onRender={onRender}>
+                <React.Suspense fallback={<Text text="Loading..." />}>
+                  <AsyncText text="Async" ms={20000} />
+                </React.Suspense>
+                <Text text="Sync" />
+              </React.Profiler>,
+            );
+          },
+        );
+
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+          interaction,
+        );
+        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
+        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
+
+        expect(Scheduler).toFlushAndYield([
+          'Suspend [Async]',
+          'Text [Loading...]',
+          'Text [Sync]',
+        ]);
+        // Should have committed the placeholder.
+        expect(ReactNoop.getChildrenAsJSX()).toEqual('Loading...Sync');
+        expect(onRender).toHaveBeenCalledTimes(1);
+
+        let call = onRender.mock.calls[0];
+        expect(call[0]).toEqual('test-profiler');
+        expect(call[6]).toMatchInteractions(
+          ReactFeatureFlags.enableSchedulerTracing ? [interaction] : [],
+        );
+
+        // The interaction is now complete.
+        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+        expect(
+          onInteractionScheduledWorkCompleted,
+        ).toHaveBeenLastNotifiedOfInteraction(interaction);
+
+        // Once the promise resolves, we render the suspended view
+        await awaitableAdvanceTimers(20000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield(['AsyncText [Async]']);
+        expect(ReactNoop.getChildrenAsJSX()).toEqual('AsyncSync');
+        expect(onRender).toHaveBeenCalledTimes(2);
+
+        // No interactions should be associated with this update.
+        call = onRender.mock.calls[1];
+        expect(call[0]).toEqual('test-profiler');
+        expect(call[6]).toMatchInteractions([]);
+      });
     });
   });
 });
diff --git a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js b/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
index 8d2bf3cf8b337..1152818abc191 100644
--- a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
@@ -14,11 +14,9 @@ let ReactFeatureFlags;
 let ReactDOM;
 let SchedulerTracing;
 let Scheduler;
-let ReactCache;
 
 function loadModules() {
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.debugRenderPhaseSideEffects = false;
   ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
   ReactFeatureFlags.enableProfilerTimer = true;
   ReactFeatureFlags.enableSchedulerTracing = true;
@@ -27,12 +25,9 @@ function loadModules() {
   SchedulerTracing = require('scheduler/tracing');
   ReactDOM = require('react-dom');
   Scheduler = require('scheduler');
-  ReactCache = require('react-cache');
 }
 
 describe('ProfilerDOM', () => {
-  let TextResource;
-  let resourcePromise;
   let onInteractionScheduledWorkCompleted;
   let onInteractionTraced;
 
@@ -51,97 +46,88 @@ describe('ProfilerDOM', () => {
       onWorkStarted: () => {},
       onWorkStopped: () => {},
     });
-
-    resourcePromise = null;
-
-    TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {
-      resourcePromise = new Promise(
-        SchedulerTracing.unstable_wrap((resolve, reject) => {
-          setTimeout(
-            SchedulerTracing.unstable_wrap(() => {
-              resolve(text);
-            }),
-            ms,
-          );
-        }),
-      );
-      return resourcePromise;
-    }, ([text, ms]) => text);
   });
 
-  const AsyncText = ({ms, text}) => {
-    TextResource.read([text, ms]);
-    return text;
-  };
-
-  const Text = ({text}) => text;
-
-  it('should correctly trace interactions for async roots', async done => {
-    let batch, element, interaction;
-
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  if (!__EXPERIMENTAL__) {
+    it("empty test so Jest doesn't complain", () => {});
+    return;
+  }
+
+  it('should correctly trace interactions for async roots', async () => {
+    let resolve;
+    let thenable = {
+      then(res) {
+        resolve = () => {
+          thenable = null;
+          res();
+        };
+      },
+    };
+
+    function Async() {
+      if (thenable !== null) {
+        Scheduler.unstable_yieldValue('Suspend! [Async]');
+        throw thenable;
+      }
+      Scheduler.unstable_yieldValue('Async');
+      return 'Async';
+    }
+
+    const element = document.createElement('div');
+    const root = ReactDOM.createRoot(element);
+
+    let interaction;
+    let wrappedResolve;
     SchedulerTracing.unstable_trace('initial_event', performance.now(), () => {
       const interactions = SchedulerTracing.unstable_getCurrent();
       expect(interactions.size).toBe(1);
       interaction = Array.from(interactions)[0];
 
-      element = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(element);
-      batch = root.createBatch();
-      batch.render(
+      root.render(
         <React.Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Text" ms={2000} />
+          <Async />
         </React.Suspense>,
       );
-      batch.then(
-        SchedulerTracing.unstable_wrap(() => {
-          batch.commit();
-
-          expect(element.textContent).toBe('Loading...');
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-          jest.runAllTimers();
-
-          resourcePromise.then(
-            SchedulerTracing.unstable_wrap(() => {
-              jest.runAllTimers();
-              Scheduler.flushAll();
-
-              expect(element.textContent).toBe('Text');
-              expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-              expect(
-                onInteractionScheduledWorkCompleted,
-              ).not.toHaveBeenCalled();
-
-              // Evaluate in an unwrapped callback,
-              // Because trace/wrap won't decrement the count within the wrapped callback.
-              Promise.resolve().then(() => {
-                expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-                expect(
-                  onInteractionScheduledWorkCompleted,
-                ).toHaveBeenCalledTimes(1);
-                expect(
-                  onInteractionScheduledWorkCompleted,
-                ).toHaveBeenLastNotifiedOfInteraction(interaction);
-
-                expect(interaction.__count).toBe(0);
-
-                done();
-              });
-            }),
-          );
-        }),
-      );
 
-      Scheduler.flushAll();
+      wrappedResolve = SchedulerTracing.unstable_wrap(() => resolve());
     });
 
+    // Render, suspend, and commit fallback
+    expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
+    expect(element.textContent).toEqual('Loading...');
+
     expect(onInteractionTraced).toHaveBeenCalledTimes(1);
     expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
       interaction,
     );
     expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-    Scheduler.flushAll();
-    jest.advanceTimersByTime(500);
+
+    // Ping React to try rendering again
+    wrappedResolve();
+
+    // Complete the tree without committing it
+    expect(Scheduler).toFlushAndYieldThrough(['Async']);
+    // Still showing the fallback
+    expect(element.textContent).toEqual('Loading...');
+
+    expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+      interaction,
+    );
+    expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
+    expect(Scheduler).toFlushAndYield([]);
+    expect(element.textContent).toEqual('Async');
+
+    expect(onInteractionTraced).toHaveBeenCalledTimes(1);
+    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
+      interaction,
+    );
+    expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
index 14ccc16021386..d2f52dea1b11a 100644
--- a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -47,7 +47,7 @@ describe('ReactProfiler DevTools integration', () => {
       }
       render() {
         // Simulate time passing when this component is rendered
-        Scheduler.advanceTime(this.props.byAmount);
+        Scheduler.unstable_advanceTime(this.props.byAmount);
         return this.props.children || null;
       }
     };
@@ -55,7 +55,7 @@ describe('ReactProfiler DevTools integration', () => {
 
   it('should auto-Profile all fibers if the DevTools hook is detected', () => {
     const App = ({multiplier}) => {
-      Scheduler.advanceTime(2);
+      Scheduler.unstable_advanceTime(2);
       return (
         <React.Profiler id="Profiler" onRender={onRender}>
           <AdvanceTime byAmount={3 * multiplier} shouldComponentUpdate={true} />
@@ -121,7 +121,7 @@ describe('ReactProfiler DevTools integration', () => {
   });
 
   it('should reset the fiber stack correctly after an error when profiling host roots', () => {
-    Scheduler.advanceTime(20);
+    Scheduler.unstable_advanceTime(20);
 
     const rendered = ReactTestRenderer.create(
       <div>
@@ -129,7 +129,7 @@ describe('ReactProfiler DevTools integration', () => {
       </div>,
     );
 
-    Scheduler.advanceTime(20);
+    Scheduler.unstable_advanceTime(20);
 
     expect(() => {
       rendered.update(
@@ -139,7 +139,7 @@ describe('ReactProfiler DevTools integration', () => {
       );
     }).toThrow();
 
-    Scheduler.advanceTime(20);
+    Scheduler.unstable_advanceTime(20);
 
     // But this should render correctly, if the profiler's fiber stack has been reset.
     rendered.update(
@@ -164,7 +164,7 @@ describe('ReactProfiler DevTools integration', () => {
     const root = rendered.root._currentFiber().return;
     expect(root.stateNode.memoizedInteractions).toContainNoInteractions();
 
-    Scheduler.advanceTime(10);
+    Scheduler.unstable_advanceTime(10);
 
     const eventTime = Scheduler.unstable_now();
 
@@ -177,4 +177,30 @@ describe('ReactProfiler DevTools integration', () => {
       {name: 'some event', timestamp: eventTime},
     ]);
   });
+
+  it('regression test: #17159', () => {
+    function Text({text}) {
+      Scheduler.unstable_yieldValue(text);
+      return text;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+
+    // Commit something
+    root.update(<Text text="A" />);
+    expect(Scheduler).toFlushAndYield(['A']);
+    expect(root).toMatchRenderedOutput('A');
+
+    // Advance time by many seconds, larger than the default expiration time
+    // for updates.
+    Scheduler.unstable_advanceTime(10000);
+    // Schedule an update.
+    root.update(<Text text="B" />);
+
+    // Update B should not instantly expire.
+    expect(Scheduler).toFlushExpired([]);
+
+    expect(Scheduler).toFlushAndYield(['B']);
+    expect(root).toMatchRenderedOutput('B');
+  });
 });
diff --git a/packages/react/src/__tests__/ReactPureComponent-test.js b/packages/react/src/__tests__/ReactPureComponent-test.js
index 144e7e279317d..768e3f2ea4952 100644
--- a/packages/react/src/__tests__/ReactPureComponent-test.js
+++ b/packages/react/src/__tests__/ReactPureComponent-test.js
@@ -74,12 +74,11 @@ describe('ReactPureComponent', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Component />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<Component />, container)).toErrorDev(
       'Warning: ' +
         'Component has a method called shouldComponentUpdate(). ' +
         'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
         'Please extend React.Component if shouldComponentUpdate is used.',
-      {withoutStack: true},
     );
     ReactDOM.render(<Component />, container);
     expect(renders).toBe(2);
@@ -109,12 +108,11 @@ describe('ReactPureComponent', () => {
       }
     }
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<PureComponent />, container)).toWarnDev(
+    expect(() => ReactDOM.render(<PureComponent />, container)).toErrorDev(
       'Warning: ' +
         'PureComponent has a method called shouldComponentUpdate(). ' +
         'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
         'Please extend React.Component if shouldComponentUpdate is used.',
-      {withoutStack: true},
     );
   });
 });
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
deleted file mode 100644
index c674a5b03e18e..0000000000000
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ /dev/null
@@ -1,805 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let Scheduler;
-let ReactFeatureFlags;
-let ReactTestRenderer;
-let PropTypes;
-
-describe('ReactStrictMode', () => {
-  describe('debugRenderPhaseSideEffects', () => {
-    beforeEach(() => {
-      jest.resetModules();
-      ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.debugRenderPhaseSideEffects = true;
-      React = require('react');
-      Scheduler = require('scheduler');
-      ReactTestRenderer = require('react-test-renderer');
-    });
-
-    it('should invoke precommit lifecycle methods twice', () => {
-      let log = [];
-      let shouldComponentUpdate = false;
-      class ClassComponent extends React.Component {
-        state = {};
-        static getDerivedStateFromProps() {
-          log.push('getDerivedStateFromProps');
-          return null;
-        }
-        constructor(props) {
-          super(props);
-          log.push('constructor');
-        }
-        componentDidMount() {
-          log.push('componentDidMount');
-        }
-        componentDidUpdate() {
-          log.push('componentDidUpdate');
-        }
-        componentWillUnmount() {
-          log.push('componentWillUnmount');
-        }
-        shouldComponentUpdate() {
-          log.push('shouldComponentUpdate');
-          return shouldComponentUpdate;
-        }
-        render() {
-          log.push('render');
-          return null;
-        }
-      }
-
-      const component = ReactTestRenderer.create(<ClassComponent />);
-
-      if (__DEV__) {
-        expect(log).toEqual([
-          'constructor',
-          'constructor',
-          'getDerivedStateFromProps',
-          'getDerivedStateFromProps',
-          'render',
-          'render',
-          'componentDidMount',
-        ]);
-      } else {
-        expect(log).toEqual([
-          'constructor',
-          'getDerivedStateFromProps',
-          'render',
-          'componentDidMount',
-        ]);
-      }
-
-      log = [];
-      shouldComponentUpdate = true;
-
-      component.update(<ClassComponent />);
-      if (__DEV__) {
-        expect(log).toEqual([
-          'getDerivedStateFromProps',
-          'getDerivedStateFromProps',
-          'shouldComponentUpdate',
-          'render',
-          'render',
-          'componentDidUpdate',
-        ]);
-      } else {
-        expect(log).toEqual([
-          'getDerivedStateFromProps',
-          'shouldComponentUpdate',
-          'render',
-          'componentDidUpdate',
-        ]);
-      }
-
-      log = [];
-      shouldComponentUpdate = false;
-
-      component.update(<ClassComponent />);
-
-      if (__DEV__) {
-        expect(log).toEqual([
-          'getDerivedStateFromProps',
-          'getDerivedStateFromProps',
-          'shouldComponentUpdate',
-        ]);
-      } else {
-        expect(log).toEqual([
-          'getDerivedStateFromProps',
-          'shouldComponentUpdate',
-        ]);
-      }
-    });
-
-    it('should invoke setState callbacks twice', () => {
-      class ClassComponent extends React.Component {
-        state = {
-          count: 1,
-        };
-        render() {
-          return null;
-        }
-      }
-
-      let setStateCount = 0;
-
-      const rendered = ReactTestRenderer.create(<ClassComponent />);
-      const instance = rendered.getInstance();
-      instance.setState(state => {
-        setStateCount++;
-        return {
-          count: state.count + 1,
-        };
-      });
-
-      // Callback should be invoked twice in DEV
-      expect(setStateCount).toBe(__DEV__ ? 2 : 1);
-      // But each time `state` should be the previous value
-      expect(instance.state.count).toBe(2);
-    });
-  });
-
-  [true, false].forEach(debugRenderPhaseSideEffectsForStrictMode => {
-    describe(`StrictMode (${debugRenderPhaseSideEffectsForStrictMode})`, () => {
-      beforeEach(() => {
-        jest.resetModules();
-        ReactFeatureFlags = require('shared/ReactFeatureFlags');
-        ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = debugRenderPhaseSideEffectsForStrictMode;
-        React = require('react');
-        Scheduler = require('scheduler');
-        ReactTestRenderer = require('react-test-renderer');
-      });
-
-      it('should invoke precommit lifecycle methods twice in DEV', () => {
-        const {StrictMode} = React;
-
-        let log = [];
-        let shouldComponentUpdate = false;
-
-        function Root() {
-          return (
-            <StrictMode>
-              <ClassComponent />
-            </StrictMode>
-          );
-        }
-
-        class ClassComponent extends React.Component {
-          state = {};
-          static getDerivedStateFromProps() {
-            log.push('getDerivedStateFromProps');
-            return null;
-          }
-          constructor(props) {
-            super(props);
-            log.push('constructor');
-          }
-          componentDidMount() {
-            log.push('componentDidMount');
-          }
-          componentDidUpdate() {
-            log.push('componentDidUpdate');
-          }
-          componentWillUnmount() {
-            log.push('componentWillUnmount');
-          }
-          shouldComponentUpdate() {
-            log.push('shouldComponentUpdate');
-            return shouldComponentUpdate;
-          }
-          render() {
-            log.push('render');
-            return null;
-          }
-        }
-
-        const component = ReactTestRenderer.create(<Root />);
-
-        if (__DEV__ && debugRenderPhaseSideEffectsForStrictMode) {
-          expect(log).toEqual([
-            'constructor',
-            'constructor',
-            'getDerivedStateFromProps',
-            'getDerivedStateFromProps',
-            'render',
-            'render',
-            'componentDidMount',
-          ]);
-        } else {
-          expect(log).toEqual([
-            'constructor',
-            'getDerivedStateFromProps',
-            'render',
-            'componentDidMount',
-          ]);
-        }
-
-        log = [];
-        shouldComponentUpdate = true;
-
-        component.update(<Root />);
-        if (__DEV__ && debugRenderPhaseSideEffectsForStrictMode) {
-          expect(log).toEqual([
-            'getDerivedStateFromProps',
-            'getDerivedStateFromProps',
-            'shouldComponentUpdate',
-            'render',
-            'render',
-            'componentDidUpdate',
-          ]);
-        } else {
-          expect(log).toEqual([
-            'getDerivedStateFromProps',
-            'shouldComponentUpdate',
-            'render',
-            'componentDidUpdate',
-          ]);
-        }
-
-        log = [];
-        shouldComponentUpdate = false;
-
-        component.update(<Root />);
-        if (__DEV__ && debugRenderPhaseSideEffectsForStrictMode) {
-          expect(log).toEqual([
-            'getDerivedStateFromProps',
-            'getDerivedStateFromProps',
-            'shouldComponentUpdate',
-          ]);
-        } else {
-          expect(log).toEqual([
-            'getDerivedStateFromProps',
-            'shouldComponentUpdate',
-          ]);
-        }
-      });
-
-      it('should invoke setState callbacks twice in DEV', () => {
-        const {StrictMode} = React;
-
-        let instance;
-        class ClassComponent extends React.Component {
-          state = {
-            count: 1,
-          };
-          render() {
-            instance = this;
-            return null;
-          }
-        }
-
-        let setStateCount = 0;
-
-        ReactTestRenderer.create(
-          <StrictMode>
-            <ClassComponent />
-          </StrictMode>,
-        );
-        instance.setState(state => {
-          setStateCount++;
-          return {
-            count: state.count + 1,
-          };
-        });
-
-        // Callback should be invoked twice (in DEV)
-        expect(setStateCount).toBe(
-          __DEV__ && debugRenderPhaseSideEffectsForStrictMode ? 2 : 1,
-        );
-        // But each time `state` should be the previous value
-        expect(instance.state.count).toBe(2);
-      });
-    });
-  });
-
-  describe('Concurrent Mode', () => {
-    beforeEach(() => {
-      jest.resetModules();
-
-      React = require('react');
-      Scheduler = require('scheduler');
-      ReactTestRenderer = require('react-test-renderer');
-    });
-
-    it('should warn about unsafe legacy lifecycle methods anywhere in the tree', () => {
-      class AsyncRoot extends React.Component {
-        UNSAFE_componentWillMount() {}
-        UNSAFE_componentWillUpdate() {}
-        render() {
-          return (
-            <div>
-              <Wrapper>
-                <Foo />
-              </Wrapper>
-              <div>
-                <Bar />
-                <Foo />
-              </div>
-            </div>
-          );
-        }
-      }
-      function Wrapper({children}) {
-        return <div>{children}</div>;
-      }
-      class Foo extends React.Component {
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return null;
-        }
-      }
-      class Bar extends React.Component {
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return null;
-        }
-      }
-
-      const root = ReactTestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
-      root.update(<AsyncRoot />);
-      expect(() => Scheduler.flushAll()).toWarnDev(
-        'Unsafe lifecycle methods were found within a strict-mode tree:' +
-          '\n\ncomponentWillMount: Please update the following components ' +
-          'to use componentDidMount instead: AsyncRoot' +
-          '\n\ncomponentWillReceiveProps: Please update the following components ' +
-          'to use static getDerivedStateFromProps instead: Bar, Foo' +
-          '\n\ncomponentWillUpdate: Please update the following components ' +
-          'to use componentDidUpdate instead: AsyncRoot' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-strict-mode-warnings',
-        {withoutStack: true},
-      );
-
-      // Dedupe
-      root.update(<AsyncRoot />);
-      Scheduler.flushAll();
-    });
-
-    it('should coalesce warnings by lifecycle name', () => {
-      class AsyncRoot extends React.Component {
-        UNSAFE_componentWillMount() {}
-        UNSAFE_componentWillUpdate() {}
-        render() {
-          return <Parent />;
-        }
-      }
-      class Parent extends React.Component {
-        componentWillMount() {}
-        componentWillUpdate() {}
-        componentWillReceiveProps() {}
-        render() {
-          return <Child />;
-        }
-      }
-      class Child extends React.Component {
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return null;
-        }
-      }
-
-      const root = ReactTestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
-      root.update(<AsyncRoot />);
-
-      expect(() => {
-        expect(() => Scheduler.flushAll()).toWarnDev(
-          'Unsafe lifecycle methods were found within a strict-mode tree:' +
-            '\n\ncomponentWillMount: Please update the following components ' +
-            'to use componentDidMount instead: AsyncRoot, Parent' +
-            '\n\ncomponentWillReceiveProps: Please update the following components ' +
-            'to use static getDerivedStateFromProps instead: Child, Parent' +
-            '\n\ncomponentWillUpdate: Please update the following components ' +
-            'to use componentDidUpdate instead: AsyncRoot, Parent' +
-            '\n\nLearn more about this warning here:' +
-            '\nhttps://fb.me/react-strict-mode-warnings',
-          {withoutStack: true},
-        );
-      }).toLowPriorityWarnDev(
-        [
-          'componentWillMount is deprecated',
-          'componentWillReceiveProps is deprecated',
-          'componentWillUpdate is deprecated',
-        ],
-        {withoutStack: true},
-      );
-
-      // Dedupe
-      root.update(<AsyncRoot />);
-      Scheduler.flushAll();
-    });
-
-    it('should warn about components not present during the initial render', () => {
-      class AsyncRoot extends React.Component {
-        render() {
-          return this.props.foo ? <Foo /> : <Bar />;
-        }
-      }
-      class Foo extends React.Component {
-        UNSAFE_componentWillMount() {}
-        render() {
-          return null;
-        }
-      }
-      class Bar extends React.Component {
-        UNSAFE_componentWillMount() {}
-        render() {
-          return null;
-        }
-      }
-
-      const root = ReactTestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
-      root.update(<AsyncRoot foo={true} />);
-      expect(() => Scheduler.flushAll()).toWarnDev(
-        'Unsafe lifecycle methods were found within a strict-mode tree:' +
-          '\n\ncomponentWillMount: Please update the following components ' +
-          'to use componentDidMount instead: Foo' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-strict-mode-warnings',
-        {withoutStack: true},
-      );
-
-      root.update(<AsyncRoot foo={false} />);
-      expect(() => Scheduler.flushAll()).toWarnDev(
-        'Unsafe lifecycle methods were found within a strict-mode tree:' +
-          '\n\ncomponentWillMount: Please update the following components ' +
-          'to use componentDidMount instead: Bar' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-strict-mode-warnings',
-        {withoutStack: true},
-      );
-
-      // Dedupe
-      root.update(<AsyncRoot foo={true} />);
-      Scheduler.flushAll();
-      root.update(<AsyncRoot foo={false} />);
-      Scheduler.flushAll();
-    });
-
-    it('should also warn inside of "strict" mode trees', () => {
-      const {StrictMode} = React;
-
-      class SyncRoot extends React.Component {
-        UNSAFE_componentWillMount() {}
-        UNSAFE_componentWillUpdate() {}
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return (
-            <StrictMode>
-              <Wrapper />
-            </StrictMode>
-          );
-        }
-      }
-      function Wrapper({children}) {
-        return (
-          <div>
-            <Bar />
-            <Foo />
-          </div>
-        );
-      }
-      class Foo extends React.Component {
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return null;
-        }
-      }
-      class Bar extends React.Component {
-        UNSAFE_componentWillReceiveProps() {}
-        render() {
-          return null;
-        }
-      }
-
-      expect(() => ReactTestRenderer.create(<SyncRoot />)).toWarnDev(
-        'Unsafe lifecycle methods were found within a strict-mode tree:' +
-          '\n    in StrictMode (at **)' +
-          '\n    in SyncRoot (at **)' +
-          '\n\ncomponentWillReceiveProps: Please update the following components ' +
-          'to use static getDerivedStateFromProps instead: Bar, Foo' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-strict-mode-warnings',
-      );
-
-      // Dedupe
-      const rendered = ReactTestRenderer.create(<SyncRoot />);
-      rendered.update(<SyncRoot />);
-    });
-  });
-
-  describe('symbol checks', () => {
-    beforeEach(() => {
-      jest.resetModules();
-      React = require('react');
-      ReactTestRenderer = require('react-test-renderer');
-    });
-
-    it('should switch from StrictMode to a Fragment and reset state', () => {
-      const {Fragment, StrictMode} = React;
-
-      function ParentComponent({useFragment}) {
-        return useFragment ? (
-          <Fragment>
-            <ChildComponent />
-          </Fragment>
-        ) : (
-          <StrictMode>
-            <ChildComponent />
-          </StrictMode>
-        );
-      }
-
-      class ChildComponent extends React.Component {
-        state = {
-          count: 0,
-        };
-        static getDerivedStateFromProps(nextProps, prevState) {
-          return {
-            count: prevState.count + 1,
-          };
-        }
-        render() {
-          return `count:${this.state.count}`;
-        }
-      }
-
-      const rendered = ReactTestRenderer.create(
-        <ParentComponent useFragment={false} />,
-      );
-      expect(rendered.toJSON()).toBe('count:1');
-      rendered.update(<ParentComponent useFragment={true} />);
-      expect(rendered.toJSON()).toBe('count:1');
-    });
-
-    it('should switch from a Fragment to StrictMode and reset state', () => {
-      const {Fragment, StrictMode} = React;
-
-      function ParentComponent({useFragment}) {
-        return useFragment ? (
-          <Fragment>
-            <ChildComponent />
-          </Fragment>
-        ) : (
-          <StrictMode>
-            <ChildComponent />
-          </StrictMode>
-        );
-      }
-
-      class ChildComponent extends React.Component {
-        state = {
-          count: 0,
-        };
-        static getDerivedStateFromProps(nextProps, prevState) {
-          return {
-            count: prevState.count + 1,
-          };
-        }
-        render() {
-          return `count:${this.state.count}`;
-        }
-      }
-
-      const rendered = ReactTestRenderer.create(
-        <ParentComponent useFragment={true} />,
-      );
-      expect(rendered.toJSON()).toBe('count:1');
-      rendered.update(<ParentComponent useFragment={false} />);
-      expect(rendered.toJSON()).toBe('count:1');
-    });
-
-    it('should update with StrictMode without losing state', () => {
-      const {StrictMode} = React;
-
-      function ParentComponent() {
-        return (
-          <StrictMode>
-            <ChildComponent />
-          </StrictMode>
-        );
-      }
-
-      class ChildComponent extends React.Component {
-        state = {
-          count: 0,
-        };
-        static getDerivedStateFromProps(nextProps, prevState) {
-          return {
-            count: prevState.count + 1,
-          };
-        }
-        render() {
-          return `count:${this.state.count}`;
-        }
-      }
-
-      const rendered = ReactTestRenderer.create(<ParentComponent />);
-      expect(rendered.toJSON()).toBe('count:1');
-      rendered.update(<ParentComponent />);
-      expect(rendered.toJSON()).toBe('count:2');
-    });
-  });
-
-  describe('string refs', () => {
-    beforeEach(() => {
-      jest.resetModules();
-      React = require('react');
-      ReactTestRenderer = require('react-test-renderer');
-    });
-
-    it('should warn within a strict tree', () => {
-      const {StrictMode} = React;
-
-      class OuterComponent extends React.Component {
-        render() {
-          return (
-            <StrictMode>
-              <InnerComponent ref="somestring" />
-            </StrictMode>
-          );
-        }
-      }
-
-      class InnerComponent extends React.Component {
-        render() {
-          return null;
-        }
-      }
-
-      let renderer;
-      expect(() => {
-        renderer = ReactTestRenderer.create(<OuterComponent />);
-      }).toWarnDev(
-        'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
-          'String refs are a source of potential bugs and should be avoided. ' +
-          'We recommend using createRef() instead.\n\n' +
-          '    in StrictMode (at **)\n' +
-          '    in OuterComponent (at **)\n\n' +
-          'Learn more about using refs safely here:\n' +
-          'https://fb.me/react-strict-mode-string-ref',
-      );
-
-      // Dedup
-      renderer.update(<OuterComponent />);
-    });
-
-    it('should warn within a strict tree', () => {
-      const {StrictMode} = React;
-
-      class OuterComponent extends React.Component {
-        render() {
-          return (
-            <StrictMode>
-              <InnerComponent />
-            </StrictMode>
-          );
-        }
-      }
-
-      class InnerComponent extends React.Component {
-        render() {
-          return <MiddleComponent ref="somestring" />;
-        }
-      }
-
-      class MiddleComponent extends React.Component {
-        render() {
-          return null;
-        }
-      }
-
-      let renderer;
-      expect(() => {
-        renderer = ReactTestRenderer.create(<OuterComponent />);
-      }).toWarnDev(
-        'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
-          'String refs are a source of potential bugs and should be avoided. ' +
-          'We recommend using createRef() instead.\n\n' +
-          '    in InnerComponent (at **)\n' +
-          '    in StrictMode (at **)\n' +
-          '    in OuterComponent (at **)\n\n' +
-          'Learn more about using refs safely here:\n' +
-          'https://fb.me/react-strict-mode-string-ref',
-      );
-
-      // Dedup
-      renderer.update(<OuterComponent />);
-    });
-  });
-
-  describe('context legacy', () => {
-    beforeEach(() => {
-      jest.resetModules();
-      React = require('react');
-      ReactTestRenderer = require('react-test-renderer');
-      PropTypes = require('prop-types');
-    });
-
-    it('should warn if the legacy context API have been used in strict mode', () => {
-      class LegacyContextProvider extends React.Component {
-        getChildContext() {
-          return {color: 'purple'};
-        }
-
-        render() {
-          return (
-            <div>
-              <LegacyContextConsumer />
-              <FunctionalLegacyContextConsumer />
-            </div>
-          );
-        }
-      }
-
-      function FunctionalLegacyContextConsumer() {
-        return null;
-      }
-
-      LegacyContextProvider.childContextTypes = {
-        color: PropTypes.string,
-      };
-
-      class LegacyContextConsumer extends React.Component {
-        render() {
-          return null;
-        }
-      }
-
-      const {StrictMode} = React;
-
-      class Root extends React.Component {
-        render() {
-          return (
-            <div>
-              <StrictMode>
-                <LegacyContextProvider />
-              </StrictMode>
-            </div>
-          );
-        }
-      }
-
-      LegacyContextConsumer.contextTypes = {
-        color: PropTypes.string,
-      };
-
-      FunctionalLegacyContextConsumer.contextTypes = {
-        color: PropTypes.string,
-      };
-
-      let rendered;
-
-      expect(() => {
-        rendered = ReactTestRenderer.create(<Root />);
-      }).toWarnDev(
-        'Warning: Legacy context API has been detected within a strict-mode tree: ' +
-          '\n    in StrictMode (at **)' +
-          '\n    in div (at **)' +
-          '\n    in Root (at **)' +
-          '\n\nPlease update the following components: ' +
-          'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
-          '\n\nLearn more about this warning here:' +
-          '\nhttps://fb.me/react-strict-mode-warnings',
-      );
-
-      // Dedupe
-      rendered = ReactTestRenderer.create(<Root />);
-      rendered.update(<Root />);
-    });
-  });
-});
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 53850a0b81684..15b2ce719c767 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -12,6 +12,8 @@
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let Scheduler;
+let PropTypes;
 
 describe('ReactStrictMode', () => {
   beforeEach(() => {
@@ -34,7 +36,7 @@ describe('ReactStrictMode', () => {
         </React.StrictMode>,
         container,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Invalid ARIA attribute `ariaTypo`. ' +
         'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
         '    in div (at **)\n' +
@@ -54,7 +56,7 @@ describe('ReactStrictMode', () => {
           <Foo />
         </React.StrictMode>,
       );
-    }).toWarnDev(
+    }).toErrorDev(
       'Invalid ARIA attribute `ariaTypo`. ' +
         'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
         '    in div (at **)\n' +
@@ -62,4 +64,826 @@ describe('ReactStrictMode', () => {
         '    in StrictMode (at **)',
     );
   });
+
+  it('should invoke precommit lifecycle methods twice', () => {
+    let log = [];
+    let shouldComponentUpdate = false;
+    class ClassComponent extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        log.push('getDerivedStateFromProps');
+        return null;
+      }
+      constructor(props) {
+        super(props);
+        log.push('constructor');
+      }
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+      shouldComponentUpdate() {
+        log.push('shouldComponentUpdate');
+        return shouldComponentUpdate;
+      }
+      render() {
+        log.push('render');
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'constructor',
+        'constructor',
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'render',
+        'render',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'constructor',
+        'getDerivedStateFromProps',
+        'render',
+        'componentDidMount',
+      ]);
+    }
+
+    log = [];
+    shouldComponentUpdate = true;
+
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+    if (__DEV__) {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+        'render',
+        'render',
+        'componentDidUpdate',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+        'render',
+        'componentDidUpdate',
+      ]);
+    }
+
+    log = [];
+    shouldComponentUpdate = false;
+
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+      ]);
+    }
+  });
+
+  it('should invoke setState callbacks twice', () => {
+    let instance;
+    class ClassComponent extends React.Component {
+      state = {
+        count: 1,
+      };
+      render() {
+        instance = this;
+        return null;
+      }
+    }
+
+    let setStateCount = 0;
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+    instance.setState(state => {
+      setStateCount++;
+      return {
+        count: state.count + 1,
+      };
+    });
+
+    // Callback should be invoked twice in DEV
+    expect(setStateCount).toBe(__DEV__ ? 2 : 1);
+    // But each time `state` should be the previous value
+    expect(instance.state.count).toBe(2);
+  });
+
+  it('should invoke precommit lifecycle methods twice in DEV', () => {
+    const {StrictMode} = React;
+
+    let log = [];
+    let shouldComponentUpdate = false;
+
+    function Root() {
+      return (
+        <StrictMode>
+          <ClassComponent />
+        </StrictMode>
+      );
+    }
+
+    class ClassComponent extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        log.push('getDerivedStateFromProps');
+        return null;
+      }
+      constructor(props) {
+        super(props);
+        log.push('constructor');
+      }
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+      shouldComponentUpdate() {
+        log.push('shouldComponentUpdate');
+        return shouldComponentUpdate;
+      }
+      render() {
+        log.push('render');
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Root />, container);
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'constructor',
+        'constructor',
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'render',
+        'render',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'constructor',
+        'getDerivedStateFromProps',
+        'render',
+        'componentDidMount',
+      ]);
+    }
+
+    log = [];
+    shouldComponentUpdate = true;
+
+    ReactDOM.render(<Root />, container);
+    if (__DEV__) {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+        'render',
+        'render',
+        'componentDidUpdate',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+        'render',
+        'componentDidUpdate',
+      ]);
+    }
+
+    log = [];
+    shouldComponentUpdate = false;
+
+    ReactDOM.render(<Root />, container);
+    if (__DEV__) {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+      ]);
+    }
+  });
+
+  it('should invoke setState callbacks twice in DEV', () => {
+    const {StrictMode} = React;
+
+    let instance;
+    class ClassComponent extends React.Component {
+      state = {
+        count: 1,
+      };
+      render() {
+        instance = this;
+        return null;
+      }
+    }
+
+    let setStateCount = 0;
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <StrictMode>
+        <ClassComponent />
+      </StrictMode>,
+      container,
+    );
+    instance.setState(state => {
+      setStateCount++;
+      return {
+        count: state.count + 1,
+      };
+    });
+
+    // Callback should be invoked twice (in DEV)
+    expect(setStateCount).toBe(__DEV__ ? 2 : 1);
+    // But each time `state` should be the previous value
+    expect(instance.state.count).toBe(2);
+  });
+});
+
+describe('Concurrent Mode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+  });
+
+  it.experimental(
+    'should warn about unsafe legacy lifecycle methods anywhere in the tree',
+    () => {
+      class AsyncRoot extends React.Component {
+        UNSAFE_componentWillMount() {}
+        UNSAFE_componentWillUpdate() {}
+        render() {
+          return (
+            <div>
+              <Wrapper>
+                <Foo />
+              </Wrapper>
+              <div>
+                <Bar />
+                <Foo />
+              </div>
+            </div>
+          );
+        }
+      }
+      function Wrapper({children}) {
+        return <div>{children}</div>;
+      }
+      class Foo extends React.Component {
+        UNSAFE_componentWillReceiveProps() {}
+        render() {
+          return null;
+        }
+      }
+      class Bar extends React.Component {
+        UNSAFE_componentWillReceiveProps() {}
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      root.render(<AsyncRoot />);
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
+        [
+          /* eslint-disable max-len */
+          `Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+
+Please update the following components: AsyncRoot`,
+          `Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
+
+Please update the following components: Bar, Foo`,
+          `Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+
+Please update the following components: AsyncRoot`,
+          /* eslint-enable max-len */
+        ],
+        {withoutStack: true},
+      );
+
+      // Dedupe
+      root.render(<AsyncRoot />);
+      Scheduler.unstable_flushAll();
+    },
+  );
+
+  it.experimental('should coalesce warnings by lifecycle name', () => {
+    class AsyncRoot extends React.Component {
+      UNSAFE_componentWillMount() {}
+      UNSAFE_componentWillUpdate() {}
+      render() {
+        return <Parent />;
+      }
+    }
+    class Parent extends React.Component {
+      componentWillMount() {}
+      componentWillUpdate() {}
+      componentWillReceiveProps() {}
+      render() {
+        return <Child />;
+      }
+    }
+    class Child extends React.Component {
+      UNSAFE_componentWillReceiveProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    root.render(<AsyncRoot />);
+
+    expect(() => {
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
+        [
+          /* eslint-disable max-len */
+          `Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+
+Please update the following components: AsyncRoot`,
+          `Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
+
+Please update the following components: Child`,
+          `Warning: Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+
+Please update the following components: AsyncRoot`,
+          /* eslint-enable max-len */
+        ],
+        {withoutStack: true},
+      );
+    }).toWarnDev(
+      [
+        /* eslint-disable max-len */
+        `Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: Parent`,
+        `Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
+* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: Parent`,
+        `Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder.
+
+Please update the following components: Parent`,
+        /* eslint-enable max-len */
+      ],
+      {withoutStack: true},
+    );
+    // Dedupe
+    root.render(<AsyncRoot />);
+    Scheduler.unstable_flushAll();
+  });
+
+  it.experimental(
+    'should warn about components not present during the initial render',
+    () => {
+      class AsyncRoot extends React.Component {
+        render() {
+          return this.props.foo ? <Foo /> : <Bar />;
+        }
+      }
+      class Foo extends React.Component {
+        UNSAFE_componentWillMount() {}
+        render() {
+          return null;
+        }
+      }
+      class Bar extends React.Component {
+        UNSAFE_componentWillMount() {}
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      root.render(<AsyncRoot foo={true} />);
+      expect(() =>
+        Scheduler.unstable_flushAll(),
+      ).toErrorDev(
+        'Using UNSAFE_componentWillMount in strict mode is not recommended',
+        {withoutStack: true},
+      );
+
+      root.render(<AsyncRoot foo={false} />);
+      expect(() =>
+        Scheduler.unstable_flushAll(),
+      ).toErrorDev(
+        'Using UNSAFE_componentWillMount in strict mode is not recommended',
+        {withoutStack: true},
+      );
+
+      // Dedupe
+      root.render(<AsyncRoot foo={true} />);
+      Scheduler.unstable_flushAll();
+      root.render(<AsyncRoot foo={false} />);
+      Scheduler.unstable_flushAll();
+    },
+  );
+
+  it('should also warn inside of "strict" mode trees', () => {
+    const {StrictMode} = React;
+
+    class SyncRoot extends React.Component {
+      UNSAFE_componentWillMount() {}
+      UNSAFE_componentWillUpdate() {}
+      UNSAFE_componentWillReceiveProps() {}
+      render() {
+        return (
+          <StrictMode>
+            <Wrapper />
+          </StrictMode>
+        );
+      }
+    }
+    function Wrapper({children}) {
+      return (
+        <div>
+          <Bar />
+          <Foo />
+        </div>
+      );
+    }
+    class Foo extends React.Component {
+      UNSAFE_componentWillReceiveProps() {}
+      render() {
+        return null;
+      }
+    }
+    class Bar extends React.Component {
+      UNSAFE_componentWillReceiveProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    expect(() =>
+      ReactDOM.render(<SyncRoot />, container),
+    ).toErrorDev(
+      'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
+      {withoutStack: true},
+    );
+
+    // Dedupe
+    ReactDOM.render(<SyncRoot />, container);
+  });
+});
+
+describe('symbol checks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should switch from StrictMode to a Fragment and reset state', () => {
+    const {Fragment, StrictMode} = React;
+
+    function ParentComponent({useFragment}) {
+      return useFragment ? (
+        <Fragment>
+          <ChildComponent />
+        </Fragment>
+      ) : (
+        <StrictMode>
+          <ChildComponent />
+        </StrictMode>
+      );
+    }
+
+    class ChildComponent extends React.Component {
+      state = {
+        count: 0,
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          count: prevState.count + 1,
+        };
+      }
+      render() {
+        return `count:${this.state.count}`;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<ParentComponent useFragment={false} />, container);
+    expect(container.textContent).toBe('count:1');
+    ReactDOM.render(<ParentComponent useFragment={true} />, container);
+    expect(container.textContent).toBe('count:1');
+  });
+
+  it('should switch from a Fragment to StrictMode and reset state', () => {
+    const {Fragment, StrictMode} = React;
+
+    function ParentComponent({useFragment}) {
+      return useFragment ? (
+        <Fragment>
+          <ChildComponent />
+        </Fragment>
+      ) : (
+        <StrictMode>
+          <ChildComponent />
+        </StrictMode>
+      );
+    }
+
+    class ChildComponent extends React.Component {
+      state = {
+        count: 0,
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          count: prevState.count + 1,
+        };
+      }
+      render() {
+        return `count:${this.state.count}`;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<ParentComponent useFragment={true} />, container);
+    expect(container.textContent).toBe('count:1');
+    ReactDOM.render(<ParentComponent useFragment={false} />, container);
+    expect(container.textContent).toBe('count:1');
+  });
+
+  it('should update with StrictMode without losing state', () => {
+    const {StrictMode} = React;
+
+    function ParentComponent() {
+      return (
+        <StrictMode>
+          <ChildComponent />
+        </StrictMode>
+      );
+    }
+
+    class ChildComponent extends React.Component {
+      state = {
+        count: 0,
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          count: prevState.count + 1,
+        };
+      }
+      render() {
+        return `count:${this.state.count}`;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<ParentComponent />, container);
+    expect(container.textContent).toBe('count:1');
+    ReactDOM.render(<ParentComponent />, container);
+    expect(container.textContent).toBe('count:2');
+  });
+});
+
+describe('string refs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should warn within a strict tree', () => {
+    const {StrictMode} = React;
+
+    class OuterComponent extends React.Component {
+      render() {
+        return (
+          <StrictMode>
+            <InnerComponent ref="somestring" />
+          </StrictMode>
+        );
+      }
+    }
+
+    class InnerComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(<OuterComponent />, container);
+    }).toErrorDev(
+      'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
+        'String refs are a source of potential bugs and should be avoided. ' +
+        'We recommend using useRef() or createRef() instead. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-string-ref\n' +
+        '    in StrictMode (at **)\n' +
+        '    in OuterComponent (at **)',
+    );
+
+    // Dedup
+    ReactDOM.render(<OuterComponent />, container);
+  });
+
+  it('should warn within a strict tree', () => {
+    const {StrictMode} = React;
+
+    class OuterComponent extends React.Component {
+      render() {
+        return (
+          <StrictMode>
+            <InnerComponent />
+          </StrictMode>
+        );
+      }
+    }
+
+    class InnerComponent extends React.Component {
+      render() {
+        return <MiddleComponent ref="somestring" />;
+      }
+    }
+
+    class MiddleComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(<OuterComponent />, container);
+    }).toErrorDev(
+      'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
+        'String refs are a source of potential bugs and should be avoided. ' +
+        'We recommend using useRef() or createRef() instead. ' +
+        'Learn more about using refs safely here: ' +
+        'https://fb.me/react-strict-mode-string-ref\n' +
+        '    in InnerComponent (at **)\n' +
+        '    in StrictMode (at **)\n' +
+        '    in OuterComponent (at **)',
+    );
+
+    // Dedup
+    ReactDOM.render(<OuterComponent />, container);
+  });
+});
+
+describe('context legacy', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    PropTypes = require('prop-types');
+  });
+
+  it('should warn if the legacy context API have been used in strict mode', () => {
+    class LegacyContextProvider extends React.Component {
+      getChildContext() {
+        return {color: 'purple'};
+      }
+
+      render() {
+        return (
+          <div>
+            <LegacyContextConsumer />
+            <FunctionalLegacyContextConsumer />
+          </div>
+        );
+      }
+    }
+
+    function FunctionalLegacyContextConsumer() {
+      return null;
+    }
+
+    LegacyContextProvider.childContextTypes = {
+      color: PropTypes.string,
+    };
+
+    class LegacyContextConsumer extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const {StrictMode} = React;
+
+    class Root extends React.Component {
+      render() {
+        return (
+          <div>
+            <StrictMode>
+              <LegacyContextProvider />
+            </StrictMode>
+          </div>
+        );
+      }
+    }
+
+    LegacyContextConsumer.contextTypes = {
+      color: PropTypes.string,
+    };
+
+    FunctionalLegacyContextConsumer.contextTypes = {
+      color: PropTypes.string,
+    };
+
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(<Root />, container);
+    }).toErrorDev(
+      'Warning: Legacy context API has been detected within a strict-mode tree.' +
+        '\n\nThe old API will be supported in all 16.x releases, but applications ' +
+        'using it should migrate to the new version.' +
+        '\n\nPlease update the following components: ' +
+        'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
+        '\n\nLearn more about this warning here: ' +
+        'https://fb.me/react-legacy-context' +
+        '\n    in StrictMode (at **)' +
+        '\n    in div (at **)' +
+        '\n    in Root (at **)',
+    );
+
+    // Dedupe
+    ReactDOM.render(<Root />, container);
+  });
 });
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index e79ab7f496756..cce61a34aa04b 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -326,13 +326,13 @@ describe('ReactTypeScriptClass', function() {
       expect(() =>
         ReactDOM.render(React.createElement(Empty), container)
       ).toThrow()
-    ).toWarnDev([
+    ).toErrorDev([
       // A failed component renders twice in DEV
       'Warning: Empty(...): No `render` method found on the returned ' +
         'component instance: you may have forgotten to define `render`.',
       'Warning: Empty(...): No `render` method found on the returned ' +
         'component instance: you may have forgotten to define `render`.',
-    ], {withoutStack: true});
+    ]);
   });
 
   it('renders a simple stateless component with prop', function() {
@@ -390,10 +390,9 @@ describe('ReactTypeScriptClass', function() {
     }
     expect(function() {
       ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo: getDerivedStateFromProps() is defined as an instance method ' +
-        'and will be ignored. Instead, declare it as a static method.',
-        {withoutStack: true}
+        'and will be ignored. Instead, declare it as a static method.'
     );
   });
 
@@ -408,10 +407,9 @@ describe('ReactTypeScriptClass', function() {
     }
     expect(function() {
       ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo: getDerivedStateFromError() is defined as an instance method ' +
-        'and will be ignored. Instead, declare it as a static method.',
-        {withoutStack: true}
+        'and will be ignored. Instead, declare it as a static method.'
     );
   });
 
@@ -425,10 +423,9 @@ describe('ReactTypeScriptClass', function() {
     }
     expect(function() {
       ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
-    }).toWarnDev(
+    }).toErrorDev(
       'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
-        'and will be ignored. Instead, declare it as an instance method.',
-        {withoutStack: true}
+        'and will be ignored. Instead, declare it as an instance method.'
     );
   });
 
@@ -448,12 +445,11 @@ describe('ReactTypeScriptClass', function() {
     }
     expect(function() {
       ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
-    }).toWarnDev(
+    }).toErrorDev(
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
       'undefined. This is not recommended. Instead, define the initial state by ' +
       'assigning an object to `this.state` in the constructor of `Foo`. ' +
-      'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
-        {withoutStack: true}
+      'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'
     );
   });
 
@@ -509,17 +505,14 @@ describe('ReactTypeScriptClass', function() {
   });
 
   it('should warn with non-object in the initial state property', function() {
-    expect(() => test(React.createElement(ArrayState), 'SPAN', '')).toWarnDev(
-      'ArrayState.state: must be set to an object or null',
-      {withoutStack: true}
+    expect(() => test(React.createElement(ArrayState), 'SPAN', '')).toErrorDev(
+      'ArrayState.state: must be set to an object or null'
     );
-    expect(() => test(React.createElement(StringState), 'SPAN', '')).toWarnDev(
-      'StringState.state: must be set to an object or null',
-      {withoutStack: true}
+    expect(() => test(React.createElement(StringState), 'SPAN', '')).toErrorDev(
+      'StringState.state: must be set to an object or null'
     );
-    expect(() => test(React.createElement(NumberState), 'SPAN', '')).toWarnDev(
-      'NumberState.state: must be set to an object or null',
-      {withoutStack: true}
+    expect(() => test(React.createElement(NumberState), 'SPAN', '')).toErrorDev(
+      'NumberState.state: must be set to an object or null'
     );
   });
 
@@ -588,7 +581,7 @@ describe('ReactTypeScriptClass', function() {
       getDefaultPropsWasCalled = false;
       expect(() =>
         test(React.createElement(ClassicProperties), 'SPAN', 'foo')
-      ).toWarnDev([
+      ).toErrorDev([
         'getInitialState was defined on ClassicProperties, ' +
           'a plain JavaScript class.',
         'getDefaultProps was defined on ClassicProperties, ' +
@@ -596,7 +589,7 @@ describe('ReactTypeScriptClass', function() {
         'propTypes was defined as an instance property on ClassicProperties.',
         'contextTypes was defined as an instance property on ClassicProperties.',
         'contextType was defined as an instance property on ClassicProperties.',
-      ], {withoutStack: true});
+      ]);
       expect(getInitialStateWasCalled).toBe(false);
       expect(getDefaultPropsWasCalled).toBe(false);
     }
@@ -623,34 +616,31 @@ describe('ReactTypeScriptClass', function() {
   it('should warn when misspelling shouldComponentUpdate', function() {
     expect(() =>
       test(React.createElement(MisspelledComponent1), 'SPAN', 'foo')
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: ' +
         'MisspelledComponent1 has a method called componentShouldUpdate(). Did ' +
         'you mean shouldComponentUpdate()? The name is phrased as a question ' +
-        'because the function is expected to return a value.',
-        {withoutStack: true}
+        'because the function is expected to return a value.'
     );
   });
 
   it('should warn when misspelling componentWillReceiveProps', function() {
     expect(() =>
       test(React.createElement(MisspelledComponent2), 'SPAN', 'foo')
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: ' +
         'MisspelledComponent2 has a method called componentWillRecieveProps(). ' +
-        'Did you mean componentWillReceiveProps()?',
-        {withoutStack: true}
+        'Did you mean componentWillReceiveProps()?'
     );
   });
 
   it('should warn when misspelling UNSAFE_componentWillReceiveProps', function() {
     expect(() =>
       test(React.createElement(MisspelledComponent3), 'SPAN', 'foo')
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: ' +
         'MisspelledComponent3 has a method called UNSAFE_componentWillRecieveProps(). ' +
-        'Did you mean UNSAFE_componentWillReceiveProps()?',
-        {withoutStack: true}
+        'Did you mean UNSAFE_componentWillReceiveProps()?'
     );
   });
 
@@ -662,13 +652,13 @@ describe('ReactTypeScriptClass', function() {
     );
     expect(() =>
       expect(() => instance.replaceState({})).toThrow()
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     );
     expect(() =>
       expect(() => instance.isMounted()).toThrow()
-    ).toLowPriorityWarnDev(
+    ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     );
diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.internal.js b/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
index b1bd7c9b1c913..3ea37ce80a373 100644
--- a/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
@@ -50,13 +50,9 @@ describe('create-react-class-integration', () => {
         render: () => null,
       });
 
-      expect(() => ReactNative.render(<View />, 1)).toLowPriorityWarnDev(
-        'componentWillMount is deprecated and will be removed in the next major version. ' +
-          'Use componentDidMount instead. As a temporary workaround, ' +
-          'you can rename to UNSAFE_componentWillMount.' +
-          '\n\nPlease update the following components: MyNativeComponent',
-        {withoutStack: true},
-      );
+      expect(() =>
+        ReactNative.render(<View />, 1),
+      ).toWarnDev('componentWillMount has been renamed', {withoutStack: true});
     });
 
     it('should warn if users specify their own legacy componentWillReceiveProps', () => {
@@ -67,11 +63,11 @@ describe('create-react-class-integration', () => {
         render: () => null,
       });
 
-      expect(() => ReactNative.render(<View />, 1)).toLowPriorityWarnDev(
-        'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
-          'Use static getDerivedStateFromProps instead.' +
-          '\n\nPlease update the following components: MyNativeComponent',
-        {withoutStack: true},
+      expect(() => ReactNative.render(<View />, 1)).toWarnDev(
+        'componentWillReceiveProps has been renamed',
+        {
+          withoutStack: true,
+        },
       );
     });
   });
diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.js b/packages/react/src/__tests__/createReactClassIntegration-test.js
index 36b6bb047732b..8fec2209b9067 100644
--- a/packages/react/src/__tests__/createReactClassIntegration-test.js
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.js
@@ -63,7 +63,7 @@ describe('create-react-class-integration', () => {
           return <span>{this.props.prop}</span>;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Component: prop type `prop` is invalid; ' +
         'it must be a function, usually from React.PropTypes.',
       {withoutStack: true},
@@ -81,7 +81,7 @@ describe('create-react-class-integration', () => {
           return <span>{this.props.prop}</span>;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Component: context type `prop` is invalid; ' +
         'it must be a function, usually from React.PropTypes.',
       {withoutStack: true},
@@ -99,7 +99,7 @@ describe('create-react-class-integration', () => {
           return <span>{this.props.prop}</span>;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Component: child context type `prop` is invalid; ' +
         'it must be a function, usually from React.PropTypes.',
       {withoutStack: true},
@@ -116,7 +116,7 @@ describe('create-react-class-integration', () => {
           return <div />;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component has a method called componentShouldUpdate(). Did you ' +
         'mean shouldComponentUpdate()? The name is phrased as a question ' +
         'because the function is expected to return a value.',
@@ -133,7 +133,7 @@ describe('create-react-class-integration', () => {
           return <div />;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: NamedComponent has a method called componentShouldUpdate(). Did you ' +
         'mean shouldComponentUpdate()? The name is phrased as a question ' +
         'because the function is expected to return a value.',
@@ -151,7 +151,7 @@ describe('create-react-class-integration', () => {
           return <div />;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component has a method called componentWillRecieveProps(). Did you ' +
         'mean componentWillReceiveProps()?',
       {withoutStack: true},
@@ -168,7 +168,7 @@ describe('create-react-class-integration', () => {
           return <div />;
         },
       }),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: A component has a method called UNSAFE_componentWillRecieveProps(). ' +
         'Did you mean UNSAFE_componentWillReceiveProps()?',
       {withoutStack: true},
@@ -216,7 +216,7 @@ describe('create-react-class-integration', () => {
           return <div />;
         },
       }),
-    ).toWarnDev([
+    ).toErrorDev([
       'createClass(...): `mixins` is now a static property and should ' +
         'be defined inside "statics".',
       'createClass(...): `propTypes` is now a static property and should ' +
@@ -361,7 +361,9 @@ describe('create-react-class-integration', () => {
       },
     });
 
-    expect(() => expect(() => Component()).toThrow()).toWarnDev(
+    expect(() =>
+      expect(() => Component()).toThrow(),
+    ).toErrorDev(
       'Warning: Something is calling a React component directly. Use a ' +
         'factory or JSX instead. See: https://fb.me/react-legacyfactory',
       {withoutStack: true},
@@ -443,6 +445,7 @@ describe('create-react-class-integration', () => {
 
   it('warns if getDerivedStateFromProps is not static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       getDerivedStateFromProps() {
         return {};
       },
@@ -452,15 +455,15 @@ describe('create-react-class-integration', () => {
     });
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
-    ).toWarnDev(
-      'Component: getDerivedStateFromProps() is defined as an instance method ' +
+    ).toErrorDev(
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
-      {withoutStack: true},
     );
   });
 
   it('warns if getDerivedStateFromError is not static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       getDerivedStateFromError() {
         return {};
       },
@@ -470,15 +473,15 @@ describe('create-react-class-integration', () => {
     });
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
-    ).toWarnDev(
-      'Component: getDerivedStateFromError() is defined as an instance method ' +
+    ).toErrorDev(
+      'Foo: getDerivedStateFromError() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
-      {withoutStack: true},
     );
   });
 
   it('warns if getSnapshotBeforeUpdate is static', () => {
     const Foo = createReactClass({
+      displayName: 'Foo',
       statics: {
         getSnapshotBeforeUpdate: function() {
           return null;
@@ -490,15 +493,15 @@ describe('create-react-class-integration', () => {
     });
     expect(() =>
       ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
-    ).toWarnDev(
-      'Component: getSnapshotBeforeUpdate() is defined as a static method ' +
+    ).toErrorDev(
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
         'and will be ignored. Instead, declare it as an instance method.',
-      {withoutStack: true},
     );
   });
 
   it('should warn if state is not properly initialized before getDerivedStateFromProps', () => {
     const Component = createReactClass({
+      displayName: 'Component',
       statics: {
         getDerivedStateFromProps: function() {
           return null;
@@ -510,14 +513,11 @@ describe('create-react-class-integration', () => {
     });
     expect(() =>
       ReactDOM.render(<Component />, document.createElement('div')),
-    ).toWarnDev(
+    ).toErrorDev(
       '`Component` uses `getDerivedStateFromProps` but its initial state is ' +
         'null. This is not recommended. Instead, define the initial state by ' +
         'assigning an object to `this.state` in the constructor of `Component`. ' +
         'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
-      {
-        withoutStack: true,
-      },
     );
   });
 
@@ -548,21 +548,20 @@ describe('create-react-class-integration', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<Component />, document.createElement('div'));
-      }).toWarnDev(
+      }).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'Component uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  componentWillReceiveProps\n' +
           '  componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(
+    }).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -592,21 +591,20 @@ describe('create-react-class-integration', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<Component />, document.createElement('div'));
-      }).toWarnDev(
+      }).toErrorDev(
         'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
           'Component uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\n' +
           '  componentWillMount\n' +
           '  componentWillReceiveProps\n' +
           '  componentWillUpdate\n\n' +
           'The above lifecycles should be removed. Learn more about this warning here:\n' +
-          'https://fb.me/react-async-component-lifecycle-hooks',
-        {withoutStack: true},
+          'https://fb.me/react-unsafe-component-lifecycles',
       );
-    }).toLowPriorityWarnDev(
+    }).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -645,13 +643,11 @@ describe('create-react-class-integration', () => {
     });
 
     const div = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(<Component foo="bar" />, div),
-    ).toLowPriorityWarnDev(
+    expect(() => ReactDOM.render(<Component foo="bar" />, div)).toWarnDev(
       [
-        'componentWillMount is deprecated',
-        'componentWillReceiveProps is deprecated',
-        'componentWillUpdate is deprecated',
+        'componentWillMount has been renamed',
+        'componentWillReceiveProps has been renamed',
+        'componentWillUpdate has been renamed',
       ],
       {withoutStack: true},
     );
@@ -723,7 +719,9 @@ describe('create-react-class-integration', () => {
 
     const container = document.createElement('div');
 
-    expect(() => ReactDOM.render(<Component />, container)).toWarnDev(
+    expect(() =>
+      ReactDOM.render(<Component />, container),
+    ).toErrorDev(
       'Warning: MyComponent: isMounted is deprecated. Instead, make sure to ' +
         'clean up subscriptions and pending requests in componentWillUnmount ' +
         'to prevent memory leaks.',
diff --git a/packages/react/src/__tests__/forwardRef-test.internal.js b/packages/react/src/__tests__/forwardRef-test.internal.js
index 3391e98dd1585..31c8867d571cc 100644
--- a/packages/react/src/__tests__/forwardRef-test.internal.js
+++ b/packages/react/src/__tests__/forwardRef-test.internal.js
@@ -28,7 +28,7 @@ describe('forwardRef', () => {
   it('should work without a ref to be forwarded', () => {
     class Child extends React.Component {
       render() {
-        Scheduler.yieldValue(this.props.value);
+        Scheduler.unstable_yieldValue(this.props.value);
         return null;
       }
     }
@@ -48,7 +48,7 @@ describe('forwardRef', () => {
   it('should forward a ref for a single child', () => {
     class Child extends React.Component {
       render() {
-        Scheduler.yieldValue(this.props.value);
+        Scheduler.unstable_yieldValue(this.props.value);
         return null;
       }
     }
@@ -71,7 +71,7 @@ describe('forwardRef', () => {
   it('should forward a ref for multiple children', () => {
     class Child extends React.Component {
       render() {
-        Scheduler.yieldValue(this.props.value);
+        Scheduler.unstable_yieldValue(this.props.value);
         return null;
       }
     }
@@ -103,7 +103,7 @@ describe('forwardRef', () => {
         super(props);
       }
       render() {
-        Scheduler.yieldValue(this.props.value);
+        Scheduler.unstable_yieldValue(this.props.value);
         return null;
       }
     }
@@ -138,28 +138,28 @@ describe('forwardRef', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       componentDidCatch(error) {
-        Scheduler.yieldValue('ErrorBoundary.componentDidCatch');
+        Scheduler.unstable_yieldValue('ErrorBoundary.componentDidCatch');
         this.setState({error});
       }
       render() {
         if (this.state.error) {
-          Scheduler.yieldValue('ErrorBoundary.render: catch');
+          Scheduler.unstable_yieldValue('ErrorBoundary.render: catch');
           return null;
         }
-        Scheduler.yieldValue('ErrorBoundary.render: try');
+        Scheduler.unstable_yieldValue('ErrorBoundary.render: try');
         return this.props.children;
       }
     }
 
     class BadRender extends React.Component {
       render() {
-        Scheduler.yieldValue('BadRender throw');
+        Scheduler.unstable_yieldValue('BadRender throw');
         throw new Error('oops!');
       }
     }
 
     function Wrapper(props) {
-      Scheduler.yieldValue('Wrapper');
+      Scheduler.unstable_yieldValue('Wrapper');
       return <BadRender {...props} ref={props.forwardedRef} />;
     }
 
@@ -196,24 +196,24 @@ describe('forwardRef', () => {
 
     class Inner extends React.Component {
       render() {
-        Scheduler.yieldValue('Inner');
+        Scheduler.unstable_yieldValue('Inner');
         inst = this;
         return <div ref={this.props.forwardedRef} />;
       }
     }
 
     function Middle(props) {
-      Scheduler.yieldValue('Middle');
+      Scheduler.unstable_yieldValue('Middle');
       return <Inner {...props} />;
     }
 
     const Forward = React.forwardRef((props, ref) => {
-      Scheduler.yieldValue('Forward');
+      Scheduler.unstable_yieldValue('Forward');
       return <Middle {...props} forwardedRef={ref} />;
     });
 
     function App() {
-      Scheduler.yieldValue('App');
+      Scheduler.unstable_yieldValue('App');
       return <Forward />;
     }
 
diff --git a/packages/react/src/__tests__/forwardRef-test.js b/packages/react/src/__tests__/forwardRef-test.js
index 48f3e1d7170c0..68f2065e4e097 100644
--- a/packages/react/src/__tests__/forwardRef-test.js
+++ b/packages/react/src/__tests__/forwardRef-test.js
@@ -118,7 +118,7 @@ describe('forwardRef', () => {
 
     expect(() =>
       ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `required` is marked as required in ' +
         '`ForwardRef(NamedFunction)`, but its value is `undefined`.\n' +
         '    in ForwardRef(NamedFunction) (at **)',
@@ -126,22 +126,30 @@ describe('forwardRef', () => {
   });
 
   it('should warn if not provided a callback during creation', () => {
-    expect(() => React.forwardRef(undefined)).toWarnDev(
+    expect(() =>
+      React.forwardRef(undefined),
+    ).toErrorDev(
       'forwardRef requires a render function but was given undefined.',
       {withoutStack: true},
     );
-    expect(() => React.forwardRef(null)).toWarnDev(
+    expect(() => React.forwardRef(null)).toErrorDev(
       'forwardRef requires a render function but was given null.',
-      {withoutStack: true},
+      {
+        withoutStack: true,
+      },
     );
-    expect(() => React.forwardRef('foo')).toWarnDev(
+    expect(() =>
+      React.forwardRef('foo'),
+    ).toErrorDev(
       'forwardRef requires a render function but was given string.',
       {withoutStack: true},
     );
   });
 
   it('should warn if no render function is provided', () => {
-    expect(React.forwardRef).toWarnDev(
+    expect(
+      React.forwardRef,
+    ).toErrorDev(
       'forwardRef requires a render function but was given undefined.',
       {withoutStack: true},
     );
@@ -158,12 +166,16 @@ describe('forwardRef', () => {
     }
     renderWithDefaultProps.defaultProps = {};
 
-    expect(() => React.forwardRef(renderWithPropTypes)).toWarnDev(
+    expect(() =>
+      React.forwardRef(renderWithPropTypes),
+    ).toErrorDev(
       'forwardRef render functions do not support propTypes or defaultProps. ' +
         'Did you accidentally pass a React component?',
       {withoutStack: true},
     );
-    expect(() => React.forwardRef(renderWithDefaultProps)).toWarnDev(
+    expect(() =>
+      React.forwardRef(renderWithDefaultProps),
+    ).toErrorDev(
       'forwardRef render functions do not support propTypes or defaultProps. ' +
         'Did you accidentally pass a React component?',
       {withoutStack: true},
@@ -171,14 +183,17 @@ describe('forwardRef', () => {
   });
 
   it('should not warn if the render function provided does not use any parameter', () => {
-    const arityOfZero = () => <div ref={arguments[1]} />;
-    React.forwardRef(arityOfZero);
+    React.forwardRef(function arityOfZero() {
+      return <div ref={arguments[1]} />;
+    });
   });
 
   it('should warn if the render function provided does not use the forwarded ref parameter', () => {
     const arityOfOne = props => <div {...props} />;
 
-    expect(() => React.forwardRef(arityOfOne)).toWarnDev(
+    expect(() =>
+      React.forwardRef(arityOfOne),
+    ).toErrorDev(
       'forwardRef render functions accept exactly two parameters: props and ref. ' +
         'Did you forget to use the ref parameter?',
       {withoutStack: true},
@@ -193,7 +208,9 @@ describe('forwardRef', () => {
   it('should warn if the render function provided expects to use more than two parameters', () => {
     const arityOfThree = (props, ref, x) => <div {...props} ref={ref} x={x} />;
 
-    expect(() => React.forwardRef(arityOfThree)).toWarnDev(
+    expect(() =>
+      React.forwardRef(arityOfThree),
+    ).toErrorDev(
       'forwardRef render functions accept exactly two parameters: props and ref. ' +
         'Any additional parameter will be undefined.',
       {withoutStack: true},
@@ -222,7 +239,7 @@ describe('forwardRef', () => {
 
     expect(() =>
       ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
-    ).toWarnDev(
+    ).toErrorDev(
       'Warning: Failed prop type: The prop `required` is marked as required in ' +
         '`Foo`, but its value is `undefined`.\n' +
         '    in Foo (at **)',
@@ -363,7 +380,7 @@ describe('forwardRef', () => {
           return null;
         }),
       );
-    }).toWarnDev(
+    }).toErrorDev(
       [
         'Warning: forwardRef requires a render function but received a `memo` ' +
           'component. Instead of forwardRef(memo(...)), use ' +
diff --git a/packages/react/src/__tests__/withComponentStack-test.js b/packages/react/src/__tests__/withComponentStack-test.js
deleted file mode 100644
index e46d7f2e54997..0000000000000
--- a/packages/react/src/__tests__/withComponentStack-test.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-function normalizeCodeLocInfo(str) {
-  return str && str.replace(/at .+?:\d+/g, 'at **');
-}
-
-function expectHelper(spy, prefix, ...expectedArgs) {
-  const expectedStack = expectedArgs.pop();
-
-  expect(spy).toHaveBeenCalledTimes(1);
-
-  const actualArgs = spy.calls.mostRecent().args;
-
-  let actualStack = undefined;
-  if (expectedStack !== undefined) {
-    actualStack = actualArgs.pop();
-    expect(normalizeCodeLocInfo(actualStack)).toBe(expectedStack);
-  }
-
-  expect(actualArgs).toHaveLength(expectedArgs.length);
-  actualArgs.forEach((actualArg, index) => {
-    const expectedArg = expectedArgs[index];
-    expect(actualArg).toBe(
-      index === 0 ? `${prefix}: ${expectedArg}` : expectedArg,
-    );
-  });
-}
-
-function expectMessageAndStack(...expectedArgs) {
-  expectHelper(console.error, 'error', ...expectedArgs);
-  expectHelper(console.warn, 'warn', ...expectedArgs);
-}
-
-describe('withComponentStack', () => {
-  let React = null;
-  let ReactTestRenderer = null;
-  let error = null;
-  let scheduler = null;
-  let warn = null;
-
-  beforeEach(() => {
-    jest.resetModules();
-    jest.mock('scheduler', () => require('scheduler/unstable_mock'));
-
-    React = require('react');
-    ReactTestRenderer = require('react-test-renderer');
-    scheduler = require('scheduler');
-
-    error = React.error;
-    warn = React.warn;
-
-    spyOnDevAndProd(console, 'error');
-    spyOnDevAndProd(console, 'warn');
-  });
-
-  if (!__DEV__) {
-    it('does nothing in production mode', () => {
-      error('error');
-      warn('warning');
-
-      expect(console.error).toHaveBeenCalledTimes(0);
-      expect(console.warn).toHaveBeenCalledTimes(0);
-    });
-  }
-
-  if (__DEV__) {
-    it('does not include component stack when called outside of render', () => {
-      error('error: logged outside of render');
-      warn('warn: logged outside of render');
-      expectMessageAndStack('logged outside of render', undefined);
-    });
-
-    it('should support multiple args', () => {
-      function Component() {
-        error('error: number:', 123, 'boolean:', true);
-        warn('warn: number:', 123, 'boolean:', true);
-        return null;
-      }
-
-      ReactTestRenderer.create(<Component />);
-
-      expectMessageAndStack(
-        'number:',
-        123,
-        'boolean:',
-        true,
-        '\n    in Component (at **)',
-      );
-    });
-
-    it('includes component stack when called from a render method', () => {
-      class Parent extends React.Component {
-        render() {
-          return <Child />;
-        }
-      }
-
-      function Child() {
-        error('error: logged in child render method');
-        warn('warn: logged in child render method');
-        return null;
-      }
-
-      ReactTestRenderer.create(<Parent />);
-
-      expectMessageAndStack(
-        'logged in child render method',
-        '\n    in Child (at **)' + '\n    in Parent (at **)',
-      );
-    });
-
-    it('includes component stack when called from a render phase lifecycle method', () => {
-      function Parent() {
-        return <Child />;
-      }
-
-      class Child extends React.Component {
-        UNSAFE_componentWillMount() {
-          error('error: logged in child cWM lifecycle');
-          warn('warn: logged in child cWM lifecycle');
-        }
-        render() {
-          return null;
-        }
-      }
-
-      ReactTestRenderer.create(<Parent />);
-
-      expectMessageAndStack(
-        'logged in child cWM lifecycle',
-        '\n    in Child (at **)' + '\n    in Parent (at **)',
-      );
-    });
-
-    it('includes component stack when called from a commit phase lifecycle method', () => {
-      function Parent() {
-        return <Child />;
-      }
-
-      class Child extends React.Component {
-        componentDidMount() {
-          error('error: logged in child cDM lifecycle');
-          warn('warn: logged in child cDM lifecycle');
-        }
-        render() {
-          return null;
-        }
-      }
-
-      ReactTestRenderer.create(<Parent />);
-
-      expectMessageAndStack(
-        'logged in child cDM lifecycle',
-        '\n    in Child (at **)' + '\n    in Parent (at **)',
-      );
-    });
-
-    it('includes component stack when called from a passive effect handler', () => {
-      class Parent extends React.Component {
-        render() {
-          return <Child />;
-        }
-      }
-
-      function Child() {
-        React.useEffect(() => {
-          error('error: logged in child render method');
-          warn('warn: logged in child render method');
-        });
-        return null;
-      }
-
-      ReactTestRenderer.create(<Parent />);
-
-      scheduler.flushAll(); // Flush passive effects
-
-      expectMessageAndStack(
-        'logged in child render method',
-        '\n    in Child (at **)' + '\n    in Parent (at **)',
-      );
-    });
-  }
-});
diff --git a/packages/react/src/chunk.js b/packages/react/src/chunk.js
new file mode 100644
index 0000000000000..90bf8ac56ffdb
--- /dev/null
+++ b/packages/react/src/chunk.js
@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+import {
+  REACT_CHUNK_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_FORWARD_REF_TYPE,
+} from 'shared/ReactSymbols';
+
+opaque type Chunk<Props>: React$AbstractComponent<
+  Props,
+  null,
+> = React$AbstractComponent<Props, null>;
+
+export default function chunk<Args, Props, Data>(
+  query: (...args: Args) => Data,
+  render: (props: Props, data: Data) => React$Node,
+): (...args: Args) => Chunk<Props> {
+  if (__DEV__) {
+    if (typeof query !== 'function') {
+      console.error(
+        'Chunks require a query function but was given %s.',
+        query === null ? 'null' : typeof query,
+      );
+    }
+    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
+      console.error(
+        'Chunks require a render function but received a `memo` ' +
+          'component. Use `memo` on an inner component instead.',
+      );
+    } else if (render != null && render.$$typeof === REACT_FORWARD_REF_TYPE) {
+      console.error(
+        'Chunks require a render function but received a `forwardRef` ' +
+          'component. Use `forwardRef` on an inner component instead.',
+      );
+    } else if (typeof render !== 'function') {
+      console.error(
+        'Chunks require a render function but was given %s.',
+        render === null ? 'null' : typeof render,
+      );
+    } else if (render.length !== 0 && render.length !== 2) {
+      // Warn if it's not accepting two args.
+      // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object
+      console.error(
+        'Chunk render functions accept exactly two parameters: props and data. %s',
+        render.length === 1
+          ? 'Did you forget to use the data parameter?'
+          : 'Any additional parameter will be undefined.',
+      );
+    }
+
+    if (
+      render != null &&
+      (render.defaultProps != null || render.propTypes != null)
+    ) {
+      console.error(
+        'Chunk render functions do not support propTypes or defaultProps. ' +
+          'Did you accidentally pass a React component?',
+      );
+    }
+  }
+  return function(): Chunk<Props> {
+    let args = arguments;
+    return {
+      $$typeof: REACT_CHUNK_TYPE,
+      query: function() {
+        return query.apply(null, args);
+      },
+      render: render,
+    };
+  };
+}
diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index d229434036373..dfbef553cb224 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -11,12 +11,12 @@ import * as SchedulerTracing from 'scheduler/tracing';
 import ReactCurrentDispatcher from '../ReactCurrentDispatcher';
 import ReactCurrentOwner from '../ReactCurrentOwner';
 import ReactDebugCurrentFrame from '../ReactDebugCurrentFrame';
+import IsSomeRendererActing from '../IsSomeRendererActing';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
-  // used by act()
-  ReactShouldWarnActingUpdates: {current: false},
+  IsSomeRendererActing,
   // Used by renderers to avoid bundling object-assign twice in UMD bundles:
   assign,
 };
diff --git a/packages/react/src/forwardRef.js b/packages/react/src/forwardRef.js
index c2617e4eef976..64bc4698dd7c1 100644
--- a/packages/react/src/forwardRef.js
+++ b/packages/react/src/forwardRef.js
@@ -7,42 +7,39 @@
 
 import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
-
 export default function forwardRef<Props, ElementType: React$ElementType>(
   render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
 ) {
   if (__DEV__) {
     if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
-      warningWithoutStack(
-        false,
+      console.error(
         'forwardRef requires a render function but received a `memo` ' +
           'component. Instead of forwardRef(memo(...)), use ' +
           'memo(forwardRef(...)).',
       );
     } else if (typeof render !== 'function') {
-      warningWithoutStack(
-        false,
+      console.error(
         'forwardRef requires a render function but was given %s.',
         render === null ? 'null' : typeof render,
       );
     } else {
-      warningWithoutStack(
-        // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object
-        render.length === 0 || render.length === 2,
-        'forwardRef render functions accept exactly two parameters: props and ref. %s',
-        render.length === 1
-          ? 'Did you forget to use the ref parameter?'
-          : 'Any additional parameter will be undefined.',
-      );
+      if (render.length !== 0 && render.length !== 2) {
+        console.error(
+          'forwardRef render functions accept exactly two parameters: props and ref. %s',
+          render.length === 1
+            ? 'Did you forget to use the ref parameter?'
+            : 'Any additional parameter will be undefined.',
+        );
+      }
     }
 
     if (render != null) {
-      warningWithoutStack(
-        render.defaultProps == null && render.propTypes == null,
-        'forwardRef render functions do not support propTypes or defaultProps. ' +
-          'Did you accidentally pass a React component?',
-      );
+      if (render.defaultProps != null || render.propTypes != null) {
+        console.error(
+          'forwardRef render functions do not support propTypes or defaultProps. ' +
+            'Did you accidentally pass a React component?',
+        );
+      }
     }
   }
 
diff --git a/packages/react/src/memo.js b/packages/react/src/memo.js
index 0fda3a8f67e00..e52270185e5a5 100644
--- a/packages/react/src/memo.js
+++ b/packages/react/src/memo.js
@@ -8,7 +8,6 @@
 import {REACT_MEMO_TYPE} from 'shared/ReactSymbols';
 
 import isValidElementType from 'shared/isValidElementType';
-import warningWithoutStack from 'shared/warningWithoutStack';
 
 export default function memo<Props>(
   type: React$ElementType,
@@ -16,8 +15,7 @@ export default function memo<Props>(
 ) {
   if (__DEV__) {
     if (!isValidElementType(type)) {
-      warningWithoutStack(
-        false,
+      console.error(
         'memo: The first argument must be a component. Instead ' +
           'received: %s',
         type === null ? 'null' : typeof type,
diff --git a/packages/react/src/withComponentStack.js b/packages/react/src/withComponentStack.js
deleted file mode 100644
index 62aa7ccde2009..0000000000000
--- a/packages/react/src/withComponentStack.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * 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.
- */
-
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-
-function noop() {}
-
-let error = noop;
-let warn = noop;
-if (__DEV__) {
-  const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-
-  error = function() {
-    const stack = ReactDebugCurrentFrame.getStackAddendum();
-    if (stack !== '') {
-      const length = arguments.length;
-      const args = new Array(length + 1);
-      for (let i = 0; i < length; i++) {
-        args[i] = arguments[i];
-      }
-      args[length] = stack;
-      console.error.apply(console, args);
-    } else {
-      console.error.apply(console, arguments);
-    }
-  };
-
-  warn = function() {
-    const stack = ReactDebugCurrentFrame.getStackAddendum();
-    if (stack !== '') {
-      const length = arguments.length;
-      const args = new Array(length + 1);
-      for (let i = 0; i < length; i++) {
-        args[i] = arguments[i];
-      }
-      args[length] = stack;
-      console.warn.apply(console, args);
-    } else {
-      console.warn.apply(console, arguments);
-    }
-  };
-}
-
-export {error, warn};
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.development.js b/packages/scheduler/npm/umd/scheduler-tracing.development.js
index 6c5b5ab787931..a81bf8fe2f98d 100644
--- a/packages/scheduler/npm/umd/scheduler-tracing.development.js
+++ b/packages/scheduler/npm/umd/scheduler-tracing.development.js
@@ -14,8 +14,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.SchedulerTracing = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.SchedulerTracing = factory(global));
 })(this, function(global) {
   function unstable_clear() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.production.min.js b/packages/scheduler/npm/umd/scheduler-tracing.production.min.js
index 6c5b5ab787931..a81bf8fe2f98d 100644
--- a/packages/scheduler/npm/umd/scheduler-tracing.production.min.js
+++ b/packages/scheduler/npm/umd/scheduler-tracing.production.min.js
@@ -14,8 +14,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.SchedulerTracing = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.SchedulerTracing = factory(global));
 })(this, function(global) {
   function unstable_clear() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js b/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
index 6c5b5ab787931..a81bf8fe2f98d 100644
--- a/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
+++ b/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
@@ -14,8 +14,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.SchedulerTracing = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.SchedulerTracing = factory(global));
 })(this, function(global) {
   function unstable_clear() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
diff --git a/packages/scheduler/npm/umd/scheduler.development.js b/packages/scheduler/npm/umd/scheduler.development.js
index 48845964b2664..b960dc91132e7 100644
--- a/packages/scheduler/npm/umd/scheduler.development.js
+++ b/packages/scheduler/npm/umd/scheduler.development.js
@@ -16,8 +16,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.Scheduler = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.Scheduler = factory(global));
 })(this, function(global) {
   function unstable_now() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_now.apply(
@@ -47,6 +47,13 @@
     );
   }
 
+  function unstable_requestPaint() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -108,6 +115,7 @@
     unstable_scheduleCallback: unstable_scheduleCallback,
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
+    unstable_requestPaint: unstable_requestPaint,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
@@ -136,5 +144,9 @@
       return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .Scheduler.unstable_UserBlockingPriority;
     },
+    get unstable_Profiling() {
+      return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .Scheduler.unstable_Profiling;
+    },
   });
 });
diff --git a/packages/scheduler/npm/umd/scheduler.production.min.js b/packages/scheduler/npm/umd/scheduler.production.min.js
index 3d020960b2bd0..0c2584331b847 100644
--- a/packages/scheduler/npm/umd/scheduler.production.min.js
+++ b/packages/scheduler/npm/umd/scheduler.production.min.js
@@ -16,8 +16,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.Scheduler = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.Scheduler = factory(global));
 })(this, function(global) {
   function unstable_now() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_now.apply(
@@ -47,6 +47,13 @@
     );
   }
 
+  function unstable_requestPaint() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -102,6 +109,7 @@
     unstable_scheduleCallback: unstable_scheduleCallback,
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
+    unstable_requestPaint: unstable_requestPaint,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
@@ -130,5 +138,9 @@
       return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .Scheduler.unstable_UserBlockingPriority;
     },
+    get unstable_Profiling() {
+      return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .Scheduler.unstable_Profiling;
+    },
   });
 });
diff --git a/packages/scheduler/npm/umd/scheduler.profiling.min.js b/packages/scheduler/npm/umd/scheduler.profiling.min.js
index 3d020960b2bd0..0c2584331b847 100644
--- a/packages/scheduler/npm/umd/scheduler.profiling.min.js
+++ b/packages/scheduler/npm/umd/scheduler.profiling.min.js
@@ -16,8 +16,8 @@
   typeof exports === 'object' && typeof module !== 'undefined'
     ? (module.exports = factory(require('react')))
     : typeof define === 'function' && define.amd // eslint-disable-line no-undef
-      ? define(['react'], factory) // eslint-disable-line no-undef
-      : (global.Scheduler = factory(global));
+    ? define(['react'], factory) // eslint-disable-line no-undef
+    : (global.Scheduler = factory(global));
 })(this, function(global) {
   function unstable_now() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_now.apply(
@@ -47,6 +47,13 @@
     );
   }
 
+  function unstable_requestPaint() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -102,6 +109,7 @@
     unstable_scheduleCallback: unstable_scheduleCallback,
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
+    unstable_requestPaint: unstable_requestPaint,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
@@ -130,5 +138,9 @@
       return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .Scheduler.unstable_UserBlockingPriority;
     },
+    get unstable_Profiling() {
+      return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .Scheduler.unstable_Profiling;
+    },
   });
 });
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index fc624eadb1b0f..81315b6d5e0b9 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.14.0",
+  "version": "0.18.0",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/scheduler/src/Scheduler.js b/packages/scheduler/src/Scheduler.js
index e1300149272f9..bc5d061c5627c 100644
--- a/packages/scheduler/src/Scheduler.js
+++ b/packages/scheduler/src/Scheduler.js
@@ -8,21 +8,42 @@
 
 /* eslint-disable no-var */
 
-import {enableSchedulerDebugging} from './SchedulerFeatureFlags';
+import {
+  enableSchedulerDebugging,
+  enableProfiling,
+} from './SchedulerFeatureFlags';
 import {
   requestHostCallback,
-  cancelHostCallback,
+  requestHostTimeout,
+  cancelHostTimeout,
   shouldYieldToHost,
   getCurrentTime,
   forceFrameRate,
+  requestPaint,
 } from './SchedulerHostConfig';
+import {push, pop, peek} from './SchedulerMinHeap';
 
 // TODO: Use symbols?
-var ImmediatePriority = 1;
-var UserBlockingPriority = 2;
-var NormalPriority = 3;
-var LowPriority = 4;
-var IdlePriority = 5;
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from './SchedulerPriorities';
+import {
+  sharedProfilingBuffer,
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from './SchedulerProfiling';
 
 // Max 31 bit integer. The max integer size in V8 for 32-bit systems.
 // Math.pow(2, 30) - 1
@@ -38,181 +59,158 @@ var LOW_PRIORITY_TIMEOUT = 10000;
 // Never times out
 var IDLE_PRIORITY = maxSigned31BitInt;
 
-// Callbacks are stored as a circular, doubly linked list.
-var firstCallbackNode = null;
+// Tasks are stored on a min heap
+var taskQueue = [];
+var timerQueue = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
 
-var currentHostCallbackDidTimeout = false;
 // Pausing the scheduler is useful for debugging.
 var isSchedulerPaused = false;
 
+var currentTask = null;
 var currentPriorityLevel = NormalPriority;
-var currentEventStartTime = -1;
-var currentExpirationTime = -1;
 
 // This is set while performing work, to prevent re-entrancy.
 var isPerformingWork = false;
 
 var isHostCallbackScheduled = false;
-
-function scheduleHostCallbackIfNeeded() {
-  if (isPerformingWork) {
-    // Don't schedule work yet; wait until the next time we yield.
-    return;
-  }
-  if (firstCallbackNode !== null) {
-    // Schedule the host callback using the earliest expiration in the list.
-    var expirationTime = firstCallbackNode.expirationTime;
-    if (isHostCallbackScheduled) {
-      // Cancel the existing host callback.
-      cancelHostCallback();
+var isHostTimeoutScheduled = false;
+
+function advanceTimers(currentTime) {
+  // Check for tasks that are no longer delayed and add them to the queue.
+  let timer = peek(timerQueue);
+  while (timer !== null) {
+    if (timer.callback === null) {
+      // Timer was cancelled.
+      pop(timerQueue);
+    } else if (timer.startTime <= currentTime) {
+      // Timer fired. Transfer to the task queue.
+      pop(timerQueue);
+      timer.sortIndex = timer.expirationTime;
+      push(taskQueue, timer);
+      if (enableProfiling) {
+        markTaskStart(timer, currentTime);
+        timer.isQueued = true;
+      }
     } else {
-      isHostCallbackScheduled = true;
+      // Remaining timers are pending.
+      return;
     }
-    requestHostCallback(flushWork, expirationTime);
+    timer = peek(timerQueue);
   }
 }
 
-function flushFirstCallback() {
-  const currentlyFlushingCallback = firstCallbackNode;
-
-  // Remove the node from the list before calling the callback. That way the
-  // list is in a consistent state even if the callback throws.
-  var next = firstCallbackNode.next;
-  if (firstCallbackNode === next) {
-    // This is the last callback in the list.
-    firstCallbackNode = null;
-    next = null;
-  } else {
-    var lastCallbackNode = firstCallbackNode.previous;
-    firstCallbackNode = lastCallbackNode.next = next;
-    next.previous = lastCallbackNode;
-  }
-
-  currentlyFlushingCallback.next = currentlyFlushingCallback.previous = null;
+function handleTimeout(currentTime) {
+  isHostTimeoutScheduled = false;
+  advanceTimers(currentTime);
 
-  // Now it's safe to call the callback.
-  var callback = currentlyFlushingCallback.callback;
-  var expirationTime = currentlyFlushingCallback.expirationTime;
-  var priorityLevel = currentlyFlushingCallback.priorityLevel;
-  var previousPriorityLevel = currentPriorityLevel;
-  var previousExpirationTime = currentExpirationTime;
-  currentPriorityLevel = priorityLevel;
-  currentExpirationTime = expirationTime;
-  var continuationCallback;
-  try {
-    const didUserCallbackTimeout =
-      currentHostCallbackDidTimeout ||
-      // Immediate priority callbacks are always called as if they timed out
-      priorityLevel === ImmediatePriority;
-    continuationCallback = callback(didUserCallbackTimeout);
-  } catch (error) {
-    throw error;
-  } finally {
-    currentPriorityLevel = previousPriorityLevel;
-    currentExpirationTime = previousExpirationTime;
-  }
-
-  // A callback may return a continuation. The continuation should be scheduled
-  // with the same priority and expiration as the just-finished callback.
-  if (typeof continuationCallback === 'function') {
-    var continuationNode: CallbackNode = {
-      callback: continuationCallback,
-      priorityLevel,
-      expirationTime,
-      next: null,
-      previous: null,
-    };
-
-    // Insert the new callback into the list, sorted by its expiration. This is
-    // almost the same as the code in `scheduleCallback`, except the callback
-    // is inserted into the list *before* callbacks of equal expiration instead
-    // of after.
-    if (firstCallbackNode === null) {
-      // This is the first callback in the list.
-      firstCallbackNode = continuationNode.next = continuationNode.previous = continuationNode;
+  if (!isHostCallbackScheduled) {
+    if (peek(taskQueue) !== null) {
+      isHostCallbackScheduled = true;
+      requestHostCallback(flushWork);
     } else {
-      var nextAfterContinuation = null;
-      var node = firstCallbackNode;
-      do {
-        if (node.expirationTime >= expirationTime) {
-          // This callback expires at or after the continuation. We will insert
-          // the continuation *before* this callback.
-          nextAfterContinuation = node;
-          break;
-        }
-        node = node.next;
-      } while (node !== firstCallbackNode);
-
-      if (nextAfterContinuation === null) {
-        // No equal or lower priority callback was found, which means the new
-        // callback is the lowest priority callback in the list.
-        nextAfterContinuation = firstCallbackNode;
-      } else if (nextAfterContinuation === firstCallbackNode) {
-        // The new callback is the highest priority callback in the list.
-        firstCallbackNode = continuationNode;
-        scheduleHostCallbackIfNeeded();
+      const firstTimer = peek(timerQueue);
+      if (firstTimer !== null) {
+        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
       }
-
-      var previous = nextAfterContinuation.previous;
-      previous.next = nextAfterContinuation.previous = continuationNode;
-      continuationNode.next = nextAfterContinuation;
-      continuationNode.previous = previous;
     }
   }
 }
 
-function flushWork(didUserCallbackTimeout) {
-  // Exit right away if we're currently paused
-  if (enableSchedulerDebugging && isSchedulerPaused) {
-    return;
+function flushWork(hasTimeRemaining, initialTime) {
+  if (enableProfiling) {
+    markSchedulerUnsuspended(initialTime);
   }
 
-  // We'll need a new host callback the next time work is scheduled.
+  // We'll need a host callback the next time work is scheduled.
   isHostCallbackScheduled = false;
+  if (isHostTimeoutScheduled) {
+    // We scheduled a timeout but it's no longer needed. Cancel it.
+    isHostTimeoutScheduled = false;
+    cancelHostTimeout();
+  }
 
   isPerformingWork = true;
-  const previousDidTimeout = currentHostCallbackDidTimeout;
-  currentHostCallbackDidTimeout = didUserCallbackTimeout;
+  const previousPriorityLevel = currentPriorityLevel;
   try {
-    if (didUserCallbackTimeout) {
-      // Flush all the expired callbacks without yielding.
-      while (
-        firstCallbackNode !== null &&
-        !(enableSchedulerDebugging && isSchedulerPaused)
-      ) {
-        // TODO Wrap in feature flag
-        // Read the current time. Flush all the callbacks that expire at or
-        // earlier than that time. Then read the current time again and repeat.
-        // This optimizes for as few performance.now calls as possible.
-        var currentTime = getCurrentTime();
-        if (firstCallbackNode.expirationTime <= currentTime) {
-          do {
-            flushFirstCallback();
-          } while (
-            firstCallbackNode !== null &&
-            firstCallbackNode.expirationTime <= currentTime &&
-            !(enableSchedulerDebugging && isSchedulerPaused)
-          );
-          continue;
+    if (enableProfiling) {
+      try {
+        return workLoop(hasTimeRemaining, initialTime);
+      } catch (error) {
+        if (currentTask !== null) {
+          const currentTime = getCurrentTime();
+          markTaskErrored(currentTask, currentTime);
+          currentTask.isQueued = false;
         }
-        break;
+        throw error;
       }
     } else {
-      // Keep flushing callbacks until we run out of time in the frame.
-      if (firstCallbackNode !== null) {
-        do {
-          if (enableSchedulerDebugging && isSchedulerPaused) {
-            break;
-          }
-          flushFirstCallback();
-        } while (firstCallbackNode !== null && !shouldYieldToHost());
-      }
+      // No catch in prod codepath.
+      return workLoop(hasTimeRemaining, initialTime);
     }
   } finally {
+    currentTask = null;
+    currentPriorityLevel = previousPriorityLevel;
     isPerformingWork = false;
-    currentHostCallbackDidTimeout = previousDidTimeout;
-    // There's still work remaining. Request another callback.
-    scheduleHostCallbackIfNeeded();
+    if (enableProfiling) {
+      const currentTime = getCurrentTime();
+      markSchedulerSuspended(currentTime);
+    }
+  }
+}
+
+function workLoop(hasTimeRemaining, initialTime) {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (
+    currentTask !== null &&
+    !(enableSchedulerDebugging && isSchedulerPaused)
+  ) {
+    if (
+      currentTask.expirationTime > currentTime &&
+      (!hasTimeRemaining || shouldYieldToHost())
+    ) {
+      // This currentTask hasn't expired, and we've reached the deadline.
+      break;
+    }
+    const callback = currentTask.callback;
+    if (callback !== null) {
+      currentTask.callback = null;
+      currentPriorityLevel = currentTask.priorityLevel;
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      markTaskRun(currentTask, currentTime);
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        currentTask.callback = continuationCallback;
+        markTaskYield(currentTask, currentTime);
+      } else {
+        if (enableProfiling) {
+          markTaskCompleted(currentTask, currentTime);
+          currentTask.isQueued = false;
+        }
+        if (currentTask === peek(taskQueue)) {
+          pop(taskQueue);
+        }
+      }
+      advanceTimers(currentTime);
+    } else {
+      pop(taskQueue);
+    }
+    currentTask = peek(taskQueue);
+  }
+  // Return whether there's additional work
+  if (currentTask !== null) {
+    return true;
+  } else {
+    let firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
   }
 }
 
@@ -229,24 +227,17 @@ function unstable_runWithPriority(priorityLevel, eventHandler) {
   }
 
   var previousPriorityLevel = currentPriorityLevel;
-  var previousEventStartTime = currentEventStartTime;
   currentPriorityLevel = priorityLevel;
-  currentEventStartTime = getCurrentTime();
 
   try {
     return eventHandler();
-  } catch (error) {
-    // There's still work remaining. Request another callback.
-    scheduleHostCallbackIfNeeded();
-    throw error;
   } finally {
     currentPriorityLevel = previousPriorityLevel;
-    currentEventStartTime = previousEventStartTime;
   }
 }
 
 function unstable_next(eventHandler) {
-  let priorityLevel;
+  var priorityLevel;
   switch (currentPriorityLevel) {
     case ImmediatePriority:
     case UserBlockingPriority:
@@ -261,19 +252,12 @@ function unstable_next(eventHandler) {
   }
 
   var previousPriorityLevel = currentPriorityLevel;
-  var previousEventStartTime = currentEventStartTime;
   currentPriorityLevel = priorityLevel;
-  currentEventStartTime = getCurrentTime();
 
   try {
     return eventHandler();
-  } catch (error) {
-    // There's still work remaining. Request another callback.
-    scheduleHostCallbackIfNeeded();
-    throw error;
   } finally {
     currentPriorityLevel = previousPriorityLevel;
-    currentEventStartTime = previousEventStartTime;
   }
 }
 
@@ -282,103 +266,98 @@ function unstable_wrapCallback(callback) {
   return function() {
     // This is a fork of runWithPriority, inlined for performance.
     var previousPriorityLevel = currentPriorityLevel;
-    var previousEventStartTime = currentEventStartTime;
     currentPriorityLevel = parentPriorityLevel;
-    currentEventStartTime = getCurrentTime();
 
     try {
       return callback.apply(this, arguments);
-    } catch (error) {
-      // There's still work remaining. Request another callback.
-      scheduleHostCallbackIfNeeded();
-      throw error;
     } finally {
       currentPriorityLevel = previousPriorityLevel;
-      currentEventStartTime = previousEventStartTime;
     }
   };
 }
 
-function unstable_scheduleCallback(
-  priorityLevel,
-  callback,
-  deprecated_options,
-) {
-  var startTime =
-    currentEventStartTime !== -1 ? currentEventStartTime : getCurrentTime();
-
-  var expirationTime;
-  if (
-    typeof deprecated_options === 'object' &&
-    deprecated_options !== null &&
-    typeof deprecated_options.timeout === 'number'
-  ) {
-    // FIXME: Remove this branch once we lift expiration times out of React.
-    expirationTime = startTime + deprecated_options.timeout;
-  } else {
-    switch (priorityLevel) {
-      case ImmediatePriority:
-        expirationTime = startTime + IMMEDIATE_PRIORITY_TIMEOUT;
-        break;
-      case UserBlockingPriority:
-        expirationTime = startTime + USER_BLOCKING_PRIORITY;
-        break;
-      case IdlePriority:
-        expirationTime = startTime + IDLE_PRIORITY;
-        break;
-      case LowPriority:
-        expirationTime = startTime + LOW_PRIORITY_TIMEOUT;
-        break;
-      case NormalPriority:
-      default:
-        expirationTime = startTime + NORMAL_PRIORITY_TIMEOUT;
+function timeoutForPriorityLevel(priorityLevel) {
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      return IMMEDIATE_PRIORITY_TIMEOUT;
+    case UserBlockingPriority:
+      return USER_BLOCKING_PRIORITY;
+    case IdlePriority:
+      return IDLE_PRIORITY;
+    case LowPriority:
+      return LOW_PRIORITY_TIMEOUT;
+    case NormalPriority:
+    default:
+      return NORMAL_PRIORITY_TIMEOUT;
+  }
+}
+
+function unstable_scheduleCallback(priorityLevel, callback, options) {
+  var currentTime = getCurrentTime();
+
+  var startTime;
+  var timeout;
+  if (typeof options === 'object' && options !== null) {
+    var delay = options.delay;
+    if (typeof delay === 'number' && delay > 0) {
+      startTime = currentTime + delay;
+    } else {
+      startTime = currentTime;
     }
+    timeout =
+      typeof options.timeout === 'number'
+        ? options.timeout
+        : timeoutForPriorityLevel(priorityLevel);
+  } else {
+    timeout = timeoutForPriorityLevel(priorityLevel);
+    startTime = currentTime;
   }
 
-  var newNode = {
+  var expirationTime = startTime + timeout;
+
+  var newTask = {
+    id: taskIdCounter++,
     callback,
-    priorityLevel: priorityLevel,
+    priorityLevel,
+    startTime,
     expirationTime,
-    next: null,
-    previous: null,
+    sortIndex: -1,
   };
+  if (enableProfiling) {
+    newTask.isQueued = false;
+  }
 
-  // Insert the new callback into the list, ordered first by expiration, then
-  // by insertion. So the new callback is inserted after any other callback
-  // with equal expiration.
-  if (firstCallbackNode === null) {
-    // This is the first callback in the list.
-    firstCallbackNode = newNode.next = newNode.previous = newNode;
-    scheduleHostCallbackIfNeeded();
-  } else {
-    var next = null;
-    var node = firstCallbackNode;
-    do {
-      if (node.expirationTime > expirationTime) {
-        // The new callback expires before this one.
-        next = node;
-        break;
+  if (startTime > currentTime) {
+    // This is a delayed task.
+    newTask.sortIndex = startTime;
+    push(timerQueue, newTask);
+    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
+      // All tasks are delayed, and this is the task with the earliest delay.
+      if (isHostTimeoutScheduled) {
+        // Cancel an existing timeout.
+        cancelHostTimeout();
+      } else {
+        isHostTimeoutScheduled = true;
       }
-      node = node.next;
-    } while (node !== firstCallbackNode);
-
-    if (next === null) {
-      // No callback with a later expiration was found, which means the new
-      // callback has the latest expiration in the list.
-      next = firstCallbackNode;
-    } else if (next === firstCallbackNode) {
-      // The new callback has the earliest expiration in the entire list.
-      firstCallbackNode = newNode;
-      scheduleHostCallbackIfNeeded();
+      // Schedule a timeout.
+      requestHostTimeout(handleTimeout, startTime - currentTime);
+    }
+  } else {
+    newTask.sortIndex = expirationTime;
+    push(taskQueue, newTask);
+    if (enableProfiling) {
+      markTaskStart(newTask, currentTime);
+      newTask.isQueued = true;
+    }
+    // Schedule a host callback, if needed. If we're already performing work,
+    // wait until the next time we yield.
+    if (!isHostCallbackScheduled && !isPerformingWork) {
+      isHostCallbackScheduled = true;
+      requestHostCallback(flushWork);
     }
-
-    var previous = next.previous;
-    previous.next = next.previous = newNode;
-    newNode.next = next;
-    newNode.previous = previous;
   }
 
-  return newNode;
+  return newTask;
 }
 
 function unstable_pauseExecution() {
@@ -387,36 +366,29 @@ function unstable_pauseExecution() {
 
 function unstable_continueExecution() {
   isSchedulerPaused = false;
-  if (firstCallbackNode !== null) {
-    scheduleHostCallbackIfNeeded();
+  if (!isHostCallbackScheduled && !isPerformingWork) {
+    isHostCallbackScheduled = true;
+    requestHostCallback(flushWork);
   }
 }
 
 function unstable_getFirstCallbackNode() {
-  return firstCallbackNode;
+  return peek(taskQueue);
 }
 
-function unstable_cancelCallback(callbackNode) {
-  var next = callbackNode.next;
-  if (next === null) {
-    // Already cancelled.
-    return;
-  }
-
-  if (next === callbackNode) {
-    // This is the only scheduled callback. Clear the list.
-    firstCallbackNode = null;
-  } else {
-    // Remove the callback from its position in the list.
-    if (callbackNode === firstCallbackNode) {
-      firstCallbackNode = next;
+function unstable_cancelCallback(task) {
+  if (enableProfiling) {
+    if (task.isQueued) {
+      const currentTime = getCurrentTime();
+      markTaskCanceled(task, currentTime);
+      task.isQueued = false;
     }
-    var previous = callbackNode.previous;
-    previous.next = next;
-    next.previous = previous;
   }
 
-  callbackNode.next = callbackNode.previous = null;
+  // Null out the callback to indicate the task has been canceled. (Can't
+  // remove from the queue because you can't remove arbitrary nodes from an
+  // array based heap, only the first one.)
+  task.callback = null;
 }
 
 function unstable_getCurrentPriorityLevel() {
@@ -424,14 +396,22 @@ function unstable_getCurrentPriorityLevel() {
 }
 
 function unstable_shouldYield() {
+  const currentTime = getCurrentTime();
+  advanceTimers(currentTime);
+  const firstTask = peek(taskQueue);
   return (
-    !currentHostCallbackDidTimeout &&
-    ((firstCallbackNode !== null &&
-      firstCallbackNode.expirationTime < currentExpirationTime) ||
-      shouldYieldToHost())
+    (firstTask !== currentTask &&
+      currentTask !== null &&
+      firstTask !== null &&
+      firstTask.callback !== null &&
+      firstTask.startTime <= currentTime &&
+      firstTask.expirationTime < currentTask.expirationTime) ||
+    shouldYieldToHost()
   );
 }
 
+const unstable_requestPaint = requestPaint;
+
 export {
   ImmediatePriority as unstable_ImmediatePriority,
   UserBlockingPriority as unstable_UserBlockingPriority,
@@ -445,9 +425,18 @@ export {
   unstable_wrapCallback,
   unstable_getCurrentPriorityLevel,
   unstable_shouldYield,
+  unstable_requestPaint,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
   getCurrentTime as unstable_now,
   forceFrameRate as unstable_forceFrameRate,
 };
+
+export const unstable_Profiling = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+      sharedProfilingBuffer,
+    }
+  : null;
diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index fb60a6b873afc..848c299dd6df4 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -7,3 +7,5 @@
  */
 
 export const enableSchedulerDebugging = false;
+export const enableIsInputPending = false;
+export const enableProfiling = __PROFILE__;
diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
new file mode 100644
index 0000000000000..03d82f4df65cc
--- /dev/null
+++ b/packages/scheduler/src/SchedulerMinHeap.js
@@ -0,0 +1,93 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+type Heap = Array<Node>;
+type Node = {|
+  id: number,
+  sortIndex: number,
+|};
+
+export function push(heap: Heap, node: Node): void {
+  const index = heap.length;
+  heap.push(node);
+  siftUp(heap, node, index);
+}
+
+export function peek(heap: Heap): Node | null {
+  const first = heap[0];
+  return first === undefined ? null : first;
+}
+
+export function pop(heap: Heap): Node | null {
+  const first = heap[0];
+  if (first !== undefined) {
+    const last = heap.pop();
+    if (last !== first) {
+      heap[0] = last;
+      siftDown(heap, last, 0);
+    }
+    return first;
+  } else {
+    return null;
+  }
+}
+
+function siftUp(heap, node, i) {
+  let index = i;
+  while (true) {
+    const parentIndex = (index - 1) >>> 1;
+    const parent = heap[parentIndex];
+    if (parent !== undefined && compare(parent, node) > 0) {
+      // The parent is larger. Swap positions.
+      heap[parentIndex] = node;
+      heap[index] = parent;
+      index = parentIndex;
+    } else {
+      // The parent is smaller. Exit.
+      return;
+    }
+  }
+}
+
+function siftDown(heap, node, i) {
+  let index = i;
+  const length = heap.length;
+  while (index < length) {
+    const leftIndex = (index + 1) * 2 - 1;
+    const left = heap[leftIndex];
+    const rightIndex = leftIndex + 1;
+    const right = heap[rightIndex];
+
+    // If the left or right node is smaller, swap with the smaller of those.
+    if (left !== undefined && compare(left, node) < 0) {
+      if (right !== undefined && compare(right, left) < 0) {
+        heap[index] = right;
+        heap[rightIndex] = node;
+        index = rightIndex;
+      } else {
+        heap[index] = left;
+        heap[leftIndex] = node;
+        index = leftIndex;
+      }
+    } else if (right !== undefined && compare(right, node) < 0) {
+      heap[index] = right;
+      heap[rightIndex] = node;
+      index = rightIndex;
+    } else {
+      // Neither child is smaller. Exit.
+      return;
+    }
+  }
+}
+
+function compare(a, b) {
+  // Compare sort index first, then task id.
+  const diff = a.sortIndex - b.sortIndex;
+  return diff !== 0 ? diff : a.id - b.id;
+}
diff --git a/packages/scheduler/src/SchedulerPriorities.js b/packages/scheduler/src/SchedulerPriorities.js
new file mode 100644
index 0000000000000..1d46ae0e48cd7
--- /dev/null
+++ b/packages/scheduler/src/SchedulerPriorities.js
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;
+
+// TODO: Use symbols?
+export const NoPriority = 0;
+export const ImmediatePriority = 1;
+export const UserBlockingPriority = 2;
+export const NormalPriority = 3;
+export const LowPriority = 4;
+export const IdlePriority = 5;
diff --git a/packages/scheduler/src/SchedulerProfiling.js b/packages/scheduler/src/SchedulerProfiling.js
new file mode 100644
index 0000000000000..810a5be223279
--- /dev/null
+++ b/packages/scheduler/src/SchedulerProfiling.js
@@ -0,0 +1,229 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {PriorityLevel} from './SchedulerPriorities';
+import {enableProfiling} from './SchedulerFeatureFlags';
+
+import {NoPriority} from './SchedulerPriorities';
+
+let runIdCounter: number = 0;
+let mainThreadIdCounter: number = 0;
+
+const profilingStateSize = 4;
+export const sharedProfilingBuffer = enableProfiling
+  ? // $FlowFixMe Flow doesn't know about SharedArrayBuffer
+    typeof SharedArrayBuffer === 'function'
+    ? new SharedArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
+    : // $FlowFixMe Flow doesn't know about ArrayBuffer
+    typeof ArrayBuffer === 'function'
+    ? new ArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
+    : null // Don't crash the init path on IE9
+  : null;
+
+const profilingState =
+  enableProfiling && sharedProfilingBuffer !== null
+    ? new Int32Array(sharedProfilingBuffer)
+    : []; // We can't read this but it helps save bytes for null checks
+
+const PRIORITY = 0;
+const CURRENT_TASK_ID = 1;
+const CURRENT_RUN_ID = 2;
+const QUEUE_SIZE = 3;
+
+if (enableProfiling) {
+  profilingState[PRIORITY] = NoPriority;
+  // This is maintained with a counter, because the size of the priority queue
+  // array might include canceled tasks.
+  profilingState[QUEUE_SIZE] = 0;
+  profilingState[CURRENT_TASK_ID] = 0;
+}
+
+// Bytes per element is 4
+const INITIAL_EVENT_LOG_SIZE = 131072;
+const MAX_EVENT_LOG_SIZE = 524288; // Equivalent to 2 megabytes
+
+let eventLogSize = 0;
+let eventLogBuffer = null;
+let eventLog = null;
+let eventLogIndex = 0;
+
+const TaskStartEvent = 1;
+const TaskCompleteEvent = 2;
+const TaskErrorEvent = 3;
+const TaskCancelEvent = 4;
+const TaskRunEvent = 5;
+const TaskYieldEvent = 6;
+const SchedulerSuspendEvent = 7;
+const SchedulerResumeEvent = 8;
+
+function logEvent(entries) {
+  if (eventLog !== null) {
+    const offset = eventLogIndex;
+    eventLogIndex += entries.length;
+    if (eventLogIndex + 1 > eventLogSize) {
+      eventLogSize *= 2;
+      if (eventLogSize > MAX_EVENT_LOG_SIZE) {
+        // Using console['error'] to evade Babel and ESLint
+        console['error'](
+          "Scheduler Profiling: Event log exceeded maximum size. Don't " +
+            'forget to call `stopLoggingProfilingEvents()`.',
+        );
+        stopLoggingProfilingEvents();
+        return;
+      }
+      const newEventLog = new Int32Array(eventLogSize * 4);
+      newEventLog.set(eventLog);
+      eventLogBuffer = newEventLog.buffer;
+      eventLog = newEventLog;
+    }
+    eventLog.set(entries, offset);
+  }
+}
+
+export function startLoggingProfilingEvents(): void {
+  eventLogSize = INITIAL_EVENT_LOG_SIZE;
+  eventLogBuffer = new ArrayBuffer(eventLogSize * 4);
+  eventLog = new Int32Array(eventLogBuffer);
+  eventLogIndex = 0;
+}
+
+export function stopLoggingProfilingEvents(): ArrayBuffer | null {
+  const buffer = eventLogBuffer;
+  eventLogSize = 0;
+  eventLogBuffer = null;
+  eventLog = null;
+  eventLogIndex = 0;
+  return buffer;
+}
+
+export function markTaskStart(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    profilingState[QUEUE_SIZE]++;
+
+    if (eventLog !== null) {
+      // performance.now returns a float, representing milliseconds. When the
+      // event is logged, it's coerced to an int. Convert to microseconds to
+      // maintain extra degrees of precision.
+      logEvent([TaskStartEvent, ms * 1000, task.id, task.priorityLevel]);
+    }
+  }
+}
+
+export function markTaskCompleted(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    profilingState[PRIORITY] = NoPriority;
+    profilingState[CURRENT_TASK_ID] = 0;
+    profilingState[QUEUE_SIZE]--;
+
+    if (eventLog !== null) {
+      logEvent([TaskCompleteEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskCanceled(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    profilingState[QUEUE_SIZE]--;
+
+    if (eventLog !== null) {
+      logEvent([TaskCancelEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskErrored(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    profilingState[PRIORITY] = NoPriority;
+    profilingState[CURRENT_TASK_ID] = 0;
+    profilingState[QUEUE_SIZE]--;
+
+    if (eventLog !== null) {
+      logEvent([TaskErrorEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskRun(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    runIdCounter++;
+
+    profilingState[PRIORITY] = task.priorityLevel;
+    profilingState[CURRENT_TASK_ID] = task.id;
+    profilingState[CURRENT_RUN_ID] = runIdCounter;
+
+    if (eventLog !== null) {
+      logEvent([TaskRunEvent, ms * 1000, task.id, runIdCounter]);
+    }
+  }
+}
+
+export function markTaskYield(task: {id: number, ...}, ms: number) {
+  if (enableProfiling) {
+    profilingState[PRIORITY] = NoPriority;
+    profilingState[CURRENT_TASK_ID] = 0;
+    profilingState[CURRENT_RUN_ID] = 0;
+
+    if (eventLog !== null) {
+      logEvent([TaskYieldEvent, ms * 1000, task.id, runIdCounter]);
+    }
+  }
+}
+
+export function markSchedulerSuspended(ms: number) {
+  if (enableProfiling) {
+    mainThreadIdCounter++;
+
+    if (eventLog !== null) {
+      logEvent([SchedulerSuspendEvent, ms * 1000, mainThreadIdCounter]);
+    }
+  }
+}
+
+export function markSchedulerUnsuspended(ms: number) {
+  if (enableProfiling) {
+    if (eventLog !== null) {
+      logEvent([SchedulerResumeEvent, ms * 1000, mainThreadIdCounter]);
+    }
+  }
+}
diff --git a/packages/scheduler/src/Tracing.js b/packages/scheduler/src/Tracing.js
index 1223d44a2cf28..cc71b03f9065f 100644
--- a/packages/scheduler/src/Tracing.js
+++ b/packages/scheduler/src/Tracing.js
@@ -45,15 +45,12 @@ export type Subscriber = {
   // A batch of work has completed for a set of interactions.
   // Work is done by a "thread" which is identified by a unique ID.
   onWorkStopped: (interactions: Set<Interaction>, threadID: number) => void,
+  ...
 };
 
-export type InteractionsRef = {
-  current: Set<Interaction>,
-};
+export type InteractionsRef = {|current: Set<Interaction>|};
 
-export type SubscriberRef = {
-  current: Subscriber | null,
-};
+export type SubscriberRef = {|current: Subscriber | null|};
 
 const DEFAULT_THREAD_ID = 0;
 
diff --git a/packages/scheduler/src/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
index 20cd67fa27adb..881d6d9ffe154 100644
--- a/packages/scheduler/src/__tests__/Scheduler-test.js
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -14,6 +14,8 @@ let runWithPriority;
 let ImmediatePriority;
 let UserBlockingPriority;
 let NormalPriority;
+let LowPriority;
+let IdlePriority;
 let scheduleCallback;
 let cancelCallback;
 let wrapCallback;
@@ -31,6 +33,8 @@ describe('Scheduler', () => {
     ImmediatePriority = Scheduler.unstable_ImmediatePriority;
     UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
     NormalPriority = Scheduler.unstable_NormalPriority;
+    LowPriority = Scheduler.unstable_LowPriority;
+    IdlePriority = Scheduler.unstable_IdlePriority;
     scheduleCallback = Scheduler.unstable_scheduleCallback;
     cancelCallback = Scheduler.unstable_cancelCallback;
     wrapCallback = Scheduler.unstable_wrapCallback;
@@ -39,10 +43,10 @@ describe('Scheduler', () => {
   });
 
   it('flushes work incrementally', () => {
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('A'));
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('B'));
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('C'));
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('D'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('B'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('C'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('D'));
 
     expect(Scheduler).toFlushAndYieldThrough(['A', 'B']);
     expect(Scheduler).toFlushAndYieldThrough(['C']);
@@ -50,11 +54,11 @@ describe('Scheduler', () => {
   });
 
   it('cancels work', () => {
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('A'));
     const callbackHandleB = scheduleCallback(NormalPriority, () =>
-      Scheduler.yieldValue('B'),
+      Scheduler.unstable_yieldValue('B'),
     );
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('C'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('C'));
 
     cancelCallback(callbackHandleB);
 
@@ -66,14 +70,18 @@ describe('Scheduler', () => {
   });
 
   it('executes the highest priority callbacks first', () => {
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('A'));
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('B'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('B'));
 
     // Yield before B is flushed
     expect(Scheduler).toFlushAndYieldThrough(['A']);
 
-    scheduleCallback(UserBlockingPriority, () => Scheduler.yieldValue('C'));
-    scheduleCallback(UserBlockingPriority, () => Scheduler.yieldValue('D'));
+    scheduleCallback(UserBlockingPriority, () =>
+      Scheduler.unstable_yieldValue('C'),
+    );
+    scheduleCallback(UserBlockingPriority, () =>
+      Scheduler.unstable_yieldValue('D'),
+    );
 
     // C and D should come first, because they are higher priority
     expect(Scheduler).toFlushAndYield(['C', 'D', 'B']);
@@ -81,41 +89,41 @@ describe('Scheduler', () => {
 
   it('expires work', () => {
     scheduleCallback(NormalPriority, didTimeout => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue(`A (did timeout: ${didTimeout})`);
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue(`A (did timeout: ${didTimeout})`);
     });
     scheduleCallback(UserBlockingPriority, didTimeout => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue(`B (did timeout: ${didTimeout})`);
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue(`B (did timeout: ${didTimeout})`);
     });
     scheduleCallback(UserBlockingPriority, didTimeout => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue(`C (did timeout: ${didTimeout})`);
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue(`C (did timeout: ${didTimeout})`);
     });
 
     // Advance time, but not by enough to expire any work
-    Scheduler.advanceTime(249);
+    Scheduler.unstable_advanceTime(249);
     expect(Scheduler).toHaveYielded([]);
 
     // Schedule a few more callbacks
     scheduleCallback(NormalPriority, didTimeout => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue(`D (did timeout: ${didTimeout})`);
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue(`D (did timeout: ${didTimeout})`);
     });
     scheduleCallback(NormalPriority, didTimeout => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue(`E (did timeout: ${didTimeout})`);
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue(`E (did timeout: ${didTimeout})`);
     });
 
     // Advance by just a bit more to expire the user blocking callbacks
-    Scheduler.advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
     expect(Scheduler).toHaveYielded([
       'B (did timeout: true)',
       'C (did timeout: true)',
     ]);
 
     // Expire A
-    Scheduler.advanceTime(4600);
+    Scheduler.unstable_advanceTime(4600);
     expect(Scheduler).toHaveYielded(['A (did timeout: true)']);
 
     // Flush the rest without expiring
@@ -126,32 +134,36 @@ describe('Scheduler', () => {
   });
 
   it('has a default expiration of ~5 seconds', () => {
-    scheduleCallback(NormalPriority, () => Scheduler.yieldValue('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('A'));
 
-    Scheduler.advanceTime(4999);
+    Scheduler.unstable_advanceTime(4999);
     expect(Scheduler).toHaveYielded([]);
 
-    Scheduler.advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
     expect(Scheduler).toHaveYielded(['A']);
   });
 
   it('continues working on same task after yielding', () => {
     scheduleCallback(NormalPriority, () => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue('A');
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue('A');
     });
     scheduleCallback(NormalPriority, () => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue('B');
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue('B');
     });
 
     let didYield = false;
-    const tasks = [['C1', 100], ['C2', 100], ['C3', 100]];
+    const tasks = [
+      ['C1', 100],
+      ['C2', 100],
+      ['C3', 100],
+    ];
     const C = () => {
       while (tasks.length > 0) {
         const [label, ms] = tasks.shift();
-        Scheduler.advanceTime(ms);
-        Scheduler.yieldValue(label);
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.unstable_yieldValue(label);
         if (shouldYield()) {
           didYield = true;
           return C;
@@ -162,12 +174,12 @@ describe('Scheduler', () => {
     scheduleCallback(NormalPriority, C);
 
     scheduleCallback(NormalPriority, () => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue('D');
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue('D');
     });
     scheduleCallback(NormalPriority, () => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue('E');
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue('E');
     });
 
     // Flush, then yield while in the middle of C.
@@ -180,12 +192,17 @@ describe('Scheduler', () => {
   });
 
   it('continuation callbacks inherit the expiration of the previous callback', () => {
-    const tasks = [['A', 125], ['B', 124], ['C', 100], ['D', 100]];
+    const tasks = [
+      ['A', 125],
+      ['B', 124],
+      ['C', 100],
+      ['D', 100],
+    ];
     const work = () => {
       while (tasks.length > 0) {
         const [label, ms] = tasks.shift();
-        Scheduler.advanceTime(ms);
-        Scheduler.yieldValue(label);
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.unstable_yieldValue(label);
         if (shouldYield()) {
           return work;
         }
@@ -199,17 +216,22 @@ describe('Scheduler', () => {
     expect(Scheduler).toFlushAndYieldThrough(['A', 'B']);
 
     // Advance time by just a bit more. This should expire all the remaining work.
-    Scheduler.advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
     expect(Scheduler).toHaveYielded(['C', 'D']);
   });
 
   it('continuations are interrupted by higher priority work', () => {
-    const tasks = [['A', 100], ['B', 100], ['C', 100], ['D', 100]];
+    const tasks = [
+      ['A', 100],
+      ['B', 100],
+      ['C', 100],
+      ['D', 100],
+    ];
     const work = () => {
       while (tasks.length > 0) {
         const [label, ms] = tasks.shift();
-        Scheduler.advanceTime(ms);
-        Scheduler.yieldValue(label);
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.unstable_yieldValue(label);
         if (tasks.length > 0 && shouldYield()) {
           return work;
         }
@@ -219,34 +241,39 @@ describe('Scheduler', () => {
     expect(Scheduler).toFlushAndYieldThrough(['A']);
 
     scheduleCallback(UserBlockingPriority, () => {
-      Scheduler.advanceTime(100);
-      Scheduler.yieldValue('High pri');
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.unstable_yieldValue('High pri');
     });
 
     expect(Scheduler).toFlushAndYield(['High pri', 'B', 'C', 'D']);
   });
 
   it(
-    'continutations are interrupted by higher priority work scheduled ' +
+    'continuations are interrupted by higher priority work scheduled ' +
       'inside an executing callback',
     () => {
-      const tasks = [['A', 100], ['B', 100], ['C', 100], ['D', 100]];
+      const tasks = [
+        ['A', 100],
+        ['B', 100],
+        ['C', 100],
+        ['D', 100],
+      ];
       const work = () => {
         while (tasks.length > 0) {
           const task = tasks.shift();
           const [label, ms] = task;
-          Scheduler.advanceTime(ms);
-          Scheduler.yieldValue(label);
-          if (task[0] === 'B') {
+          Scheduler.unstable_advanceTime(ms);
+          Scheduler.unstable_yieldValue(label);
+          if (label === 'B') {
             // Schedule high pri work from inside another callback
-            Scheduler.yieldValue('Schedule high pri');
+            Scheduler.unstable_yieldValue('Schedule high pri');
             scheduleCallback(UserBlockingPriority, () => {
-              Scheduler.advanceTime(100);
-              Scheduler.yieldValue('High pri');
+              Scheduler.unstable_advanceTime(100);
+              Scheduler.unstable_yieldValue('High pri');
             });
           }
           if (tasks.length > 0 && shouldYield()) {
-            Scheduler.yieldValue('Yield!');
+            Scheduler.unstable_yieldValue('Yield!');
             return work;
           }
         }
@@ -267,11 +294,32 @@ describe('Scheduler', () => {
     },
   );
 
+  it('cancelling a continuation', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue('Yield');
+      return () => {
+        Scheduler.unstable_yieldValue('Continuation');
+      };
+    });
+
+    expect(Scheduler).toFlushAndYieldThrough(['Yield']);
+    cancelCallback(task);
+    expect(Scheduler).toFlushWithoutYielding();
+  });
+
   it('top-level immediate callbacks fire in a subsequent task', () => {
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('A'));
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('B'));
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('C'));
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('D'));
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('A'),
+    );
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('B'),
+    );
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('C'),
+    );
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('D'),
+    );
     // Immediate callback hasn't fired, yet.
     expect(Scheduler).toHaveYielded([]);
     // They all flush immediately within the subsequent task.
@@ -279,13 +327,19 @@ describe('Scheduler', () => {
   });
 
   it('nested immediate callbacks are added to the queue of immediate callbacks', () => {
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('A'));
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('A'),
+    );
     scheduleCallback(ImmediatePriority, () => {
-      Scheduler.yieldValue('B');
+      Scheduler.unstable_yieldValue('B');
       // This callback should go to the end of the queue
-      scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('C'));
+      scheduleCallback(ImmediatePriority, () =>
+        Scheduler.unstable_yieldValue('C'),
+      );
     });
-    scheduleCallback(ImmediatePriority, () => Scheduler.yieldValue('D'));
+    scheduleCallback(ImmediatePriority, () =>
+      Scheduler.unstable_yieldValue('D'),
+    );
     expect(Scheduler).toHaveYielded([]);
     // C should flush at the end
     expect(Scheduler).toFlushExpired(['A', 'B', 'D', 'C']);
@@ -299,7 +353,7 @@ describe('Scheduler', () => {
   it('wrapped callbacks inherit the current priority', () => {
     const wrappedCallback = runWithPriority(NormalPriority, () =>
       wrapCallback(() => {
-        Scheduler.yieldValue(getCurrentPriorityLevel());
+        Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
       }),
     );
 
@@ -307,7 +361,7 @@ describe('Scheduler', () => {
       UserBlockingPriority,
       () =>
         wrapCallback(() => {
-          Scheduler.yieldValue(getCurrentPriorityLevel());
+          Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
         }),
     );
 
@@ -324,11 +378,11 @@ describe('Scheduler', () => {
 
     runWithPriority(NormalPriority, () => {
       wrappedCallback = wrapCallback(() => {
-        Scheduler.yieldValue(getCurrentPriorityLevel());
+        Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
       });
       wrappedUserBlockingCallback = runWithPriority(UserBlockingPriority, () =>
         wrapCallback(() => {
-          Scheduler.yieldValue(getCurrentPriorityLevel());
+          Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
         }),
       );
     });
@@ -342,14 +396,14 @@ describe('Scheduler', () => {
 
   it("immediate callbacks fire even if there's an error", () => {
     scheduleCallback(ImmediatePriority, () => {
-      Scheduler.yieldValue('A');
+      Scheduler.unstable_yieldValue('A');
       throw new Error('Oops A');
     });
     scheduleCallback(ImmediatePriority, () => {
-      Scheduler.yieldValue('B');
+      Scheduler.unstable_yieldValue('B');
     });
     scheduleCallback(ImmediatePriority, () => {
-      Scheduler.yieldValue('C');
+      Scheduler.unstable_yieldValue('C');
       throw new Error('Oops C');
     });
 
@@ -369,22 +423,22 @@ describe('Scheduler', () => {
     scheduleCallback(ImmediatePriority, () => {
       throw new Error('Second error');
     });
-    expect(() => Scheduler.flushAll()).toThrow('First error');
+    expect(() => Scheduler.unstable_flushAll()).toThrow('First error');
     // The next error is thrown in the subsequent event
-    expect(() => Scheduler.flushAll()).toThrow('Second error');
+    expect(() => Scheduler.unstable_flushAll()).toThrow('Second error');
   });
 
   it('exposes the current priority level', () => {
-    Scheduler.yieldValue(getCurrentPriorityLevel());
+    Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
     runWithPriority(ImmediatePriority, () => {
-      Scheduler.yieldValue(getCurrentPriorityLevel());
+      Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
       runWithPriority(NormalPriority, () => {
-        Scheduler.yieldValue(getCurrentPriorityLevel());
+        Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
         runWithPriority(UserBlockingPriority, () => {
-          Scheduler.yieldValue(getCurrentPriorityLevel());
+          Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
         });
       });
-      Scheduler.yieldValue(getCurrentPriorityLevel());
+      Scheduler.unstable_yieldValue(getCurrentPriorityLevel());
     });
 
     expect(Scheduler).toHaveYielded([
@@ -395,4 +449,295 @@ describe('Scheduler', () => {
       ImmediatePriority,
     ]);
   });
+
+  if (__DEV__) {
+    // Function names are minified in prod, though you could still infer the
+    // priority if you have sourcemaps.
+    // TODO: Feature temporarily disabled while we investigate a bug in one of
+    // our minifiers.
+    it.skip('adds extra function to the JS stack whose name includes the priority level', () => {
+      function inferPriorityFromCallstack() {
+        try {
+          throw Error();
+        } catch (e) {
+          const stack = e.stack;
+          const lines = stack.split('\n');
+          for (let i = lines.length - 1; i >= 0; i--) {
+            const line = lines[i];
+            const found = line.match(
+              /scheduler_flushTaskAtPriority_([A-Za-z]+)/,
+            );
+            if (found !== null) {
+              const priorityStr = found[1];
+              switch (priorityStr) {
+                case 'Immediate':
+                  return ImmediatePriority;
+                case 'UserBlocking':
+                  return UserBlockingPriority;
+                case 'Normal':
+                  return NormalPriority;
+                case 'Low':
+                  return LowPriority;
+                case 'Idle':
+                  return IdlePriority;
+              }
+            }
+          }
+          return null;
+        }
+      }
+
+      scheduleCallback(ImmediatePriority, () =>
+        Scheduler.unstable_yieldValue(
+          'Immediate: ' + inferPriorityFromCallstack(),
+        ),
+      );
+      scheduleCallback(UserBlockingPriority, () =>
+        Scheduler.unstable_yieldValue(
+          'UserBlocking: ' + inferPriorityFromCallstack(),
+        ),
+      );
+      scheduleCallback(NormalPriority, () =>
+        Scheduler.unstable_yieldValue(
+          'Normal: ' + inferPriorityFromCallstack(),
+        ),
+      );
+      scheduleCallback(LowPriority, () =>
+        Scheduler.unstable_yieldValue('Low: ' + inferPriorityFromCallstack()),
+      );
+      scheduleCallback(IdlePriority, () =>
+        Scheduler.unstable_yieldValue('Idle: ' + inferPriorityFromCallstack()),
+      );
+
+      expect(Scheduler).toFlushAndYield([
+        'Immediate: ' + ImmediatePriority,
+        'UserBlocking: ' + UserBlockingPriority,
+        'Normal: ' + NormalPriority,
+        'Low: ' + LowPriority,
+        'Idle: ' + IdlePriority,
+      ]);
+    });
+  }
+
+  describe('delayed tasks', () => {
+    it('schedules a delayed task', () => {
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('A'),
+        {
+          delay: 1000,
+        },
+      );
+
+      // Should flush nothing, because delay hasn't elapsed
+      expect(Scheduler).toFlushAndYield([]);
+
+      // Advance time until right before the threshold
+      Scheduler.unstable_advanceTime(999);
+      // Still nothing
+      expect(Scheduler).toFlushAndYield([]);
+
+      // Advance time past the threshold
+      Scheduler.unstable_advanceTime(1);
+
+      // Now it should flush like normal
+      expect(Scheduler).toFlushAndYield(['A']);
+    });
+
+    it('schedules multiple delayed tasks', () => {
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('C'),
+        {
+          delay: 300,
+        },
+      );
+
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('B'),
+        {
+          delay: 200,
+        },
+      );
+
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('D'),
+        {
+          delay: 400,
+        },
+      );
+
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('A'),
+        {
+          delay: 100,
+        },
+      );
+
+      // Should flush nothing, because delay hasn't elapsed
+      expect(Scheduler).toFlushAndYield([]);
+
+      // Advance some time.
+      Scheduler.unstable_advanceTime(200);
+      // Both A and B are no longer delayed. They can now flush incrementally.
+      expect(Scheduler).toFlushAndYieldThrough(['A']);
+      expect(Scheduler).toFlushAndYield(['B']);
+
+      // Advance the rest
+      Scheduler.unstable_advanceTime(200);
+      expect(Scheduler).toFlushAndYield(['C', 'D']);
+    });
+
+    it('interleaves normal tasks and delayed tasks', () => {
+      // Schedule some high priority callbacks with a delay. When their delay
+      // elapses, they will be the most important callback in the queue.
+      scheduleCallback(
+        UserBlockingPriority,
+        () => Scheduler.unstable_yieldValue('Timer 2'),
+        {delay: 300},
+      );
+      scheduleCallback(
+        UserBlockingPriority,
+        () => Scheduler.unstable_yieldValue('Timer 1'),
+        {delay: 100},
+      );
+
+      // Schedule some tasks at default priority.
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('A');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('B');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('C');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('D');
+        Scheduler.unstable_advanceTime(100);
+      });
+
+      // Flush all the work. The timers should be interleaved with the
+      // other tasks.
+      expect(Scheduler).toFlushAndYield([
+        'A',
+        'Timer 1',
+        'B',
+        'C',
+        'Timer 2',
+        'D',
+      ]);
+    });
+
+    it('interleaves delayed tasks with time-sliced tasks', () => {
+      // Schedule some high priority callbacks with a delay. When their delay
+      // elapses, they will be the most important callback in the queue.
+      scheduleCallback(
+        UserBlockingPriority,
+        () => Scheduler.unstable_yieldValue('Timer 2'),
+        {delay: 300},
+      );
+      scheduleCallback(
+        UserBlockingPriority,
+        () => Scheduler.unstable_yieldValue('Timer 1'),
+        {delay: 100},
+      );
+
+      // Schedule a time-sliced task at default priority.
+      const tasks = [
+        ['A', 100],
+        ['B', 100],
+        ['C', 100],
+        ['D', 100],
+      ];
+      const work = () => {
+        while (tasks.length > 0) {
+          const task = tasks.shift();
+          const [label, ms] = task;
+          Scheduler.unstable_advanceTime(ms);
+          Scheduler.unstable_yieldValue(label);
+          if (tasks.length > 0 && shouldYield()) {
+            return work;
+          }
+        }
+      };
+      scheduleCallback(NormalPriority, work);
+
+      // Flush all the work. The timers should be interleaved with the
+      // other tasks.
+      expect(Scheduler).toFlushAndYield([
+        'A',
+        'Timer 1',
+        'B',
+        'C',
+        'Timer 2',
+        'D',
+      ]);
+    });
+
+    it('schedules callback with both delay and timeout', () => {
+      scheduleCallback(
+        NormalPriority,
+        () => {
+          Scheduler.unstable_yieldValue('A');
+          Scheduler.unstable_advanceTime(100);
+        },
+        {delay: 100, timeout: 900},
+      );
+
+      Scheduler.unstable_advanceTime(99);
+      // Does not flush because delay has not elapsed
+      expect(Scheduler).toFlushAndYield([]);
+
+      // Delay has elapsed but task has not expired
+      Scheduler.unstable_advanceTime(1);
+      expect(Scheduler).toFlushExpired([]);
+
+      // Still not expired
+      Scheduler.unstable_advanceTime(899);
+      expect(Scheduler).toFlushExpired([]);
+
+      // Now it expires
+      Scheduler.unstable_advanceTime(1);
+      expect(Scheduler).toHaveYielded(['A']);
+    });
+
+    it('cancels a delayed task', () => {
+      // Schedule several tasks with the same delay
+      const options = {delay: 100};
+
+      scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('A'),
+        options,
+      );
+      const taskB = scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('B'),
+        options,
+      );
+      const taskC = scheduleCallback(
+        NormalPriority,
+        () => Scheduler.unstable_yieldValue('C'),
+        options,
+      );
+
+      // Cancel B before its delay has elapsed
+      expect(Scheduler).toFlushAndYield([]);
+      cancelCallback(taskB);
+
+      // Cancel C after its delay has elapsed
+      Scheduler.unstable_advanceTime(500);
+      cancelCallback(taskC);
+
+      // Only A should flush
+      expect(Scheduler).toFlushAndYield(['A']);
+    });
+  });
 });
diff --git a/packages/scheduler/src/__tests__/SchedulerBrowser-test.js b/packages/scheduler/src/__tests__/SchedulerBrowser-test.js
new file mode 100644
index 0000000000000..a96b4be3f4e55
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerBrowser-test.js
@@ -0,0 +1,272 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+'use strict';
+
+let Scheduler;
+let runtime;
+let performance;
+let cancelCallback;
+let scheduleCallback;
+let NormalPriority;
+
+// The Scheduler implementation uses browser APIs like `MessageChannel` and
+// `setTimeout` to schedule work on the main thread. Most of our tests treat
+// these as implementation details; however, the sequence and timing of these
+// APIs are not precisely specified, and can vary across browsers.
+//
+// To prevent regressions, we need the ability to simulate specific edge cases
+// that we may encounter in various browsers.
+//
+// This test suite mocks all browser methods used in our implementation. It
+// assumes as little as possible about the order and timing of events.
+describe('SchedulerBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    // Un-mock scheduler
+    jest.mock('scheduler', () => require.requireActual('scheduler'));
+    jest.mock('scheduler/src/SchedulerHostConfig', () =>
+      require.requireActual(
+        'scheduler/src/forks/SchedulerHostConfig.default.js',
+      ),
+    );
+
+    runtime = installMockBrowserRuntime();
+    performance = window.performance;
+    Scheduler = require('scheduler');
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+  });
+
+  afterEach(() => {
+    if (!runtime.isLogEmpty()) {
+      throw Error('Test exited without clearing log.');
+    }
+  });
+
+  function installMockBrowserRuntime() {
+    let hasPendingMessageEvent = false;
+
+    let timerIDCounter = 0;
+    // let timerIDs = new Map();
+
+    let eventLog = [];
+
+    const window = {};
+    global.window = window;
+
+    let currentTime = 0;
+
+    window.performance = {
+      now() {
+        return currentTime;
+      },
+    };
+
+    // TODO: Scheduler no longer requires these methods to be polyfilled. But
+    // maybe we want to continue warning if they don't exist, to preserve the
+    // option to rely on it in the future?
+    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
+
+    window.setTimeout = (cb, delay) => {
+      const id = timerIDCounter++;
+      log(`Set Timer`);
+      // TODO
+      return id;
+    };
+    window.clearTimeout = id => {
+      // TODO
+    };
+
+    const port1 = {};
+    const port2 = {
+      postMessage() {
+        if (hasPendingMessageEvent) {
+          throw Error('Message event already scheduled');
+        }
+        log('Post Message');
+        hasPendingMessageEvent = true;
+      },
+    };
+    global.MessageChannel = function MessageChannel() {
+      this.port1 = port1;
+      this.port2 = port2;
+    };
+
+    function ensureLogIsEmpty() {
+      if (eventLog.length !== 0) {
+        throw Error('Log is not empty. Call assertLog before continuing.');
+      }
+    }
+    function advanceTime(ms) {
+      currentTime += ms;
+    }
+    function fireMessageEvent() {
+      ensureLogIsEmpty();
+      if (!hasPendingMessageEvent) {
+        throw Error('No message event was scheduled');
+      }
+      hasPendingMessageEvent = false;
+      const onMessage = port1.onmessage;
+      log('Message Event');
+      onMessage();
+    }
+    function log(val) {
+      eventLog.push(val);
+    }
+    function isLogEmpty() {
+      return eventLog.length === 0;
+    }
+    function assertLog(expected) {
+      const actual = eventLog;
+      eventLog = [];
+      expect(actual).toEqual(expected);
+    }
+    return {
+      advanceTime,
+      fireMessageEvent,
+      log,
+      isLogEmpty,
+      assertLog,
+    };
+  }
+
+  it('task that finishes before deadline', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'Task']);
+  });
+
+  it('task with continuation', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+      while (!Scheduler.unstable_shouldYield()) {
+        runtime.advanceTime(1);
+      }
+      runtime.log(`Yield at ${performance.now()}ms`);
+      return () => {
+        runtime.log('Continuation');
+      };
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Task',
+      'Yield at 5ms',
+      'Post Message',
+    ]);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'Continuation']);
+  });
+
+  it('multiple tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'A', 'B']);
+  });
+
+  it('multiple tasks with a yield in between', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+      runtime.advanceTime(4999);
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'A',
+      // Ran out of time. Post a continuation event.
+      'Post Message',
+    ]);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'B']);
+  });
+
+  it('cancels tasks', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Post Message']);
+    cancelCallback(task);
+    runtime.assertLog([]);
+  });
+
+  it('throws when a task errors then continues in a new event', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Oops!');
+      throw Error('Oops!');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Yay');
+    });
+    runtime.assertLog(['Post Message']);
+
+    expect(() => runtime.fireMessageEvent()).toThrow('Oops!');
+    runtime.assertLog(['Message Event', 'Oops!', 'Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'Yay']);
+  });
+
+  it('schedule new task after queue has emptied', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'A']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'B']);
+  });
+
+  it('schedule new task after a cancellation', () => {
+    let handle = scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Message']);
+    cancelCallback(handle);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Message']);
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'B']);
+  });
+});
diff --git a/packages/scheduler/src/__tests__/SchedulerDOM-test.js b/packages/scheduler/src/__tests__/SchedulerDOM-test.js
deleted file mode 100644
index 3a66657d17ee2..0000000000000
--- a/packages/scheduler/src/__tests__/SchedulerDOM-test.js
+++ /dev/null
@@ -1,811 +0,0 @@
-/**
- * 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.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let Scheduler;
-type FrameTimeoutConfigType = {
-  // should only specify one or the other
-  timeLeftInFrame: ?number,
-  timePastFrameDeadline: ?number,
-};
-
-describe('SchedulerDOM', () => {
-  let rAFCallbacks = [];
-  let postMessageCallback;
-  let postMessageEvents = [];
-  let postMessageErrors = [];
-  let catchPostMessageErrors = false;
-
-  function runPostMessageCallbacks(config: FrameTimeoutConfigType) {
-    let timeLeftInFrame = 0;
-    if (typeof config.timeLeftInFrame === 'number') {
-      timeLeftInFrame = config.timeLeftInFrame;
-    } else if (typeof config.timePastFrameDeadline === 'number') {
-      timeLeftInFrame = -1 * config.timePastFrameDeadline;
-    }
-    currentTime = startOfLatestFrame + frameSize - timeLeftInFrame;
-    if (postMessageCallback) {
-      while (postMessageEvents.length) {
-        if (catchPostMessageErrors) {
-          // catch errors for testing error handling
-          try {
-            postMessageCallback(postMessageEvents.shift());
-          } catch (e) {
-            postMessageErrors.push(e);
-          }
-        } else {
-          // we are not expecting errors
-          postMessageCallback(postMessageEvents.shift());
-        }
-      }
-    }
-  }
-  function runRAFCallbacks() {
-    startOfLatestFrame += frameSize;
-    currentTime = startOfLatestFrame;
-    const cbs = rAFCallbacks;
-    rAFCallbacks = [];
-    cbs.forEach(cb => cb());
-  }
-  function advanceOneFrame(config: FrameTimeoutConfigType = {}) {
-    runRAFCallbacks();
-    runPostMessageCallbacks(config);
-  }
-
-  let frameSize = 33;
-  let startOfLatestFrame = 0;
-  let currentTime = 0;
-
-  beforeEach(() => {
-    delete global.performance;
-    global.requestAnimationFrame = function(cb) {
-      return rAFCallbacks.push(() => {
-        cb(startOfLatestFrame);
-      });
-    };
-    postMessageEvents = [];
-    postMessageErrors = [];
-    const port1 = {};
-    const port2 = {
-      postMessage(messageKey) {
-        const postMessageEvent = {source: port2, data: messageKey};
-        postMessageEvents.push(postMessageEvent);
-      },
-    };
-    global.MessageChannel = function MessageChannel() {
-      this.port1 = port1;
-      this.port2 = port2;
-    };
-    postMessageCallback = () => port1.onmessage();
-    global.Date.now = function() {
-      return currentTime;
-    };
-    jest.resetModules();
-
-    // Un-mock scheduler
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-    jest.mock('scheduler/src/SchedulerHostConfig', () =>
-      require.requireActual(
-        'scheduler/src/forks/SchedulerHostConfig.default.js',
-      ),
-    );
-
-    Scheduler = require('scheduler');
-  });
-
-  describe('scheduleCallback', () => {
-    it('calls the callback within the frame when not blocked', () => {
-      const {
-        unstable_scheduleCallback: scheduleCallback,
-        unstable_NormalPriority: NormalPriority,
-      } = Scheduler;
-      const cb = jest.fn();
-      scheduleCallback(NormalPriority, cb);
-      advanceOneFrame({timeLeftInFrame: 15});
-      expect(cb).toHaveBeenCalledTimes(1);
-    });
-
-    it('inserts its rAF callback as early into the queue as possible', () => {
-      const {
-        unstable_scheduleCallback: scheduleCallback,
-        unstable_NormalPriority: NormalPriority,
-      } = Scheduler;
-      const log = [];
-      const useRAFCallback = () => {
-        log.push('userRAFCallback');
-      };
-      scheduleCallback(NormalPriority, () => {
-        // Call rAF while idle work is being flushed.
-        requestAnimationFrame(useRAFCallback);
-      });
-      advanceOneFrame({timeLeftInFrame: 1});
-      // There should be two callbacks: the one scheduled by Scheduler at the
-      // beginning of the frame, and the one scheduled later during that frame.
-      expect(rAFCallbacks.length).toBe(2);
-      // The user callback should be the second callback.
-      rAFCallbacks[1]();
-      expect(log).toEqual(['userRAFCallback']);
-    });
-
-    describe('with multiple callbacks', () => {
-      it('accepts multiple callbacks and calls within frame when not blocked', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => callbackLog.push('A'));
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-        scheduleCallback(NormalPriority, callbackA);
-        // initially waits to call the callback
-        expect(callbackLog).toEqual([]);
-        // waits while second callback is passed
-        scheduleCallback(NormalPriority, callbackB);
-        expect(callbackLog).toEqual([]);
-        // after a delay, calls as many callbacks as it has time for
-        advanceOneFrame({timeLeftInFrame: 15});
-        expect(callbackLog).toEqual(['A', 'B']);
-      });
-
-      it("accepts callbacks between animationFrame and postMessage and doesn't stall", () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => callbackLog.push('A'));
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-        const callbackC = jest.fn(() => callbackLog.push('C'));
-        scheduleCallback(NormalPriority, callbackA);
-        // initially waits to call the callback
-        expect(callbackLog).toEqual([]);
-        runRAFCallbacks();
-        // this should schedule work *after* the requestAnimationFrame but before the message handler
-        scheduleCallback(NormalPriority, callbackB);
-        expect(callbackLog).toEqual([]);
-        // now it should drain the message queue and do all scheduled work
-        runPostMessageCallbacks({timeLeftInFrame: 15});
-        expect(callbackLog).toEqual(['A', 'B']);
-
-        // advances timers, now with an empty queue of work (to ensure they don't deadlock)
-        advanceOneFrame({timeLeftInFrame: 15});
-
-        // see if more work can be done now.
-        scheduleCallback(NormalPriority, callbackC);
-        expect(callbackLog).toEqual(['A', 'B']);
-        advanceOneFrame({timeLeftInFrame: 15});
-        expect(callbackLog).toEqual(['A', 'B', 'C']);
-      });
-
-      it(
-        'schedules callbacks in correct order and' +
-          'keeps calling them if there is time',
-        () => {
-          const {
-            unstable_scheduleCallback: scheduleCallback,
-            unstable_NormalPriority: NormalPriority,
-          } = Scheduler;
-          const callbackLog = [];
-          const callbackA = jest.fn(() => {
-            callbackLog.push('A');
-            scheduleCallback(NormalPriority, callbackC);
-          });
-          const callbackB = jest.fn(() => {
-            callbackLog.push('B');
-          });
-          const callbackC = jest.fn(() => {
-            callbackLog.push('C');
-          });
-
-          scheduleCallback(NormalPriority, callbackA);
-          // initially waits to call the callback
-          expect(callbackLog).toEqual([]);
-          // continues waiting while B is scheduled
-          scheduleCallback(NormalPriority, callbackB);
-          expect(callbackLog).toEqual([]);
-          // after a delay, calls the scheduled callbacks,
-          // and also calls new callbacks scheduled by current callbacks
-          advanceOneFrame({timeLeftInFrame: 15});
-          expect(callbackLog).toEqual(['A', 'B', 'C']);
-        },
-      );
-
-      it('schedules callbacks in correct order when callbacks have many nested scheduleCallback calls', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          scheduleCallback(NormalPriority, callbackC);
-          scheduleCallback(NormalPriority, callbackD);
-        });
-        const callbackB = jest.fn(() => {
-          callbackLog.push('B');
-          scheduleCallback(NormalPriority, callbackE);
-          scheduleCallback(NormalPriority, callbackF);
-        });
-        const callbackC = jest.fn(() => {
-          callbackLog.push('C');
-        });
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-        });
-        const callbackE = jest.fn(() => {
-          callbackLog.push('E');
-        });
-        const callbackF = jest.fn(() => {
-          callbackLog.push('F');
-        });
-
-        scheduleCallback(NormalPriority, callbackA);
-        scheduleCallback(NormalPriority, callbackB);
-        // initially waits to call the callback
-        expect(callbackLog).toEqual([]);
-        // while flushing callbacks, calls as many as it has time for
-        advanceOneFrame({timeLeftInFrame: 15});
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E', 'F']);
-      });
-
-      it('schedules callbacks in correct order when they use scheduleCallback to schedule themselves', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        let callbackAIterations = 0;
-        const callbackA = jest.fn(() => {
-          if (callbackAIterations < 1) {
-            scheduleCallback(NormalPriority, callbackA);
-          }
-          callbackLog.push('A' + callbackAIterations);
-          callbackAIterations++;
-        });
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-
-        scheduleCallback(NormalPriority, callbackA);
-        // initially waits to call the callback
-        expect(callbackLog).toEqual([]);
-        scheduleCallback(NormalPriority, callbackB);
-        expect(callbackLog).toEqual([]);
-        // after a delay, calls the latest callback passed
-        advanceOneFrame({timeLeftInFrame: 15});
-        expect(callbackLog).toEqual(['A0', 'B', 'A1']);
-      });
-    });
-
-    describe('when callbacks time out: ', () => {
-      // USEFUL INFO:
-      // startOfLatestFrame is a global that goes up every time rAF runs
-      // currentTime defaults to startOfLatestFrame inside rAF callback
-      // and currentTime defaults to 15 before next frame inside idleTick
-
-      describe('when there is no more time left in the frame', () => {
-        it('calls any callback which has timed out, waits for others', () => {
-          const {
-            unstable_scheduleCallback: scheduleCallback,
-            unstable_NormalPriority: NormalPriority,
-          } = Scheduler;
-          startOfLatestFrame = 1000000000000;
-          currentTime = startOfLatestFrame - 10;
-          const callbackLog = [];
-          // simple case of one callback which times out, another that won't.
-          const callbackA = jest.fn(() => callbackLog.push('A'));
-          const callbackB = jest.fn(() => callbackLog.push('B'));
-          const callbackC = jest.fn(() => callbackLog.push('C'));
-
-          scheduleCallback(NormalPriority, callbackA); // won't time out
-          scheduleCallback(NormalPriority, callbackB, {timeout: 100}); // times out later
-          scheduleCallback(NormalPriority, callbackC, {timeout: 2}); // will time out fast
-
-          // push time ahead a bit so that we have no idle time
-          advanceOneFrame({timePastFrameDeadline: 16});
-
-          // callbackC should have timed out
-          expect(callbackLog).toEqual(['C']);
-
-          // push time ahead a bit so that we have no idle time
-          advanceOneFrame({timePastFrameDeadline: 16});
-
-          // callbackB should have timed out
-          expect(callbackLog).toEqual(['C', 'B']);
-
-          // let's give ourselves some idle time now
-          advanceOneFrame({timeLeftInFrame: 16});
-
-          // we should have run callbackA in the idle time
-          expect(callbackLog).toEqual(['C', 'B', 'A']);
-        });
-      });
-
-      describe('when there is some time left in the frame', () => {
-        it('calls timed out callbacks and then any more pending callbacks, defers others if time runs out', () => {
-          const {
-            unstable_scheduleCallback: scheduleCallback,
-            unstable_NormalPriority: NormalPriority,
-          } = Scheduler;
-          startOfLatestFrame = 1000000000000;
-          currentTime = startOfLatestFrame - 10;
-          const callbackLog = [];
-          // simple case of one callback which times out, others that won't.
-          const callbackA = jest.fn(() => {
-            callbackLog.push('A');
-            // time passes, causing us to run out of idle time
-            currentTime += 25;
-          });
-          const callbackB = jest.fn(() => callbackLog.push('B'));
-          const callbackC = jest.fn(() => callbackLog.push('C'));
-          const callbackD = jest.fn(() => callbackLog.push('D'));
-
-          scheduleCallback(NormalPriority, callbackA, {timeout: 100}); // won't time out
-          scheduleCallback(NormalPriority, callbackB, {timeout: 100}); // times out later
-          scheduleCallback(NormalPriority, callbackC, {timeout: 2}); // will time out fast
-          scheduleCallback(NormalPriority, callbackD, {timeout: 200}); // won't time out
-
-          advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-          // callbackC should have timed out
-          // we should have had time to call A also, then we run out of time
-          expect(callbackLog).toEqual(['C', 'A']);
-
-          // push time ahead a bit so that we have no idle time
-          advanceOneFrame({timePastFrameDeadline: 16});
-
-          // callbackB should have timed out
-          // but we should not run callbackD because we have no idle time
-          expect(callbackLog).toEqual(['C', 'A', 'B']);
-
-          advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-          // we should have run callbackD in the idle time
-          expect(callbackLog).toEqual(['C', 'A', 'B', 'D']);
-
-          advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-          // we should not have run anything again, nothing is scheduled
-          expect(callbackLog).toEqual(['C', 'A', 'B', 'D']);
-        });
-      });
-    });
-  });
-
-  describe('cancelCallback', () => {
-    it('cancels the scheduled callback', () => {
-      const {
-        unstable_scheduleCallback: scheduleCallback,
-        unstable_cancelCallback: cancelCallback,
-        unstable_NormalPriority: NormalPriority,
-      } = Scheduler;
-      const cb = jest.fn();
-      const callbackId = scheduleCallback(NormalPriority, cb);
-      expect(cb).toHaveBeenCalledTimes(0);
-      cancelCallback(callbackId);
-      advanceOneFrame({timeLeftInFrame: 15});
-      expect(cb).toHaveBeenCalledTimes(0);
-    });
-
-    describe('with multiple callbacks', () => {
-      it('when called more than once', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_cancelCallback: cancelCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => callbackLog.push('A'));
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-        const callbackC = jest.fn(() => callbackLog.push('C'));
-        scheduleCallback(NormalPriority, callbackA);
-        const callbackId = scheduleCallback(NormalPriority, callbackB);
-        scheduleCallback(NormalPriority, callbackC);
-        cancelCallback(callbackId);
-        cancelCallback(callbackId);
-        cancelCallback(callbackId);
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        advanceOneFrame({timeLeftInFrame: 15});
-
-        // Should still call A and C
-        expect(callbackLog).toEqual(['A', 'C']);
-        expect(callbackB).toHaveBeenCalledTimes(0);
-      });
-
-      it('when one callback cancels the next one', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_cancelCallback: cancelCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        let callbackBId;
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          cancelCallback(callbackBId);
-        });
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-        scheduleCallback(NormalPriority, callbackA);
-        callbackBId = scheduleCallback(NormalPriority, callbackB);
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        advanceOneFrame({timeLeftInFrame: 15});
-        // B should not get called because A cancelled B
-        expect(callbackLog).toEqual(['A']);
-        expect(callbackB).toHaveBeenCalledTimes(0);
-      });
-    });
-  });
-
-  describe('when callbacks throw errors', () => {
-    describe('when some callbacks throw', () => {
-      /**
-       * +                                                             +
-       * |  rAF                        postMessage                     |
-       * |                                                             |
-       * |      +---------------------+                                |
-       * |      | paint/layout        |  cbA() cbB() cbC() cbD() cbE() |
-       * |      +---------------------+         ^           ^          |
-       * |                                      |           |          |
-       * +                                      |           |          +
-       *                                        +           +
-       *                                        throw errors
-       *
-       *
-       */
-      it('still calls all callbacks within same frame', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => callbackLog.push('A'));
-        const callbackB = jest.fn(() => {
-          callbackLog.push('B');
-          throw new Error('B error');
-        });
-        const callbackC = jest.fn(() => callbackLog.push('C'));
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-          throw new Error('D error');
-        });
-        const callbackE = jest.fn(() => callbackLog.push('E'));
-        scheduleCallback(NormalPriority, callbackA);
-        scheduleCallback(NormalPriority, callbackB);
-        scheduleCallback(NormalPriority, callbackC);
-        scheduleCallback(NormalPriority, callbackD);
-        scheduleCallback(NormalPriority, callbackE);
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        catchPostMessageErrors = true;
-        advanceOneFrame({timeLeftInFrame: 15});
-        // calls all callbacks
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E']);
-        // errors should still get thrown
-        const postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual(['B error', 'D error']);
-        catchPostMessageErrors = false;
-      });
-
-      /**
-       *                                               timed out
-       *                                               +     +  +--+
-       *  +  rAF                        postMessage    |     |     |    +
-       *  |                                            |     |     |    |
-       *  |      +---------------------+               v     v     v    |
-       *  |      | paint/layout        |  cbA() cbB() cbC() cbD() cbE() |
-       *  |      +---------------------+   ^                 ^          |
-       *  |                                |                 |          |
-       *  +                                |                 |          +
-       *                                   +                 +
-       *                                   throw errors
-       *
-       *
-       */
-      it('and with some timed out callbacks, still calls all callbacks within same frame', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          throw new Error('A error');
-        });
-        const callbackB = jest.fn(() => callbackLog.push('B'));
-        const callbackC = jest.fn(() => callbackLog.push('C'));
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-          throw new Error('D error');
-        });
-        const callbackE = jest.fn(() => callbackLog.push('E'));
-        scheduleCallback(NormalPriority, callbackA);
-        scheduleCallback(NormalPriority, callbackB);
-        scheduleCallback(NormalPriority, callbackC, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackD, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackE, {timeout: 2}); // times out fast
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        catchPostMessageErrors = true;
-        advanceOneFrame({timeLeftInFrame: 15});
-        // calls all callbacks; calls timed out ones first
-        expect(callbackLog).toEqual(['C', 'D', 'E', 'A', 'B']);
-        // errors should still get thrown
-        const postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual(['D error', 'A error']);
-        catchPostMessageErrors = false;
-      });
-    });
-    describe('when all scheduled callbacks throw', () => {
-      /**
-       * +                                                             +
-       * |  rAF                        postMessage                     |
-       * |                                                             |
-       * |      +---------------------+                                |
-       * |      | paint/layout        |  cbA() cbB() cbC() cbD() cbE() |
-       * |      +---------------------+   ^     ^     ^     ^     ^    |
-       * |                                |     |     |     |     |    |
-       * +                                |     |     |     |     |    +
-       *                                  |     +     +     +     +
-       *                                  + all callbacks throw errors
-       *
-       *
-       */
-      it('still calls all callbacks within same frame', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          throw new Error('A error');
-        });
-        const callbackB = jest.fn(() => {
-          callbackLog.push('B');
-          throw new Error('B error');
-        });
-        const callbackC = jest.fn(() => {
-          callbackLog.push('C');
-          throw new Error('C error');
-        });
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-          throw new Error('D error');
-        });
-        const callbackE = jest.fn(() => {
-          callbackLog.push('E');
-          throw new Error('E error');
-        });
-        scheduleCallback(NormalPriority, callbackA);
-        scheduleCallback(NormalPriority, callbackB);
-        scheduleCallback(NormalPriority, callbackC);
-        scheduleCallback(NormalPriority, callbackD);
-        scheduleCallback(NormalPriority, callbackE);
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        catchPostMessageErrors = true;
-        advanceOneFrame({timeLeftInFrame: 15});
-        // calls all callbacks
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E']);
-        // errors should still get thrown
-        const postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual([
-          'A error',
-          'B error',
-          'C error',
-          'D error',
-          'E error',
-        ]);
-        catchPostMessageErrors = false;
-      });
-
-      /**
-       *                                  postMessage
-       *  +                                                             +
-       *  |  rAF                               all callbacks time out   |
-       *  |                                                             |
-       *  |      +---------------------+                                |
-       *  |      | paint/layout        |  cbA() cbB() cbC() cbD() cbE() |
-       *  |      +---------------------+   ^     ^     ^     ^     ^    |
-       *  |                                |     |     |     |     |    |
-       *  +                                |     |     |     |     |    +
-       *                                   |     +     +     +     +
-       *                                   + all callbacks throw errors
-       *
-       *
-       */
-      it('and with all timed out callbacks, still calls all callbacks within same frame', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          throw new Error('A error');
-        });
-        const callbackB = jest.fn(() => {
-          callbackLog.push('B');
-          throw new Error('B error');
-        });
-        const callbackC = jest.fn(() => {
-          callbackLog.push('C');
-          throw new Error('C error');
-        });
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-          throw new Error('D error');
-        });
-        const callbackE = jest.fn(() => {
-          callbackLog.push('E');
-          throw new Error('E error');
-        });
-        scheduleCallback(NormalPriority, callbackA, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackB, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackC, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackD, {timeout: 2}); // times out fast
-        scheduleCallback(NormalPriority, callbackE, {timeout: 2}); // times out fast
-        // Initially doesn't call anything
-        expect(callbackLog).toEqual([]);
-        catchPostMessageErrors = true;
-        advanceOneFrame({timeLeftInFrame: 15});
-        // calls all callbacks
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E']);
-        // errors should still get thrown
-        const postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual([
-          'A error',
-          'B error',
-          'C error',
-          'D error',
-          'E error',
-        ]);
-        catchPostMessageErrors = false;
-      });
-    });
-    describe('when callbacks throw over multiple frames', () => {
-      /**
-       *
-       * **Detail View of Frame 1**
-       *
-       * +                                            +
-       * |  rAF                        postMessage    |
-       * |                                            |
-       * |      +---------------------+               |
-       * |      | paint/layout        |  cbA() cbB()  |  ... Frame 2
-       * |      +---------------------+   ^     ^     |
-       * |                                |     |     |
-       * +                                +     |     +
-       *                              errors    |
-       *                                        +
-       *                                 takes long time
-       *                                 and pushes rest of
-       *                                 callbacks into
-       *                                 next frame ->
-       *
-       *
-       *
-       * **Overview of frames 1-4**
-       *
-       *
-       *  +            +            +            +            +
-       *  |            |            |            |            |
-       *  |  +--+      |  +--+      |  +--+      |  +--+      |
-       *  |  +--+  A,B+-> +--+  C,D+-> +--+  E,F+-> +--+  G   |
-       *  +        ^   +        ^   +        ^   +            +
-       *           |            |            |
-       *          error        error        error
-       *
-       *
-       */
-      it('still calls all callbacks within same frame', () => {
-        const {
-          unstable_scheduleCallback: scheduleCallback,
-          unstable_NormalPriority: NormalPriority,
-        } = Scheduler;
-        startOfLatestFrame = 1000000000000;
-        currentTime = startOfLatestFrame - 10;
-        catchPostMessageErrors = true;
-        const callbackLog = [];
-        const callbackA = jest.fn(() => {
-          callbackLog.push('A');
-          throw new Error('A error');
-        });
-        const callbackB = jest.fn(() => {
-          callbackLog.push('B');
-          // time passes, causing us to run out of idle time
-          currentTime += 25;
-        });
-        const callbackC = jest.fn(() => {
-          callbackLog.push('C');
-          throw new Error('C error');
-        });
-        const callbackD = jest.fn(() => {
-          callbackLog.push('D');
-          // time passes, causing us to run out of idle time
-          currentTime += 25;
-        });
-        const callbackE = jest.fn(() => {
-          callbackLog.push('E');
-          throw new Error('E error');
-        });
-        const callbackF = jest.fn(() => {
-          callbackLog.push('F');
-          // time passes, causing us to run out of idle time
-          currentTime += 25;
-        });
-        const callbackG = jest.fn(() => callbackLog.push('G'));
-
-        scheduleCallback(NormalPriority, callbackA);
-        scheduleCallback(NormalPriority, callbackB);
-        scheduleCallback(NormalPriority, callbackC);
-        scheduleCallback(NormalPriority, callbackD);
-        scheduleCallback(NormalPriority, callbackE);
-        scheduleCallback(NormalPriority, callbackF);
-        scheduleCallback(NormalPriority, callbackG);
-
-        // does nothing initially
-        expect(callbackLog).toEqual([]);
-
-        // frame 1;
-        // callback A runs and throws, callback B takes up rest of frame
-        advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-        // calls A and B
-        expect(callbackLog).toEqual(['A', 'B']);
-        // error was thrown from A
-        let postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual(['A error']);
-
-        // frame 2;
-        // callback C runs and throws, callback D takes up rest of frame
-        advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-        // calls C and D
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D']);
-        // error was thrown from A
-        postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual(['A error', 'C error']);
-
-        // frame 3;
-        // callback E runs and throws, callback F takes up rest of frame
-        advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-        // calls E and F
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E', 'F']);
-        // error was thrown from A
-        postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual([
-          'A error',
-          'C error',
-          'E error',
-        ]);
-
-        // frame 4;
-        // callback G runs and it's the last one
-        advanceOneFrame({timeLeftInFrame: 15}); // runs rAF and postMessage callbacks
-
-        // calls G
-        expect(callbackLog).toEqual(['A', 'B', 'C', 'D', 'E', 'F', 'G']);
-        // error was thrown from A
-        postMessageErrorMessages = postMessageErrors.map(e => e.message);
-        expect(postMessageErrorMessages).toEqual([
-          'A error',
-          'C error',
-          'E error',
-        ]);
-
-        catchPostMessageErrors = true;
-      });
-    });
-  });
-
-  // TODO: test 'now'
-});
diff --git a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
new file mode 100644
index 0000000000000..cf9f9c5ea8cd8
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
@@ -0,0 +1,571 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+'use strict';
+
+let Scheduler;
+let sharedProfilingArray;
+// let runWithPriority;
+let ImmediatePriority;
+let UserBlockingPriority;
+let NormalPriority;
+let LowPriority;
+let IdlePriority;
+let scheduleCallback;
+let cancelCallback;
+// let wrapCallback;
+// let getCurrentPriorityLevel;
+// let shouldYield;
+
+function priorityLevelToString(priorityLevel) {
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      return 'Immediate';
+    case UserBlockingPriority:
+      return 'User-blocking';
+    case NormalPriority:
+      return 'Normal';
+    case LowPriority:
+      return 'Low';
+    case IdlePriority:
+      return 'Idle';
+    default:
+      return null;
+  }
+}
+
+describe('Scheduler', () => {
+  if (!__PROFILE__) {
+    // The tests in this suite only apply when profiling is on
+    it('profiling APIs are not available', () => {
+      Scheduler = require('scheduler');
+      expect(Scheduler.unstable_Profiling).toBe(null);
+    });
+    return;
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+    Scheduler = require('scheduler');
+
+    sharedProfilingArray = new Int32Array(
+      Scheduler.unstable_Profiling.sharedProfilingBuffer,
+    );
+
+    // runWithPriority = Scheduler.unstable_runWithPriority;
+    ImmediatePriority = Scheduler.unstable_ImmediatePriority;
+    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+    LowPriority = Scheduler.unstable_LowPriority;
+    IdlePriority = Scheduler.unstable_IdlePriority;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    // wrapCallback = Scheduler.unstable_wrapCallback;
+    // getCurrentPriorityLevel = Scheduler.unstable_getCurrentPriorityLevel;
+    // shouldYield = Scheduler.unstable_shouldYield;
+  });
+
+  const PRIORITY = 0;
+  const CURRENT_TASK_ID = 1;
+  const CURRENT_RUN_ID = 2;
+  const QUEUE_SIZE = 3;
+
+  afterEach(() => {
+    if (sharedProfilingArray[QUEUE_SIZE] !== 0) {
+      throw Error(
+        'Test exited, but the shared profiling buffer indicates that a task ' +
+          'is still running',
+      );
+    }
+  });
+
+  const TaskStartEvent = 1;
+  const TaskCompleteEvent = 2;
+  const TaskErrorEvent = 3;
+  const TaskCancelEvent = 4;
+  const TaskRunEvent = 5;
+  const TaskYieldEvent = 6;
+  const SchedulerSuspendEvent = 7;
+  const SchedulerResumeEvent = 8;
+
+  function stopProfilingAndPrintFlamegraph() {
+    const eventBuffer = Scheduler.unstable_Profiling.stopLoggingProfilingEvents();
+    if (eventBuffer === null) {
+      return '(empty profile)';
+    }
+
+    const eventLog = new Int32Array(eventBuffer);
+
+    const tasks = new Map();
+    const mainThreadRuns = [];
+
+    let isSuspended = true;
+    let i = 0;
+    processLog: while (i < eventLog.length) {
+      const instruction = eventLog[i];
+      const time = eventLog[i + 1];
+      switch (instruction) {
+        case 0: {
+          break processLog;
+        }
+        case TaskStartEvent: {
+          const taskId = eventLog[i + 2];
+          const priorityLevel = eventLog[i + 3];
+          const task = {
+            id: taskId,
+            priorityLevel,
+            label: null,
+            start: time,
+            end: -1,
+            exitStatus: null,
+            runs: [],
+          };
+          tasks.set(taskId, task);
+          i += 4;
+          break;
+        }
+        case TaskCompleteEvent: {
+          if (isSuspended) {
+            throw Error('Task cannot Complete outside the work loop.');
+          }
+          const taskId = eventLog[i + 2];
+          const task = tasks.get(taskId);
+          if (task === undefined) {
+            throw Error('Task does not exist.');
+          }
+          task.end = time;
+          task.exitStatus = 'completed';
+          i += 3;
+          break;
+        }
+        case TaskErrorEvent: {
+          if (isSuspended) {
+            throw Error('Task cannot Error outside the work loop.');
+          }
+          const taskId = eventLog[i + 2];
+          const task = tasks.get(taskId);
+          if (task === undefined) {
+            throw Error('Task does not exist.');
+          }
+          task.end = time;
+          task.exitStatus = 'errored';
+          i += 3;
+          break;
+        }
+        case TaskCancelEvent: {
+          const taskId = eventLog[i + 2];
+          const task = tasks.get(taskId);
+          if (task === undefined) {
+            throw Error('Task does not exist.');
+          }
+          task.end = time;
+          task.exitStatus = 'canceled';
+          i += 3;
+          break;
+        }
+        case TaskRunEvent:
+        case TaskYieldEvent: {
+          if (isSuspended) {
+            throw Error('Task cannot Run or Yield outside the work loop.');
+          }
+          const taskId = eventLog[i + 2];
+          const task = tasks.get(taskId);
+          if (task === undefined) {
+            throw Error('Task does not exist.');
+          }
+          task.runs.push(time);
+          i += 4;
+          break;
+        }
+        case SchedulerSuspendEvent: {
+          if (isSuspended) {
+            throw Error('Scheduler cannot Suspend outside the work loop.');
+          }
+          isSuspended = true;
+          mainThreadRuns.push(time);
+          i += 3;
+          break;
+        }
+        case SchedulerResumeEvent: {
+          if (!isSuspended) {
+            throw Error('Scheduler cannot Resume inside the work loop.');
+          }
+          isSuspended = false;
+          mainThreadRuns.push(time);
+          i += 3;
+          break;
+        }
+        default: {
+          throw Error('Unknown instruction type: ' + instruction);
+        }
+      }
+    }
+
+    // Now we can render the tasks as a flamegraph.
+    const labelColumnWidth = 30;
+    // Scheduler event times are in microseconds
+    const microsecondsPerChar = 50000;
+
+    let result = '';
+
+    const mainThreadLabelColumn = '!!! Main thread              ';
+    let mainThreadTimelineColumn = '';
+    let isMainThreadBusy = true;
+    for (const time of mainThreadRuns) {
+      const index = time / microsecondsPerChar;
+      mainThreadTimelineColumn += (isMainThreadBusy ? '█' : '░').repeat(
+        index - mainThreadTimelineColumn.length,
+      );
+      isMainThreadBusy = !isMainThreadBusy;
+    }
+    result += `${mainThreadLabelColumn}│${mainThreadTimelineColumn}\n`;
+
+    const tasksByPriority = Array.from(tasks.values()).sort(
+      (t1, t2) => t1.priorityLevel - t2.priorityLevel,
+    );
+
+    for (const task of tasksByPriority) {
+      let label = task.label;
+      if (label === undefined) {
+        label = 'Task';
+      }
+      let labelColumn = `Task ${task.id} [${priorityLevelToString(
+        task.priorityLevel,
+      )}]`;
+      labelColumn += ' '.repeat(labelColumnWidth - labelColumn.length - 1);
+
+      // Add empty space up until the start mark
+      let timelineColumn = ' '.repeat(task.start / microsecondsPerChar);
+
+      let isRunning = false;
+      for (const time of task.runs) {
+        const index = time / microsecondsPerChar;
+        timelineColumn += (isRunning ? '█' : '░').repeat(
+          index - timelineColumn.length,
+        );
+        isRunning = !isRunning;
+      }
+
+      const endIndex = task.end / microsecondsPerChar;
+      timelineColumn += (isRunning ? '█' : '░').repeat(
+        endIndex - timelineColumn.length,
+      );
+
+      if (task.exitStatus !== 'completed') {
+        timelineColumn += `🡐 ${task.exitStatus}`;
+      }
+
+      result += `${labelColumn}│${timelineColumn}\n`;
+    }
+
+    return '\n' + result;
+  }
+
+  function getProfilingInfo() {
+    const queueSize = sharedProfilingArray[QUEUE_SIZE];
+    if (queueSize === 0) {
+      return 'Empty Queue';
+    }
+    const priorityLevel = sharedProfilingArray[PRIORITY];
+    if (priorityLevel === 0) {
+      return 'Suspended, Queue Size: ' + queueSize;
+    }
+    return (
+      `Task: ${sharedProfilingArray[CURRENT_TASK_ID]}, ` +
+      `Run: ${sharedProfilingArray[CURRENT_RUN_ID]}, ` +
+      `Priority: ${priorityLevelToString(priorityLevel)}, ` +
+      `Queue Size: ${sharedProfilingArray[QUEUE_SIZE]}`
+    );
+  }
+
+  it('creates a basic flamegraph', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    Scheduler.unstable_advanceTime(100);
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_advanceTime(300);
+        Scheduler.unstable_yieldValue(getProfilingInfo());
+        scheduleCallback(
+          UserBlockingPriority,
+          () => {
+            Scheduler.unstable_yieldValue(getProfilingInfo());
+            Scheduler.unstable_advanceTime(300);
+          },
+          {label: 'Bar'},
+        );
+        Scheduler.unstable_advanceTime(100);
+        Scheduler.unstable_yieldValue('Yield');
+        return () => {
+          Scheduler.unstable_yieldValue(getProfilingInfo());
+          Scheduler.unstable_advanceTime(300);
+        };
+      },
+      {label: 'Foo'},
+    );
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Task: 1, Run: 1, Priority: Normal, Queue Size: 1',
+      'Yield',
+    ]);
+    Scheduler.unstable_advanceTime(100);
+    expect(Scheduler).toFlushAndYield([
+      'Task: 2, Run: 2, Priority: User-blocking, Queue Size: 2',
+      'Task: 1, Run: 3, Priority: Normal, Queue Size: 1',
+    ]);
+
+    expect(getProfilingInfo()).toEqual('Empty Queue');
+
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │██░░░░░░░░██░░░░░░░░░░░░
+Task 2 [User-blocking]       │        ░░░░██████
+Task 1 [Normal]              │  ████████░░░░░░░░██████
+`,
+    );
+  });
+
+  it('marks when a task is canceled', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.unstable_yieldValue('Yield');
+      return () => {
+        Scheduler.unstable_yieldValue('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Task: 1, Run: 1, Priority: Normal, Queue Size: 1',
+      'Yield',
+    ]);
+    Scheduler.unstable_advanceTime(100);
+
+    cancelCallback(task);
+
+    Scheduler.unstable_advanceTime(1000);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░██████████████████████
+Task 1 [Normal]              │██████░░🡐 canceled
+`,
+    );
+  });
+
+  it('marks when a task errors', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(300);
+      throw Error('Oops');
+    });
+
+    expect(Scheduler).toFlushAndThrow('Oops');
+    Scheduler.unstable_advanceTime(100);
+
+    Scheduler.unstable_advanceTime(1000);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░██████████████████████
+Task 1 [Normal]              │██████🡐 errored
+`,
+    );
+  });
+
+  it('marks when multiple tasks are canceled', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task1 = scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.unstable_yieldValue('Yield');
+      return () => {
+        Scheduler.unstable_yieldValue('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+    const task2 = scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.unstable_yieldValue('Yield');
+      return () => {
+        Scheduler.unstable_yieldValue('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'Task: 1, Run: 1, Priority: Normal, Queue Size: 2',
+      'Yield',
+    ]);
+    Scheduler.unstable_advanceTime(100);
+
+    cancelCallback(task1);
+    cancelCallback(task2);
+
+    // Advance more time. This should not affect the size of the main
+    // thread row, since the Scheduler queue is empty.
+    Scheduler.unstable_advanceTime(1000);
+    expect(Scheduler).toFlushWithoutYielding();
+
+    // The main thread row should end when the callback is cancelled.
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░██████████████████████
+Task 1 [Normal]              │██████░░🡐 canceled
+Task 2 [Normal]              │░░░░░░░░🡐 canceled
+`,
+    );
+  });
+
+  it('handles cancelling a task that already finished', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_yieldValue('A');
+      Scheduler.unstable_advanceTime(1000);
+    });
+    expect(Scheduler).toFlushAndYield(['A']);
+    cancelCallback(task);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │████████████████████
+`,
+    );
+  });
+
+  it('handles cancelling a task multiple times', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_yieldValue('A');
+        Scheduler.unstable_advanceTime(1000);
+      },
+      {label: 'A'},
+    );
+    Scheduler.unstable_advanceTime(200);
+    const task = scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_yieldValue('B');
+        Scheduler.unstable_advanceTime(1000);
+      },
+      {label: 'B'},
+    );
+    Scheduler.unstable_advanceTime(400);
+    cancelCallback(task);
+    cancelCallback(task);
+    cancelCallback(task);
+    expect(Scheduler).toFlushAndYield(['A']);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │████████████░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │░░░░░░░░░░░░████████████████████
+Task 2 [Normal]              │    ░░░░░░░░🡐 canceled
+`,
+    );
+  });
+
+  it('handles delayed tasks', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_advanceTime(1000);
+        Scheduler.unstable_yieldValue('A');
+      },
+      {
+        delay: 1000,
+      },
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+
+    Scheduler.unstable_advanceTime(1000);
+
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │████████████████████░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │                    ████████████████████
+`,
+    );
+  });
+
+  it('handles cancelling a delayed task', () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+    const task = scheduleCallback(
+      NormalPriority,
+      () => Scheduler.unstable_yieldValue('A'),
+      {delay: 1000},
+    );
+    cancelCallback(task);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │
+`,
+    );
+  });
+
+  it('automatically stops profiling and warns if event log gets too big', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    spyOnDevAndProd(console, 'error');
+
+    // Increase infinite loop guard limit
+    const originalMaxIterations = global.__MAX_ITERATIONS__;
+    global.__MAX_ITERATIONS__ = 120000;
+
+    let taskId = 1;
+    while (console.error.calls.count() === 0) {
+      taskId++;
+      const task = scheduleCallback(NormalPriority, () => {});
+      cancelCallback(task);
+      expect(Scheduler).toFlushAndYield([]);
+    }
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.calls.argsFor(0)[0]).toBe(
+      "Scheduler Profiling: Event log exceeded maximum size. Don't forget " +
+        'to call `stopLoggingProfilingEvents()`.',
+    );
+
+    // Should automatically clear profile
+    expect(stopProfilingAndPrintFlamegraph()).toEqual('(empty profile)');
+
+    // Test that we can start a new profile later
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(1000);
+    });
+    expect(Scheduler).toFlushAndYield([]);
+
+    // Note: The exact task id is not super important. That just how many tasks
+    // it happens to take before the array is resized.
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(`
+!!! Main thread              │░░░░░░░░░░░░░░░░░░░░
+Task ${taskId} [Normal]          │████████████████████
+`);
+
+    global.__MAX_ITERATIONS__ = originalMaxIterations;
+  });
+});
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 5686fafa091f2..9fd86c7f94b2e 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -6,4 +6,10 @@
  *
  */
 
-export const enableSchedulerDebugging = true;
+export const {
+  enableIsInputPending,
+  enableSchedulerDebugging,
+  enableProfiling: enableProfilingFeatureFlag,
+} = require('SchedulerFeatureFlags');
+
+export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;
diff --git a/packages/scheduler/src/forks/SchedulerHostConfig.default.js b/packages/scheduler/src/forks/SchedulerHostConfig.default.js
index ec084f1dd1589..00e3ff745c593 100644
--- a/packages/scheduler/src/forks/SchedulerHostConfig.default.js
+++ b/packages/scheduler/src/forks/SchedulerHostConfig.default.js
@@ -5,79 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// The DOM Scheduler implementation is similar to requestIdleCallback. It
-// works by scheduling a requestAnimationFrame, storing the time for the start
-// of the frame, then scheduling a postMessage which gets scheduled after paint.
-// Within the postMessage handler do as much work as possible until time + frame
-// rate. By separating the idle call into a separate event tick we ensure that
-// layout, paint and other browser work is counted against the available time.
-// The frame rate is dynamically adjusted.
+import {enableIsInputPending} from '../SchedulerFeatureFlags';
 
 export let requestHostCallback;
 export let cancelHostCallback;
+export let requestHostTimeout;
+export let cancelHostTimeout;
 export let shouldYieldToHost;
+export let requestPaint;
 export let getCurrentTime;
 export let forceFrameRate;
 
-const hasNativePerformanceNow =
-  typeof performance === 'object' && typeof performance.now === 'function';
-
-// We capture a local reference to any global, in case it gets polyfilled after
-// this module is initially evaluated. We want to be using a
-// consistent implementation.
-const localDate = Date;
-
-// This initialization code may run even on server environments if a component
-// just imports ReactDOM (e.g. for findDOMNode). Some environments might not
-// have setTimeout or clearTimeout. However, we always expect them to be defined
-// on the client. https://github.com/facebook/react/pull/13088
-const localSetTimeout =
-  typeof setTimeout === 'function' ? setTimeout : undefined;
-const localClearTimeout =
-  typeof clearTimeout === 'function' ? clearTimeout : undefined;
-
-// We don't expect either of these to necessarily be defined, but we will error
-// later if they are missing on the client.
-const localRequestAnimationFrame =
-  typeof requestAnimationFrame === 'function'
-    ? requestAnimationFrame
-    : undefined;
-const localCancelAnimationFrame =
-  typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
-
-// requestAnimationFrame does not run when the tab is in the background. If
-// we're backgrounded we prefer for that work to happen so that the page
-// continues to load in the background. So we also schedule a 'setTimeout' as
-// a fallback.
-// TODO: Need a better heuristic for backgrounded work.
-const ANIMATION_FRAME_TIMEOUT = 100;
-let rAFID;
-let rAFTimeoutID;
-const requestAnimationFrameWithTimeout = function(callback) {
-  // schedule rAF and also a setTimeout
-  rAFID = localRequestAnimationFrame(function(timestamp) {
-    // cancel the setTimeout
-    localClearTimeout(rAFTimeoutID);
-    callback(timestamp);
-  });
-  rAFTimeoutID = localSetTimeout(function() {
-    // cancel the requestAnimationFrame
-    localCancelAnimationFrame(rAFID);
-    callback(getCurrentTime());
-  }, ANIMATION_FRAME_TIMEOUT);
-};
-
-if (hasNativePerformanceNow) {
-  const Performance = performance;
-  getCurrentTime = function() {
-    return Performance.now();
-  };
-} else {
-  getCurrentTime = function() {
-    return localDate.now();
-  };
-}
-
 if (
   // If Scheduler runs in a non-DOM environment, it falls back to a naive
   // implementation using setTimeout.
@@ -88,43 +26,71 @@ if (
   // If this accidentally gets imported in a non-browser environment, e.g. JavaScriptCore,
   // fallback to a naive implementation.
   let _callback = null;
-  const _flushCallback = function(didTimeout) {
+  let _timeoutID = null;
+  const _flushCallback = function() {
     if (_callback !== null) {
       try {
-        _callback(didTimeout);
-      } finally {
+        const currentTime = getCurrentTime();
+        const hasRemainingTime = true;
+        _callback(hasRemainingTime, currentTime);
         _callback = null;
+      } catch (e) {
+        setTimeout(_flushCallback, 0);
+        throw e;
       }
     }
   };
-  requestHostCallback = function(cb, ms) {
+  const initialTime = Date.now();
+  getCurrentTime = function() {
+    return Date.now() - initialTime;
+  };
+  requestHostCallback = function(cb) {
     if (_callback !== null) {
       // Protect against re-entrancy.
       setTimeout(requestHostCallback, 0, cb);
     } else {
       _callback = cb;
-      setTimeout(_flushCallback, 0, false);
+      setTimeout(_flushCallback, 0);
     }
   };
   cancelHostCallback = function() {
     _callback = null;
   };
+  requestHostTimeout = function(cb, ms) {
+    _timeoutID = setTimeout(cb, ms);
+  };
+  cancelHostTimeout = function() {
+    clearTimeout(_timeoutID);
+  };
   shouldYieldToHost = function() {
     return false;
   };
-  forceFrameRate = function() {};
+  requestPaint = forceFrameRate = function() {};
 } else {
+  // Capture local references to native APIs, in case a polyfill overrides them.
+  const performance = window.performance;
+  const Date = window.Date;
+  const setTimeout = window.setTimeout;
+  const clearTimeout = window.clearTimeout;
+
   if (typeof console !== 'undefined') {
+    // TODO: Scheduler no longer requires these methods to be polyfilled. But
+    // maybe we want to continue warning if they don't exist, to preserve the
+    // option to rely on it in the future?
+    const requestAnimationFrame = window.requestAnimationFrame;
+    const cancelAnimationFrame = window.cancelAnimationFrame;
     // TODO: Remove fb.me link
-    if (typeof localRequestAnimationFrame !== 'function') {
-      console.error(
+    if (typeof requestAnimationFrame !== 'function') {
+      // Using console['error'] to evade Babel and ESLint
+      console['error'](
         "This browser doesn't support requestAnimationFrame. " +
           'Make sure that you load a ' +
           'polyfill in older browsers. https://fb.me/react-polyfills',
       );
     }
-    if (typeof localCancelAnimationFrame !== 'function') {
-      console.error(
+    if (typeof cancelAnimationFrame !== 'function') {
+      // Using console['error'] to evade Babel and ESLint
+      console['error'](
         "This browser doesn't support cancelAnimationFrame. " +
           'Make sure that you load a ' +
           'polyfill in older browsers. https://fb.me/react-polyfills',
@@ -132,155 +98,153 @@ if (
     }
   }
 
-  let scheduledHostCallback = null;
-  let isMessageEventScheduled = false;
-  let timeoutTime = -1;
-
-  let isAnimationFrameScheduled = false;
-
-  let isFlushingHostCallback = false;
-
-  let frameDeadline = 0;
-  // We start out assuming that we run at 30fps but then the heuristic tracking
-  // will adjust this value to a faster fps if we get more frequent animation
-  // frames.
-  let previousFrameTime = 33;
-  let activeFrameTime = 33;
-  let fpsLocked = false;
+  if (
+    typeof performance === 'object' &&
+    typeof performance.now === 'function'
+  ) {
+    getCurrentTime = () => performance.now();
+  } else {
+    const initialTime = Date.now();
+    getCurrentTime = () => Date.now() - initialTime;
+  }
 
-  shouldYieldToHost = function() {
-    return frameDeadline <= getCurrentTime();
-  };
+  let isMessageLoopRunning = false;
+  let scheduledHostCallback = null;
+  let taskTimeoutID = -1;
+
+  // Scheduler periodically yields in case there is other work on the main
+  // thread, like user events. By default, it yields multiple times per frame.
+  // It does not attempt to align with frame boundaries, since most tasks don't
+  // need to be frame aligned; for those that do, use requestAnimationFrame.
+  let yieldInterval = 5;
+  let deadline = 0;
+
+  // TODO: Make this configurable
+  // TODO: Adjust this based on priority?
+  let maxYieldInterval = 300;
+  let needsPaint = false;
+
+  if (
+    enableIsInputPending &&
+    navigator !== undefined &&
+    navigator.scheduling !== undefined &&
+    navigator.scheduling.isInputPending !== undefined
+  ) {
+    const scheduling = navigator.scheduling;
+    shouldYieldToHost = function() {
+      const currentTime = getCurrentTime();
+      if (currentTime >= deadline) {
+        // There's no time left. We may want to yield control of the main
+        // thread, so the browser can perform high priority tasks. The main ones
+        // are painting and user input. If there's a pending paint or a pending
+        // input, then we should yield. But if there's neither, then we can
+        // yield less often while remaining responsive. We'll eventually yield
+        // regardless, since there could be a pending paint that wasn't
+        // accompanied by a call to `requestPaint`, or other main thread tasks
+        // like network events.
+        if (needsPaint || scheduling.isInputPending()) {
+          // There is either a pending paint or a pending input.
+          return true;
+        }
+        // There's no pending input. Only yield if we've reached the max
+        // yield interval.
+        return currentTime >= maxYieldInterval;
+      } else {
+        // There's still time left in the frame.
+        return false;
+      }
+    };
+
+    requestPaint = function() {
+      needsPaint = true;
+    };
+  } else {
+    // `isInputPending` is not available. Since we have no way of knowing if
+    // there's pending input, always yield at the end of the frame.
+    shouldYieldToHost = function() {
+      return getCurrentTime() >= deadline;
+    };
+
+    // Since we yield every frame regardless, `requestPaint` has no effect.
+    requestPaint = function() {};
+  }
 
   forceFrameRate = function(fps) {
     if (fps < 0 || fps > 125) {
-      console.error(
+      // Using console['error'] to evade Babel and ESLint
+      console['error'](
         'forceFrameRate takes a positive int between 0 and 125, ' +
           'forcing framerates higher than 125 fps is not unsupported',
       );
       return;
     }
     if (fps > 0) {
-      activeFrameTime = Math.floor(1000 / fps);
-      fpsLocked = true;
+      yieldInterval = Math.floor(1000 / fps);
     } else {
       // reset the framerate
-      activeFrameTime = 33;
-      fpsLocked = false;
+      yieldInterval = 5;
     }
   };
 
-  // We use the postMessage trick to defer idle work until after the repaint.
-  const channel = new MessageChannel();
-  const port = channel.port2;
-  channel.port1.onmessage = function(event) {
-    isMessageEventScheduled = false;
-
-    const prevScheduledCallback = scheduledHostCallback;
-    const prevTimeoutTime = timeoutTime;
-    scheduledHostCallback = null;
-    timeoutTime = -1;
-
-    const currentTime = getCurrentTime();
-
-    let didTimeout = false;
-    if (frameDeadline - currentTime <= 0) {
-      // There's no time left in this idle period. Check if the callback has
-      // a timeout and whether it's been exceeded.
-      if (prevTimeoutTime !== -1 && prevTimeoutTime <= currentTime) {
-        // Exceeded the timeout. Invoke the callback even though there's no
-        // time left.
-        didTimeout = true;
-      } else {
-        // No timeout.
-        if (!isAnimationFrameScheduled) {
-          // Schedule another animation callback so we retry later.
-          isAnimationFrameScheduled = true;
-          requestAnimationFrameWithTimeout(animationTick);
-        }
-        // Exit without invoking the callback.
-        scheduledHostCallback = prevScheduledCallback;
-        timeoutTime = prevTimeoutTime;
-        return;
-      }
-    }
-
-    if (prevScheduledCallback !== null) {
-      isFlushingHostCallback = true;
-      try {
-        prevScheduledCallback(didTimeout);
-      } finally {
-        isFlushingHostCallback = false;
-      }
-    }
-  };
-
-  const animationTick = function(rafTime) {
+  const performWorkUntilDeadline = () => {
     if (scheduledHostCallback !== null) {
-      // Eagerly schedule the next animation callback at the beginning of the
-      // frame. If the scheduler queue is not empty at the end of the frame, it
-      // will continue flushing inside that callback. If the queue *is* empty,
-      // then it will exit immediately. Posting the callback at the start of the
-      // frame ensures it's fired within the earliest possible frame. If we
-      // waited until the end of the frame to post the callback, we risk the
-      // browser skipping a frame and not firing the callback until the frame
-      // after that.
-      requestAnimationFrameWithTimeout(animationTick);
-    } else {
-      // No pending work. Exit.
-      isAnimationFrameScheduled = false;
-      return;
-    }
-
-    let nextFrameTime = rafTime - frameDeadline + activeFrameTime;
-    if (
-      nextFrameTime < activeFrameTime &&
-      previousFrameTime < activeFrameTime &&
-      !fpsLocked
-    ) {
-      if (nextFrameTime < 8) {
-        // Defensive coding. We don't support higher frame rates than 120hz.
-        // If the calculated frame time gets lower than 8, it is probably a bug.
-        nextFrameTime = 8;
+      const currentTime = getCurrentTime();
+      // Yield after `yieldInterval` ms, regardless of where we are in the vsync
+      // cycle. This means there's always time remaining at the beginning of
+      // the message event.
+      deadline = currentTime + yieldInterval;
+      const hasTimeRemaining = true;
+      try {
+        const hasMoreWork = scheduledHostCallback(
+          hasTimeRemaining,
+          currentTime,
+        );
+        if (!hasMoreWork) {
+          isMessageLoopRunning = false;
+          scheduledHostCallback = null;
+        } else {
+          // If there's more work, schedule the next message event at the end
+          // of the preceding one.
+          port.postMessage(null);
+        }
+      } catch (error) {
+        // If a scheduler task throws, exit the current browser task so the
+        // error can be observed.
+        port.postMessage(null);
+        throw error;
       }
-      // If one frame goes long, then the next one can be short to catch up.
-      // If two frames are short in a row, then that's an indication that we
-      // actually have a higher frame rate than what we're currently optimizing.
-      // We adjust our heuristic dynamically accordingly. For example, if we're
-      // running on 120hz display or 90hz VR display.
-      // Take the max of the two in case one of them was an anomaly due to
-      // missed frame deadlines.
-      activeFrameTime =
-        nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
     } else {
-      previousFrameTime = nextFrameTime;
-    }
-    frameDeadline = rafTime + activeFrameTime;
-    if (!isMessageEventScheduled) {
-      isMessageEventScheduled = true;
-      port.postMessage(undefined);
+      isMessageLoopRunning = false;
     }
+    // Yielding to the browser will give it a chance to paint, so we can
+    // reset this.
+    needsPaint = false;
   };
 
-  requestHostCallback = function(callback, absoluteTimeout) {
+  const channel = new MessageChannel();
+  const port = channel.port2;
+  channel.port1.onmessage = performWorkUntilDeadline;
+
+  requestHostCallback = function(callback) {
     scheduledHostCallback = callback;
-    timeoutTime = absoluteTimeout;
-    if (isFlushingHostCallback || absoluteTimeout < 0) {
-      // Don't wait for the next frame. Continue working ASAP, in a new event.
-      port.postMessage(undefined);
-    } else if (!isAnimationFrameScheduled) {
-      // If rAF didn't already schedule one, we need to schedule a frame.
-      // TODO: If this rAF doesn't materialize because the browser throttles, we
-      // might want to still have setTimeout trigger rIC as a backup to ensure
-      // that we keep performing work.
-      isAnimationFrameScheduled = true;
-      requestAnimationFrameWithTimeout(animationTick);
+    if (!isMessageLoopRunning) {
+      isMessageLoopRunning = true;
+      port.postMessage(null);
     }
   };
 
   cancelHostCallback = function() {
     scheduledHostCallback = null;
-    isMessageEventScheduled = false;
-    timeoutTime = -1;
+  };
+
+  requestHostTimeout = function(callback, ms) {
+    taskTimeoutID = setTimeout(() => {
+      callback(getCurrentTime());
+    }, ms);
+  };
+
+  cancelHostTimeout = function() {
+    clearTimeout(taskTimeoutID);
+    taskTimeoutID = -1;
   };
 }
diff --git a/packages/scheduler/src/forks/SchedulerHostConfig.mock.js b/packages/scheduler/src/forks/SchedulerHostConfig.mock.js
index 4ecd682ff8473..3657092335941 100644
--- a/packages/scheduler/src/forks/SchedulerHostConfig.mock.js
+++ b/packages/scheduler/src/forks/SchedulerHostConfig.mock.js
@@ -8,24 +8,32 @@
  */
 
 let currentTime: number = 0;
-let scheduledCallback: (boolean => void) | null = null;
-let scheduledCallbackExpiration: number = -1;
+let scheduledCallback: ((boolean, number) => void) | null = null;
+let scheduledTimeout: (number => void) | null = null;
+let timeoutTime: number = -1;
 let yieldedValues: Array<mixed> | null = null;
 let expectedNumberOfYields: number = -1;
 let didStop: boolean = false;
 let isFlushing: boolean = false;
+let needsPaint: boolean = false;
+let shouldYieldForPaint: boolean = false;
 
-export function requestHostCallback(
-  callback: boolean => void,
-  expiration: number,
-) {
+export function requestHostCallback(callback: boolean => void) {
   scheduledCallback = callback;
-  scheduledCallbackExpiration = expiration;
 }
 
 export function cancelHostCallback(): void {
   scheduledCallback = null;
-  scheduledCallbackExpiration = -1;
+}
+
+export function requestHostTimeout(callback: number => void, ms: number) {
+  scheduledTimeout = callback;
+  timeoutTime = currentTime + ms;
+}
+
+export function cancelHostTimeout(): void {
+  scheduledTimeout = null;
+  timeoutTime = -1;
 }
 
 export function shouldYieldToHost(): boolean {
@@ -33,8 +41,7 @@ export function shouldYieldToHost(): boolean {
     (expectedNumberOfYields !== -1 &&
       yieldedValues !== null &&
       yieldedValues.length >= expectedNumberOfYields) ||
-    (scheduledCallbackExpiration !== -1 &&
-      scheduledCallbackExpiration <= currentTime)
+    (shouldYieldForPaint && needsPaint)
   ) {
     // We yielded at least as many values as expected. Stop flushing.
     didStop = true;
@@ -57,11 +64,13 @@ export function reset() {
   }
   currentTime = 0;
   scheduledCallback = null;
-  scheduledCallbackExpiration = -1;
+  scheduledTimeout = null;
+  timeoutTime = -1;
   yieldedValues = null;
   expectedNumberOfYields = -1;
   didStop = false;
   isFlushing = false;
+  needsPaint = false;
 }
 
 // Should only be used via an assertion helper that inspects the yielded values.
@@ -69,62 +78,90 @@ export function unstable_flushNumberOfYields(count: number): void {
   if (isFlushing) {
     throw new Error('Already flushing work.');
   }
-  expectedNumberOfYields = count;
-  isFlushing = true;
-  try {
-    while (scheduledCallback !== null && !didStop) {
-      const cb = scheduledCallback;
-      scheduledCallback = null;
-      const didTimeout =
-        scheduledCallbackExpiration !== -1 &&
-        scheduledCallbackExpiration <= currentTime;
-      cb(didTimeout);
+  if (scheduledCallback !== null) {
+    const cb = scheduledCallback;
+    expectedNumberOfYields = count;
+    isFlushing = true;
+    try {
+      let hasMoreWork = true;
+      do {
+        hasMoreWork = cb(true, currentTime);
+      } while (hasMoreWork && !didStop);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+    } finally {
+      expectedNumberOfYields = -1;
+      didStop = false;
+      isFlushing = false;
     }
-  } finally {
-    expectedNumberOfYields = -1;
-    didStop = false;
-    isFlushing = false;
   }
 }
 
-export function unstable_flushExpired() {
+export function unstable_flushUntilNextPaint(): void {
   if (isFlushing) {
     throw new Error('Already flushing work.');
   }
   if (scheduledCallback !== null) {
     const cb = scheduledCallback;
-    scheduledCallback = null;
+    shouldYieldForPaint = true;
+    needsPaint = false;
     isFlushing = true;
     try {
-      cb(true);
+      let hasMoreWork = true;
+      do {
+        hasMoreWork = cb(true, currentTime);
+      } while (hasMoreWork && !didStop);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
     } finally {
+      shouldYieldForPaint = false;
+      didStop = false;
       isFlushing = false;
     }
   }
 }
 
-export function unstable_flushWithoutYielding(): boolean {
+export function unstable_flushExpired() {
   if (isFlushing) {
     throw new Error('Already flushing work.');
   }
-  isFlushing = true;
-  try {
-    if (scheduledCallback === null) {
-      return false;
+  if (scheduledCallback !== null) {
+    isFlushing = true;
+    try {
+      const hasMoreWork = scheduledCallback(false, currentTime);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+    } finally {
+      isFlushing = false;
     }
-    while (scheduledCallback !== null) {
-      const cb = scheduledCallback;
-      scheduledCallback = null;
-      const didTimeout =
-        scheduledCallbackExpiration !== -1 &&
-        scheduledCallbackExpiration <= currentTime;
-      cb(didTimeout);
+  }
+}
+
+export function unstable_flushAllWithoutAsserting(): boolean {
+  // Returns false if no work was flushed.
+  if (isFlushing) {
+    throw new Error('Already flushing work.');
+  }
+  if (scheduledCallback !== null) {
+    const cb = scheduledCallback;
+    isFlushing = true;
+    try {
+      let hasMoreWork = true;
+      do {
+        hasMoreWork = cb(true, currentTime);
+      } while (hasMoreWork);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+      return true;
+    } finally {
+      isFlushing = false;
     }
-    return true;
-  } finally {
-    expectedNumberOfYields = -1;
-    didStop = false;
-    isFlushing = false;
+  } else {
+    return false;
   }
 }
 
@@ -137,14 +174,14 @@ export function unstable_clearYields(): Array<mixed> {
   return values;
 }
 
-export function flushAll(): void {
+export function unstable_flushAll(): void {
   if (yieldedValues !== null) {
     throw new Error(
       'Log is not empty. Assert on the log of yielded values before ' +
         'flushing additional work.',
     );
   }
-  unstable_flushWithoutYielding();
+  unstable_flushAllWithoutAsserting();
   if (yieldedValues !== null) {
     throw new Error(
       'While flushing work, something yielded a value. Use an ' +
@@ -154,7 +191,7 @@ export function flushAll(): void {
   }
 }
 
-export function yieldValue(value: mixed): void {
+export function unstable_yieldValue(value: mixed): void {
   if (yieldedValues === null) {
     yieldedValues = [value];
   } else {
@@ -162,14 +199,18 @@ export function yieldValue(value: mixed): void {
   }
 }
 
-export function advanceTime(ms: number) {
+export function unstable_advanceTime(ms: number) {
   currentTime += ms;
-  // If the host callback timed out, flush the expired work.
-  if (
-    !isFlushing &&
-    scheduledCallbackExpiration !== -1 &&
-    scheduledCallbackExpiration <= currentTime
-  ) {
+  if (!isFlushing) {
+    if (scheduledTimeout !== null && timeoutTime <= currentTime) {
+      scheduledTimeout(currentTime);
+      timeoutTime = -1;
+      scheduledTimeout = null;
+    }
     unstable_flushExpired();
   }
 }
+
+export function requestPaint() {
+  needsPaint = true;
+}
diff --git a/packages/scheduler/unstable_mock.js b/packages/scheduler/unstable_mock.js
index 8ab48d336b02f..11afa5abd11ce 100644
--- a/packages/scheduler/unstable_mock.js
+++ b/packages/scheduler/unstable_mock.js
@@ -10,11 +10,12 @@
 export * from './src/Scheduler';
 
 export {
-  unstable_flushWithoutYielding,
+  unstable_flushAllWithoutAsserting,
   unstable_flushNumberOfYields,
   unstable_flushExpired,
   unstable_clearYields,
-  flushAll,
-  yieldValue,
-  advanceTime,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime,
 } from './src/SchedulerHostConfig.js';
diff --git a/packages/shared/HostConfigWithNoHydration.js b/packages/shared/HostConfigWithNoHydration.js
index adc976a849bac..b432a1d400736 100644
--- a/packages/shared/HostConfigWithNoHydration.js
+++ b/packages/shared/HostConfigWithNoHydration.js
@@ -34,7 +34,10 @@ export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
 export const hydrateInstance = shim;
 export const hydrateTextInstance = shim;
+export const hydrateSuspenseInstance = shim;
 export const getNextHydratableInstanceAfterSuspenseInstance = shim;
+export const commitHydratedContainer = shim;
+export const commitHydratedSuspenseInstance = shim;
 export const clearSuspenseBoundary = shim;
 export const clearSuspenseBoundaryFromContainer = shim;
 export const didNotMatchHydratedContainerTextInstance = shim;
@@ -47,5 +50,3 @@ export const didNotFindHydratableContainerSuspenseInstance = shim;
 export const didNotFindHydratableInstance = shim;
 export const didNotFindHydratableTextInstance = shim;
 export const didNotFindHydratableSuspenseInstance = shim;
-export const canHydrateTouchHitTargetInstance = shim;
-export const hydrateTouchHitTargetInstance = shim;
diff --git a/packages/shared/HostConfigWithNoPersistence.js b/packages/shared/HostConfigWithNoPersistence.js
index 9646c6a11f48b..2b58a0db4d7b0 100644
--- a/packages/shared/HostConfigWithNoPersistence.js
+++ b/packages/shared/HostConfigWithNoPersistence.js
@@ -24,10 +24,10 @@ function shim(...args: any) {
 // Persistence (when unsupported)
 export const supportsPersistence = false;
 export const cloneInstance = shim;
+export const cloneFundamentalInstance = shim;
 export const createContainerChildSet = shim;
 export const appendChildToContainerChildSet = shim;
 export const finalizeContainerChildren = shim;
 export const replaceContainerChildren = shim;
 export const cloneHiddenInstance = shim;
 export const cloneHiddenTextInstance = shim;
-export const cloneHiddenTouchHitTargetInstance = shim;
diff --git a/packages/shared/ReactDOMTypes.js b/packages/shared/ReactDOMTypes.js
new file mode 100644
index 0000000000000..19cd62793b1ad
--- /dev/null
+++ b/packages/shared/ReactDOMTypes.js
@@ -0,0 +1,77 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {
+  ReactFundamentalComponentInstance,
+  ReactEventResponder,
+  ReactEventResponderInstance,
+  EventPriority,
+} from 'shared/ReactTypes';
+
+type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
+
+export type PointerType =
+  | ''
+  | 'mouse'
+  | 'keyboard'
+  | 'pen'
+  | 'touch'
+  | 'trackpad';
+
+export type ReactDOMResponderEvent = {
+  nativeEvent: AnyNativeEvent,
+  passive: boolean,
+  pointerType: PointerType,
+  target: Element | Document,
+  type: string,
+  ...
+};
+
+export type ReactDOMEventResponder = ReactEventResponder<
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+>;
+
+export type ReactDOMEventResponderInstance = ReactEventResponderInstance<
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+>;
+
+export type ReactDOMFundamentalComponentInstance = ReactFundamentalComponentInstance<
+  any,
+  any,
+>;
+
+export type ReactDOMResponderContext = {
+  dispatchEvent: (
+    eventValue: any,
+    listener: (any) => void,
+    eventPriority: EventPriority,
+  ) => void,
+  isTargetWithinNode: (
+    childTarget: Element | Document,
+    parentTarget: Element | Document,
+  ) => boolean,
+  isTargetWithinResponder: (null | Element | Document) => boolean,
+  isTargetWithinResponderScope: (null | Element | Document) => boolean,
+  addRootEventTypes: (rootEventTypes: Array<string>) => void,
+  removeRootEventTypes: (rootEventTypes: Array<string>) => void,
+  getActiveDocument(): Document,
+  objectAssign: Function,
+  getTimeStamp: () => number,
+  isTargetWithinHostComponent: (
+    target: Element | Document,
+    elementType: string,
+  ) => boolean,
+  continuePropagation(): void,
+  // Used for controller components
+  enqueueStateRestore(Element | Document): void,
+  getResponderNode(): Element | null,
+  ...
+};
diff --git a/packages/shared/ReactElementType.js b/packages/shared/ReactElementType.js
index a27afea897c55..8e61126575afb 100644
--- a/packages/shared/ReactElementType.js
+++ b/packages/shared/ReactElementType.js
@@ -7,24 +7,23 @@
  * @flow
  */
 
-export type Source = {
+export type Source = {|
   fileName: string,
   lineNumber: number,
-};
+|};
 
-export type ReactElement = {
+export type ReactElement = {|
   $$typeof: any,
   type: any,
   key: any,
   ref: any,
   props: any,
-  _owner: any, // ReactInstance or ReactFiber
+  // ReactFiber
+  _owner: any,
 
   // __DEV__
-  _store: {
-    validated: boolean,
-  },
+  _store: {validated: boolean, ...},
   _self: React$Element<any>,
   _shadowChildren: any,
   _source: Source,
-};
+|};
diff --git a/packages/shared/ReactError.js b/packages/shared/ReactError.js
deleted file mode 100644
index 2c493f7d81cdc..0000000000000
--- a/packages/shared/ReactError.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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.
- *
- */
-
-// Do not require this module directly! Use a normal error constructor with
-// template literal strings. The messages will be converted to ReactError during
-// build, and in production they will be minified.
-
-function ReactError(message) {
-  const error = new Error(message);
-  error.name = 'Invariant Violation';
-  return error;
-}
-
-export default ReactError;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 74b62b9821e9a..6705b683cf4c3 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -9,13 +9,8 @@
 
 export const enableUserTimingAPI = __DEV__;
 
-// Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
-export const debugRenderPhaseSideEffects = false;
-
-// In some cases, StrictMode should also double-render lifecycles.
-// This can be confusing for tests though,
-// And it can be bad for performance in production.
-// This feature flag can be used to control the behavior:
+// Helps identify side effects in render-phase lifecycle hooks and setState
+// reducers by double invoking them in Strict Mode.
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 
 // To preserve the "Pause on caught exceptions" behavior of the debugger, we
@@ -31,8 +26,12 @@ export const enableProfilerTimer = __PROFILE__;
 // Trace which interactions trigger each commit.
 export const enableSchedulerTracing = __PROFILE__;
 
-// Only used in www builds.
-export const enableSuspenseServerRenderer = false; // TODO: __DEV__? Here it might just be false.
+// SSR experiments
+export const enableSuspenseServerRenderer = __EXPERIMENTAL__;
+export const enableSelectiveHydration = __EXPERIMENTAL__;
+
+// Flight experiments
+export const enableChunksAPI = __EXPERIMENTAL__;
 
 // Only used in www builds.
 export const enableSchedulerDebugging = false;
@@ -45,31 +44,73 @@ export function addUserTimingListener() {
 // Disable javascript: URL strings in href for XSS protection.
 export const disableJavaScriptURLs = false;
 
-// Disables yielding during render in Concurrent Mode. Used for debugging only.
-export const disableYielding = false;
-
-// React Fire: prevent the value and checked attributes from syncing
-// with their related DOM properties
-export const disableInputAttributeSyncing = false;
-
 // These APIs will no longer be "unstable" in the upcoming 16.7 release,
 // Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
-export const enableStableConcurrentModeAPIs = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 
 export const warnAboutShorthandPropertyCollision = false;
 
-// See https://github.com/react-native-community/discussions-and-proposals/issues/72 for more information
-// This is a flag so we can fix warnings in RN core before turning it on
-export const warnAboutDeprecatedSetNativeProps = false;
+// Experimental React Flare event system and event components support.
+export const enableDeprecatedFlareAPI = false;
 
-// Experimental React Events support. Only used in www builds for now.
-export const enableEventAPI = false;
+// Experimental Host Component support.
+export const enableFundamentalAPI = false;
+
+// Experimental Scope support.
+export const enableScopeAPI = false;
 
 // New API for JSX transforms to target - https://github.com/reactjs/rfcs/pull/107
 export const enableJSXTransformAPI = false;
 
 // We will enforce mocking scheduler with scheduler/unstable_mock at some point. (v17?)
-// Till then, we warn about the missing mock, but still fallback to a sync mode compatible version
-export const warnAboutMissingMockScheduler = false;
-// Temporary flag to revert the fix in #15650
-export const revertPassiveEffectsChange = false;
+// Till then, we warn about the missing mock, but still fallback to a legacy mode compatible version
+export const warnAboutUnmockedScheduler = false;
+
+// For tests, we flush suspense fallbacks in an act scope;
+// *except* in some of our own tests, where we test incremental loading states.
+export const flushSuspenseFallbacksInTests = true;
+
+// Add a callback property to suspense to notify which promises are currently
+// in the update queue. This allows reporting and tracing of what is causing
+// the user to see a loading state.
+// Also allows hydration callbacks to fire when a dehydrated boundary gets
+// hydrated or deleted.
+export const enableSuspenseCallback = false;
+
+// Part of the simplification of React.createElement so we can eventually move
+// from React.createElement to React.jsx
+// https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+
+export const enableTrainModelFix = true;
+
+export const enableTrustedTypesIntegration = false;
+
+// Flag to turn event.target and event.currentTarget in ReactNative from a reactTag to a component instance
+export const enableNativeTargetAsInstance = false;
+
+// --------------------------
+// Future APIs to be deprecated
+// --------------------------
+
+// Prevent the value and checked attributes from syncing
+// with their related DOM properties
+export const disableInputAttributeSyncing = false;
+
+export const warnAboutStringRefs = false;
+
+export const disableLegacyContext = false;
+
+// Disables React.createFactory
+export const disableCreateFactory = false;
+
+// Disables children for <textarea> elements
+export const disableTextareaChildren = false;
+
+// Disables ReactDOM.unstable_renderSubtreeIntoContainer
+export const disableUnstableRenderSubtreeIntoContainer = false;
+
+// Disables ReactDOM.unstable_createPortal
+export const disableUnstableCreatePortal = false;
diff --git a/packages/shared/ReactLazyComponent.js b/packages/shared/ReactLazyComponent.js
index f3042ab11aec4..246ba41e83da5 100644
--- a/packages/shared/ReactLazyComponent.js
+++ b/packages/shared/ReactLazyComponent.js
@@ -9,22 +9,26 @@
 
 export type Thenable<T, R> = {
   then(resolve: (T) => mixed, reject: (mixed) => mixed): R,
+  ...
 };
 
 export type LazyComponent<T> = {
   $$typeof: Symbol | number,
-  _ctor: () => Thenable<{default: T}, mixed>,
+  _ctor: () => Thenable<{default: T, ...}, mixed>,
   _status: 0 | 1 | 2,
   _result: any,
+  ...
 };
 
 type ResolvedLazyComponent<T> = {
   $$typeof: Symbol | number,
-  _ctor: () => Thenable<{default: T}, mixed>,
+  _ctor: () => Thenable<{default: T, ...}, mixed>,
   _status: 1,
   _result: any,
+  ...
 };
 
+export const Uninitialized = -1;
 export const Pending = 0;
 export const Resolved = 1;
 export const Rejected = 2;
@@ -34,3 +38,39 @@ export function refineResolvedLazyComponent<T>(
 ): ResolvedLazyComponent<T> | null {
   return lazyComponent._status === Resolved ? lazyComponent._result : null;
 }
+
+export function initializeLazyComponentType(
+  lazyComponent: LazyComponent<any>,
+): void {
+  if (lazyComponent._status === Uninitialized) {
+    lazyComponent._status = Pending;
+    const ctor = lazyComponent._ctor;
+    const thenable = ctor();
+    lazyComponent._result = thenable;
+    thenable.then(
+      moduleObject => {
+        if (lazyComponent._status === Pending) {
+          const defaultExport = moduleObject.default;
+          if (__DEV__) {
+            if (defaultExport === undefined) {
+              console.error(
+                'lazy: Expected the result of a dynamic import() call. ' +
+                  'Instead received: %s\n\nYour code should look like: \n  ' +
+                  "const MyComponent = lazy(() => import('./MyComponent'))",
+                moduleObject,
+              );
+            }
+          }
+          lazyComponent._status = Resolved;
+          lazyComponent._result = defaultExport;
+        }
+      },
+      error => {
+        if (lazyComponent._status === Pending) {
+          lazyComponent._status = Rejected;
+          lazyComponent._result = error;
+        }
+      },
+    );
+  }
+}
diff --git a/packages/shared/ReactRootTags.js b/packages/shared/ReactRootTags.js
index 44784b928ddd3..409f4bd931a76 100644
--- a/packages/shared/ReactRootTags.js
+++ b/packages/shared/ReactRootTags.js
@@ -10,5 +10,5 @@
 export type RootTag = 0 | 1 | 2;
 
 export const LegacyRoot = 0;
-export const BatchedRoot = 1;
+export const BlockingRoot = 1;
 export const ConcurrentRoot = 2;
diff --git a/packages/shared/ReactSideEffectTags.js b/packages/shared/ReactSideEffectTags.js
index 5f3c47f8fd593..ad3f01ac4b939 100644
--- a/packages/shared/ReactSideEffectTags.js
+++ b/packages/shared/ReactSideEffectTags.js
@@ -10,26 +10,28 @@
 export type SideEffectTag = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoEffect = /*              */ 0b000000000000;
-export const PerformedWork = /*         */ 0b000000000001;
+export const NoEffect = /*              */ 0b0000000000000;
+export const PerformedWork = /*         */ 0b0000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*             */ 0b000000000010;
-export const Update = /*                */ 0b000000000100;
-export const PlacementAndUpdate = /*    */ 0b000000000110;
-export const Deletion = /*              */ 0b000000001000;
-export const ContentReset = /*          */ 0b000000010000;
-export const Callback = /*              */ 0b000000100000;
-export const DidCapture = /*            */ 0b000001000000;
-export const Ref = /*                   */ 0b000010000000;
-export const Snapshot = /*              */ 0b000100000000;
-export const Passive = /*               */ 0b001000000000;
+export const Placement = /*             */ 0b0000000000010;
+export const Update = /*                */ 0b0000000000100;
+export const PlacementAndUpdate = /*    */ 0b0000000000110;
+export const Deletion = /*              */ 0b0000000001000;
+export const ContentReset = /*          */ 0b0000000010000;
+export const Callback = /*              */ 0b0000000100000;
+export const DidCapture = /*            */ 0b0000001000000;
+export const Ref = /*                   */ 0b0000010000000;
+export const Snapshot = /*              */ 0b0000100000000;
+export const Passive = /*               */ 0b0001000000000;
+export const Hydrating = /*             */ 0b0010000000000;
+export const HydratingAndUpdate = /*    */ 0b0010000000100;
 
 // Passive & Update & Callback & Ref & Snapshot
-export const LifecycleEffectMask = /*   */ 0b001110100100;
+export const LifecycleEffectMask = /*   */ 0b0001110100100;
 
 // Union of all host effects
-export const HostEffectMask = /*        */ 0b001111111111;
+export const HostEffectMask = /*        */ 0b0011111111111;
 
-export const Incomplete = /*            */ 0b010000000000;
-export const ShouldCapture = /*         */ 0b100000000000;
+export const Incomplete = /*            */ 0b0100000000000;
+export const ShouldCapture = /*         */ 0b1000000000000;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index cecaaaf7d019e..acc990d04c93c 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -46,19 +46,19 @@ export const REACT_FORWARD_REF_TYPE = hasSymbol
 export const REACT_SUSPENSE_TYPE = hasSymbol
   ? Symbol.for('react.suspense')
   : 0xead1;
+export const REACT_SUSPENSE_LIST_TYPE = hasSymbol
+  ? Symbol.for('react.suspense_list')
+  : 0xead8;
 export const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
 export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-export const REACT_EVENT_COMPONENT_TYPE = hasSymbol
-  ? Symbol.for('react.event_component')
+export const REACT_CHUNK_TYPE = hasSymbol ? Symbol.for('react.chunk') : 0xead9;
+export const REACT_FUNDAMENTAL_TYPE = hasSymbol
+  ? Symbol.for('react.fundamental')
   : 0xead5;
-export const REACT_EVENT_TARGET_TYPE = hasSymbol
-  ? Symbol.for('react.event_target')
+export const REACT_RESPONDER_TYPE = hasSymbol
+  ? Symbol.for('react.responder')
   : 0xead6;
-
-// React event targets
-export const REACT_EVENT_TARGET_TOUCH_HIT = hasSymbol
-  ? Symbol.for('react.event_target.touch_hit')
-  : 0xead7;
+export const REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index f109d2de92bbc..74c255577dbd7 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -13,9 +13,7 @@ export type ReactNode =
   | ReactText
   | ReactFragment
   | ReactProvider<any>
-  | ReactConsumer<any>
-  | ReactEventComponent
-  | ReactEventTarget;
+  | ReactConsumer<any>;
 
 export type ReactEmpty = null | void | boolean;
 
@@ -33,12 +31,15 @@ export type ReactProvider<T> = {
   props: {
     value: T,
     children?: ReactNodeList,
+    ...
   },
+  ...
 };
 
 export type ReactProviderType<T> = {
   $$typeof: Symbol | number,
   _context: ReactContext<T>,
+  ...
 };
 
 export type ReactConsumer<T> = {
@@ -49,23 +50,23 @@ export type ReactConsumer<T> = {
   props: {
     children: (value: T) => ReactNodeList,
     unstable_observedBits?: number,
+    ...
   },
+  ...
 };
 
 export type ReactContext<T> = {
   $$typeof: Symbol | number,
   Consumer: ReactContext<T>,
   Provider: ReactProviderType<T>,
-
   _calculateChangedBits: ((a: T, b: T) => number) | null,
-
   _currentValue: T,
   _currentValue2: T,
   _threadCount: number,
-
   // DEV only
   _currentRenderer?: Object | null,
   _currentRenderer2?: Object | null,
+  ...
 };
 
 export type ReactPortal = {
@@ -75,125 +76,114 @@ export type ReactPortal = {
   children: ReactNodeList,
   // TODO: figure out the API for cross-renderer implementation.
   implementation: any,
+  ...
 };
 
 export type RefObject = {|
   current: any,
 |};
 
-export type ReactEventResponderEventType =
-  | string
-  | {name: string, passive?: boolean};
-
-export type ReactEventResponder = {
-  targetEventTypes?: Array<ReactEventResponderEventType>,
-  rootEventTypes?: Array<ReactEventResponderEventType>,
-  createInitialState?: (props: null | Object) => Object,
-  allowMultipleHostChildren: boolean,
-  stopLocalPropagation: boolean,
-  onEvent?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onEventCapture?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onRootEvent?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onMount?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onUnmount?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onOwnershipChange?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-};
-
-export type ReactEventComponentInstance = {|
-  currentFiber: mixed,
-  props: null | Object,
-  responder: ReactEventResponder,
+export type ReactEventResponderInstance<E, C> = {|
+  fiber: Object,
+  props: Object,
+  responder: ReactEventResponder<E, C>,
   rootEventTypes: null | Set<string>,
-  rootInstance: mixed,
-  state: null | Object,
+  state: Object,
 |};
 
-export type ReactEventComponent = {|
-  $$typeof: Symbol | number,
-  displayName: string,
-  props: null | Object,
-  responder: ReactEventResponder,
+export type ReactEventResponderListener<E, C> = {|
+  props: Object,
+  responder: ReactEventResponder<E, C>,
 |};
 
-export type ReactEventTarget = {|
+export type ReactEventResponder<E, C> = {
   $$typeof: Symbol | number,
-  displayName?: string,
-  type: Symbol | number,
-|};
+  displayName: string,
+  targetEventTypes: null | Array<string>,
+  targetPortalPropagation: boolean,
+  rootEventTypes: null | Array<string>,
+  getInitialState: null | ((props: Object) => Object),
+  onEvent:
+    | null
+    | ((event: E, context: C, props: Object, state: Object) => void),
+  onRootEvent:
+    | null
+    | ((event: E, context: C, props: Object, state: Object) => void),
+  onMount: null | ((context: C, props: Object, state: Object) => void),
+  onUnmount: null | ((context: C, props: Object, state: Object) => void),
+  ...
+};
 
-type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
+export type EventPriority = 0 | 1 | 2;
 
-export type ReactResponderEvent = {
-  nativeEvent: AnyNativeEvent,
-  target: Element | Document,
-  type: string,
-  passive: boolean,
-  passiveSupported: boolean,
-};
+export const DiscreteEvent: EventPriority = 0;
+export const UserBlockingEvent: EventPriority = 1;
+export const ContinuousEvent: EventPriority = 2;
 
-export type ReactResponderContext = {
-  dispatchEvent: (
-    eventObject: Object,
-    listener: (Object) => void,
-    discrete: boolean,
-  ) => void,
-  isTargetWithinElement: (
-    childTarget: Element | Document,
-    parentTarget: Element | Document,
+export type ReactFundamentalComponentInstance<C, H> = {|
+  currentFiber: mixed,
+  instance: mixed,
+  prevProps: null | Object,
+  props: Object,
+  impl: ReactFundamentalImpl<C, H>,
+  state: Object,
+|};
+
+export type ReactFundamentalImpl<C, H> = {
+  displayName: string,
+  reconcileChildren: boolean,
+  getInitialState?: (props: Object) => Object,
+  getInstance: (context: C, props: Object, state: Object) => H,
+  getServerSideString?: (context: C, props: Object) => string,
+  getServerSideStringClose?: (context: C, props: Object) => string,
+  onMount: (context: C, instance: mixed, props: Object, state: Object) => void,
+  shouldUpdate?: (
+    context: C,
+    prevProps: null | Object,
+    nextProps: Object,
+    state: Object,
   ) => boolean,
-  isTargetWithinEventComponent: (Element | Document) => boolean,
-  isTargetWithinEventResponderScope: (Element | Document) => boolean,
-  isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
-  addRootEventTypes: (
-    rootEventTypes: Array<ReactEventResponderEventType>,
+  onUpdate?: (
+    context: C,
+    instance: mixed,
+    prevProps: null | Object,
+    nextProps: Object,
+    state: Object,
   ) => void,
-  removeRootEventTypes: (
-    rootEventTypes: Array<ReactEventResponderEventType>,
+  onUnmount?: (
+    context: C,
+    instance: mixed,
+    props: Object,
+    state: Object,
   ) => void,
-  hasOwnership: () => boolean,
-  requestResponderOwnership: () => boolean,
-  requestGlobalOwnership: () => boolean,
-  releaseOwnership: () => boolean,
-  setTimeout: (func: () => void, timeout: number) => Symbol,
-  clearTimeout: (timerId: Symbol) => void,
-  getFocusableElementsInScope(): Array<HTMLElement>,
-  getActiveDocument(): Document,
-  objectAssign: Function,
-  getEventPointerType(
-    event: ReactResponderEvent,
-  ): '' | 'mouse' | 'keyboard' | 'pen' | 'touch',
-  getEventCurrentTarget(event: ReactResponderEvent): Element,
-  getTimeStamp: () => number,
-  isTargetWithinHostComponent: (
-    target: Element | Document,
-    elementType: string,
-    deep: boolean,
-  ) => boolean,
+  onHydrate?: (context: C, props: Object, state: Object) => boolean,
+  onFocus?: (context: C, props: Object, state: Object) => boolean,
+  ...
 };
+
+export type ReactFundamentalComponent<C, H> = {|
+  $$typeof: Symbol | number,
+  impl: ReactFundamentalImpl<C, H>,
+|};
+
+export type ReactScope = {|
+  $$typeof: Symbol | number,
+|};
+
+export type ReactScopeQuery = (
+  type: string,
+  props: {[string]: mixed, ...},
+  instance: mixed,
+) => boolean;
+
+export type ReactScopeMethods = {|
+  DO_NOT_USE_queryAllNodes(ReactScopeQuery): null | Array<Object>,
+  DO_NOT_USE_queryFirstNode(ReactScopeQuery): null | Object,
+  containsNode(Object): boolean,
+  getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
+|};
+
+export type ReactScopeInstance = {|
+  fiber: Object,
+  methods: null | ReactScopeMethods,
+|};
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 2496b912cac1c..443849166f86e 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -8,4 +8,4 @@
 'use strict';
 
 // TODO: this is special because it gets imported during build.
-module.exports = '16.8.6';
+module.exports = '16.12.0';
diff --git a/packages/shared/ReactWorkTags.js b/packages/shared/ReactWorkTags.js
index 4601e1cd81ca1..9fa017983f816 100644
--- a/packages/shared/ReactWorkTags.js
+++ b/packages/shared/ReactWorkTags.js
@@ -28,7 +28,9 @@ export type WorkTag =
   | 17
   | 18
   | 19
-  | 20;
+  | 20
+  | 21
+  | 22;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -48,6 +50,8 @@ export const MemoComponent = 14;
 export const SimpleMemoComponent = 15;
 export const LazyComponent = 16;
 export const IncompleteClassComponent = 17;
-export const DehydratedSuspenseComponent = 18;
-export const EventComponent = 19;
-export const EventTarget = 20;
+export const DehydratedFragment = 18;
+export const SuspenseListComponent = 19;
+export const FundamentalComponent = 20;
+export const ScopeComponent = 21;
+export const Chunk = 22;
diff --git a/packages/shared/__tests__/ReactError-test.internal.js b/packages/shared/__tests__/ReactError-test.internal.js
index a8b9bcb557ae5..cd9fc5697f86d 100644
--- a/packages/shared/__tests__/ReactError-test.internal.js
+++ b/packages/shared/__tests__/ReactError-test.internal.js
@@ -37,15 +37,7 @@ describe('ReactError', () => {
   });
 
   if (__DEV__) {
-    it('should throw errors whose name is "Invariant Violation"', () => {
-      let error;
-      try {
-        React.useState();
-      } catch (e) {
-        error = e;
-      }
-      expect(error.name).toEqual('Invariant Violation');
-    });
+    it("empty test so Jest doesn't complain", () => {});
   } else {
     it('should error with minified error code', () => {
       expect(() => ReactDOM.render('Hi', null)).toThrowError(
diff --git a/packages/shared/__tests__/ReactErrorProd-test.internal.js b/packages/shared/__tests__/ReactErrorProd-test.internal.js
index b8984d13d52ae..27679bc529920 100644
--- a/packages/shared/__tests__/ReactErrorProd-test.internal.js
+++ b/packages/shared/__tests__/ReactErrorProd-test.internal.js
@@ -8,7 +8,7 @@
  */
 'use strict';
 
-let ReactErrorProd;
+let formatProdErrorMessage;
 
 describe('ReactErrorProd', () => {
   let globalErrorMock;
@@ -25,7 +25,7 @@ describe('ReactErrorProd', () => {
       expect(typeof global.Error).toBe('function');
     }
     jest.resetModules();
-    ReactErrorProd = require('shared/ReactErrorProd').default;
+    formatProdErrorMessage = require('shared/formatProdErrorMessage').default;
   });
 
   afterEach(() => {
@@ -35,27 +35,21 @@ describe('ReactErrorProd', () => {
   });
 
   it('should throw with the correct number of `%s`s in the URL', () => {
-    expect(function() {
-      throw ReactErrorProd(124, 'foo', 'bar');
-    }).toThrowError(
+    expect(formatProdErrorMessage(124, 'foo', 'bar')).toEqual(
       'Minified React error #124; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=124&args[]=foo&args[]=bar' +
         ' for the full message or use the non-minified dev environment' +
         ' for full errors and additional helpful warnings.',
     );
 
-    expect(function() {
-      throw ReactErrorProd(20);
-    }).toThrowError(
+    expect(formatProdErrorMessage(20)).toEqual(
       'Minified React error #20; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=20' +
         ' for the full message or use the non-minified dev environment' +
         ' for full errors and additional helpful warnings.',
     );
 
-    expect(function() {
-      throw ReactErrorProd(77, '<div>', '&?bar');
-    }).toThrowError(
+    expect(formatProdErrorMessage(77, '<div>', '&?bar')).toEqual(
       'Minified React error #77; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=77&args[]=%3Cdiv%3E&args[]=%26%3Fbar' +
         ' for the full message or use the non-minified dev environment' +
diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
new file mode 100644
index 0000000000000..ee4dea5a5d86c
--- /dev/null
+++ b/packages/shared/consoleWithStackDev.js
@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+// In DEV, calls to console.warn and console.error get replaced
+// by calls to these methods by a Babel plugin.
+//
+// In PROD (or in packages without access to React internals),
+// they are left as they are instead.
+
+export function warn(format, ...args) {
+  if (__DEV__) {
+    printWarning('warn', format, args);
+  }
+}
+
+export function error(format, ...args) {
+  if (__DEV__) {
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  if (__DEV__) {
+    const hasExistingStack =
+      args.length > 0 &&
+      typeof args[args.length - 1] === 'string' &&
+      args[args.length - 1].indexOf('\n    in') === 0;
+
+    if (!hasExistingStack) {
+      const ReactDebugCurrentFrame =
+        ReactSharedInternals.ReactDebugCurrentFrame;
+      const stack = ReactDebugCurrentFrame.getStackAddendum();
+      if (stack !== '') {
+        format += '%s';
+        args = args.concat([stack]);
+      }
+    }
+
+    const argsWithFormat = args.map(item => '' + item);
+    // Careful: RN currently depends on this prefix
+    argsWithFormat.unshift('Warning: ' + format);
+    // We intentionally don't use spread (or .apply) directly because it
+    // breaks IE9: https://github.com/facebook/react/issues/13610
+    // eslint-disable-next-line react-internal/no-production-logging
+    Function.prototype.apply.call(console[level], console, argsWithFormat);
+
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      let argIndex = 0;
+      const message =
+        'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
+      throw new Error(message);
+    } catch (x) {}
+  }
+}
diff --git a/packages/shared/createEventResponder.js b/packages/shared/createEventResponder.js
new file mode 100644
index 0000000000000..c18b1595c4966
--- /dev/null
+++ b/packages/shared/createEventResponder.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ * @flow
+ */
+
+import type {ReactEventResponder} from 'shared/ReactTypes';
+import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
+import {hasBadMapPolyfill} from './hasBadMapPolyfill';
+
+export default function createEventResponder<E, C>(
+  displayName: string,
+  responderConfig: Object,
+): ReactEventResponder<E, C> {
+  const {
+    getInitialState,
+    onEvent,
+    onMount,
+    onUnmount,
+    onRootEvent,
+    rootEventTypes,
+    targetEventTypes,
+    targetPortalPropagation,
+  } = responderConfig;
+  const eventResponder = {
+    $$typeof: REACT_RESPONDER_TYPE,
+    displayName,
+    getInitialState: getInitialState || null,
+    onEvent: onEvent || null,
+    onMount: onMount || null,
+    onRootEvent: onRootEvent || null,
+    onUnmount: onUnmount || null,
+    rootEventTypes: rootEventTypes || null,
+    targetEventTypes: targetEventTypes || null,
+    targetPortalPropagation: targetPortalPropagation || false,
+  };
+  // We use responder as a Map key later on. When we have a bad
+  // polyfill, then we can't use it as a key as the polyfill tries
+  // to add a property to the object.
+  if (__DEV__ && !hasBadMapPolyfill) {
+    Object.freeze(eventResponder);
+  }
+  return eventResponder;
+}
diff --git a/packages/shared/createFundamentalComponent.js b/packages/shared/createFundamentalComponent.js
new file mode 100644
index 0000000000000..88fa369922d80
--- /dev/null
+++ b/packages/shared/createFundamentalComponent.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ * @flow
+ */
+
+import type {
+  ReactFundamentalImpl,
+  ReactFundamentalComponent,
+} from 'shared/ReactTypes';
+import {REACT_FUNDAMENTAL_TYPE} from 'shared/ReactSymbols';
+import {hasBadMapPolyfill} from './hasBadMapPolyfill';
+
+export default function createFundamentalComponent<C, H>(
+  impl: ReactFundamentalImpl<C, H>,
+): ReactFundamentalComponent<C, H> {
+  // We use responder as a Map key later on. When we have a bad
+  // polyfill, then we can't use it as a key as the polyfill tries
+  // to add a property to the object.
+  if (__DEV__ && !hasBadMapPolyfill) {
+    Object.freeze(impl);
+  }
+  const fundamantalComponent = {
+    $$typeof: REACT_FUNDAMENTAL_TYPE,
+    impl,
+  };
+  if (__DEV__) {
+    Object.freeze(fundamantalComponent);
+  }
+  return fundamantalComponent;
+}
diff --git a/packages/shared/createScope.js b/packages/shared/createScope.js
new file mode 100644
index 0000000000000..a5d31dc7aeab6
--- /dev/null
+++ b/packages/shared/createScope.js
@@ -0,0 +1,20 @@
+/**
+ * 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.
+ * @flow
+ */
+
+import type {ReactScope} from 'shared/ReactTypes';
+import {REACT_SCOPE_TYPE} from 'shared/ReactSymbols';
+
+export default function createScope(): ReactScope {
+  const scopeComponent = {
+    $$typeof: REACT_SCOPE_TYPE,
+  };
+  if (__DEV__) {
+    Object.freeze(scopeComponent);
+  }
+  return scopeComponent;
+}
diff --git a/packages/shared/endsWith.js b/packages/shared/endsWith.js
new file mode 100644
index 0000000000000..115e75a9746f3
--- /dev/null
+++ b/packages/shared/endsWith.js
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+export default function endsWith(subject: string, search: string): boolean {
+  const length = subject.length;
+  return subject.substring(length - search.length, length) === search;
+}
diff --git a/packages/shared/enqueueTask.js b/packages/shared/enqueueTask.js
index c2cfde1f28025..5bf23c18f3a02 100644
--- a/packages/shared/enqueueTask.js
+++ b/packages/shared/enqueueTask.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import warningWithoutStack from './warningWithoutStack';
-
 let didWarnAboutMessageChannel = false;
 let enqueueTask;
 try {
@@ -27,13 +25,14 @@ try {
     if (__DEV__) {
       if (didWarnAboutMessageChannel === false) {
         didWarnAboutMessageChannel = true;
-        warningWithoutStack(
-          typeof MessageChannel !== 'undefined',
-          'This browser does not have a MessageChannel implementation, ' +
-            'so enqueuing tasks via await act(async () => ...) will fail. ' +
-            'Please file an issue at https://github.com/facebook/react/issues ' +
-            'if you encounter this warning.',
-        );
+        if (typeof MessageChannel === 'undefined') {
+          console.error(
+            'This browser does not have a MessageChannel implementation, ' +
+              'so enqueuing tasks via await act(async () => ...) will fail. ' +
+              'Please file an issue at https://github.com/facebook/react/issues ' +
+              'if you encounter this warning.',
+          );
+        }
       }
     }
     const channel = new MessageChannel();
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 8b899da6d62e5..0fac92224c125 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -12,28 +12,43 @@ import invariant from 'shared/invariant';
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.native-fb';
 
-// Re-export dynamic flags from the fbsource version.
-export const {debugRenderPhaseSideEffects} = require('ReactFeatureFlags');
+// Uncomment to re-export dynamic flags from the fbsource version.
+export const {
+  enableNativeTargetAsInstance,
+} = require('../shims/ReactFeatureFlags');
 
 // The rest of the flags are static for better dead code elimination.
 export const enableUserTimingAPI = __DEV__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
-export const enableStableConcurrentModeAPIs = false;
+export const enableSelectiveHydration = false;
+export const enableChunksAPI = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
-export const disableYielding = false;
 export const disableInputAttributeSyncing = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
-export const warnAboutDeprecatedSetNativeProps = true;
-export const enableEventAPI = false;
+export const enableDeprecatedFlareAPI = false;
+export const enableFundamentalAPI = false;
+export const enableScopeAPI = false;
 export const enableJSXTransformAPI = false;
-export const warnAboutMissingMockScheduler = true;
-export const revertPassiveEffectsChange = false;
+export const warnAboutUnmockedScheduler = true;
+export const flushSuspenseFallbacksInTests = true;
+export const enableSuspenseCallback = false;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const warnAboutStringRefs = false;
+export const disableLegacyContext = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrainModelFix = true;
+export const enableTrustedTypesIntegration = false;
+export const disableCreateFactory = false;
+export const disableTextareaChildren = false;
+export const disableUnstableRenderSubtreeIntoContainer = false;
+export const disableUnstableCreatePortal = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c46a800a3a629..1ab71e94964cb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -12,7 +12,6 @@ import invariant from 'shared/invariant';
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.native-oss';
 
-export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
 export const enableUserTimingAPI = __DEV__;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
@@ -20,17 +19,31 @@ export const warnAboutDeprecatedLifecycles = true;
 export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
+export const enableSelectiveHydration = false;
+export const enableChunksAPI = false;
 export const disableJavaScriptURLs = false;
-export const disableYielding = false;
 export const disableInputAttributeSyncing = false;
-export const enableStableConcurrentModeAPIs = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = false;
 export const enableSchedulerDebugging = false;
-export const warnAboutDeprecatedSetNativeProps = false;
-export const enableEventAPI = false;
+export const enableDeprecatedFlareAPI = false;
+export const enableFundamentalAPI = false;
+export const enableScopeAPI = false;
 export const enableJSXTransformAPI = false;
-export const warnAboutMissingMockScheduler = false;
-export const revertPassiveEffectsChange = false;
+export const warnAboutUnmockedScheduler = false;
+export const flushSuspenseFallbacksInTests = true;
+export const enableSuspenseCallback = false;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const warnAboutStringRefs = false;
+export const disableLegacyContext = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrainModelFix = true;
+export const enableTrustedTypesIntegration = false;
+export const enableNativeTargetAsInstance = false;
+export const disableCreateFactory = false;
+export const disableTextareaChildren = false;
+export const disableUnstableRenderSubtreeIntoContainer = false;
+export const disableUnstableCreatePortal = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index 511a10fa10e14..995cb081cdb21 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -12,7 +12,6 @@ import invariant from 'shared/invariant';
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persistent';
 
-export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
 export const enableUserTimingAPI = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
@@ -20,17 +19,31 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
+export const enableSelectiveHydration = false;
+export const enableChunksAPI = false;
 export const disableJavaScriptURLs = false;
-export const disableYielding = false;
 export const disableInputAttributeSyncing = false;
-export const enableStableConcurrentModeAPIs = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = false;
 export const enableSchedulerDebugging = false;
-export const warnAboutDeprecatedSetNativeProps = false;
-export const enableEventAPI = false;
+export const enableDeprecatedFlareAPI = false;
+export const enableFundamentalAPI = false;
+export const enableScopeAPI = false;
 export const enableJSXTransformAPI = false;
-export const warnAboutMissingMockScheduler = true;
-export const revertPassiveEffectsChange = false;
+export const warnAboutUnmockedScheduler = true;
+export const flushSuspenseFallbacksInTests = true;
+export const enableSuspenseCallback = false;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const warnAboutStringRefs = false;
+export const disableLegacyContext = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrainModelFix = true;
+export const enableTrustedTypesIntegration = false;
+export const enableNativeTargetAsInstance = false;
+export const disableCreateFactory = false;
+export const disableTextareaChildren = false;
+export const disableUnstableRenderSubtreeIntoContainer = false;
+export const disableUnstableCreatePortal = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index aa5f144f6cee5..4f8251d196b9d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -12,25 +12,38 @@ import invariant from 'shared/invariant';
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persistent';
 
-export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
 export const enableUserTimingAPI = __DEV__;
-export const warnAboutDeprecatedLifecycles = false;
+export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-export const enableProfilerTimer = false;
-export const enableSchedulerTracing = false;
+export const enableProfilerTimer = __PROFILE__;
+export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
+export const enableSelectiveHydration = false;
+export const enableChunksAPI = false;
 export const disableJavaScriptURLs = false;
-export const disableYielding = false;
 export const disableInputAttributeSyncing = false;
-export const enableStableConcurrentModeAPIs = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = false;
 export const enableSchedulerDebugging = false;
-export const warnAboutDeprecatedSetNativeProps = false;
-export const enableEventAPI = false;
+export const enableDeprecatedFlareAPI = false;
+export const enableFundamentalAPI = false;
+export const enableScopeAPI = false;
 export const enableJSXTransformAPI = false;
-export const warnAboutMissingMockScheduler = false;
-export const revertPassiveEffectsChange = false;
+export const warnAboutUnmockedScheduler = false;
+export const flushSuspenseFallbacksInTests = true;
+export const enableSuspenseCallback = false;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const warnAboutStringRefs = false;
+export const disableLegacyContext = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrainModelFix = true;
+export const enableTrustedTypesIntegration = false;
+export const enableNativeTargetAsInstance = false;
+export const disableCreateFactory = false;
+export const disableTextareaChildren = false;
+export const disableUnstableRenderSubtreeIntoContainer = false;
+export const disableUnstableCreatePortal = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 1e215516a263e..514d532333f8c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -12,25 +12,36 @@ import invariant from 'shared/invariant';
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persistent';
 
-// Re-export dynamic flags from the www version.
-export const {revertPassiveEffectsChange} = require('ReactFeatureFlags');
-
-export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
 export const enableUserTimingAPI = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-export const enableProfilerTimer = false;
-export const enableSchedulerTracing = false;
+export const enableProfilerTimer = __PROFILE__;
+export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
-export const enableStableConcurrentModeAPIs = false;
+export const enableSelectiveHydration = false;
+export const enableChunksAPI = false;
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const enableSchedulerDebugging = false;
-export const warnAboutDeprecatedSetNativeProps = false;
 export const disableJavaScriptURLs = false;
-export const disableYielding = false;
-export const enableEventAPI = true;
+export const enableDeprecatedFlareAPI = true;
+export const enableFundamentalAPI = false;
+export const enableScopeAPI = true;
 export const enableJSXTransformAPI = true;
-export const warnAboutMissingMockScheduler = true;
+export const warnAboutUnmockedScheduler = true;
+export const flushSuspenseFallbacksInTests = true;
+export const enableSuspenseCallback = true;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const warnAboutStringRefs = false;
+export const disableLegacyContext = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrainModelFix = true;
+export const enableTrustedTypesIntegration = false;
+export const enableNativeTargetAsInstance = false;
+export const disableCreateFactory = false;
+export const disableTextareaChildren = false;
+export const disableUnstableRenderSubtreeIntoContainer = false;
+export const disableUnstableCreatePortal = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 40ca79e12865d..cf14d167f297c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -12,15 +12,9 @@ import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.www';
 
 // Re-export dynamic flags from the www version.
 export const {
-  debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
-  replayFailedUnitOfWorkWithInvokeGuardedCallback,
-  warnAboutDeprecatedLifecycles,
-  disableYielding,
   disableInputAttributeSyncing,
-  warnAboutShorthandPropertyCollision,
-  warnAboutDeprecatedSetNativeProps,
-  revertPassiveEffectsChange,
+  enableTrustedTypesIntegration,
 } = require('ReactFeatureFlags');
 
 // In www, we have experimental support for gathering data
@@ -35,9 +29,22 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSchedulerDebugging = true;
 
-export const enableStableConcurrentModeAPIs = false;
+export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+export const warnAboutDeprecatedLifecycles = true;
+export const warnAboutShorthandPropertyCollision = false;
+export const disableLegacyContext = false;
+export const warnAboutStringRefs = false;
+export const warnAboutDefaultPropsOnFunctionComponents = false;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+
+export const enableTrainModelFix = true;
+
+export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 
 export const enableSuspenseServerRenderer = true;
+export const enableSelectiveHydration = true;
+
+export const enableChunksAPI = __EXPERIMENTAL__;
 
 export const disableJavaScriptURLs = true;
 
@@ -68,11 +75,29 @@ function updateFlagOutsideOfReactCallStack() {
   }
 }
 
-export const enableEventAPI = true;
+export const enableDeprecatedFlareAPI = true;
+
+export const enableFundamentalAPI = false;
+
+export const enableScopeAPI = true;
 
 export const enableJSXTransformAPI = true;
 
-export const warnAboutMissingMockScheduler = true;
+export const warnAboutUnmockedScheduler = true;
+
+export const enableSuspenseCallback = true;
+
+export const flushSuspenseFallbacksInTests = true;
+
+export const enableNativeTargetAsInstance = false;
+
+export const disableCreateFactory = false;
+
+export const disableTextareaChildren = false;
+
+export const disableUnstableRenderSubtreeIntoContainer = false;
+
+export const disableUnstableCreatePortal = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/Scheduler.umd.js b/packages/shared/forks/Scheduler.umd.js
index 92738cbe9907b..1af2012376d18 100644
--- a/packages/shared/forks/Scheduler.umd.js
+++ b/packages/shared/forks/Scheduler.umd.js
@@ -16,6 +16,7 @@ const {
   unstable_now,
   unstable_scheduleCallback,
   unstable_shouldYield,
+  unstable_requestPaint,
   unstable_getFirstCallbackNode,
   unstable_runWithPriority,
   unstable_next,
@@ -31,7 +32,7 @@ const {
 
   // this doesn't actually exist on the scheduler, but it *does*
   // on scheduler/unstable_mock, which we'll need inside act().
-  unstable_flushWithoutYielding,
+  unstable_flushAllWithoutAsserting,
 } = ReactInternals.Scheduler;
 
 export {
@@ -39,6 +40,7 @@ export {
   unstable_now,
   unstable_scheduleCallback,
   unstable_shouldYield,
+  unstable_requestPaint,
   unstable_getFirstCallbackNode,
   unstable_runWithPriority,
   unstable_next,
@@ -51,5 +53,5 @@ export {
   unstable_LowPriority,
   unstable_IdlePriority,
   unstable_forceFrameRate,
-  unstable_flushWithoutYielding,
+  unstable_flushAllWithoutAsserting,
 };
diff --git a/packages/shared/forks/consoleWithStackDev.www.js b/packages/shared/forks/consoleWithStackDev.www.js
new file mode 100644
index 0000000000000..5389f638663b8
--- /dev/null
+++ b/packages/shared/forks/consoleWithStackDev.www.js
@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+// This refers to a WWW module.
+const warningWWW = require('warning');
+
+export function warn(format, ...args) {
+  if (__DEV__) {
+    printWarning('warn', format, args);
+  }
+}
+
+export function error(format, ...args) {
+  if (__DEV__) {
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  if (__DEV__) {
+    const hasExistingStack =
+      args.length > 0 &&
+      typeof args[args.length - 1] === 'string' &&
+      args[args.length - 1].indexOf('\n    in') === 0;
+
+    if (!hasExistingStack) {
+      const React = require('react');
+      const ReactSharedInternals =
+        React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+      // Defensive in case this is fired before React is initialized.
+      if (ReactSharedInternals != null) {
+        const ReactDebugCurrentFrame =
+          ReactSharedInternals.ReactDebugCurrentFrame;
+        const stack = ReactDebugCurrentFrame.getStackAddendum();
+        if (stack !== '') {
+          format += '%s';
+          args.push(stack);
+        }
+      }
+    }
+    // TODO: don't ignore level and pass it down somewhere too.
+    args.unshift(format);
+    args.unshift(false);
+    warningWWW.apply(null, args);
+  }
+}
diff --git a/packages/shared/forks/lowPriorityWarning.www.js b/packages/shared/forks/lowPriorityWarning.www.js
deleted file mode 100644
index 625eb3ce6b461..0000000000000
--- a/packages/shared/forks/lowPriorityWarning.www.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * 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.
- */
-
-export default require('lowPriorityWarning');
diff --git a/packages/shared/forks/warningWithoutStack.www.js b/packages/shared/forks/warningWithoutStack.www.js
deleted file mode 100644
index 24e54ef2e00d2..0000000000000
--- a/packages/shared/forks/warningWithoutStack.www.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * 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.
- */
-
-export default require('warning');
diff --git a/packages/shared/ReactErrorProd.js b/packages/shared/formatProdErrorMessage.js
similarity index 53%
rename from packages/shared/ReactErrorProd.js
rename to packages/shared/formatProdErrorMessage.js
index 3b3996e1366dc..e315ed83155c3 100644
--- a/packages/shared/ReactErrorProd.js
+++ b/packages/shared/formatProdErrorMessage.js
@@ -6,20 +6,20 @@
  *
  */
 
-// Do not require this module directly! Use a normal error constructor with
-// template literal strings. The messages will be converted to ReactError during
-// build, and in production they will be minified.
+// Do not require this module directly! Use normal `invariant` calls with
+// template literal strings. The messages will be replaced with error codes
+// during build.
 
-function ReactErrorProd(code) {
+function formatProdErrorMessage(code) {
   let url = 'https://reactjs.org/docs/error-decoder.html?invariant=' + code;
   for (let i = 1; i < arguments.length; i++) {
     url += '&args[]=' + encodeURIComponent(arguments[i]);
   }
-  return new Error(
+  return (
     `Minified React error #${code}; visit ${url} for the full message or ` +
-      'use the non-minified dev environment for full errors and additional ' +
-      'helpful warnings. ',
+    'use the non-minified dev environment for full errors and additional ' +
+    'helpful warnings.'
   );
 }
 
-export default ReactErrorProd;
+export default formatProdErrorMessage;
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index 6923fa8d17deb..83a103b68db36 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -9,7 +9,6 @@
 
 import type {LazyComponent} from 'shared/ReactLazyComponent';
 
-import warningWithoutStack from 'shared/warningWithoutStack';
 import {
   REACT_CONTEXT_TYPE,
   REACT_FORWARD_REF_TYPE,
@@ -20,15 +19,11 @@ import {
   REACT_PROVIDER_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
   REACT_LAZY_TYPE,
-  REACT_EVENT_COMPONENT_TYPE,
-  REACT_EVENT_TARGET_TYPE,
-  REACT_EVENT_TARGET_TOUCH_HIT,
+  REACT_CHUNK_TYPE,
 } from 'shared/ReactSymbols';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
-import type {ReactEventComponent, ReactEventTarget} from 'shared/ReactTypes';
-
-import {enableEventAPI} from './ReactFeatureFlags';
 
 function getWrappedName(
   outerType: mixed,
@@ -49,8 +44,7 @@ function getComponentName(type: mixed): string | null {
   }
   if (__DEV__) {
     if (typeof (type: any).tag === 'number') {
-      warningWithoutStack(
-        false,
+      console.error(
         'Received an unexpected object in getComponentName(). ' +
           'This is likely a bug in React. Please file an issue.',
       );
@@ -73,6 +67,8 @@ function getComponentName(type: mixed): string | null {
       return 'StrictMode';
     case REACT_SUSPENSE_TYPE:
       return 'Suspense';
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
   }
   if (typeof type === 'object') {
     switch (type.$$typeof) {
@@ -84,6 +80,8 @@ function getComponentName(type: mixed): string | null {
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE:
         return getComponentName(type.type);
+      case REACT_CHUNK_TYPE:
+        return getComponentName(type.render);
       case REACT_LAZY_TYPE: {
         const thenable: LazyComponent<mixed> = (type: any);
         const resolvedThenable = refineResolvedLazyComponent(thenable);
@@ -92,25 +90,6 @@ function getComponentName(type: mixed): string | null {
         }
         break;
       }
-      case REACT_EVENT_COMPONENT_TYPE: {
-        if (enableEventAPI) {
-          const eventComponent = ((type: any): ReactEventComponent);
-          return eventComponent.displayName;
-        }
-        break;
-      }
-      case REACT_EVENT_TARGET_TYPE: {
-        if (enableEventAPI) {
-          const eventTarget = ((type: any): ReactEventTarget);
-          if (eventTarget.type === REACT_EVENT_TARGET_TOUCH_HIT) {
-            return 'TouchHitTarget';
-          }
-          const displayName = eventTarget.displayName;
-          if (displayName !== undefined) {
-            return displayName;
-          }
-        }
-      }
     }
   }
   return null;
diff --git a/packages/shared/hasBadMapPolyfill.js b/packages/shared/hasBadMapPolyfill.js
new file mode 100644
index 0000000000000..7ceb9ca65f9ae
--- /dev/null
+++ b/packages/shared/hasBadMapPolyfill.js
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ * @flow
+ */
+
+export let hasBadMapPolyfill;
+
+if (__DEV__) {
+  hasBadMapPolyfill = false;
+  try {
+    const frozenObject = Object.freeze({});
+    const testMap = new Map([[frozenObject, null]]);
+    const testSet = new Set([frozenObject]);
+    // This is necessary for Rollup to not consider these unused.
+    // https://github.com/rollup/rollup/issues/1771
+    // TODO: we can remove these if Rollup fixes the bug.
+    testMap.set(0, 0);
+    testSet.add(0);
+  } catch (e) {
+    // TODO: Consider warning about bad polyfills
+    hasBadMapPolyfill = true;
+  }
+}
diff --git a/packages/shared/isTextInputElement.js b/packages/shared/isTextInputElement.js
index 4d92caa35cf43..71ff8ab91b45a 100644
--- a/packages/shared/isTextInputElement.js
+++ b/packages/shared/isTextInputElement.js
@@ -10,7 +10,7 @@
 /**
  * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
  */
-const supportedInputTypes: {[key: string]: true | void} = {
+const supportedInputTypes: {[key: string]: true | void, ...} = {
   color: true,
   date: true,
   datetime: true,
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 41f3bcb4b45f3..c4a6ce0d4e338 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -16,10 +16,13 @@ import {
   REACT_PROVIDER_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
-  REACT_EVENT_COMPONENT_TYPE,
-  REACT_EVENT_TARGET_TYPE,
+  REACT_FUNDAMENTAL_TYPE,
+  REACT_RESPONDER_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_CHUNK_TYPE,
 } from 'shared/ReactSymbols';
 
 export default function isValidElementType(type: mixed) {
@@ -32,6 +35,7 @@ export default function isValidElementType(type: mixed) {
     type === REACT_PROFILER_TYPE ||
     type === REACT_STRICT_MODE_TYPE ||
     type === REACT_SUSPENSE_TYPE ||
+    type === REACT_SUSPENSE_LIST_TYPE ||
     (typeof type === 'object' &&
       type !== null &&
       (type.$$typeof === REACT_LAZY_TYPE ||
@@ -39,7 +43,9 @@ export default function isValidElementType(type: mixed) {
         type.$$typeof === REACT_PROVIDER_TYPE ||
         type.$$typeof === REACT_CONTEXT_TYPE ||
         type.$$typeof === REACT_FORWARD_REF_TYPE ||
-        type.$$typeof === REACT_EVENT_COMPONENT_TYPE ||
-        type.$$typeof === REACT_EVENT_TARGET_TYPE))
+        type.$$typeof === REACT_FUNDAMENTAL_TYPE ||
+        type.$$typeof === REACT_RESPONDER_TYPE ||
+        type.$$typeof === REACT_SCOPE_TYPE ||
+        type.$$typeof === REACT_CHUNK_TYPE))
   );
 }
diff --git a/packages/shared/lowPriorityWarning.js b/packages/shared/lowPriorityWarning.js
deleted file mode 100644
index a4fb04d0b3a2c..0000000000000
--- a/packages/shared/lowPriorityWarning.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Forked from fbjs/warning:
- * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
- *
- * Only change is we use console.warn instead of console.error,
- * and do nothing when 'console' is not supported.
- * This really simplifies the code.
- * ---
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
-let lowPriorityWarning = function() {};
-
-if (__DEV__) {
-  const printWarning = function(format, ...args) {
-    let argIndex = 0;
-    const message = 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
-    if (typeof console !== 'undefined') {
-      console.warn(message);
-    }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      throw new Error(message);
-    } catch (x) {}
-  };
-
-  lowPriorityWarning = function(condition, format, ...args) {
-    if (format === undefined) {
-      throw new Error(
-        '`lowPriorityWarning(condition, format, ...args)` requires a warning ' +
-          'message argument',
-      );
-    }
-    if (!condition) {
-      printWarning(format, ...args);
-    }
-  };
-}
-
-export default lowPriorityWarning;
diff --git a/packages/shared/objectIs.js b/packages/shared/objectIs.js
index 3110e3fa5a9ca..345b5150b5a76 100644
--- a/packages/shared/objectIs.js
+++ b/packages/shared/objectIs.js
@@ -17,4 +17,4 @@ function is(x: any, y: any) {
   );
 }
 
-export default is;
+export default typeof Object.is === 'function' ? Object.is : is;
diff --git a/packages/shared/warning.js b/packages/shared/warning.js
deleted file mode 100644
index 0886df6120c64..0000000000000
--- a/packages/shared/warning.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * 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.
- */
-
-import warningWithoutStack from 'shared/warningWithoutStack';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-
-/**
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
-let warning = warningWithoutStack;
-
-if (__DEV__) {
-  warning = function(condition, format, ...args) {
-    if (condition) {
-      return;
-    }
-    const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-    const stack = ReactDebugCurrentFrame.getStackAddendum();
-    // eslint-disable-next-line react-internal/warning-and-invariant-args
-    warningWithoutStack(false, format + '%s', ...args, stack);
-  };
-}
-
-export default warning;
diff --git a/packages/shared/warningWithoutStack.js b/packages/shared/warningWithoutStack.js
deleted file mode 100644
index 94a6ed68ea26a..0000000000000
--- a/packages/shared/warningWithoutStack.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
-let warningWithoutStack = () => {};
-
-if (__DEV__) {
-  warningWithoutStack = function(condition, format, ...args) {
-    if (format === undefined) {
-      throw new Error(
-        '`warningWithoutStack(condition, format, ...args)` requires a warning ' +
-          'message argument',
-      );
-    }
-    if (args.length > 8) {
-      // Check before the condition to catch violations early.
-      throw new Error(
-        'warningWithoutStack() currently supports at most 8 arguments.',
-      );
-    }
-    if (condition) {
-      return;
-    }
-    if (typeof console !== 'undefined') {
-      const argsWithFormat = args.map(item => '' + item);
-      argsWithFormat.unshift('Warning: ' + format);
-
-      // We intentionally don't use spread (or .apply) directly because it
-      // breaks IE9: https://github.com/facebook/react/issues/13610
-      Function.prototype.apply.call(console.error, console, argsWithFormat);
-    }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      let argIndex = 0;
-      const message =
-        'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
-      throw new Error(message);
-    } catch (x) {}
-  };
-}
-
-export default warningWithoutStack;
diff --git a/packages/use-subscription/README.md b/packages/use-subscription/README.md
new file mode 100644
index 0000000000000..549230211ca84
--- /dev/null
+++ b/packages/use-subscription/README.md
@@ -0,0 +1,132 @@
+# use-subscription
+
+React hook that safely manages subscriptions in concurrent mode.
+
+This utility can be used for subscriptions to a single value that are typically only read in one place and may update frequently (e.g. a component that subscribes to a geolocation API to show a dot on a map).
+
+## When should you NOT use this?
+
+Most other cases have **better long-term solutions**:
+* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
+* I/O subscriptions (e.g. notifications) that update infrequently should use a mechanism like [`react-cache`](https://github.com/facebook/react/blob/master/packages/react-cache/README.md) instead.
+* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
+
+## Limitations in concurrent mode
+
+`use-subscription` is safe to use in concurrent mode. However, [it achieves correctness by sometimes de-opting to synchronous mode](https://github.com/facebook/react/issues/13186#issuecomment-403959161), obviating the benefits of concurrent rendering. This is an inherent limitation of storing state outside of React's managed state queue and rendering in response to a change event.
+
+The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
+
+For **full compatibility** with concurrent rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
+
+## What types of subscriptions can this support?
+
+This abstraction can handle a variety of subscription types, including:
+* Event dispatchers like `HTMLInputElement`.
+* Custom pub/sub components like Relay's `FragmentSpecResolver`.
+* Observable types like RxJS `BehaviorSubject` and `ReplaySubject`. (Types like RxJS `Subject` or `Observable` are not supported, because they provide no way to read the "current" value after it has been emitted.)
+
+Note that JavaScript promises are also **not supported** because they provide no way to synchronously read the "current" value.
+
+# Installation
+
+```sh
+# Yarn
+yarn add use-subscription
+
+# NPM
+npm install use-subscription
+```
+
+# Usage
+
+To configure a subscription, you must provide two methods: `getCurrentValue` and `subscribe`.
+
+In order to avoid removing and re-adding subscriptions each time this hook is called, the parameters passed to this hook should be memoized. This can be done by wrapping the entire subscription with `useMemo()`, or by wrapping the individual callbacks with `useCallback()`.
+
+## Subscribing to event dispatchers
+
+Below is an example showing how `use-subscription` can be used to subscribe to event dispatchers such as DOM elements.
+
+```js
+import React, { useMemo } from "react";
+import { useSubscription } from "use-subscription";
+
+// In this example, "input" is an event dispatcher (e.g. an HTMLInputElement)
+// but it could be anything that emits an event and has a readable current value.
+function Example({ input }) {
+
+  // Memoize to avoid removing and re-adding subscriptions each time this hook is called.
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => input.value,
+      subscribe: callback => {
+        input.addEventListener("change", callback);
+        return () => input.removeEventListener("change", callback);
+      }
+    }),
+
+    // Re-subscribe any time our input changes
+    // (e.g. we get a new HTMLInputElement prop to subscribe to)
+    [input]
+  );
+
+  // The value returned by this hook reflects the input's current value.
+  // Our component will automatically be re-rendered when that value changes.
+  const value = useSubscription(subscription);
+
+  // Your rendered output goes here ...
+}
+```
+
+## Subscribing to observables
+
+Below are examples showing how `use-subscription` can be used to subscribe to certain types of observables (e.g. RxJS `BehaviorSubject` and `ReplaySubject`).
+
+**Note** that it is not possible to support all observable types (e.g. RxJS `Subject` or `Observable`) because some provide no way to read the "current" value after it has been emitted.
+
+### `BehaviorSubject`
+```js
+const subscription = useMemo(
+  () => ({
+    getCurrentValue: () => behaviorSubject.getValue(),
+    subscribe: callback => {
+      const subscription = behaviorSubject.subscribe(callback);
+      return () => subscription.unsubscribe();
+    }
+  }),
+
+  // Re-subscribe any time the behaviorSubject changes
+  [behaviorSubject]
+);
+
+const value = useSubscription(subscription);
+```
+
+### `ReplaySubject`
+```js
+const subscription = useMemo(
+  () => ({
+    getCurrentValue: () => {
+      let currentValue;
+      // ReplaySubject does not have a sync data getter,
+      // So we need to temporarily subscribe to retrieve the most recent value.
+      replaySubject
+        .subscribe(value => {
+          currentValue = value;
+        })
+        .unsubscribe();
+      return currentValue;
+    },
+    subscribe: callback => {
+      const subscription = replaySubject.subscribe(callback);
+      return () => subscription.unsubscribe();
+    }
+  }),
+
+  // Re-subscribe any time the replaySubject changes
+  [replaySubject]
+);
+
+const value = useSubscription(subscription);
+```
diff --git a/packages/react-events/index.js b/packages/use-subscription/index.js
similarity index 84%
rename from packages/react-events/index.js
rename to packages/use-subscription/index.js
index ef5141aefdd09..f5030786a9639 100644
--- a/packages/react-events/index.js
+++ b/packages/use-subscription/index.js
@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/ReactEvents';
+export * from './src/useSubscription';
diff --git a/packages/use-subscription/npm/index.js b/packages/use-subscription/npm/index.js
new file mode 100644
index 0000000000000..b91e9c4a14237
--- /dev/null
+++ b/packages/use-subscription/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-subscription.production.min.js');
+} else {
+  module.exports = require('./cjs/use-subscription.development.js');
+}
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
new file mode 100644
index 0000000000000..3e6138921d758
--- /dev/null
+++ b/packages/use-subscription/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "use-subscription",
+  "description": "Reusable hooks",
+  "version": "1.3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/use-subscription"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "cjs/"
+  ],
+  "dependencies": {
+    "object-assign": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "rxjs": "^5.5.6"
+  }
+}
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.internal.js b/packages/use-subscription/src/__tests__/useSubscription-test.internal.js
new file mode 100644
index 0000000000000..891a80ceb31d8
--- /dev/null
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.internal.js
@@ -0,0 +1,627 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let act;
+let useSubscription;
+let BehaviorSubject;
+let React;
+let ReactTestRenderer;
+let Scheduler;
+let ReplaySubject;
+
+describe('useSubscription', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+
+    useSubscription = require('use-subscription').useSubscription;
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
+
+    act = ReactTestRenderer.act;
+
+    BehaviorSubject = require('rxjs').BehaviorSubject;
+    ReplaySubject = require('rxjs').ReplaySubject;
+  });
+
+  function createBehaviorSubject(initialValue) {
+    const behaviorSubject = new BehaviorSubject();
+    if (initialValue) {
+      behaviorSubject.next(initialValue);
+    }
+    return behaviorSubject;
+  }
+
+  function createReplaySubject(initialValue) {
+    const replaySubject = new ReplaySubject();
+    if (initialValue) {
+      replaySubject.next(initialValue);
+    }
+    return replaySubject;
+  }
+
+  it('supports basic subscription pattern', () => {
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    }
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => source.getValue(),
+            subscribe: callback => {
+              const subscription = source.subscribe(callback);
+              return () => subscription.unsubscribe();
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    const observable = createBehaviorSubject();
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription source={observable} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(Scheduler).toHaveYielded(['default']);
+
+    // Updates while subscribed should re-render the child component
+    act(() => observable.next(123));
+    expect(Scheduler).toHaveYielded([123]);
+    act(() => observable.next('abc'));
+    expect(Scheduler).toHaveYielded(['abc']);
+
+    // Unmounting the subscriber should remove listeners
+    act(() => renderer.update(<div />));
+    act(() => observable.next(456));
+    expect(Scheduler).toFlushAndYield([]);
+  });
+
+  it('should support observable types like RxJS ReplaySubject', () => {
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    }
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => {
+              let currentValue;
+              source
+                .subscribe(tempValue => {
+                  currentValue = tempValue;
+                })
+                .unsubscribe();
+              return currentValue;
+            },
+            subscribe: callback => {
+              const subscription = source.subscribe(callback);
+              return () => subscription.unsubscribe();
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    let observable = createReplaySubject('initial');
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription source={observable} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(Scheduler).toHaveYielded(['initial']);
+    act(() => observable.next('updated'));
+    expect(Scheduler).toHaveYielded(['updated']);
+
+    Scheduler.unstable_flushAll();
+
+    // Unsetting the subscriber prop should reset subscribed values
+    observable = createReplaySubject(undefined);
+    act(() => renderer.update(<Subscription source={observable} />));
+    expect(Scheduler).toHaveYielded(['default']);
+  });
+
+  it('should unsubscribe from old sources and subscribe to new sources when memoized props change', () => {
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    }
+
+    let subscriptions = [];
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => source.getValue(),
+            subscribe: callback => {
+              subscriptions.push(source);
+              const subscription = source.subscribe(callback);
+              return () => subscription.unsubscribe();
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    const observableA = createBehaviorSubject('a-0');
+    const observableB = createBehaviorSubject('b-0');
+
+    expect(subscriptions).toHaveLength(0);
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription source={observableA} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    // Updates while subscribed should re-render the child component
+    expect(Scheduler).toHaveYielded(['a-0']);
+    expect(subscriptions).toHaveLength(1);
+    expect(subscriptions[0]).toBe(observableA);
+
+    // Unsetting the subscriber prop should reset subscribed values
+    act(() => renderer.update(<Subscription source={observableB} />));
+
+    expect(Scheduler).toHaveYielded(['b-0']);
+    expect(subscriptions).toHaveLength(2);
+    expect(subscriptions[1]).toBe(observableB);
+
+    // Updates to the old subscribable should not re-render the child component
+    act(() => observableA.next('a-1'));
+    expect(Scheduler).toFlushAndYield([]);
+
+    // Updates to the bew subscribable should re-render the child component
+    act(() => observableB.next('b-1'));
+    expect(Scheduler).toHaveYielded(['b-1']);
+
+    expect(subscriptions).toHaveLength(2);
+  });
+
+  it('should unsubscribe from old sources and subscribe to new sources when useCallback functions change', () => {
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    }
+
+    let subscriptions = [];
+
+    function Subscription({source}) {
+      const value = useSubscription({
+        getCurrentValue: React.useCallback(() => source.getValue(), [source]),
+        subscribe: React.useCallback(
+          callback => {
+            subscriptions.push(source);
+            const subscription = source.subscribe(callback);
+            return () => subscription.unsubscribe();
+          },
+          [source],
+        ),
+      });
+      return <Child value={value} />;
+    }
+
+    const observableA = createBehaviorSubject('a-0');
+    const observableB = createBehaviorSubject('b-0');
+
+    expect(subscriptions).toHaveLength(0);
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription source={observableA} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    // Updates while subscribed should re-render the child component
+    expect(Scheduler).toHaveYielded(['a-0']);
+    expect(subscriptions).toHaveLength(1);
+    expect(subscriptions[0]).toBe(observableA);
+
+    // Unsetting the subscriber prop should reset subscribed values
+    act(() => renderer.update(<Subscription source={observableB} />));
+    expect(Scheduler).toHaveYielded(['b-0']);
+    expect(subscriptions).toHaveLength(2);
+    expect(subscriptions[1]).toBe(observableB);
+
+    // Updates to the old subscribable should not re-render the child component
+    act(() => observableA.next('a-1'));
+    expect(Scheduler).toFlushAndYield([]);
+
+    // Updates to the bew subscribable should re-render the child component
+    act(() => observableB.next('b-1'));
+    expect(Scheduler).toHaveYielded(['b-1']);
+
+    expect(subscriptions).toHaveLength(2);
+  });
+
+  it('should ignore values emitted by a new subscribable until the commit phase', () => {
+    const log = [];
+
+    function Grandchild({value}) {
+      Scheduler.unstable_yieldValue('Grandchild: ' + value);
+      return null;
+    }
+
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue('Child: ' + value);
+      return <Grandchild value={value} />;
+    }
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => source.getValue(),
+            subscribe: callback => {
+              const subscription = source.subscribe(callback);
+              return () => subscription.unsubscribe();
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    class Parent extends React.Component {
+      state = {};
+
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.observed !== prevState.observed) {
+          return {
+            observed: nextProps.observed,
+          };
+        }
+
+        return null;
+      }
+
+      componentDidMount() {
+        log.push('Parent.componentDidMount');
+      }
+
+      componentDidUpdate() {
+        log.push('Parent.componentDidUpdate');
+      }
+
+      render() {
+        return <Subscription source={this.state.observed} />;
+      }
+    }
+
+    const observableA = createBehaviorSubject('a-0');
+    const observableB = createBehaviorSubject('b-0');
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Child: a-0', 'Grandchild: a-0']);
+    expect(log).toEqual(['Parent.componentDidMount']);
+
+    // Start React update, but don't finish
+    act(() => {
+      renderer.update(<Parent observed={observableB} />);
+      expect(Scheduler).toFlushAndYieldThrough(['Child: b-0']);
+      expect(log).toEqual(['Parent.componentDidMount']);
+
+      // Emit some updates from the uncommitted subscribable
+      observableB.next('b-1');
+      observableB.next('b-2');
+      observableB.next('b-3');
+    });
+
+    // Update again
+    act(() => renderer.update(<Parent observed={observableA} />));
+
+    // Flush everything and ensure that the correct subscribable is used
+    // We expect the last emitted update to be rendered (because of the commit phase value check)
+    // But the intermediate ones should be ignored,
+    // And the final rendered output should be the higher-priority observable.
+    expect(Scheduler).toHaveYielded([
+      'Grandchild: b-0',
+      'Child: b-3',
+      'Grandchild: b-3',
+      'Child: a-0',
+      'Grandchild: a-0',
+    ]);
+    expect(log).toEqual([
+      'Parent.componentDidMount',
+      'Parent.componentDidUpdate',
+      'Parent.componentDidUpdate',
+    ]);
+  });
+
+  it('should not drop values emitted between updates', () => {
+    const log = [];
+
+    function Grandchild({value}) {
+      Scheduler.unstable_yieldValue('Grandchild: ' + value);
+      return null;
+    }
+
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue('Child: ' + value);
+      return <Grandchild value={value} />;
+    }
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => source.getValue(),
+            subscribe: callback => {
+              const subscription = source.subscribe(callback);
+              return () => subscription.unsubscribe();
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    class Parent extends React.Component {
+      state = {};
+
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.observed !== prevState.observed) {
+          return {
+            observed: nextProps.observed,
+          };
+        }
+
+        return null;
+      }
+
+      componentDidMount() {
+        log.push('Parent.componentDidMount:' + this.props.observed.value);
+      }
+
+      componentDidUpdate() {
+        log.push('Parent.componentDidUpdate:' + this.props.observed.value);
+      }
+
+      render() {
+        return <Subscription source={this.state.observed} />;
+      }
+    }
+
+    const observableA = createBehaviorSubject('a-0');
+    const observableB = createBehaviorSubject('b-0');
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Child: a-0', 'Grandchild: a-0']);
+    expect(log).toEqual(['Parent.componentDidMount:a-0']);
+    log.splice(0);
+
+    // Start React update, but don't finish
+    act(() => {
+      renderer.update(<Parent observed={observableB} />);
+      expect(Scheduler).toFlushAndYieldThrough(['Child: b-0']);
+      expect(log).toEqual([]);
+
+      // Emit some updates from the old subscribable
+      observableA.next('a-1');
+      observableA.next('a-2');
+
+      // Update again
+      renderer.update(<Parent observed={observableA} />);
+
+      // Flush everything and ensure that the correct subscribable is used
+      // We expect the new subscribable to finish rendering,
+      // But then the updated values from the old subscribable should be used.
+      expect(Scheduler).toFlushAndYield([
+        'Grandchild: b-0',
+        'Child: a-2',
+        'Grandchild: a-2',
+      ]);
+      expect(log).toEqual([
+        'Parent.componentDidUpdate:b-0',
+        'Parent.componentDidUpdate:a-2',
+      ]);
+    });
+
+    // Updates from the new subscribable should be ignored.
+    log.splice(0);
+    act(() => observableB.next('b-1'));
+    expect(Scheduler).toFlushAndYield([]);
+    expect(log).toEqual([]);
+  });
+
+  it('should guard against updates that happen after unmounting', () => {
+    function Child({value = 'default'}) {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    }
+
+    function Subscription({source}) {
+      const value = useSubscription(
+        React.useMemo(
+          () => ({
+            getCurrentValue: () => source.getValue(),
+            subscribe: callback => {
+              return source.subscribe(callback);
+            },
+          }),
+          [source],
+        ),
+      );
+      return <Child value={value} />;
+    }
+
+    const eventHandler = {
+      _callbacks: [],
+      _value: true,
+      change(value) {
+        eventHandler._value = value;
+        const _callbacks = eventHandler._callbacks.slice(0);
+        _callbacks.forEach(callback => callback(value));
+      },
+      getValue() {
+        return eventHandler._value;
+      },
+      subscribe(callback) {
+        eventHandler._callbacks.push(callback);
+        return () => {
+          eventHandler._callbacks.splice(
+            eventHandler._callbacks.indexOf(callback),
+            1,
+          );
+        };
+      },
+    };
+
+    eventHandler.subscribe(value => {
+      if (value === false) {
+        renderer.unmount();
+        expect(Scheduler).toFlushAndYield([]);
+      }
+    });
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription source={eventHandler} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(Scheduler).toHaveYielded([true]);
+
+    // This event should unmount
+    eventHandler.change(false);
+  });
+
+  it('does not return a value from the previous subscription if the source is updated', () => {
+    const subscription1 = {
+      getCurrentValue: () => 'one',
+      subscribe: () => () => {},
+    };
+
+    const subscription2 = {
+      getCurrentValue: () => 'two',
+      subscribe: () => () => {},
+    };
+
+    function Subscription({subscription}) {
+      const value = useSubscription(subscription);
+      if (value !== subscription.getCurrentValue()) {
+        throw Error(
+          `expected value "${subscription.getCurrentValue()}" but got value "${value}"`,
+        );
+      }
+      return null;
+    }
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(
+        <Subscription subscription={subscription1} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    Scheduler.unstable_flushAll();
+
+    act(() => renderer.update(<Subscription subscription={subscription2} />));
+    Scheduler.unstable_flushAll();
+  });
+
+  it('should not tear if a mutation occurs during a concurrent update', () => {
+    const input = document.createElement('input');
+
+    const mutate = value => {
+      input.value = value;
+      input.dispatchEvent(new Event('change'));
+    };
+
+    const subscription = {
+      getCurrentValue: () => input.value,
+      subscribe: callback => {
+        input.addEventListener('change', callback);
+        return () => input.removeEventListener('change', callback);
+      },
+    };
+
+    const Subscriber = ({id}) => {
+      const value = useSubscription(subscription);
+      Scheduler.unstable_yieldValue(`render:${id}:${value}`);
+      return value;
+    };
+
+    act(() => {
+      // Initial render of "A"
+      mutate('A');
+      ReactTestRenderer.create(
+        <React.Fragment>
+          <Subscriber id="first" />
+          <Subscriber id="second" />
+        </React.Fragment>,
+        {unstable_isConcurrent: true},
+      );
+      expect(Scheduler).toFlushAndYield(['render:first:A', 'render:second:A']);
+
+      // Update state "A" -> "B"
+      // This update will be eagerly evaluated,
+      // so the tearing case this test is guarding against would not happen.
+      mutate('B');
+      expect(Scheduler).toFlushAndYield(['render:first:B', 'render:second:B']);
+
+      // No more pending updates
+      jest.runAllTimers();
+
+      // Partial update "B" -> "C"
+      // Interrupt with a second mutation "C" -> "D".
+      // This update will not be eagerly evaluated,
+      // but useSubscription() should eagerly close over the updated value to avoid tearing.
+      mutate('C');
+      expect(Scheduler).toFlushAndYieldThrough(['render:first:C']);
+      mutate('D');
+      expect(Scheduler).toFlushAndYield([
+        'render:second:C',
+        'render:first:D',
+        'render:second:D',
+      ]);
+
+      // No more pending updates
+      jest.runAllTimers();
+    });
+  });
+});
diff --git a/packages/use-subscription/src/useSubscription.js b/packages/use-subscription/src/useSubscription.js
new file mode 100644
index 0000000000000..4f5c6c70c509e
--- /dev/null
+++ b/packages/use-subscription/src/useSubscription.js
@@ -0,0 +1,125 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import {useDebugValue, useEffect, useState} from 'react';
+
+// Hook used for safely managing subscriptions in concurrent mode.
+//
+// In order to avoid removing and re-adding subscriptions each time this hook is called,
+// the parameters passed to this hook should be memoized in some way–
+// either by wrapping the entire params object with useMemo()
+// or by wrapping the individual callbacks with useCallback().
+export function useSubscription<Value>({
+  // (Synchronously) returns the current value of our subscription.
+  getCurrentValue,
+
+  // This function is passed an event handler to attach to the subscription.
+  // It should return an unsubscribe function that removes the handler.
+  subscribe,
+}: {|
+  getCurrentValue: () => Value,
+  subscribe: (callback: Function) => () => void,
+|}): Value {
+  // Read the current value from our subscription.
+  // When this value changes, we'll schedule an update with React.
+  // It's important to also store the hook params so that we can check for staleness.
+  // (See the comment in checkForUpdates() below for more info.)
+  const [state, setState] = useState(() => ({
+    getCurrentValue,
+    subscribe,
+    value: getCurrentValue(),
+  }));
+
+  let valueToReturn = state.value;
+
+  // If parameters have changed since our last render, schedule an update with its current value.
+  if (
+    state.getCurrentValue !== getCurrentValue ||
+    state.subscribe !== subscribe
+  ) {
+    // If the subscription has been updated, we'll schedule another update with React.
+    // React will process this update immediately, so the old subscription value won't be committed.
+    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
+    valueToReturn = getCurrentValue();
+
+    setState({
+      getCurrentValue,
+      subscribe,
+      value: valueToReturn,
+    });
+  }
+
+  // Display the current value for this hook in React DevTools.
+  useDebugValue(valueToReturn);
+
+  // It is important not to subscribe while rendering because this can lead to memory leaks.
+  // (Learn more at reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
+  // Instead, we wait until the commit phase to attach our handler.
+  //
+  // We intentionally use a passive effect (useEffect) rather than a synchronous one (useLayoutEffect)
+  // so that we don't stretch the commit phase.
+  // This also has an added benefit when multiple components are subscribed to the same source:
+  // It allows each of the event handlers to safely schedule work without potentially removing an another handler.
+  // (Learn more at https://codesandbox.io/s/k0yvr5970o)
+  useEffect(() => {
+    let didUnsubscribe = false;
+
+    const checkForUpdates = () => {
+      // It's possible that this callback will be invoked even after being unsubscribed,
+      // if it's removed as a result of a subscription event/update.
+      // In this case, React will log a DEV warning about an update from an unmounted component.
+      // We can avoid triggering that warning with this check.
+      if (didUnsubscribe) {
+        return;
+      }
+
+      // We use a state updater function to avoid scheduling work for a stale source.
+      // However it's important to eagerly read the currently value,
+      // so that all scheduled work shares the same value (in the event of multiple subscriptions).
+      // This avoids visual "tearing" when a mutation happens during a (concurrent) render.
+      const value = getCurrentValue();
+
+      setState(prevState => {
+        // Ignore values from stale sources!
+        // Since we subscribe an unsubscribe in a passive effect,
+        // it's possible that this callback will be invoked for a stale (previous) subscription.
+        // This check avoids scheduling an update for that stale subscription.
+        if (
+          prevState.getCurrentValue !== getCurrentValue ||
+          prevState.subscribe !== subscribe
+        ) {
+          return prevState;
+        }
+
+        // Some subscriptions will auto-invoke the handler, even if the value hasn't changed.
+        // If the value hasn't changed, no update is needed.
+        // Return state as-is so React can bail out and avoid an unnecessary render.
+        if (prevState.value === value) {
+          return prevState;
+        }
+
+        return {...prevState, value};
+      });
+    };
+    const unsubscribe = subscribe(checkForUpdates);
+
+    // Because we're subscribing in a passive effect,
+    // it's possible that an update has occurred between render and our effect handler.
+    // Check for this and schedule an update if work has occurred.
+    checkForUpdates();
+
+    return () => {
+      didUnsubscribe = true;
+      unsubscribe();
+    };
+  }, [getCurrentValue, subscribe]);
+
+  // Return the current value for our caller to use while rendering.
+  return valueToReturn;
+}
diff --git a/scripts/babel/__tests__/wrap-warning-with-env-check-test.js b/scripts/babel/__tests__/wrap-warning-with-env-check-test.js
deleted file mode 100644
index def02dd3d0da9..0000000000000
--- a/scripts/babel/__tests__/wrap-warning-with-env-check-test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * 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.
- */
-/* eslint-disable quotes */
-'use strict';
-
-let babel = require('babel-core');
-let wrapWarningWithEnvCheck = require('../wrap-warning-with-env-check');
-
-function transform(input) {
-  return babel.transform(input, {
-    plugins: [wrapWarningWithEnvCheck],
-  }).code;
-}
-
-function compare(input, output) {
-  const compiled = transform(input);
-  expect(compiled).toEqual(output);
-}
-
-let oldEnv;
-
-describe('wrap-warning-with-env-check', () => {
-  beforeEach(() => {
-    oldEnv = process.env.NODE_ENV;
-    process.env.NODE_ENV = '';
-  });
-
-  afterEach(() => {
-    process.env.NODE_ENV = oldEnv;
-  });
-
-  it('should wrap warning calls', () => {
-    compare(
-      "warning(condition, 'a %s b', 'c');",
-      "__DEV__ ? !condition ? warning(false, 'a %s b', 'c') : void 0 : void 0;"
-    );
-  });
-
-  it('should wrap warningWithoutStack calls', () => {
-    compare(
-      "warningWithoutStack(condition, 'a %s b', 'c');",
-      "__DEV__ ? !condition ? warningWithoutStack(false, 'a %s b', 'c') : void 0 : void 0;"
-    );
-  });
-
-  it('should not wrap invariant calls', () => {
-    compare(
-      "invariant(condition, 'a %s b', 'c');",
-      "invariant(condition, 'a %s b', 'c');"
-    );
-  });
-});
diff --git a/scripts/babel/transform-object-assign-require.js b/scripts/babel/transform-object-assign-require.js
index b16e8a047ede2..79c7421c5e2ef 100644
--- a/scripts/babel/transform-object-assign-require.js
+++ b/scripts/babel/transform-object-assign-require.js
@@ -7,12 +7,16 @@
 
 'use strict';
 
+const helperModuleImports = require('@babel/helper-module-imports');
+
 module.exports = function autoImporter(babel) {
   function getAssignIdent(path, file, state) {
     if (state.id) {
       return state.id;
     }
-    state.id = file.addImport('object-assign', 'default', 'assign');
+    state.id = helperModuleImports.addDefault(path, 'object-assign', {
+      nameHint: 'assign',
+    });
     return state.id;
   }
 
diff --git a/scripts/babel/transform-prevent-infinite-loops.js b/scripts/babel/transform-prevent-infinite-loops.js
index b0f637830ee0b..ac8ef57b8a40d 100644
--- a/scripts/babel/transform-prevent-infinite-loops.js
+++ b/scripts/babel/transform-prevent-infinite-loops.js
@@ -22,10 +22,10 @@ module.exports = ({types: t, template}) => {
   // We set a global so that we can later fail the test
   // even if the error ends up being caught by the code.
   const buildGuard = template(`
-    if (ITERATOR++ > MAX_ITERATIONS) {
+    if (%%iterator%%++ > %%maxIterations%%) {
       global.infiniteLoopError = new RangeError(
         'Potential infinite loop: exceeded ' +
-        MAX_ITERATIONS +
+        %%maxIterations%% +
         ' iterations.'
       );
       throw global.infiniteLoopError;
@@ -36,10 +36,18 @@ module.exports = ({types: t, template}) => {
     visitor: {
       'WhileStatement|ForStatement|DoWhileStatement': (path, file) => {
         const filename = file.file.opts.filename;
-        const MAX_ITERATIONS =
-          filename.indexOf('__tests__') === -1
-            ? MAX_SOURCE_ITERATIONS
-            : MAX_TEST_ITERATIONS;
+        const maxIterations = t.logicalExpression(
+          '||',
+          t.memberExpression(
+            t.identifier('global'),
+            t.identifier('__MAX_ITERATIONS__')
+          ),
+          t.numericLiteral(
+            filename.indexOf('__tests__') === -1
+              ? MAX_SOURCE_ITERATIONS
+              : MAX_TEST_ITERATIONS
+          )
+        );
 
         // An iterator that is incremented with each iteration
         const iterator = path.scope.parent.generateUidIdentifier('loopIt');
@@ -50,8 +58,8 @@ module.exports = ({types: t, template}) => {
         });
         // If statement and throw error if it matches our criteria
         const guard = buildGuard({
-          ITERATOR: iterator,
-          MAX_ITERATIONS: t.numericLiteral(MAX_ITERATIONS),
+          iterator,
+          maxIterations,
         });
         // No block statement e.g. `while (1) 1;`
         if (!path.get('body').isBlockStatement()) {
diff --git a/scripts/babel/transform-replace-console-calls.js b/scripts/babel/transform-replace-console-calls.js
new file mode 100644
index 0000000000000..7c3e43930aba2
--- /dev/null
+++ b/scripts/babel/transform-replace-console-calls.js
@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+'use strict';
+
+const helperModuleImports = require('@babel/helper-module-imports');
+
+module.exports = function replaceConsoleCalls(babel) {
+  let consoleErrors = new WeakMap();
+  function getConsoleError(path, file) {
+    if (!consoleErrors.has(file)) {
+      consoleErrors.set(
+        file,
+        helperModuleImports.addNamed(
+          path,
+          'error',
+          'shared/consoleWithStackDev',
+          {nameHint: 'consoleError'}
+        )
+      );
+    }
+    return babel.types.cloneDeep(consoleErrors.get(file));
+  }
+
+  let consoleWarns = new WeakMap();
+  function getConsoleWarn(path, file) {
+    if (!consoleWarns.has(file)) {
+      consoleWarns.set(
+        file,
+        helperModuleImports.addNamed(
+          path,
+          'warn',
+          'shared/consoleWithStackDev',
+          {nameHint: 'consoleWarn'}
+        )
+      );
+    }
+    return babel.types.cloneDeep(consoleWarns.get(file));
+  }
+
+  return {
+    visitor: {
+      CallExpression: function(path, pass) {
+        if (path.node.callee.type !== 'MemberExpression') {
+          return;
+        }
+        if (path.node.callee.property.type !== 'Identifier') {
+          // Don't process calls like console['error'](...)
+          // because they serve as an escape hatch.
+          return;
+        }
+        if (path.get('callee').matchesPattern('console.error')) {
+          if (this.opts.shouldError) {
+            throw path.buildCodeFrameError(
+              "This module has no access to the React object, so it can't " +
+                'use console.error() with automatically appended stack. ' +
+                "As a workaround, you can use console['error'] which won't " +
+                'be transformed.'
+            );
+          }
+          const id = getConsoleError(path, pass.file);
+          path.node.callee = id;
+        }
+        if (path.get('callee').matchesPattern('console.warn')) {
+          if (this.opts.shouldError) {
+            throw path.buildCodeFrameError(
+              "This module has no access to the React object, so it can't " +
+                'use console.warn() with automatically appended stack. ' +
+                "As a workaround, you can use console['warn'] which won't " +
+                'be transformed.'
+            );
+          }
+          const id = getConsoleWarn(path, pass.file);
+          path.node.callee = id;
+        }
+      },
+    },
+  };
+};
diff --git a/scripts/babel/wrap-warning-with-env-check.js b/scripts/babel/wrap-warning-with-env-check.js
deleted file mode 100644
index f40d95d9a430d..0000000000000
--- a/scripts/babel/wrap-warning-with-env-check.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * 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.
- */
-'use strict';
-
-module.exports = function(babel, options) {
-  const t = babel.types;
-
-  const DEV_EXPRESSION = t.identifier('__DEV__');
-
-  const SEEN_SYMBOL = Symbol('expression.seen');
-
-  return {
-    visitor: {
-      CallExpression: {
-        exit: function(path) {
-          const node = path.node;
-
-          // Ignore if it's already been processed
-          if (node[SEEN_SYMBOL]) {
-            return;
-          }
-
-          if (
-            path.get('callee').isIdentifier({name: 'warning'}) ||
-            path.get('callee').isIdentifier({name: 'warningWithoutStack'})
-          ) {
-            // Turns this code:
-            //
-            // warning(condition, argument, argument);
-            //
-            // into this:
-            //
-            // if (__DEV__) {
-            //   if (!condition) {
-            //     warning(false, argument, argument);
-            //   }
-            // }
-            //
-            // The goal is to strip out warning calls entirely in production
-            // and to avoid evaluating the arguments in development.
-            const condition = node.arguments[0];
-            const newNode = t.callExpression(
-              node.callee,
-              [t.booleanLiteral(false)].concat(node.arguments.slice(1))
-            );
-            newNode[SEEN_SYMBOL] = true;
-            path.replaceWith(
-              t.ifStatement(
-                DEV_EXPRESSION,
-                t.blockStatement([
-                  t.ifStatement(
-                    t.unaryExpression('!', condition),
-                    t.expressionStatement(newNode)
-                  ),
-                ])
-              )
-            );
-          }
-        },
-      },
-    },
-  };
-};
diff --git a/scripts/circleci/pack_and_store_devtools_artifacts.sh b/scripts/circleci/pack_and_store_devtools_artifacts.sh
new file mode 100755
index 0000000000000..664440fd834f5
--- /dev/null
+++ b/scripts/circleci/pack_and_store_devtools_artifacts.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+
+set -e
+
+mkdir -p build/devtools
+
+cd packages/react-devtools
+npm pack
+mv ./react-devtools*.tgz ../../build/devtools/
+
+cd ../react-devtools-core
+npm pack
+mv ./react-devtools-core*.tgz ../../build/devtools/
+
+cd ../react-devtools-inline
+npm pack
+mv ./react-devtools-inline*.tgz ../../build/devtools/
+
+cd ../react-devtools-extensions
+yarn build
+mv ./chrome/build/ReactDevTools.zip ../../build/devtools/chrome-extension.zip
+mv ./firefox/build/ReactDevTools.zip ../../build/devtools/firefox-extension.zip
+
+# Compress all DevTools artifacts into a single tarball for easy download
+cd ../../build/devtools
+tar -zcvf ../devtools.tgz .
\ No newline at end of file
diff --git a/scripts/error-codes/README.md b/scripts/error-codes/README.md
index bad3c0fbfb1ad..7d0988660f534 100644
--- a/scripts/error-codes/README.md
+++ b/scripts/error-codes/README.md
@@ -10,6 +10,6 @@ provide a better debugging support in production. Check out the blog post
 - [`extract-errors.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js)
   is an node script that traverses our codebase and updates `codes.json`. You
   can test it by running `yarn extract-errors`.
-- [`transform-error-messages`](https://github.com/facebook/react/blob/master/scripts/error-codes/transform-error-messages)
+- [`transform-error-messages`](https://github.com/facebook/react/blob/master/scripts/error-codes/transform-error-messages.js)
   is a Babel pass that rewrites error messages to IDs for a production
   (minified) build.
diff --git a/scripts/error-codes/Types.js b/scripts/error-codes/Types.js
index ff21bce639414..d9ddadbccd7e7 100644
--- a/scripts/error-codes/Types.js
+++ b/scripts/error-codes/Types.js
@@ -8,5 +8,5 @@
  */
 'use strict';
 
-/*:: export type ErrorMap = { [id: string]: string; }; */
+/*:: export type ErrorMap = { [id: string]: string, ... }; */
 
diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index 3887fcc15bc82..f93b31a659dd2 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -1,107 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
-"import _ReactError from 'shared/ReactError';
+"import invariant from 'shared/invariant';
 
-import invariant from 'shared/invariant';
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/(function () {
-  if (!condition) {
-    throw _ReactError(\`This is not a real error message.\`);
-  }
-})();"
+/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
+if (!condition) {
+  throw Error(\\"This is not a real error message.\\");
+}"
 `;
 
 exports[`error transform should handle escaped characters 1`] = `
-"import _ReactError from 'shared/ReactError';
+"import invariant from 'shared/invariant';
 
-import invariant from 'shared/invariant';
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/(function () {
-  if (!condition) {
-    throw _ReactError(\`What's up?\`);
-  }
-})();"
-`;
-
-exports[`error transform should only add \`ReactError\` and \`ReactErrorProd\` once each 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
-import invariant from 'shared/invariant';
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(\`Do not override existing functions.\`);
-    } else {
-      throw _ReactErrorProd(16);
-    }
-  }
-})();
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(\`Do not override existing functions.\`);
-    } else {
-      throw _ReactErrorProd(16);
-    }
-  }
-})();"
+/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
+if (!condition) {
+  throw Error(\\"What's up?\\");
+}"
 `;
 
 exports[`error transform should replace simple invariant calls 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(\`Do not override existing functions.\`);
-    } else {
-      throw _ReactErrorProd(16);
-    }
+
+if (!condition) {
+  {
+    throw Error(__DEV__ ? \\"Do not override existing functions.\\" : _formatProdErrorMessage(16));
   }
-})();"
+}"
 `;
 
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(\`Expected a component class, got \${Foo}.\${Bar}\`);
-    } else {
-      throw _ReactErrorProd(18, Foo, Bar);
-    }
+
+if (!condition) {
+  {
+    throw Error(__DEV__ ? \\"Expected a component class, got \\" + Foo + \\".\\" + Bar : _formatProdErrorMessage(18, Foo, Bar));
   }
-})();"
+}"
 `;
 
 exports[`error transform should support invariant calls with args 1`] = `
-"import _ReactErrorProd from 'shared/ReactErrorProd';
-import _ReactError from 'shared/ReactError';
-
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
-(function () {
-  if (!condition) {
-    if (__DEV__) {
-      throw _ReactError(\`Expected \${foo} target to be an array; got \${bar}\`);
-    } else {
-      throw _ReactErrorProd(7, foo, bar);
-    }
+
+if (!condition) {
+  {
+    throw Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));
   }
-})();"
+}"
 `;
 
 exports[`error transform should support noMinify option 1`] = `
-"import _ReactError from 'shared/ReactError';
+"import invariant from 'shared/invariant';
 
-import invariant from 'shared/invariant';
-(function () {
-  if (!condition) {
-    throw _ReactError(\`Do not override existing functions.\`);
-  }
-})();"
+if (!condition) {
+  throw Error(\\"Do not override existing functions.\\");
+}"
 `;
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index f7caa79c30689..4da00ac656b95 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -7,7 +7,7 @@
 /* eslint-disable quotes */
 'use strict';
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let devExpressionWithCodes = require('../transform-error-messages');
 
 function transform(input, options = {}) {
@@ -37,14 +37,13 @@ invariant(condition, 'Do not override existing functions.');
     ).toMatchSnapshot();
   });
 
-  it('should only add `ReactError` and `ReactErrorProd` once each', () => {
-    expect(
+  it('should throw if invariant is not in an expression statement', () => {
+    expect(() => {
       transform(`
 import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-invariant(condition, 'Do not override existing functions.');
-`)
-    ).toMatchSnapshot();
+cond && invariant(condition, 'Do not override existing functions.');
+`);
+    }).toThrow('invariant() cannot be called from expression context');
   });
 
   it('should support invariant calls with args', () => {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index c2b8d3a976ff3..f0f93e9b6949d 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -155,7 +155,7 @@
   "153": "Resuming work not yet implemented.",
   "154": "We should always have pending or current props. This error is likely caused by a bug in React. Please file an issue.",
   "155": "An indeterminate component should never have mounted. This error is likely caused by a bug in React. Please file an issue.",
-  "156": "Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.",
+  "156": "Unknown unit of work tag (%s). This error is likely caused by a bug in React. Please file an issue.",
   "157": "Invalid type of work. This error is likely caused by a bug in React. Please file an issue.",
   "158": "There must be pending props for an initial mount. This error is likely caused by a bug in React. Please file an issue.",
   "159": "There should always be pending or memoized props. This error is likely caused by a bug in React. Please file an issue.",
@@ -297,11 +297,11 @@
   "296": "Log of yielded values is not empty. Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.",
   "297": "The matcher `unstable_toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)",
   "298": "Hooks can only be called inside the body of a function component.",
-  "299": "%s(...): Target container is not a DOM element.",
+  "299": "createRoot(...): Target container is not a DOM element.",
   "300": "Rendered fewer hooks than expected. This may be caused by an accidental early return statement.",
   "301": "Too many re-renders. React limits the number of renders to prevent an infinite loop.",
   "302": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at http://fb.me/react-profiling",
-  "303": "suspense fallback not found, something is broken",
+  "303": "ReactDOMServer did not find an internal fallback frame for Suspense. This is a bug in React. Please file an issue.",
   "304": "Maximum number of concurrent React renderers exceeded. This can happen if you are not properly destroying the Readable provided by React. Ensure that you call .destroy() on it if you no longer want to read from it, and did not read to the end. If you use .pipe() this should be automatic.",
   "305": "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue.",
   "306": "Element type is invalid. Received a promise that resolves to: %s. Lazy element type must resolve to a class or function.%s",
@@ -333,5 +333,16 @@
   "332": "Unknown priority level.",
   "333": "This should have a parent host component initialized. This error is likely caused by a bug in React. Please file an issue.",
   "334": "accumulate(...): Accumulated items must not be null or undefined.",
-  "335": "ReactDOMServer does not yet support the event API."
+  "335": "ReactDOMServer does not yet support the event API.",
+  "336": "The \"%s\" event responder cannot be used via the \"useEvent\" hook.",
+  "337": "An invalid event responder was provided to host component",
+  "338": "ReactDOMServer does not yet support the fundamental API.",
+  "339": "An invalid value was used as an event listener. Expect one or many event listeners created via React.unstable_useResponder().",
+  "340": "Threw in newly mounted dehydrated component. This is likely a bug in React. Please file an issue.",
+  "341": "We just came from a parent so we must have had a parent. This is a bug in React.",
+  "342": "A React component suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
+  "343": "ReactDOMServer does not yet support scope components.",
+  "344": "Expected prepareToHydrateHostSuspenseInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
+  "345": "Root did not complete. This is a bug in React.",
+  "346": "An event responder context was used outside of an event cycle."
 }
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index 39e70391481a1..d82b4e68db15f 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -9,7 +9,7 @@
 const babylon = require('babylon');
 const fs = require('fs');
 const path = require('path');
-const traverse = require('babel-traverse').default;
+const traverse = require('@babel/traverse').default;
 const evalToString = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index f0331579270e1..6ebb68731f860 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -9,6 +9,7 @@
 const fs = require('fs');
 const evalToString = require('../shared/evalToString');
 const invertObject = require('./invertObject');
+const helperModuleImports = require('@babel/helper-module-imports');
 
 module.exports = function(babel) {
   const t = babel.types;
@@ -28,11 +29,11 @@ module.exports = function(babel) {
           // into this:
           //
           // if (!condition) {
-          //   if (__DEV__) {
-          //     throw ReactError(`A ${adj} message that contains ${noun}`);
-          //   } else {
-          //     throw ReactErrorProd(ERR_CODE, adj, noun);
-          //   }
+          //   throw Error(
+          //     __DEV__
+          //       ? `A ${adj} message that contains ${noun}`
+          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
+          //   );
           // }
           //
           // where ERR_CODE is an error code: a unique identifier (a number
@@ -45,32 +46,36 @@ module.exports = function(babel) {
             .split('%s')
             .map(raw => t.templateElement({raw, cooked: String.raw({raw})}));
 
-          // Import ReactError
-          const reactErrorIdentfier = file.addImport(
-            'shared/ReactError',
-            'default',
-            'ReactError'
-          );
-
           // Outputs:
-          //   throw ReactError(`A ${adj} message that contains ${noun}`);
-          const devThrow = t.throwStatement(
-            t.callExpression(reactErrorIdentfier, [
-              t.templateLiteral(errorMsgQuasis, errorMsgExpressions),
-            ])
+          //   `A ${adj} message that contains ${noun}`;
+          const devMessage = t.templateLiteral(
+            errorMsgQuasis,
+            errorMsgExpressions
           );
 
+          const parentStatementPath = path.parentPath;
+          if (parentStatementPath.type !== 'ExpressionStatement') {
+            throw path.buildCodeFrameError(
+              'invariant() cannot be called from expression context. Move ' +
+                'the call to its own statement.'
+            );
+          }
+
           if (noMinify) {
             // Error minification is disabled for this build.
             //
             // Outputs:
             //   if (!condition) {
-            //     throw ReactError(`A ${adj} message that contains ${noun}`);
+            //     throw Error(`A ${adj} message that contains ${noun}`);
             //   }
-            path.replaceWith(
+            parentStatementPath.replaceWith(
               t.ifStatement(
                 t.unaryExpression('!', condition),
-                t.blockStatement([devThrow])
+                t.blockStatement([
+                  t.throwStatement(
+                    t.callExpression(t.identifier('Error'), [devMessage])
+                  ),
+                ])
               )
             );
             return;
@@ -92,15 +97,19 @@ module.exports = function(babel) {
             // Outputs:
             //   /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
             //   if (!condition) {
-            //     throw ReactError(`A ${adj} message that contains ${noun}`);
+            //     throw Error(`A ${adj} message that contains ${noun}`);
             //   }
-            path.replaceWith(
+            parentStatementPath.replaceWith(
               t.ifStatement(
                 t.unaryExpression('!', condition),
-                t.blockStatement([devThrow])
+                t.blockStatement([
+                  t.throwStatement(
+                    t.callExpression(t.identifier('Error'), [devMessage])
+                  ),
+                ])
               )
             );
-            path.addComment(
+            parentStatementPath.addComment(
               'leading',
               'FIXME (minify-errors-in-prod): Unminified error message in production build!'
             );
@@ -109,38 +118,42 @@ module.exports = function(babel) {
           prodErrorId = parseInt(prodErrorId, 10);
 
           // Import ReactErrorProd
-          const reactErrorProdIdentfier = file.addImport(
-            'shared/ReactErrorProd',
-            'default',
-            'ReactErrorProd'
+          const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
+            path,
+            'shared/formatProdErrorMessage',
+            {nameHint: 'formatProdErrorMessage'}
           );
 
           // Outputs:
-          //   throw ReactErrorProd(ERR_CODE, adj, noun);
-          const prodThrow = t.throwStatement(
-            t.callExpression(reactErrorProdIdentfier, [
-              t.numericLiteral(prodErrorId),
-              ...errorMsgExpressions,
-            ])
+          //   formatProdErrorMessage(ERR_CODE, adj, noun);
+          const prodMessage = t.callExpression(
+            formatProdErrorMessageIdentifier,
+            [t.numericLiteral(prodErrorId), ...errorMsgExpressions]
           );
 
           // Outputs:
-          //   if (!condition) {
-          //     if (__DEV__) {
-          //       throw ReactError(`A ${adj} message that contains ${noun}`);
-          //     } else {
-          //       throw ReactErrorProd(ERR_CODE, adj, noun);
-          //     }
-          //   }
-          path.replaceWith(
+          // if (!condition) {
+          //   throw Error(
+          //     __DEV__
+          //       ? `A ${adj} message that contains ${noun}`
+          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
+          //   );
+          // }
+          parentStatementPath.replaceWith(
             t.ifStatement(
               t.unaryExpression('!', condition),
               t.blockStatement([
-                t.ifStatement(
-                  DEV_EXPRESSION,
-                  t.blockStatement([devThrow]),
-                  t.blockStatement([prodThrow])
-                ),
+                t.blockStatement([
+                  t.throwStatement(
+                    t.callExpression(t.identifier('Error'), [
+                      t.conditionalExpression(
+                        DEV_EXPRESSION,
+                        devMessage,
+                        prodMessage
+                      ),
+                    ])
+                  ),
+                ]),
               ])
             )
           );
diff --git a/scripts/eslint-rules/__tests__/warning-and-invariant-args-test.internal.js b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
similarity index 52%
rename from scripts/eslint-rules/__tests__/warning-and-invariant-args-test.internal.js
rename to scripts/eslint-rules/__tests__/invariant-args-test.internal.js
index 3bf12ae0282f9..eb84d8dd45a96 100644
--- a/scripts/eslint-rules/__tests__/warning-and-invariant-args-test.internal.js
+++ b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
@@ -9,33 +9,31 @@
 
 'use strict';
 
-const rule = require('../warning-and-invariant-args');
+const rule = require('../invariant-args');
 const RuleTester = require('eslint').RuleTester;
 const ruleTester = new RuleTester();
 
-ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {
+ruleTester.run('eslint-rules/invariant-args', rule, {
   valid: [
-    "warning(true, 'hello, world');",
-    "warning(true, 'expected %s, got %s', 42, 24);",
     'arbitraryFunction(a, b)',
     // These messages are in the error code map
     "invariant(false, 'Do not override existing functions.')",
-    "invariant(false, '%s(...): Target container is not a DOM element.', str)",
+    "invariant(false, 'createRoot(...): Target container is not a DOM element.')",
   ],
   invalid: [
     {
-      code: "warning('hello, world');",
+      code: "invariant('hello, world');",
       errors: [
         {
-          message: 'warning takes at least two arguments',
+          message: 'invariant takes at least two arguments',
         },
       ],
     },
     {
-      code: 'warning(true, null);',
+      code: 'invariant(true, null);',
       errors: [
         {
-          message: 'The second argument to warning must be a string literal',
+          message: 'The second argument to invariant must be a string literal',
         },
       ],
     },
@@ -47,26 +45,6 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {
         },
       ],
     },
-    {
-      code: "warning(true, 'expected %s, got %s');",
-      errors: [
-        {
-          message:
-            'Expected 4 arguments in call to warning based on the number of ' +
-            '"%s" substitutions, but got 2',
-        },
-      ],
-    },
-    {
-      code: "warning(true, 'foo is a bar under foobar', 'junk argument');",
-      errors: [
-        {
-          message:
-            'Expected 2 arguments in call to warning based on the number of ' +
-            '"%s" substitutions, but got 3',
-        },
-      ],
-    },
     {
       code: "invariant(true, 'error!');",
       errors: [
@@ -78,22 +56,12 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {
       ],
     },
     {
-      code: "warning(true, 'error!');",
+      code: "invariant(true, '%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
       errors: [
         {
           message:
-            'The warning format should be able to uniquely identify this ' +
-            'warning. Please, use a more descriptive format than: error!',
-        },
-      ],
-    },
-    {
-      code: "warning(true, '%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
-      errors: [
-        {
-          message:
-            'The warning format should be able to uniquely identify this ' +
-            'warning. Please, use a more descriptive format than: ' +
+            'The invariant format should be able to uniquely identify this ' +
+            'invariant. Please, use a more descriptive format than: ' +
             '%s %s, %s %s: %s (%s)',
         },
       ],
diff --git a/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js b/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
new file mode 100644
index 0000000000000..c2d0d55727316
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
@@ -0,0 +1,251 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../no-production-logging');
+const RuleTester = require('eslint').RuleTester;
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-production-logging', rule, {
+  valid: [
+    {
+      code: `
+        if (__DEV__) {
+          console.error('Oh no');
+        }
+      `,
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.error('Hello %s', foo)
+        }
+      `,
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.error('Hello %s %s', foo, bar)
+        }
+      `,
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.warn('Oh no');
+        }
+      `,
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.warn('Oh no');
+        }
+      `,
+    },
+    // This is OK too because it's wrapped outside:
+    {
+      code: `
+        if (__DEV__) {
+          if (potato) {
+            while (true) {
+              console.error('Oh no');
+            }
+          }
+        }`,
+    },
+    {
+      code: `
+        var f;
+        if (__DEV__) {
+          f = function() {
+            if (potato) {
+              while (true) {
+                console.error('Oh no');
+              }
+            }
+          };
+        }`,
+    },
+    // Don't do anything with these:
+    {
+      code: 'normalFunctionCall(test);',
+    },
+    {
+      code: 'invariant(test);',
+    },
+    {
+      code: `
+        if (__DEV__) {
+          normalFunctionCall(test);
+        }
+      `,
+    },
+    // This is OK because of the outer if.
+    {
+      code: `
+        if (__DEV__) {
+          if (foo) {
+            if (__DEV__) {
+            } else {
+              console.error('Oh no');
+            }
+          }
+        }`,
+    },
+    {
+      // This is an escape hatch that makes it fire in production.
+      code: `
+        console['error']('Oh no');
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: "console.error('Oh no');",
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: "console.warn('Oh no');",
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: "console.warn('Oh no')",
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (potato) {
+          console.warn('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__ || potato && true) {
+          console.error('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (banana && __DEV__ && potato && kitten) {
+          console.error('Oh no');
+        }
+      `,
+      // Technically this code is valid but we prefer
+      // explicit standalone __DEV__ blocks that stand out.
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (!__DEV__) {
+          console.error('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (foo || x && __DEV__) {
+          console.error('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+        } else {
+          console.error('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+        } else {
+          if (__DEV__) {
+          } else {
+            console.error('Oh no');
+          }
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.log('Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: 'Unexpected use of console',
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+          console.log.apply(console, 'Oh no');
+        }
+      `,
+      errors: [
+        {
+          message: 'Unexpected use of console',
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/__tests__/warning-args-test.internal.js b/scripts/eslint-rules/__tests__/warning-args-test.internal.js
new file mode 100644
index 0000000000000..66f51fc717c5b
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/warning-args-test.internal.js
@@ -0,0 +1,92 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../warning-args');
+const RuleTester = require('eslint').RuleTester;
+const ruleTester = new RuleTester();
+
+ruleTester.run('eslint-rules/warning-args', rule, {
+  valid: [
+    "console.error('hello, world');",
+    "console.error('expected %s, got %s', 42, 24);",
+    'arbitraryFunction(a, b)',
+  ],
+  invalid: [
+    {
+      code: 'console.error(null);',
+      errors: [
+        {
+          message:
+            'The first argument to console.error must be a string literal',
+        },
+      ],
+    },
+    {
+      code: 'console.warn(null);',
+      errors: [
+        {
+          message:
+            'The first argument to console.warn must be a string literal',
+        },
+      ],
+    },
+    {
+      code: 'var g = 5; console.error(g);',
+      errors: [
+        {
+          message:
+            'The first argument to console.error must be a string literal',
+        },
+      ],
+    },
+    {
+      code: "console.error('expected %s, got %s');",
+      errors: [
+        {
+          message:
+            'Expected 3 arguments in call to console.error based on the number of ' +
+            '"%s" substitutions, but got 1',
+        },
+      ],
+    },
+    {
+      code: "console.error('foo is a bar under foobar', 'junk argument');",
+      errors: [
+        {
+          message:
+            'Expected 1 arguments in call to console.error based on the number of ' +
+            '"%s" substitutions, but got 2',
+        },
+      ],
+    },
+    {
+      code: "console.error('error!');",
+      errors: [
+        {
+          message:
+            'The console.error format should be able to uniquely identify this ' +
+            'warning. Please, use a more descriptive format than: error!',
+        },
+      ],
+    },
+    {
+      code: "console.error('%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
+      errors: [
+        {
+          message:
+            'The console.error format should be able to uniquely identify this ' +
+            'warning. Please, use a more descriptive format than: ' +
+            '%s %s, %s %s: %s (%s)',
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 5864f614d7711..06045a96c9e92 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -4,6 +4,8 @@ module.exports = {
   rules: {
     'no-primitive-constructors': require('./no-primitive-constructors'),
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
-    'warning-and-invariant-args': require('./warning-and-invariant-args'),
+    'warning-args': require('./warning-args'),
+    'invariant-args': require('./invariant-args'),
+    'no-production-logging': require('./no-production-logging'),
   },
 };
diff --git a/scripts/eslint-rules/warning-and-invariant-args.js b/scripts/eslint-rules/invariant-args.js
similarity index 76%
rename from scripts/eslint-rules/warning-and-invariant-args.js
rename to scripts/eslint-rules/invariant-args.js
index 36fb71ed3b1a8..4f1b336f600de 100644
--- a/scripts/eslint-rules/warning-and-invariant-args.js
+++ b/scripts/eslint-rules/invariant-args.js
@@ -43,12 +43,9 @@ module.exports = function(context) {
     CallExpression: function(node) {
       // This could be a little smarter by checking context.getScope() to see
       // how warning/invariant was defined.
-      const isWarningOrInvariant =
-        node.callee.type === 'Identifier' &&
-        (node.callee.name === 'warning' ||
-          node.callee.name === 'warningWithoutStack' ||
-          node.callee.name === 'invariant');
-      if (!isWarningOrInvariant) {
+      const isInvariant =
+        node.callee.type === 'Identifier' && node.callee.name === 'invariant';
+      if (!isInvariant) {
         return;
       }
       if (node.arguments.length < 2) {
@@ -90,19 +87,17 @@ module.exports = function(context) {
         );
       }
 
-      if (node.callee.name === 'invariant') {
-        if (!messages.has(format)) {
-          context.report(
-            node,
-            'Error message does not have a corresponding production ' +
-              'error code.\n\n' +
-              'Run `yarn extract-errors` to add the message to error code ' +
-              'map, so it can be stripped from the production builds. ' +
-              "Alternatively, if you're updating an existing error " +
-              'message, you can modify ' +
-              '`scripts/error-codes/codes.json` directly.'
-          );
-        }
+      if (!messages.has(format)) {
+        context.report(
+          node,
+          'Error message does not have a corresponding production ' +
+            'error code.\n\n' +
+            'Run `yarn extract-errors` to add the message to error code ' +
+            'map, so it can be stripped from the production builds. ' +
+            "Alternatively, if you're updating an existing error " +
+            'message, you can modify ' +
+            '`scripts/error-codes/codes.json` directly.'
+        );
       }
     },
   };
diff --git a/scripts/eslint-rules/no-production-logging.js b/scripts/eslint-rules/no-production-logging.js
new file mode 100644
index 0000000000000..c6a134951262e
--- /dev/null
+++ b/scripts/eslint-rules/no-production-logging.js
@@ -0,0 +1,83 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+module.exports = function(context) {
+  function isInDEVBlock(node) {
+    let done = false;
+    while (!done) {
+      let parent = node.parent;
+      if (!parent) {
+        return false;
+      }
+      if (
+        parent.type === 'IfStatement' &&
+        node === parent.consequent &&
+        parent.test.type === 'Identifier' &&
+        // This is intentionally strict so we can
+        // see blocks of DEV-only code at once.
+        parent.test.name === '__DEV__'
+      ) {
+        return true;
+      }
+      node = parent;
+    }
+  }
+
+  function reportWrapInDEV(node) {
+    context.report({
+      node: node,
+      message: `Wrap console.{{identifier}}() in an "if (__DEV__) {}" check`,
+      data: {
+        identifier: node.property.name,
+      },
+      fix: function(fixer) {
+        return [
+          fixer.insertTextBefore(node.parent, `if (__DEV__) {`),
+          fixer.insertTextAfter(node.parent, '}'),
+        ];
+      },
+    });
+  }
+
+  function reportUnexpectedConsole(node) {
+    context.report({
+      node: node,
+      message: `Unexpected use of console`,
+    });
+  }
+
+  return {
+    meta: {
+      fixable: 'code',
+    },
+    MemberExpression: function(node) {
+      if (
+        node.object.type === 'Identifier' &&
+        node.object.name === 'console' &&
+        node.property.type === 'Identifier'
+      ) {
+        switch (node.property.name) {
+          case 'error':
+          case 'warn': {
+            if (!isInDEVBlock(node)) {
+              reportWrapInDEV(node);
+            }
+            break;
+          }
+          default: {
+            reportUnexpectedConsole(node);
+            break;
+          }
+        }
+      }
+    },
+  };
+};
diff --git a/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js b/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
index 032a1b7c56047..ff83f4e1bcede 100644
--- a/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
+++ b/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
@@ -12,7 +12,7 @@
 module.exports = function(context) {
   return {
     Identifier(node) {
-      if (node.name === 'toWarnDev') {
+      if (node.name === 'toWarnDev' || node.name === 'toErrorDev') {
         let current = node;
         while (current.parent) {
           if (current.type === 'CallExpression') {
@@ -22,7 +22,10 @@ module.exports = function(context) {
               current.callee.property &&
               current.callee.property.name === 'toThrow'
             ) {
-              context.report(node, 'toWarnDev() matcher should not be nested');
+              context.report(
+                node,
+                node.name + '() matcher should not be nested'
+              );
             }
           }
           current = current.parent;
diff --git a/scripts/eslint-rules/warning-args.js b/scripts/eslint-rules/warning-args.js
new file mode 100644
index 0000000000000..b3cd6cbc3805b
--- /dev/null
+++ b/scripts/eslint-rules/warning-args.js
@@ -0,0 +1,99 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const existingErrorMap = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+);
+const messages = new Set();
+Object.keys(existingErrorMap).forEach(key =>
+  messages.add(existingErrorMap[key])
+);
+
+/**
+ * The warning() function takes format strings as its second
+ * argument.
+ */
+
+module.exports = function(context) {
+  // we also allow literal strings and concatenated literal strings
+  function getLiteralString(node) {
+    if (node.type === 'Literal' && typeof node.value === 'string') {
+      return node.value;
+    } else if (node.type === 'BinaryExpression' && node.operator === '+') {
+      const l = getLiteralString(node.left);
+      const r = getLiteralString(node.right);
+      if (l !== null && r !== null) {
+        return l + r;
+      }
+    }
+    return null;
+  }
+
+  return {
+    CallExpression: function(node) {
+      // This could be a little smarter by checking context.getScope() to see
+      // how warning/invariant was defined.
+      const isWarning =
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'console' &&
+        node.callee.property.type === 'Identifier' &&
+        (node.callee.property.name === 'error' ||
+          node.callee.property.name === 'warn');
+      if (!isWarning) {
+        return;
+      }
+      const name = 'console.' + node.callee.property.name;
+      if (node.arguments.length < 1) {
+        context.report(node, '{{name}} takes at least one argument', {
+          name,
+        });
+        return;
+      }
+      const format = getLiteralString(node.arguments[0]);
+      if (format === null) {
+        context.report(
+          node,
+          'The first argument to {{name}} must be a string literal',
+          {name}
+        );
+        return;
+      }
+      if (format.length < 10 || /^[s\W]*$/.test(format)) {
+        context.report(
+          node,
+          'The {{name}} format should be able to uniquely identify this ' +
+            'warning. Please, use a more descriptive format than: {{format}}',
+          {name, format}
+        );
+        return;
+      }
+      // count the number of formatting substitutions, plus the first two args
+      const expectedNArgs = (format.match(/%s/g) || []).length + 1;
+      if (node.arguments.length !== expectedNArgs) {
+        context.report(
+          node,
+          'Expected {{expectedNArgs}} arguments in call to {{name}} based on ' +
+            'the number of "%s" substitutions, but got {{length}}',
+          {
+            expectedNArgs: expectedNArgs,
+            name,
+            length: node.arguments.length,
+          }
+        );
+      }
+    },
+  };
+};
+
+module.exports.schema = [];
diff --git a/scripts/eslint/index.js b/scripts/eslint/index.js
index a752a7cbfe51b..d9acaf913edf8 100644
--- a/scripts/eslint/index.js
+++ b/scripts/eslint/index.js
@@ -28,6 +28,10 @@ function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
     : filePatterns;
   const report = cli.executeOnFiles(finalFilePatterns);
 
+  if (options != null && options.fix === true) {
+    CLIEngine.outputFixes(report);
+  }
+
   // When using `ignorePattern`, eslint will show `File ignored...` warnings for any ignores.
   // We don't care because we *expect* some passed files will be ignores if `ignorePattern` is used.
   const messages = report.results.filter(item => {
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index cd0c4af1b15a2..014b3941cd38e 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -5,6 +5,7 @@
 .*/rollup/shims/facebook-www/.*
 .*/rollup/shims/react-native/.*
 
+.*/node_modules/@snyk/.*
 .*/node_modules/y18n/.*
 .*/node_modules/chrome-devtools-frontend/.*
 .*/node_modules/devtools-timeline-model/.*
@@ -12,6 +13,8 @@
 .*/__mocks__/.*
 .*/__tests__/.*
 
+%REACT_RENDERER_FLOW_IGNORES%
+
 [include]
 ../../../node_modules/
 ../../../packages/
@@ -20,12 +23,14 @@
 [libs]
 ../../../node_modules/fbjs/flow/lib/dev.js
 ../environment.js
+../react-devtools.js
 ../react-native-host-hooks.js
 
 [lints]
 untyped-type-import=error
 
 [options]
+server.max_workers=4
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 
@@ -45,4 +50,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 [version]
-^0.72.0
\ No newline at end of file
+^0.89.0
diff --git a/scripts/flow/createFlowConfigs.js b/scripts/flow/createFlowConfigs.js
index f1ca3523c77d8..a0a5e7a323039 100644
--- a/scripts/flow/createFlowConfigs.js
+++ b/scripts/flow/createFlowConfigs.js
@@ -18,21 +18,37 @@ const configTemplate = fs
   .readFileSync(__dirname + '/config/flowconfig')
   .toString();
 
-function writeConfig(renderer, isFizzSupported) {
+function writeConfig(renderer, isServerSupported) {
   const folder = __dirname + '/' + renderer;
   mkdirp.sync(folder);
 
-  const fizzRenderer = isFizzSupported ? renderer : 'custom';
-  const config = configTemplate.replace(
-    '%REACT_RENDERER_FLOW_OPTIONS%',
-    `
+  const serverRenderer = isServerSupported ? renderer : 'custom';
+  const config = configTemplate
+    .replace(
+      '%REACT_RENDERER_FLOW_OPTIONS%',
+      `
 module.name_mapper='react-reconciler/inline.${renderer}$$' -> 'react-reconciler/inline-typed'
 module.name_mapper='ReactFiberHostConfig$$' -> 'forks/ReactFiberHostConfig.${renderer}'
-module.name_mapper='react-stream/inline.${renderer}$$' -> 'react-stream/inline-typed'
-module.name_mapper='ReactFizzHostConfig$$' -> 'forks/ReactFizzHostConfig.${fizzRenderer}'
-module.name_mapper='ReactFizzFormatConfig$$' -> 'forks/ReactFizzFormatConfig.${fizzRenderer}'
+module.name_mapper='react-server/inline.${renderer}$$' -> 'react-server/inline-typed'
+module.name_mapper='react-server/flight.inline.${renderer}$$' -> 'react-server/flight.inline-typed'
+module.name_mapper='ReactServerHostConfig$$' -> 'forks/ReactServerHostConfig.${serverRenderer}'
+module.name_mapper='ReactServerFormatConfig$$' -> 'forks/ReactServerFormatConfig.${serverRenderer}'
+module.name_mapper='react-flight/inline.${renderer}$$' -> 'react-flight/inline-typed'
+module.name_mapper='ReactFlightClientHostConfig$$' -> 'forks/ReactFlightClientHostConfig.${serverRenderer}'
     `.trim(),
-  );
+    )
+    .replace(
+      '%REACT_RENDERER_FLOW_IGNORES%',
+      renderer === 'dom' || renderer === 'dom-browser'
+        ? ''
+        : // If we're not checking DOM, ignore the DOM package since it
+          // won't be consistent.
+          `
+    .*/packages/react-dom/.*
+    .*/packages/.*/forks/.*.dom.js
+    .*/packages/.*/forks/.*.dom-browser.js
+    `.trim(),
+    );
 
   const disclaimer = `
 # ---------------------------------------------------------------#
@@ -65,6 +81,6 @@ ${disclaimer}
 // so that we can run those checks in parallel if we want.
 inlinedHostConfigs.forEach(rendererInfo => {
   if (rendererInfo.isFlowTyped) {
-    writeConfig(rendererInfo.shortName, rendererInfo.isFizzSupported);
+    writeConfig(rendererInfo.shortName, rendererInfo.isServerSupported);
   }
 });
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 8a0806c4a9744..524cae905bc2e 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -11,11 +11,24 @@
 
 declare var __PROFILE__: boolean;
 declare var __UMD__: boolean;
+declare var __EXPERIMENTAL__: boolean;
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
   inject: ?((stuff: Object) => void)
 };*/
 
+declare module 'create-react-class' {
+  declare var exports: React$CreateClass;
+}
+
+declare var trustedTypes: {|
+  isHTML: (value: any) => boolean,
+  isScript: (value: any) => boolean,
+  isScriptURL: (value: any) => boolean,
+  // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
+  isURL?: (value: any) => boolean,
+|};
+
 // ReactFeatureFlags www fork
 declare module 'ReactFeatureFlags' {
   declare module.exports: any;
@@ -23,9 +36,7 @@ declare module 'ReactFeatureFlags' {
 
 // ReactFiberErrorDialog www fork
 declare module 'ReactFiberErrorDialog' {
-  declare module.exports: {
-    showErrorDialog: (error: mixed) => boolean,
-  };
+  declare module.exports: {showErrorDialog: (error: mixed) => boolean, ...};
 }
 
 // EventListener www fork
@@ -36,7 +47,7 @@ declare module 'EventListener' {
       type: string,
       callback: Function,
       priority?: number,
-      options?: {passive: boolean},
+      options?: {passive: boolean, ...},
     ) => mixed,
     capture: (target: Element, type: string, callback: Function) => mixed,
     captureWithPassiveFlag: (
@@ -45,5 +56,6 @@ declare module 'EventListener' {
       callback: Function,
       passive: boolean,
     ) => mixed,
+    ...
   };
 }
diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
new file mode 100644
index 0000000000000..26c800da52823
--- /dev/null
+++ b/scripts/flow/react-devtools.js
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+declare module 'events' {
+  declare class EventEmitter<Events: Object> {
+    addListener<Event: $Keys<Events>>(
+      event: Event,
+      listener: (...$ElementType<Events, Event>) => any,
+    ): void;
+    emit: <Event: $Keys<Events>>(
+      event: Event,
+      ...$ElementType<Events, Event>
+    ) => void;
+    removeListener(event: $Keys<Events>, listener: Function): void;
+    removeAllListeners(event?: $Keys<Events>): void;
+  }
+
+  declare export default typeof EventEmitter;
+}
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 32a357120d68b..38625c31e291c 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -16,25 +16,39 @@ import type {
   ReactNativeBaseComponentViewConfig,
   ViewConfigGetter,
 } from 'react-native-renderer/src/ReactNativeTypes';
-import type {RNTopLevelEventType} from 'events/TopLevelEventTypes';
+import type {RNTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
+import type {CapturedError} from 'react-reconciler/src/ReactCapturedValue';
+
+type DeepDifferOptions = {|+unsafelyIgnoreFunctions?: boolean|};
 
 declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
-  declare export function deepDiffer(one: any, two: any): boolean;
+  declare export function deepDiffer(
+    one: any,
+    two: any,
+    maxDepth?: number,
+    options?: DeepDifferOptions,
+  ): boolean;
+  declare export function deepDiffer(
+    one: any,
+    two: any,
+    options: DeepDifferOptions,
+  ): boolean;
   declare export function deepFreezeAndThrowOnMutationInDev<T>(obj: T): T;
   declare export function flattenStyle(style: any): any;
   declare export var RCTEventEmitter: {
     register: (eventEmitter: mixed) => void,
+    ...
   };
   declare export var TextInputState: {
     blurTextInput: (object: any) => void,
     focusTextInput: (object: any) => void,
+    ...
   };
-  declare export var ExceptionsManager: {
-    handleException: (error: Error, isFatal: boolean) => void,
-  };
-  declare export var Platform: {
-    OS: string,
+  declare export var ReactFiberErrorDialog: {
+    showErrorDialog: (error: CapturedError) => boolean,
+    ...
   };
+  declare export var Platform: {OS: string, ...};
   declare export var UIManager: {
     customBubblingEventTypes: Object,
     customDirectEventTypes: Object,
@@ -44,6 +58,11 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
       rootTag: number,
       props: ?Object,
     ) => void,
+    dispatchViewManagerCommand: (
+      reactTag: number,
+      command: string,
+      args: Array<any>,
+    ) => void,
     manageChildren: (
       containerTag: number,
       moveFromIndices: Array<number>,
@@ -72,13 +91,16 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
         height?: number,
         format?: 'png' | 'jpeg',
         quality?: number,
+        ...
       },
     ) => Promise<any>,
     setJSResponder: (reactTag: number, blockNativeResponder: boolean) => void,
     clearJSResponder: () => void,
+    ...
   };
   declare export var BatchedBridge: {
     registerCallableModule: (name: string, module: Object) => void,
+    ...
   };
   declare export var ReactNativeViewConfigRegistry: {
     customBubblingEventTypes: Object,
@@ -87,6 +109,7 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
 
     register: (name: string, callback: ViewConfigGetter) => string,
     get: (name: string) => ReactNativeBaseComponentViewConfig,
+    ...
   };
 }
 
@@ -120,6 +143,8 @@ declare var nativeFabricUIManager: {
     ) => void,
   ) => void,
 
+  dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
+
   measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
   measureInWindow: (
     node: Node,
@@ -131,6 +156,7 @@ declare var nativeFabricUIManager: {
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback,
   ) => void,
+  ...
 };
 
 declare module 'View' {
@@ -157,3 +183,9 @@ declare module 'RTManager' {
 
   declare function completeUpdates(): void;
 }
+
+// shims/ReactFeatureFlags is generated by the packaging script
+declare module '../shims/ReactFeatureFlags' {
+  declare export var debugRenderPhaseSideEffects: boolean;
+  declare export var enableNativeTargetAsInstance: boolean;
+}
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
index d3436e1ea4173..024b0c0eb347a 100644
--- a/scripts/jest/config.base.js
+++ b/scripts/jest/config.base.js
@@ -12,7 +12,7 @@ module.exports = {
     '.*': require.resolve('./preprocessor.js'),
   },
   setupFiles: [require.resolve('./setupEnvironment.js')],
-  setupTestFrameworkScriptFile: require.resolve('./setupTests.js'),
+  setupFilesAfterEnv: [require.resolve('./setupTests.js')],
   // Only include files directly in __tests__, not in nested folders.
   testRegex: '/__tests__/[^/]*(\\.js|\\.coffee|[^d]\\.ts)$',
   moduleFileExtensions: ['js', 'json', 'node', 'coffee', 'ts'],
@@ -20,4 +20,12 @@ module.exports = {
   roots: ['<rootDir>/packages', '<rootDir>/scripts'],
   collectCoverageFrom: ['packages/**/*.js'],
   timers: 'fake',
+  snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
+  // Jest changed from `about:blank` to `http://localhost` default in 24.5 (https://github.com/facebook/jest/pull/6792)
+  // in order to address https://github.com/facebook/jest/issues/6766. If one uses `about:blank` in JSDOM@11.12 or
+  // newer, it fails with `SecurityError: localStorage is not available for opaque origins`. However, some of React's
+  // tests depend on `about:blank` being the domain (for e.g. `url` in `img` tags). So we set `about:blank` here to
+  // keep the current behavior and make sure to keep the version of JSDOM to version lower than 11.12. This will have
+  // to be addressed properly when Jest 25 is released, as it will come with a newer version of JSDOM.
+  testURL: 'about:blank',
 };
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
new file mode 100644
index 0000000000000..9c8501486ab49
--- /dev/null
+++ b/scripts/jest/config.build-devtools.js
@@ -0,0 +1,74 @@
+'use strict';
+
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+const baseConfig = require('./config.base');
+
+// Find all folders in packages/* with package.json
+const packagesRoot = join(__dirname, '..', '..', 'packages');
+const packages = readdirSync(packagesRoot).filter(dir => {
+  if (dir.charAt(0) === '.') {
+    return false;
+  }
+  if (dir.includes('react-devtools')) {
+    return false;
+  }
+  const packagePath = join(packagesRoot, dir, 'package.json');
+  let stat;
+  try {
+    stat = statSync(packagePath);
+  } catch (err) {
+    return false;
+  }
+  return stat.isFile();
+});
+
+// Create a module map to point React packages to the build output
+const moduleNameMapper = {};
+
+// Allow bundle tests to read (but not write!) default feature flags.
+// This lets us determine whether we're running in different modes
+// without making relevant tests internal-only.
+moduleNameMapper[
+  '^shared/ReactFeatureFlags'
+] = `<rootDir>/packages/shared/forks/ReactFeatureFlags.readonly`;
+
+// Map packages to bundles
+packages.forEach(name => {
+  // Root entry point
+  moduleNameMapper[`^${name}$`] = `<rootDir>/build/node_modules/${name}`;
+  // Named entry points
+  moduleNameMapper[
+    `^${name}\/([^\/]+)$`
+  ] = `<rootDir>/build/node_modules/${name}/$1`;
+});
+
+module.exports = Object.assign({}, baseConfig, {
+  // Redirect imports to the compiled bundles
+  moduleNameMapper,
+  // Don't run bundle tests on -test.internal.* files
+  testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],
+  // Exclude the build output from transforms
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build/'],
+  testRegex: 'packages/react-devtools-shared/src/__tests__/[^]+.test.js$',
+  snapshotSerializers: [
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
+    ),
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.build.js'),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/setupEnv.js'
+    ),
+  ],
+  setupFilesAfterEnv: [
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/setupTests.js'
+    ),
+  ],
+});
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index 1fcc1d314e744..765909b41b164 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -10,20 +10,21 @@ const packages = readdirSync(packagesRoot).filter(dir => {
   if (dir.charAt(0) === '.') {
     return false;
   }
-  if (dir === 'events') {
-    // There's an actual Node package called "events"
-    // that's used by jsdom so we don't want to alias that.
+  const packagePath = join(packagesRoot, dir, 'package.json');
+  let stat;
+  try {
+    stat = statSync(packagePath);
+  } catch (err) {
     return false;
   }
-  const packagePath = join(packagesRoot, dir, 'package.json');
-  return statSync(packagePath).isFile();
+  return stat.isFile();
 });
 
 // Create a module map to point React packages to the build output
 const moduleNameMapper = {};
 
 // Allow bundle tests to read (but not write!) default feature flags.
-// This lets us determine whether we're running in Fire mode
+// This lets us determine whether we're running in different modes
 // without making relevant tests internal-only.
 moduleNameMapper[
   '^shared/ReactFeatureFlags'
@@ -42,6 +43,10 @@ packages.forEach(name => {
 module.exports = Object.assign({}, baseConfig, {
   // Redirect imports to the compiled bundles
   moduleNameMapper,
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-shared',
+  ],
   // Don't run bundle tests on -test.internal.* files
   testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],
   // Exclude the build output from transforms
diff --git a/scripts/jest/config.source-fire.js b/scripts/jest/config.source-fire.js
deleted file mode 100644
index 7ab239c9ebfb1..0000000000000
--- a/scripts/jest/config.source-fire.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-
-const baseConfig = require('./config.base');
-
-module.exports = Object.assign({}, baseConfig, {
-  roots: ['<rootDir>/packages/react-dom'],
-  setupFiles: [
-    ...baseConfig.setupFiles,
-    require.resolve('./setupFire.js'),
-    require.resolve('./setupHostConfigs.js'),
-  ],
-});
diff --git a/scripts/jest/config.source-persistent.js b/scripts/jest/config.source-persistent.js
index df6750d3f5f73..935c4463c1c90 100644
--- a/scripts/jest/config.source-persistent.js
+++ b/scripts/jest/config.source-persistent.js
@@ -4,6 +4,8 @@ const baseConfig = require('./config.base');
 
 module.exports = Object.assign({}, baseConfig, {
   modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-shared',
     'ReactIncrementalPerf',
     'ReactIncrementalUpdatesMinimalism',
     'ReactIncrementalTriangle',
diff --git a/scripts/jest/config.source.js b/scripts/jest/config.source.js
index 7da7238dcceee..2e3401a4ba5c4 100644
--- a/scripts/jest/config.source.js
+++ b/scripts/jest/config.source.js
@@ -3,6 +3,10 @@
 const baseConfig = require('./config.base');
 
 module.exports = Object.assign({}, baseConfig, {
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-shared',
+  ],
   setupFiles: [
     ...baseConfig.setupFiles,
     require.resolve('./setupHostConfigs.js'),
diff --git a/scripts/jest/matchers/__tests__/toWarnDev-test.js b/scripts/jest/matchers/__tests__/toWarnDev-test.js
index 7d7b48d8728db..e27ef663eab2f 100644
--- a/scripts/jest/matchers/__tests__/toWarnDev-test.js
+++ b/scripts/jest/matchers/__tests__/toWarnDev-test.js
@@ -9,13 +9,13 @@
 
 'use strict';
 
-describe('toWarnDev', () => {
+describe('toErrorDev', () => {
   it('does not fail if a warning contains a stack', () => {
     expect(() => {
       if (__DEV__) {
         console.error('Hello\n    in div');
       }
-    }).toWarnDev('Hello');
+    }).toErrorDev('Hello');
   });
 
   it('does not fail if all warnings contain a stack', () => {
@@ -25,7 +25,7 @@ describe('toWarnDev', () => {
         console.error('Good day\n    in div');
         console.error('Bye\n    in div');
       }
-    }).toWarnDev(['Hello', 'Good day', 'Bye']);
+    }).toErrorDev(['Hello', 'Good day', 'Bye']);
   });
 
   it('does not fail if warnings without stack explicitly opt out', () => {
@@ -33,14 +33,14 @@ describe('toWarnDev', () => {
       if (__DEV__) {
         console.error('Hello');
       }
-    }).toWarnDev('Hello', {withoutStack: true});
+    }).toErrorDev('Hello', {withoutStack: true});
     expect(() => {
       if (__DEV__) {
         console.error('Hello');
         console.error('Good day');
         console.error('Bye');
       }
-    }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: true});
+    }).toErrorDev(['Hello', 'Good day', 'Bye'], {withoutStack: true});
   });
 
   it('does not fail when expected stack-less warning number matches the actual one', () => {
@@ -50,7 +50,7 @@ describe('toWarnDev', () => {
         console.error('Good day');
         console.error('Bye\n    in div');
       }
-    }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
+    }).toErrorDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
   });
 
   if (__DEV__) {
@@ -71,7 +71,7 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello');
-        }).toWarnDev('Hello');
+        }).toErrorDev('Hello');
       }, 'Received warning unexpectedly does not include a component stack');
     });
 
@@ -81,28 +81,28 @@ describe('toWarnDev', () => {
           console.error('Hello\n    in div');
           console.error('Good day\n    in div');
           console.error('Bye');
-        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+        }).toErrorDev(['Hello', 'Good day', 'Bye']);
       }, 'Received warning unexpectedly does not include a component stack');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello');
           console.error('Good day\n    in div');
           console.error('Bye\n    in div');
-        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+        }).toErrorDev(['Hello', 'Good day', 'Bye']);
       }, 'Received warning unexpectedly does not include a component stack');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello\n    in div');
           console.error('Good day');
           console.error('Bye\n    in div');
-        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+        }).toErrorDev(['Hello', 'Good day', 'Bye']);
       }, 'Received warning unexpectedly does not include a component stack');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello');
           console.error('Good day');
           console.error('Bye');
-        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+        }).toErrorDev(['Hello', 'Good day', 'Bye']);
       }, 'Received warning unexpectedly does not include a component stack');
     });
 
@@ -110,14 +110,14 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello\n    in div');
-        }).toWarnDev('Hello', {withoutStack: true});
+        }).toErrorDev('Hello', {withoutStack: true});
       }, 'Received warning unexpectedly includes a component stack');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hello\n    in div');
           console.error('Good day');
           console.error('Bye\n    in div');
-        }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: true});
+        }).toErrorDev(['Hello', 'Good day', 'Bye'], {withoutStack: true});
       }, 'Received warning unexpectedly includes a component stack');
     });
 
@@ -127,7 +127,7 @@ describe('toWarnDev', () => {
           console.error('Hello\n    in div');
           console.error('Good day');
           console.error('Bye\n    in div');
-        }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: 4});
+        }).toErrorDev(['Hello', 'Good day', 'Bye'], {withoutStack: 4});
       }, 'Expected 4 warnings without a component stack but received 1');
     });
 
@@ -135,17 +135,17 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi');
-        }).toWarnDev('Hi', {withoutStack: null});
+        }).toErrorDev('Hi', {withoutStack: null});
       }, 'Instead received object');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi');
-        }).toWarnDev('Hi', {withoutStack: {}});
+        }).toErrorDev('Hi', {withoutStack: {}});
       }, 'Instead received object');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi');
-        }).toWarnDev('Hi', {withoutStack: 'haha'});
+        }).toErrorDev('Hi', {withoutStack: 'haha'});
       }, 'Instead received string');
     });
 
@@ -153,13 +153,13 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi %s', 'Sara', 'extra');
-        }).toWarnDev('Hi', {withoutStack: true});
+        }).toErrorDev('Hi', {withoutStack: true});
       }, 'Received 2 arguments for a message with 1 placeholders');
 
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi %s');
-        }).toWarnDev('Hi', {withoutStack: true});
+        }).toErrorDev('Hi', {withoutStack: true});
       }, 'Received 0 arguments for a message with 1 placeholders');
     });
 
@@ -167,7 +167,7 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi %s%s', '\n    in div', '\n    in div');
-        }).toWarnDev('Hi');
+        }).toErrorDev('Hi');
       }, 'Received more than one component stack for a warning');
     });
 
@@ -175,28 +175,28 @@ describe('toWarnDev', () => {
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi \n    in div');
-        }).toWarnDev('Hi', 'Bye');
-      }, 'toWarnDev() second argument, when present, should be an object');
+        }).toErrorDev('Hi', 'Bye');
+      }, 'toErrorDev() second argument, when present, should be an object');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi \n    in div');
           console.error('Bye \n    in div');
-        }).toWarnDev('Hi', 'Bye');
-      }, 'toWarnDev() second argument, when present, should be an object');
+        }).toErrorDev('Hi', 'Bye');
+      }, 'toErrorDev() second argument, when present, should be an object');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi \n    in div');
           console.error('Wow \n    in div');
           console.error('Bye \n    in div');
-        }).toWarnDev('Hi', 'Bye');
-      }, 'toWarnDev() second argument, when present, should be an object');
+        }).toErrorDev('Hi', 'Bye');
+      }, 'toErrorDev() second argument, when present, should be an object');
       expectToWarnAndToThrow(() => {
         expect(() => {
           console.error('Hi \n    in div');
           console.error('Wow \n    in div');
           console.error('Bye \n    in div');
-        }).toWarnDev('Hi', 'Wow', 'Bye');
-      }, 'toWarnDev() second argument, when present, should be an object');
+        }).toErrorDev('Hi', 'Wow', 'Bye');
+      }, 'toErrorDev() second argument, when present, should be an object');
     });
 
     it('fails on more than two arguments', () => {
@@ -205,6 +205,212 @@ describe('toWarnDev', () => {
           console.error('Hi \n    in div');
           console.error('Wow \n    in div');
           console.error('Bye \n    in div');
+        }).toErrorDev('Hi', undefined, 'Bye');
+      }, 'toErrorDev() received more than two arguments.');
+    });
+  }
+});
+
+describe('toWarnDev', () => {
+  it('does not fail if a warning contains a stack', () => {
+    expect(() => {
+      if (__DEV__) {
+        console.warn('Hello\n    in div');
+      }
+    }).toWarnDev('Hello');
+  });
+
+  it('does not fail if all warnings contain a stack', () => {
+    expect(() => {
+      if (__DEV__) {
+        console.warn('Hello\n    in div');
+        console.warn('Good day\n    in div');
+        console.warn('Bye\n    in div');
+      }
+    }).toWarnDev(['Hello', 'Good day', 'Bye']);
+  });
+
+  it('does not fail if warnings without stack explicitly opt out', () => {
+    expect(() => {
+      if (__DEV__) {
+        console.warn('Hello');
+      }
+    }).toWarnDev('Hello', {withoutStack: true});
+    expect(() => {
+      if (__DEV__) {
+        console.warn('Hello');
+        console.warn('Good day');
+        console.warn('Bye');
+      }
+    }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: true});
+  });
+
+  it('does not fail when expected stack-less warning number matches the actual one', () => {
+    expect(() => {
+      if (__DEV__) {
+        console.warn('Hello\n    in div');
+        console.warn('Good day');
+        console.warn('Bye\n    in div');
+      }
+    }).toWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
+  });
+
+  if (__DEV__) {
+    // Helper methods avoids invalid toWarn().toThrow() nesting
+    // See no-to-warn-dev-within-to-throw
+    const expectToWarnAndToThrow = (expectBlock, expectedErrorMessage) => {
+      let caughtError;
+      try {
+        expectBlock();
+      } catch (error) {
+        caughtError = error;
+      }
+      expect(caughtError).toBeDefined();
+      expect(caughtError.message).toContain(expectedErrorMessage);
+    };
+
+    it('fails if a warning does not contain a stack', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello');
+        }).toWarnDev('Hello');
+      }, 'Received warning unexpectedly does not include a component stack');
+    });
+
+    it('fails if some warnings do not contain a stack', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day\n    in div');
+          console.warn('Bye');
+        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+      }, 'Received warning unexpectedly does not include a component stack');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello');
+          console.warn('Good day\n    in div');
+          console.warn('Bye\n    in div');
+        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+      }, 'Received warning unexpectedly does not include a component stack');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+      }, 'Received warning unexpectedly does not include a component stack');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello');
+          console.warn('Good day');
+          console.warn('Bye');
+        }).toWarnDev(['Hello', 'Good day', 'Bye']);
+      }, 'Received warning unexpectedly does not include a component stack');
+    });
+
+    it('fails if warning is expected to not have a stack, but does', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello\n    in div');
+        }).toWarnDev('Hello', {withoutStack: true});
+      }, 'Received warning unexpectedly includes a component stack');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+        }).toWarnDev(['Hello', 'Good day', 'Bye'], {
+          withoutStack: true,
+        });
+      }, 'Received warning unexpectedly includes a component stack');
+    });
+
+    it('fails if expected stack-less warning number does not match the actual one', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+        }).toWarnDev(['Hello', 'Good day', 'Bye'], {
+          withoutStack: 4,
+        });
+      }, 'Expected 4 warnings without a component stack but received 1');
+    });
+
+    it('fails if withoutStack is invalid', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi');
+        }).toWarnDev('Hi', {withoutStack: null});
+      }, 'Instead received object');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi');
+        }).toWarnDev('Hi', {withoutStack: {}});
+      }, 'Instead received object');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi');
+        }).toWarnDev('Hi', {withoutStack: 'haha'});
+      }, 'Instead received string');
+    });
+
+    it('fails if the argument number does not match', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi %s', 'Sara', 'extra');
+        }).toWarnDev('Hi', {withoutStack: true});
+      }, 'Received 2 arguments for a message with 1 placeholders');
+
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi %s');
+        }).toWarnDev('Hi', {withoutStack: true});
+      }, 'Received 0 arguments for a message with 1 placeholders');
+    });
+
+    it('fails if stack is passed twice', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi %s%s', '\n    in div', '\n    in div');
+        }).toWarnDev('Hi');
+      }, 'Received more than one component stack for a warning');
+    });
+
+    it('fails if multiple strings are passed without an array wrapper', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi \n    in div');
+        }).toWarnDev('Hi', 'Bye');
+      }, 'toWarnDev() second argument, when present, should be an object');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi \n    in div');
+          console.warn('Bye \n    in div');
+        }).toWarnDev('Hi', 'Bye');
+      }, 'toWarnDev() second argument, when present, should be an object');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi \n    in div');
+          console.warn('Wow \n    in div');
+          console.warn('Bye \n    in div');
+        }).toWarnDev('Hi', 'Bye');
+      }, 'toWarnDev() second argument, when present, should be an object');
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi \n    in div');
+          console.warn('Wow \n    in div');
+          console.warn('Bye \n    in div');
+        }).toWarnDev('Hi', 'Wow', 'Bye');
+      }, 'toWarnDev() second argument, when present, should be an object');
+    });
+
+    it('fails on more than two arguments', () => {
+      expectToWarnAndToThrow(() => {
+        expect(() => {
+          console.warn('Hi \n    in div');
+          console.warn('Wow \n    in div');
+          console.warn('Bye \n    in div');
         }).toWarnDev('Hi', undefined, 'Bye');
       }, 'toWarnDev() received more than two arguments.');
     });
diff --git a/scripts/jest/matchers/interactionTracing.js b/scripts/jest/matchers/interactionTracingMatchers.js
similarity index 97%
rename from scripts/jest/matchers/interactionTracing.js
rename to scripts/jest/matchers/interactionTracingMatchers.js
index 5bbd52b8874ab..f697baef2d947 100644
--- a/scripts/jest/matchers/interactionTracing.js
+++ b/scripts/jest/matchers/interactionTracingMatchers.js
@@ -77,9 +77,7 @@ function toMatchInteractions(actualSetOrArray, expectedSetOrArray) {
   if (actualArray.length !== expectedArray.length) {
     return {
       message: () =>
-        `Expected ${expectedArray.length} interactions but there were ${
-          actualArray.length
-        }`,
+        `Expected ${expectedArray.length} interactions but there were ${actualArray.length}`,
       pass: false,
     };
   }
diff --git a/scripts/jest/matchers/profilerMatchers.js b/scripts/jest/matchers/profilerMatchers.js
new file mode 100644
index 0000000000000..db4400d7fa500
--- /dev/null
+++ b/scripts/jest/matchers/profilerMatchers.js
@@ -0,0 +1,72 @@
+'use strict';
+
+const jestDiff = require('jest-diff');
+
+function toHaveLastRenderedWithNoInteractions(onRenderMockFn) {
+  const calls = onRenderMockFn.mock.calls;
+  if (calls.length === 0) {
+    return {
+      message: () => 'Mock onRender function was not called',
+      pass: false,
+    };
+  }
+}
+
+function toHaveLastRenderedWithInteractions(
+  onRenderMockFn,
+  expectedInteractions
+) {
+  const calls = onRenderMockFn.mock.calls;
+  if (calls.length === 0) {
+    return {
+      message: () => 'Mock onRender function was not called',
+      pass: false,
+    };
+  }
+
+  const lastCall = calls[calls.length - 1];
+  const actualInteractions = lastCall[6];
+
+  return toMatchInteractions(actualInteractions, expectedInteractions);
+}
+
+function toMatchInteraction(actual, expected) {
+  let attribute;
+  for (attribute in expected) {
+    if (actual[attribute] !== expected[attribute]) {
+      return {
+        message: () => jestDiff(expected, actual),
+        pass: false,
+      };
+    }
+  }
+
+  return {pass: true};
+}
+
+function toMatchInteractions(actualSetOrArray, expectedSetOrArray) {
+  const actualArray = Array.from(actualSetOrArray);
+  const expectedArray = Array.from(expectedSetOrArray);
+
+  if (actualArray.length !== expectedArray.length) {
+    return {
+      message: () =>
+        `Expected ${expectedArray.length} interactions but there were ${actualArray.length}`,
+      pass: false,
+    };
+  }
+
+  for (let i = 0; i < actualArray.length; i++) {
+    const result = toMatchInteraction(actualArray[i], expectedArray[i]);
+    if (result.pass === false) {
+      return result;
+    }
+  }
+
+  return {pass: true};
+}
+
+module.exports = {
+  toHaveLastRenderedWithInteractions,
+  toHaveLastRenderedWithNoInteractions,
+};
diff --git a/scripts/jest/matchers/schedulerTestMatchers.js b/scripts/jest/matchers/schedulerTestMatchers.js
index b19a984904dfd..f18ccfc548093 100644
--- a/scripts/jest/matchers/schedulerTestMatchers.js
+++ b/scripts/jest/matchers/schedulerTestMatchers.js
@@ -28,7 +28,7 @@ function assertYieldsWereCleared(Scheduler) {
 
 function toFlushAndYield(Scheduler, expectedYields) {
   assertYieldsWereCleared(Scheduler);
-  Scheduler.unstable_flushWithoutYielding();
+  Scheduler.unstable_flushAllWithoutAsserting();
   const actualYields = Scheduler.unstable_clearYields();
   return captureAssertion(() => {
     expect(actualYields).toEqual(expectedYields);
@@ -44,6 +44,15 @@ function toFlushAndYieldThrough(Scheduler, expectedYields) {
   });
 }
 
+function toFlushUntilNextPaint(Scheduler, expectedYields) {
+  assertYieldsWereCleared(Scheduler);
+  Scheduler.unstable_flushUntilNextPaint();
+  const actualYields = Scheduler.unstable_clearYields();
+  return captureAssertion(() => {
+    expect(actualYields).toEqual(expectedYields);
+  });
+}
+
 function toFlushWithoutYielding(Scheduler) {
   return toFlushAndYield(Scheduler, []);
 }
@@ -68,7 +77,7 @@ function toFlushAndThrow(Scheduler, ...rest) {
   assertYieldsWereCleared(Scheduler);
   return captureAssertion(() => {
     expect(() => {
-      Scheduler.unstable_flushWithoutYielding();
+      Scheduler.unstable_flushAllWithoutAsserting();
     }).toThrow(...rest);
   });
 }
@@ -76,6 +85,7 @@ function toFlushAndThrow(Scheduler, ...rest) {
 module.exports = {
   toFlushAndYield,
   toFlushAndYieldThrough,
+  toFlushUntilNextPaint,
   toFlushWithoutYielding,
   toFlushExpired,
   toHaveYielded,
diff --git a/scripts/jest/matchers/toWarnDev.js b/scripts/jest/matchers/toWarnDev.js
index deef8df288024..133b4f08a04c9 100644
--- a/scripts/jest/matchers/toWarnDev.js
+++ b/scripts/jest/matchers/toWarnDev.js
@@ -8,7 +8,7 @@ function normalizeCodeLocInfo(str) {
   return str && str.replace(/at .+?:\d+/g, 'at **');
 }
 
-const createMatcherFor = consoleMethod =>
+const createMatcherFor = (consoleMethod, matcherName) =>
   function matcher(callback, expectedMessages, options = {}) {
     if (__DEV__) {
       // Warn about incorrect usage of matcher.
@@ -16,7 +16,7 @@ const createMatcherFor = consoleMethod =>
         expectedMessages = [expectedMessages];
       } else if (!Array.isArray(expectedMessages)) {
         throw Error(
-          `toWarnDev() requires a parameter of type string or an array of strings ` +
+          `${matcherName}() requires a parameter of type string or an array of strings ` +
             `but was given ${typeof expectedMessages}.`
         );
       }
@@ -25,19 +25,20 @@ const createMatcherFor = consoleMethod =>
         (typeof options !== 'object' || Array.isArray(options))
       ) {
         throw new Error(
-          'toWarnDev() second argument, when present, should be an object. ' +
+          `${matcherName}() second argument, when present, should be an object. ` +
             'Did you forget to wrap the messages into an array?'
         );
       }
       if (arguments.length > 3) {
         // `matcher` comes from Jest, so it's more than 2 in practice
         throw new Error(
-          'toWarnDev() received more than two arguments. ' +
+          `${matcherName}() received more than two arguments. ` +
             'Did you forget to wrap the messages into an array?'
         );
       }
 
       const withoutStack = options.withoutStack;
+      const logAllErrors = options.logAllErrors;
       const warningsWithoutComponentStack = [];
       const warningsWithComponentStack = [];
       const unexpectedWarnings = [];
@@ -58,6 +59,7 @@ const createMatcherFor = consoleMethod =>
         // Ignore uncaught errors reported by jsdom
         // and React addendums because they're too noisy.
         if (
+          !logAllErrors &&
           consoleMethod === 'error' &&
           shouldIgnoreConsoleError(format, args)
         ) {
@@ -175,9 +177,7 @@ const createMatcherFor = consoleMethod =>
           if (withoutStack !== warningsWithoutComponentStack.length) {
             return {
               message: () =>
-                `Expected ${withoutStack} warnings without a component stack but received ${
-                  warningsWithoutComponentStack.length
-                }:\n` +
+                `Expected ${withoutStack} warnings without a component stack but received ${warningsWithoutComponentStack.length}:\n` +
                 warningsWithoutComponentStack.map(warning =>
                   this.utils.printReceived(warning)
                 ),
@@ -193,8 +193,8 @@ const createMatcherFor = consoleMethod =>
                 `Received warning unexpectedly includes a component stack:\n  ${this.utils.printReceived(
                   warningsWithComponentStack[0]
                 )}\nIf this warning intentionally includes the component stack, remove ` +
-                `{withoutStack: true} from the toWarnDev() call. If you have a mix of ` +
-                `warnings with and without stack in one toWarnDev() call, pass ` +
+                `{withoutStack: true} from the ${matcherName}() call. If you have a mix of ` +
+                `warnings with and without stack in one ${matcherName}() call, pass ` +
                 `{withoutStack: N} where N is the number of warnings without stacks.`,
               pass: false,
             };
@@ -208,13 +208,13 @@ const createMatcherFor = consoleMethod =>
                 `Received warning unexpectedly does not include a component stack:\n  ${this.utils.printReceived(
                   warningsWithoutComponentStack[0]
                 )}\nIf this warning intentionally omits the component stack, add ` +
-                `{withoutStack: true} to the toWarnDev() call.`,
+                `{withoutStack: true} to the ${matcherName} call.`,
               pass: false,
             };
           }
         } else {
           throw Error(
-            `The second argument for toWarnDev(), when specified, must be an object. It may have a ` +
+            `The second argument for ${matcherName}(), when specified, must be an object. It may have a ` +
               `property called "withoutStack" whose value may be undefined, boolean, or a number. ` +
               `Instead received ${typeof withoutStack}.`
           );
@@ -256,6 +256,6 @@ const createMatcherFor = consoleMethod =>
   };
 
 module.exports = {
-  toLowPriorityWarnDev: createMatcherFor('warn'),
-  toWarnDev: createMatcherFor('error'),
+  toWarnDev: createMatcherFor('warn', 'toWarnDev'),
+  toErrorDev: createMatcherFor('error', 'toErrorDev'),
 };
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index d35f965499672..ee8de9408edda 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -2,45 +2,53 @@
 
 const path = require('path');
 
-const babel = require('babel-core');
+const babel = require('@babel/core');
 const coffee = require('coffee-script');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
 
-// Use require.resolve to be resilient to file moves, npm updates, etc
 const pathToBabel = path.join(
-  require.resolve('babel-core'),
-  '..',
+  require.resolve('@babel/core'),
+  '../..',
   'package.json'
 );
 const pathToBabelPluginDevWithCode = require.resolve(
   '../error-codes/transform-error-messages'
 );
-const pathToBabelPluginWrapWarning = require.resolve(
-  '../babel/wrap-warning-with-env-check'
+const pathToBabelPluginReplaceConsoleCalls = require.resolve(
+  '../babel/transform-replace-console-calls'
 );
 const pathToBabelPluginAsyncToGenerator = require.resolve(
-  'babel-plugin-transform-async-to-generator'
+  '@babel/plugin-transform-async-to-generator'
 );
-const pathToBabelrc = path.join(__dirname, '..', '..', '.babelrc');
+const pathToTransformInfiniteLoops = require.resolve(
+  '../babel/transform-prevent-infinite-loops'
+);
+const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
 const pathToErrorCodes = require.resolve('../error-codes/codes.json');
 
 const babelOptions = {
   plugins: [
     // For Node environment only. For builds, Rollup takes care of ESM.
-    require.resolve('babel-plugin-transform-es2015-modules-commonjs'),
+    require.resolve('@babel/plugin-transform-modules-commonjs'),
 
     pathToBabelPluginDevWithCode,
-    pathToBabelPluginWrapWarning,
 
     // Keep stacks detailed in tests.
     // Don't put this in .babelrc so that we don't embed filenames
     // into ReactART builds that include JSX.
     // TODO: I have not verified that this actually works.
-    require.resolve('babel-plugin-transform-react-jsx-source'),
+    require.resolve('@babel/plugin-transform-react-jsx-source'),
+
+    pathToTransformInfiniteLoops,
 
-    require.resolve('../babel/transform-prevent-infinite-loops'),
+    // This optimization is important for extremely performance-sensitive (e.g. React source).
+    // It's okay to disable it for tests.
+    [
+      require.resolve('@babel/plugin-transform-block-scoping'),
+      {throwIfClosureRequired: false},
+    ],
   ],
   retainLines: true,
 };
@@ -53,24 +61,34 @@ module.exports = {
     if (filePath.match(/\.ts$/) && !filePath.match(/\.d\.ts$/)) {
       return tsPreprocessor.compile(src, filePath);
     }
+    if (filePath.match(/\.json$/)) {
+      return src;
+    }
     if (!filePath.match(/\/third_party\//)) {
       // for test files, we also apply the async-await transform, but we want to
       // make sure we don't accidentally apply that transform to product code.
       const isTestFile = !!filePath.match(/\/__tests__\//);
+      const isInDevToolsPackages = !!filePath.match(
+        /\/packages\/react-devtools.*\//
+      );
+      const testOnlyPlugins = [pathToBabelPluginAsyncToGenerator];
+      const sourceOnlyPlugins = [];
+      if (process.env.NODE_ENV === 'development' && !isInDevToolsPackages) {
+        sourceOnlyPlugins.push(pathToBabelPluginReplaceConsoleCalls);
+      }
+      const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
+        babelOptions.plugins
+      );
       return babel.transform(
         src,
         Object.assign(
           {filename: path.relative(process.cwd(), filePath)},
           babelOptions,
-          isTestFile
-            ? {
-                plugins: [pathToBabelPluginAsyncToGenerator].concat(
-                  babelOptions.plugins
-                ),
-              }
-            : {}
+          {
+            plugins,
+          }
         )
-      ).code;
+      );
     }
     return src;
   },
@@ -80,7 +98,7 @@ module.exports = {
     pathToBabel,
     pathToBabelrc,
     pathToBabelPluginDevWithCode,
-    pathToBabelPluginWrapWarning,
+    pathToTransformInfiniteLoops,
     pathToErrorCodes,
   ]),
 };
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
index d216e5f6ceaa3..7eef6432e73cf 100644
--- a/scripts/jest/setupEnvironment.js
+++ b/scripts/jest/setupEnvironment.js
@@ -8,11 +8,16 @@ global.__DEV__ = NODE_ENV === 'development';
 global.__PROFILE__ = NODE_ENV === 'development';
 global.__UMD__ = false;
 
-if (typeof window !== 'undefined') {
-  global.requestAnimationFrame = function(callback) {
-    setTimeout(callback);
-  };
+const RELEASE_CHANNEL = process.env.RELEASE_CHANNEL;
 
+// Default to running tests in experimental mode. If the release channel is
+// set via an environment variable, then check if it's "experimental".
+global.__EXPERIMENTAL__ =
+  typeof RELEASE_CHANNEL === 'string'
+    ? RELEASE_CHANNEL === 'experimental'
+    : true;
+
+if (typeof window !== 'undefined') {
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {
       callback({
diff --git a/scripts/jest/setupFire.js b/scripts/jest/setupFire.js
deleted file mode 100644
index a54f280c7782d..0000000000000
--- a/scripts/jest/setupFire.js
+++ /dev/null
@@ -1,9 +0,0 @@
-'use strict';
-
-jest.mock('react-dom', () => require.requireActual('react-dom/unstable-fire'));
-
-jest.mock('shared/ReactFeatureFlags', () => {
-  const ReactFeatureFlags = require.requireActual('shared/ReactFeatureFlags');
-  ReactFeatureFlags.disableInputAttributeSyncing = true;
-  return ReactFeatureFlags;
-});
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index b4036f52c9676..93078a03cdee0 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -17,13 +17,28 @@ jest.mock('react-reconciler/persistent', () => {
     return require.requireActual('react-reconciler/persistent');
   };
 });
-const shimFizzHostConfigPath = 'react-stream/src/ReactFizzHostConfig';
-const shimFizzFormatConfigPath = 'react-stream/src/ReactFizzFormatConfig';
-jest.mock('react-stream', () => {
+const shimServerHostConfigPath = 'react-server/src/ReactServerHostConfig';
+const shimServerFormatConfigPath = 'react-server/src/ReactServerFormatConfig';
+jest.mock('react-server', () => {
   return config => {
-    jest.mock(shimFizzHostConfigPath, () => config);
-    jest.mock(shimFizzFormatConfigPath, () => config);
-    return require.requireActual('react-stream');
+    jest.mock(shimServerHostConfigPath, () => config);
+    jest.mock(shimServerFormatConfigPath, () => config);
+    return require.requireActual('react-server');
+  };
+});
+jest.mock('react-server/flight', () => {
+  return config => {
+    jest.mock(shimServerHostConfigPath, () => config);
+    jest.mock(shimServerFormatConfigPath, () => config);
+    return require.requireActual('react-server/flight');
+  };
+});
+const shimFlightClientHostConfigPath =
+  'react-flight/src/ReactFlightClientHostConfig';
+jest.mock('react-flight', () => {
+  return config => {
+    jest.mock(shimFlightClientHostConfigPath, () => config);
+    return require.requireActual('react-flight');
   };
 });
 
@@ -42,9 +57,7 @@ inlinedHostConfigs.forEach(rendererInfo => {
     jest.mock(shimHostConfigPath, () => {
       hasImportedShimmedConfig = true;
       return require.requireActual(
-        `react-reconciler/src/forks/ReactFiberHostConfig.${
-          rendererInfo.shortName
-        }.js`
+        `react-reconciler/src/forks/ReactFiberHostConfig.${rendererInfo.shortName}.js`
       );
     });
 
@@ -65,29 +78,87 @@ inlinedHostConfigs.forEach(rendererInfo => {
     return renderer;
   });
 
-  if (rendererInfo.isFizzSupported) {
-    jest.mock(`react-stream/inline.${rendererInfo.shortName}`, () => {
+  if (rendererInfo.isServerSupported) {
+    jest.mock(`react-server/inline.${rendererInfo.shortName}`, () => {
+      let hasImportedShimmedConfig = false;
+
+      // We want the renderer to pick up the host config for this renderer.
+      jest.mock(shimServerHostConfigPath, () => {
+        hasImportedShimmedConfig = true;
+        return require.requireActual(
+          `react-server/src/forks/ReactServerHostConfig.${rendererInfo.shortName}.js`
+        );
+      });
+      jest.mock(shimServerFormatConfigPath, () => {
+        hasImportedShimmedConfig = true;
+        return require.requireActual(
+          `react-server/src/forks/ReactServerFormatConfig.${rendererInfo.shortName}.js`
+        );
+      });
+
+      const renderer = require.requireActual('react-server');
+      // If the shimmed config factory function above has not run,
+      // it means this test file loads more than one renderer
+      // but doesn't reset modules between them. This won't work.
+      if (!hasImportedShimmedConfig) {
+        throw new Error(
+          `Could not import the "${rendererInfo.shortName}" renderer ` +
+            `in this suite because another renderer has already been ` +
+            `loaded earlier. Call jest.resetModules() before importing any ` +
+            `of the following entry points:\n\n` +
+            rendererInfo.entryPoints.map(entry => `  * ${entry}`)
+        );
+      }
+
+      return renderer;
+    });
+
+    jest.mock(`react-server/flight.inline.${rendererInfo.shortName}`, () => {
       let hasImportedShimmedConfig = false;
 
       // We want the renderer to pick up the host config for this renderer.
-      jest.mock(shimFizzHostConfigPath, () => {
+      jest.mock(shimServerHostConfigPath, () => {
         hasImportedShimmedConfig = true;
         return require.requireActual(
-          `react-stream/src/forks/ReactFizzHostConfig.${
-            rendererInfo.shortName
-          }.js`
+          `react-server/src/forks/ReactServerHostConfig.${rendererInfo.shortName}.js`
         );
       });
-      jest.mock(shimFizzFormatConfigPath, () => {
+      jest.mock(shimServerFormatConfigPath, () => {
+        hasImportedShimmedConfig = true;
+        return require.requireActual(
+          `react-server/src/forks/ReactServerFormatConfig.${rendererInfo.shortName}.js`
+        );
+      });
+
+      const renderer = require.requireActual('react-server/flight');
+      // If the shimmed config factory function above has not run,
+      // it means this test file loads more than one renderer
+      // but doesn't reset modules between them. This won't work.
+      if (!hasImportedShimmedConfig) {
+        throw new Error(
+          `Could not import the "${rendererInfo.shortName}" renderer ` +
+            `in this suite because another renderer has already been ` +
+            `loaded earlier. Call jest.resetModules() before importing any ` +
+            `of the following entry points:\n\n` +
+            rendererInfo.entryPoints.map(entry => `  * ${entry}`)
+        );
+      }
+
+      return renderer;
+    });
+
+    jest.mock(`react-flight/inline.${rendererInfo.shortName}`, () => {
+      let hasImportedShimmedConfig = false;
+
+      // We want the renderer to pick up the host config for this renderer.
+      jest.mock(shimFlightClientHostConfigPath, () => {
         hasImportedShimmedConfig = true;
         return require.requireActual(
-          `react-stream/src/forks/ReactFizzFormatConfig.${
-            rendererInfo.shortName
-          }.js`
+          `react-flight/src/forks/ReactFlightClientHostConfig.${rendererInfo.shortName}.js`
         );
       });
 
-      const renderer = require.requireActual('react-stream');
+      const renderer = require.requireActual('react-flight');
       // If the shimmed config factory function above has not run,
       // it means this test file loads more than one renderer
       // but doesn't reset modules between them. This won't work.
diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
index 838e0fd6f6cb3..8a33db5af26c6 100644
--- a/scripts/jest/setupTests.js
+++ b/scripts/jest/setupTests.js
@@ -44,7 +44,8 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
   }
 
   expect.extend({
-    ...require('./matchers/interactionTracing'),
+    ...require('./matchers/interactionTracingMatchers'),
+    ...require('./matchers/profilerMatchers'),
     ...require('./matchers/toWarnDev'),
     ...require('./matchers/reactTestMatchers'),
   });
@@ -107,14 +108,24 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
               .join('\n')}`
         );
 
+        let expectedMatcher;
+        switch (methodName) {
+          case 'warn':
+            expectedMatcher = 'toWarnDev';
+            break;
+          case 'error':
+            expectedMatcher = 'toErrorDev';
+            break;
+          default:
+            throw new Error('No matcher for ' + methodName);
+        }
         const message =
           `Expected test not to call ${chalk.bold(
             `console.${methodName}()`
           )}.\n\n` +
           'If the warning is expected, test for it explicitly by:\n' +
-          `1. Using the ${chalk.bold('.toWarnDev()')} / ${chalk.bold(
-            '.toLowPriorityWarnDev()'
-          )} matchers, or...\n` +
+          `1. Using the ${chalk.bold('.' + expectedMatcher + '()')} ` +
+          `matcher, or...\n` +
           `2. Mock it out using ${chalk.bold(
             'spyOnDev'
           )}(console, '${methodName}') or ${chalk.bold(
@@ -129,6 +140,10 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
   if (process.env.NODE_ENV === 'production') {
     // In production, we strip error messages and turn them into codes.
     // This decodes them back so that the test assertions on them work.
+    // 1. `ErrorProxy` decodes error messages at Error construction time and
+    //    also proxies error instances with `proxyErrorInstance`.
+    // 2. `proxyErrorInstance` decodes error messages when the `message`
+    //    property is changed.
     const decodeErrorMessage = function(message) {
       if (!message) {
         return message;
@@ -149,21 +164,109 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
       return format.replace(/%s/g, () => args[argIndex++]);
     };
     const OriginalError = global.Error;
+    // V8's Error.captureStackTrace (used in Jest) fails if the error object is
+    // a Proxy, so we need to pass it the unproxied instance.
+    const originalErrorInstances = new WeakMap();
+    const captureStackTrace = function(error, ...args) {
+      return OriginalError.captureStackTrace.call(
+        this,
+        originalErrorInstances.get(error) ||
+          // Sometimes this wrapper receives an already-unproxied instance.
+          error,
+        ...args
+      );
+    };
+    const proxyErrorInstance = error => {
+      const proxy = new Proxy(error, {
+        set(target, key, value, receiver) {
+          if (key === 'message') {
+            return Reflect.set(
+              target,
+              key,
+              decodeErrorMessage(value),
+              receiver
+            );
+          }
+          return Reflect.set(target, key, value, receiver);
+        },
+      });
+      originalErrorInstances.set(proxy, error);
+      return proxy;
+    };
     const ErrorProxy = new Proxy(OriginalError, {
       apply(target, thisArg, argumentsList) {
         const error = Reflect.apply(target, thisArg, argumentsList);
         error.message = decodeErrorMessage(error.message);
-        return error;
+        return proxyErrorInstance(error);
       },
       construct(target, argumentsList, newTarget) {
         const error = Reflect.construct(target, argumentsList, newTarget);
         error.message = decodeErrorMessage(error.message);
-        return error;
+        return proxyErrorInstance(error);
+      },
+      get(target, key, receiver) {
+        if (key === 'captureStackTrace') {
+          return captureStackTrace;
+        }
+        return Reflect.get(target, key, receiver);
       },
     });
     ErrorProxy.OriginalError = OriginalError;
     global.Error = ErrorProxy;
   }
 
+  const expectExperimentalToFail = async callback => {
+    if (callback.length > 0) {
+      throw Error(
+        'Experimental test helpers do not support `done` callback. Return a ' +
+          'promise instead.'
+      );
+    }
+    try {
+      const maybePromise = callback();
+      if (
+        maybePromise !== undefined &&
+        maybePromise !== null &&
+        typeof maybePromise.then === 'function'
+      ) {
+        await maybePromise;
+      }
+    } catch (error) {
+      // Failed as expected
+      return;
+    }
+    throw Error(
+      'Tests marked experimental are expected to fail, but this one passed.'
+    );
+  };
+
+  const it = global.it;
+  const fit = global.fit;
+  const xit = global.xit;
+  if (__EXPERIMENTAL__) {
+    it.experimental = it;
+    fit.experimental = it.only.experimental = it.experimental.only = fit;
+    xit.experimental = it.skip.experimental = it.experimental.skip = xit;
+  } else {
+    it.experimental = (message, callback) => {
+      it(`[EXPERIMENTAL, SHOULD FAIL] ${message}`, () =>
+        expectExperimentalToFail(callback));
+    };
+    fit.experimental = it.only.experimental = it.experimental.only = (
+      message,
+      callback
+    ) => {
+      fit(`[EXPERIMENTAL, SHOULD FAIL] ${message}`, () =>
+        expectExperimentalToFail(callback));
+    };
+    xit.experimental = it.skip.experimental = it.experimental.skip = (
+      message,
+      callback
+    ) => {
+      xit(`[EXPERIMENTAL, SHOULD FAIL] ${message}`, () =>
+        expectExperimentalToFail(callback));
+    };
+  }
+
   require('jasmine-check').install();
 }
diff --git a/scripts/jest/shouldIgnoreConsoleError.js b/scripts/jest/shouldIgnoreConsoleError.js
index 4ea96751c073b..cae46ac7c8c32 100644
--- a/scripts/jest/shouldIgnoreConsoleError.js
+++ b/scripts/jest/shouldIgnoreConsoleError.js
@@ -25,6 +25,16 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
       // They are noisy too so we'll try to ignore them.
       return true;
     }
+    if (
+      format.indexOf(
+        'act(...) is not supported in production builds of React'
+      ) === 0
+    ) {
+      // We don't yet support act() for prod builds, and warn for it.
+      // But we'd like to use act() ourselves for prod builds.
+      // Let's ignore the warning and #yolo.
+      return true;
+    }
   }
   // Looks legit
   return false;
diff --git a/scripts/jest/spec-equivalence-reporter/setupTests.js b/scripts/jest/spec-equivalence-reporter/setupTests.js
index 4fb46660d968a..997abd76fb052 100644
--- a/scripts/jest/spec-equivalence-reporter/setupTests.js
+++ b/scripts/jest/spec-equivalence-reporter/setupTests.js
@@ -46,7 +46,8 @@ global.spyOnProd = function(...args) {
 };
 
 expect.extend({
-  ...require('../matchers/interactionTracing'),
+  ...require('../matchers/interactionTracingMatchers'),
+  ...require('../matchers/profilerMatchers'),
   ...require('../matchers/toWarnDev'),
   ...require('../matchers/reactTestMatchers'),
 });
diff --git a/scripts/jest/typescript/jest.d.ts b/scripts/jest/typescript/jest.d.ts
index 4bc4f8a84d6f0..ef5ec332bbd73 100644
--- a/scripts/jest/typescript/jest.d.ts
+++ b/scripts/jest/typescript/jest.d.ts
@@ -21,8 +21,8 @@ interface Expect {
   not: Expect
   toThrow(message?: string): void
   toThrowError(message?: string): void
+  toErrorDev(message?: string | Array<string>, options?: any): void
   toWarnDev(message?: string | Array<string>, options?: any): void
-  toLowPriorityWarnDev(message?: string | Array<string>, options?: any): void
   toBe(value: any): void
   toEqual(value: any): void
   toBeFalsy(): void
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
index f6ec9c49f1aad..d14471a0e5a4b 100644
--- a/scripts/jest/typescript/preprocessor.js
+++ b/scripts/jest/typescript/preprocessor.js
@@ -10,29 +10,46 @@ const tsOptions = {
 };
 
 function formatErrorMessage(error) {
-  return (
-    error.file.filename +
-    '(' +
-    error.file.getLineAndCharacterOfPosition(error.start).line +
-    '): ' +
-    error.messageText
-  );
+  if (error.file) {
+    const message = ts.flattenDiagnosticMessageText(error.messageText, '\n');
+    return (
+      error.file.fileName +
+      '(' +
+      error.file.getLineAndCharacterOfPosition(error.start).line +
+      '): ' +
+      message
+    );
+  } else {
+    return ts.flattenDiagnosticMessageText(error.messageText, '\n');
+  }
 }
 
 function compile(content, contentFilename) {
   let output = null;
   const compilerHost = {
+    fileExists(filename) {
+      return ts.sys.fileExists(filename);
+    },
+    getCanonicalFileName(filename) {
+      return filename;
+    },
+    getCurrentDirectory() {
+      return '';
+    },
+    getDefaultLibFileName: () => 'lib.d.ts',
+    getNewLine: () => ts.sys.newLine,
     getSourceFile(filename, languageVersion) {
       let source;
+      const libRegex = /lib\.(.+\.)?d\.ts$/;
       const jestRegex = /jest\.d\.ts/;
       const reactRegex = /(?:React|ReactDOM|PropTypes)(?:\.d)?\.ts$/;
 
       // `path.normalize` is used to turn forward slashes in
       // the file path into backslashes on Windows.
       filename = path.normalize(filename);
-      if (filename === 'lib.d.ts') {
+      if (filename.match(libRegex)) {
         source = fs
-          .readFileSync(require.resolve('typescript/lib/lib.d.ts'))
+          .readFileSync(require.resolve('typescript/lib/' + filename))
           .toString();
       } else if (filename.match(jestRegex)) {
         source = fs.readFileSync(path.join(__dirname, 'jest.d.ts')).toString();
@@ -55,6 +72,12 @@ function compile(content, contentFilename) {
       }
       return ts.createSourceFile(filename, source, 'ES5', '0');
     },
+    readFile(filename) {
+      return ts.sys.readFile(filename);
+    },
+    useCaseSensitiveFileNames() {
+      return ts.sys.useCaseSensitiveFileNames;
+    },
     writeFile(name, text, writeByteOrderMark) {
       if (output === null) {
         output = text;
@@ -62,21 +85,6 @@ function compile(content, contentFilename) {
         throw new Error('Expected only one dependency.');
       }
     },
-    getCanonicalFileName(filename) {
-      return filename;
-    },
-    getCurrentDirectory() {
-      return '';
-    },
-    getNewLine() {
-      return '\n';
-    },
-    fileExists(filename) {
-      return ts.sys.fileExists(filename);
-    },
-    useCaseSensitiveFileNames() {
-      return ts.sys.useCaseSensitiveFileNames;
-    },
   };
   const program = ts.createProgram(
     ['lib.d.ts', 'jest.d.ts', contentFilename],
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index db7630e9787fb..163aacf00ac4f 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -6,17 +6,17 @@
  */
 'use strict';
 
-const babylon = require('babylon');
+const babelParser = require('@babel/parser');
 const fs = require('fs');
 const through = require('through2');
-const traverse = require('babel-traverse').default;
+const traverse = require('@babel/traverse').default;
 const gs = require('glob-stream');
 
 const evalToString = require('../shared/evalToString');
 
-const babylonOptions = {
+const parserOptions = {
   sourceType: 'module',
-  // As a parser, babylon has its own options and we can't directly
+  // babelParser has its own options and we can't directly
   // import/require a babel preset. It should be kept **the same** as
   // the `babel-plugin-syntax-*` ones specified in
   // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
@@ -38,22 +38,42 @@ function transform(file, enc, cb) {
       return;
     }
 
-    const ast = babylon.parse(source, babylonOptions);
+    let ast;
+    try {
+      ast = babelParser.parse(source, parserOptions);
+    } catch (error) {
+      console.error('Failed to parse source file:', file.path);
+      throw error;
+    }
+
     traverse(ast, {
       CallExpression: {
         exit: function(astPath) {
           const callee = astPath.get('callee');
           if (
-            callee.isIdentifier({name: 'warning'}) ||
-            callee.isIdentifier({name: 'warningWithoutStack'}) ||
-            callee.isIdentifier({name: 'lowPriorityWarning'})
+            callee.matchesPattern('console.warn') ||
+            callee.matchesPattern('console.error')
           ) {
             const node = astPath.node;
-
+            if (node.callee.type !== 'MemberExpression') {
+              return;
+            }
+            if (node.callee.property.type !== 'Identifier') {
+              return;
+            }
             // warning messages can be concatenated (`+`) at runtime, so here's
             // a trivial partial evaluator that interprets the literal value
-            const warningMsgLiteral = evalToString(node.arguments[1]);
-            warnings.add(JSON.stringify(warningMsgLiteral));
+            try {
+              const warningMsgLiteral = evalToString(node.arguments[0]);
+              warnings.add(JSON.stringify(warningMsgLiteral));
+            } catch (error) {
+              console.error(
+                'Failed to extract warning message from',
+                file.path
+              );
+              console.error(astPath.node.loc);
+              throw error;
+            }
           }
         },
       },
@@ -65,7 +85,9 @@ function transform(file, enc, cb) {
 
 gs([
   'packages/**/*.js',
-  '!packages/shared/warning.js',
+  '!packages/*/npm/**/*.js',
+  '!packages/shared/consoleWithStackDev.js',
+  '!packages/react-devtools*/**/*.js',
   '!**/__tests__/**/*.js',
   '!**/__mocks__/**/*.js',
 ]).pipe(
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 0a43ce8397eac..540518bc25a8b 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -17,6 +17,8 @@ The high level process of creating releases is [documented below](#process). Ind
 
 # Process
 
+If this is your first time running the release scripts, go to the `scripts/release` directory and run `yarn` to install the dependencies.
+
 ## Publishing a Canary
 
 Canaries are meant to be lightweight and published often. In most cases, canaries can be published using artifacts built by Circle CI.
@@ -24,6 +26,7 @@ Canaries are meant to be lightweight and published often. In most cases, canarie
 To prepare a canary for a particular commit:
 1. Choose a commit from [the commit log](https://github.com/facebook/react/commits/master).
 2. Click the "“✓" icon and click the Circle CI "Details" link.
+3. Select the `build` job (**not** the `build_experimental` job; see the next section). If it's still pending, you'll need to wait for it to finish. (Note: This is the most awkward part of cutting a release right now. We have plans to improve it.)
 4. Copy the build ID from the URL (e.g. the build ID for [circleci.com/gh/facebook/react/13471](https://circleci.com/gh/facebook/react/13471) is  **13471**).
 5. Run the [`prepare-canary`](#prepare-canary) script with the build ID you found <sup>1</sup>:
 ```sh
@@ -37,6 +40,18 @@ scripts/release/publish.js --tags canary
 
 <sup>1: You can omit the `build` param if you just want to release the latest commit as a canary.</sup>
 
+## Publishing an Experimental Canary
+
+Experimental canaries are special releases with additional features turned on.
+
+The steps for publishing an experimental canary are almost the same as for publishing a normal canary, except in step 3 you should choose the `build_experimental` job instead of `build`. (I know this is awkward; we have plans to make it less so. Ideally these canaries would get published by a cron job.)
+
+When publishing an experimental canary, use the `experimental` tag:
+
+```sh
+scripts/release/publish.js --tags experimental
+```
+
 ## Publishing a Stable Release
 
 Stable releases should always be created from a previously-released canary. This encourages better testing of the actual release artifacts and reduces the chance of unintended changes accidentally being included in a stable release.
diff --git a/scripts/release/create-canary-commands/build-artifacts.js b/scripts/release/create-canary-commands/build-artifacts.js
index f72cf596788a1..65867052a04b5 100644
--- a/scripts/release/create-canary-commands/build-artifacts.js
+++ b/scripts/release/create-canary-commands/build-artifacts.js
@@ -21,5 +21,5 @@ const run = async ({cwd, dry, tempDirectory}) => {
 };
 
 module.exports = async params => {
-  return logPromise(run(params), 'Building artifacts', 420000);
+  return logPromise(run(params), 'Building artifacts', 600000);
 };
diff --git a/scripts/release/create-canary-commands/copy-repo-to-temp-directory.js b/scripts/release/create-canary-commands/copy-repo-to-temp-directory.js
index 3d859b7e23c6c..fe8ce357fafbb 100644
--- a/scripts/release/create-canary-commands/copy-repo-to-temp-directory.js
+++ b/scripts/release/create-canary-commands/copy-repo-to-temp-directory.js
@@ -27,8 +27,6 @@ const run = async ({commit, cwd, tempDirectory}) => {
 module.exports = async params => {
   return logPromise(
     run(params),
-    theme`Copying React repo to temporary directory ({path ${
-      params.tempDirectory
-    }})`
+    theme`Copying React repo to temporary directory ({path ${params.tempDirectory}})`
   );
 };
diff --git a/scripts/release/create-canary-commands/npm-pack-and-unpack.js b/scripts/release/create-canary-commands/npm-pack-and-unpack.js
index 34736bb632546..3f79373ced6b8 100644
--- a/scripts/release/create-canary-commands/npm-pack-and-unpack.js
+++ b/scripts/release/create-canary-commands/npm-pack-and-unpack.js
@@ -32,18 +32,14 @@ const run = async ({cwd, dry, tempDirectory}) => {
   const compressedPackages = readdirSync(join(cwd, 'build/node_modules/'));
   for (let i = 0; i < compressedPackages.length; i++) {
     await exec(
-      `tar -zxvf ./build/node_modules/${
-        compressedPackages[i]
-      } -C ./build/node_modules/`,
+      `tar -zxvf ./build/node_modules/${compressedPackages[i]} -C ./build/node_modules/`,
       {cwd}
     );
     const packageJSON = readJsonSync(
       join(cwd, `./build/node_modules/package/package.json`)
     );
     await exec(
-      `mv ./build/node_modules/package ./build/node_modules/${
-        packageJSON.name
-      }`,
+      `mv ./build/node_modules/package ./build/node_modules/${packageJSON.name}`,
       {cwd}
     );
   }
diff --git a/scripts/release/download-experimental-build-commands/print-summary.js b/scripts/release/download-experimental-build-commands/print-summary.js
new file mode 100644
index 0000000000000..2edf35f96fa1d
--- /dev/null
+++ b/scripts/release/download-experimental-build-commands/print-summary.js
@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {join, relative} = require('path');
+const theme = require('../theme');
+
+module.exports = ({build}) => {
+  const commandPath = relative(
+    process.env.PWD,
+    join(__dirname, '../download-experimental-build.js')
+  );
+
+  clear();
+
+  const message = theme`
+    {caution An experimental build has been downloaded!}
+
+    You can download this build again by running:
+    {path   ${commandPath}} --build={build ${build}}
+  `;
+
+  console.log(message.replace(/\n +/g, '\n').trim());
+};
diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
new file mode 100755
index 0000000000000..2df0459b0df71
--- /dev/null
+++ b/scripts/release/download-experimental-build.js
@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join} = require('path');
+const {getPublicPackages, handleError} = require('./utils');
+
+const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
+const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
+const getLatestMasterBuildNumber = require('./shared-commands/get-latest-master-build-number');
+const parseParams = require('./shared-commands/parse-params');
+const printSummary = require('./download-experimental-build-commands/print-summary');
+
+const run = async () => {
+  try {
+    const params = parseParams();
+    params.cwd = join(__dirname, '..', '..');
+    params.packages = await getPublicPackages();
+
+    if (!params.build) {
+      params.build = await getLatestMasterBuildNumber(true);
+    }
+
+    await checkEnvironmentVariables(params);
+    await downloadBuildArtifacts(params);
+
+    printSummary(params);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/prepare-canary.js b/scripts/release/prepare-canary.js
index 37be7b382953d..202054564bb50 100755
--- a/scripts/release/prepare-canary.js
+++ b/scripts/release/prepare-canary.js
@@ -5,10 +5,10 @@
 const {join} = require('path');
 const {getPublicPackages, handleError} = require('./utils');
 
-const checkEnvironmentVariables = require('./prepare-canary-commands/check-environment-variables');
-const downloadBuildArtifacts = require('./prepare-canary-commands/download-build-artifacts');
-const getLatestMasterBuildNumber = require('./prepare-canary-commands/get-latest-master-build-number');
-const parseParams = require('./prepare-canary-commands/parse-params');
+const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
+const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
+const getLatestMasterBuildNumber = require('./shared-commands/get-latest-master-build-number');
+const parseParams = require('./shared-commands/parse-params');
 const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
 const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
 const testTracingFixture = require('./shared-commands/test-tracing-fixture');
@@ -20,7 +20,7 @@ const run = async () => {
     params.packages = await getPublicPackages();
 
     if (!params.build) {
-      params.build = await getLatestMasterBuildNumber();
+      params.build = await getLatestMasterBuildNumber(false);
     }
 
     await checkEnvironmentVariables(params);
diff --git a/scripts/release/prepare-stable-commands/confirm-stable-version-numbers.js b/scripts/release/prepare-stable-commands/confirm-stable-version-numbers.js
index d00bb38576454..dd1229634b102 100644
--- a/scripts/release/prepare-stable-commands/confirm-stable-version-numbers.js
+++ b/scripts/release/prepare-stable-commands/confirm-stable-version-numbers.js
@@ -5,8 +5,9 @@
 const prompt = require('prompt-promise');
 const semver = require('semver');
 const theme = require('../theme');
+const {confirm} = require('../utils');
 
-const run = async (params, versionsMap) => {
+const run = async ({skipPackages}, versionsMap) => {
   const groupedVersionsMap = new Map();
 
   // Group packages with the same source versions.
@@ -26,14 +27,26 @@ const run = async (params, versionsMap) => {
   for (let i = 0; i < entries.length; i++) {
     const [bestGuessVersion, packages] = entries[i];
     const packageNames = packages.map(name => theme.package(name)).join(', ');
-    const defaultVersion = bestGuessVersion
-      ? theme.version(` (default ${bestGuessVersion})`)
-      : '';
-    const version =
-      (await prompt(
-        theme`{spinnerSuccess ✓} Version for ${packageNames}${defaultVersion}: `
-      )) || bestGuessVersion;
-    prompt.done();
+
+    let version = bestGuessVersion;
+    if (
+      skipPackages.some(skipPackageName =>
+        packageNames.includes(skipPackageName)
+      )
+    ) {
+      await confirm(
+        theme`{spinnerSuccess ✓} Version for ${packageNames} will remain {version ${bestGuessVersion}}`
+      );
+    } else {
+      const defaultVersion = bestGuessVersion
+        ? theme.version(` (default ${bestGuessVersion})`)
+        : '';
+      version =
+        (await prompt(
+          theme`{spinnerSuccess ✓} Version for ${packageNames}${defaultVersion}: `
+        )) || bestGuessVersion;
+      prompt.done();
+    }
 
     // Verify a valid version has been supplied.
     try {
diff --git a/scripts/release/prepare-stable-commands/guess-stable-version-numbers.js b/scripts/release/prepare-stable-commands/guess-stable-version-numbers.js
index f5c78fa0d8205..1e9b560faf08c 100644
--- a/scripts/release/prepare-stable-commands/guess-stable-version-numbers.js
+++ b/scripts/release/prepare-stable-commands/guess-stable-version-numbers.js
@@ -5,7 +5,7 @@
 const semver = require('semver');
 const {execRead, logPromise} = require('../utils');
 
-const run = async ({cwd, packages}, versionsMap) => {
+const run = async ({cwd, packages, skipPackages}, versionsMap) => {
   const branch = await execRead('git branch | grep \\* | cut -d " " -f2', {
     cwd,
   });
@@ -17,16 +17,21 @@ const run = async ({cwd, packages}, versionsMap) => {
       // In case local package JSONs are outdated,
       // guess the next version based on the latest NPM release.
       const version = await execRead(`npm show ${packageName} version`);
-      const {major, minor, patch} = semver(version);
-
-      // Guess the next version by incrementing patch.
-      // The script will confirm this later.
-      // By default, new releases from masters should increment the minor version number,
-      // and patch releases should be done from branches.
-      if (branch === 'master') {
-        versionsMap.set(packageName, `${major}.${minor + 1}.0`);
+
+      if (skipPackages.includes(packageName)) {
+        versionsMap.set(packageName, version);
       } else {
-        versionsMap.set(packageName, `${major}.${minor}.${patch + 1}`);
+        const {major, minor, patch} = semver(version);
+
+        // Guess the next version by incrementing patch.
+        // The script will confirm this later.
+        // By default, new releases from masters should increment the minor version number,
+        // and patch releases should be done from branches.
+        if (branch === 'master') {
+          versionsMap.set(packageName, `${major}.${minor + 1}.0`);
+        } else {
+          versionsMap.set(packageName, `${major}.${minor}.${patch + 1}`);
+        }
       }
     } catch (error) {
       // If the package has not yet been published,
diff --git a/scripts/release/prepare-stable-commands/parse-params.js b/scripts/release/prepare-stable-commands/parse-params.js
index c7d12c001eba6..fc2256d27fd17 100644
--- a/scripts/release/prepare-stable-commands/parse-params.js
+++ b/scripts/release/prepare-stable-commands/parse-params.js
@@ -3,6 +3,7 @@
 'use strict';
 
 const commandLineArgs = require('command-line-args');
+const {splitCommaParams} = require('../utils');
 
 const paramDefinitions = [
   {
@@ -12,6 +13,13 @@ const paramDefinitions = [
       'Skip NPM and use the build already present in "build/node_modules".',
     defaultValue: false,
   },
+  {
+    name: 'skipPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to exclude from publishing',
+    defaultValue: [],
+  },
   {
     name: 'skipTests',
     type: Boolean,
@@ -28,5 +36,7 @@ const paramDefinitions = [
 module.exports = () => {
   const params = commandLineArgs(paramDefinitions);
 
+  splitCommaParams(params.skipPackages);
+
   return params;
 };
diff --git a/scripts/release/prepare-stable-commands/update-stable-version-numbers.js b/scripts/release/prepare-stable-commands/update-stable-version-numbers.js
index a655755283449..4388a4b34c8d2 100644
--- a/scripts/release/prepare-stable-commands/update-stable-version-numbers.js
+++ b/scripts/release/prepare-stable-commands/update-stable-version-numbers.js
@@ -90,9 +90,7 @@ const run = async ({cwd, packages, version}, versionsMap) => {
       for (let dependencyName in maybeDependency) {
         if (packages.includes(dependencyName)) {
           console.log(
-            theme`• {package ${dependencyName}} {version ${
-              maybeDependency[dependencyName]
-            }} {dimmed ${label}}`
+            theme`• {package ${dependencyName}} {version ${maybeDependency[dependencyName]}} {dimmed ${label}}`
           );
         }
       }
diff --git a/scripts/release/prepare-stable.js b/scripts/release/prepare-stable.js
index 04d507fdadfee..ef03ee8c5b261 100755
--- a/scripts/release/prepare-stable.js
+++ b/scripts/release/prepare-stable.js
@@ -14,6 +14,7 @@ const printPrereleaseSummary = require('./shared-commands/print-prerelease-summa
 const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
 const testTracingFixture = require('./shared-commands/test-tracing-fixture');
 const updateStableVersionNumbers = require('./prepare-stable-commands/update-stable-version-numbers');
+const theme = require('./theme');
 
 const run = async () => {
   try {
@@ -30,6 +31,13 @@ const run = async () => {
       params.version = await getLatestCanaryVersion();
     }
 
+    if (params.version.includes('experimental')) {
+      console.error(
+        theme.error`Cannot promote an experimental build to stable.`
+      );
+      process.exit(1);
+    }
+
     await checkOutPackages(params);
     await guessStableVersionNumbers(params, versionsMap);
     await confirmStableVersionNumbers(params, versionsMap);
diff --git a/scripts/release/publish-commands/confirm-skipped-packages.js b/scripts/release/publish-commands/confirm-skipped-packages.js
new file mode 100644
index 0000000000000..3e7bc03d6854d
--- /dev/null
+++ b/scripts/release/publish-commands/confirm-skipped-packages.js
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {confirm} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, packages, skipPackages, tags}) => {
+  if (skipPackages.length === 0) {
+    return;
+  }
+
+  clear();
+
+  console.log(
+    theme`{spinnerSuccess ✓} The following packages will not be published as part of this release`
+  );
+
+  skipPackages.forEach(packageName => {
+    console.log(theme`• {package ${packageName}}`);
+  });
+
+  await confirm('Do you want to proceed?');
+
+  clear();
+};
+
+// Run this directly because it's fast,
+// and logPromise would interfere with console prompting.
+module.exports = run;
diff --git a/scripts/release/publish-commands/confirm-version-and-tags.js b/scripts/release/publish-commands/confirm-version-and-tags.js
index d5095b7ea1969..73dadd5aaa661 100644
--- a/scripts/release/publish-commands/confirm-version-and-tags.js
+++ b/scripts/release/publish-commands/confirm-version-and-tags.js
@@ -23,7 +23,6 @@ const run = async ({cwd, packages, tags}) => {
     );
   }
 
-  // Cache all package JSONs for easy lookup below.
   for (let i = 0; i < packages.length; i++) {
     const packageName = packages[i];
     const packageJSONPath = join(
diff --git a/scripts/release/publish-commands/download-error-codes-from-ci.js b/scripts/release/publish-commands/download-error-codes-from-ci.js
index d1a64d296eddc..bd5747f2dff30 100644
--- a/scripts/release/publish-commands/download-error-codes-from-ci.js
+++ b/scripts/release/publish-commands/download-error-codes-from-ci.js
@@ -2,13 +2,13 @@
 
 'use strict';
 
-const http = require('request-promise-json');
 const {exec} = require('child-process-promise');
 const {readJsonSync} = require('fs-extra');
-const {logPromise} = require('../utils');
+const {join} = require('path');
+const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
 
-const run = async ({cwd, tags}) => {
+const run = async ({cwd, packages, tags}) => {
   if (!tags.includes('latest')) {
     // Don't update error-codes for alphas.
     return;
@@ -16,26 +16,22 @@ const run = async ({cwd, tags}) => {
 
   // All packages are built from a single source revision,
   // so it is safe to read build info from any one of them.
+  const arbitraryPackageName = packages[0];
   const {buildNumber, environment} = readJsonSync(
-    `${cwd}/build/node_modules/react/build-info.json`
+    join(cwd, 'build', 'node_modules', arbitraryPackageName, 'build-info.json')
   );
 
   // If this release was created on Circle CI, grab the updated error codes from there.
   // Else the user will have to manually regenerate them.
   if (environment === 'ci') {
-    // https://circleci.com/docs/2.0/artifacts/#downloading-all-artifacts-for-a-build-on-circleci
-    // eslint-disable-next-line max-len
-    const metadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${buildNumber}/artifacts?circle-token=${
-      process.env.CIRCLE_CI_API_TOKEN
-    }`;
-    const metadata = await http.get(metadataURL, true);
+    const artifacts = await getArtifactsList(buildNumber);
 
     // Each container stores an "error-codes" artifact, unfortunately.
     // We want to use the one that also ran `yarn build` since it may have modifications.
-    const {node_index} = metadata.find(
+    const {node_index} = artifacts.find(
       entry => entry.path === 'home/circleci/project/node_modules.tgz'
     );
-    const {url} = metadata.find(
+    const {url} = artifacts.find(
       entry =>
         entry.node_index === node_index &&
         entry.path === 'home/circleci/project/scripts/error-codes/codes.json'
diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index 635e22c812a49..b496d4f957fb4 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -4,6 +4,7 @@
 
 const commandLineArgs = require('command-line-args');
 const commandLineUsage = require('command-line-usage');
+const {splitCommaParams} = require('../utils');
 
 const paramDefinitions = [
   {
@@ -18,12 +19,21 @@ const paramDefinitions = [
     multiple: true,
     description: 'NPM tags to point to the new release.',
   },
+  {
+    name: 'skipPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to exclude from publishing',
+    defaultValue: [],
+  },
 ];
 
 module.exports = () => {
   const params = commandLineArgs(paramDefinitions);
 
-  if (!params.tags || params.tags.length === 0) {
+  const {skipPackages, tags} = params;
+
+  if (!tags || tags.length === 0) {
     const usage = commandLineUsage([
       {
         content:
@@ -51,5 +61,8 @@ module.exports = () => {
     process.exit(1);
   }
 
+  splitCommaParams(skipPackages);
+  splitCommaParams(tags);
+
   return params;
 };
diff --git a/scripts/release/publish-commands/print-follow-up-instructions.js b/scripts/release/publish-commands/print-follow-up-instructions.js
index 41e1d4544b9eb..5d2bc3451aa23 100644
--- a/scripts/release/publish-commands/print-follow-up-instructions.js
+++ b/scripts/release/publish-commands/print-follow-up-instructions.js
@@ -11,9 +11,10 @@ const {execRead} = require('../utils');
 
 const run = async ({cwd, packages, tags}) => {
   // All packages are built from a single source revision,
-  // so it is safe to read the commit number from any one of them.
+  // so it is safe to read build info from any one of them.
+  const arbitraryPackageName = packages[0];
   const {commit, environment} = readJsonSync(
-    `${cwd}/build/node_modules/react/build-info.json`
+    join(cwd, 'build', 'node_modules', arbitraryPackageName, 'build-info.json')
   );
 
   // Tags are named after the react version.
@@ -50,7 +51,13 @@ const run = async ({cwd, packages, tags}) => {
         const packageName = packages[i];
         console.log(theme.path`• packages/%s/package.json`, packageName);
       }
-      console.log(theme.path`• packages/shared/ReactVersion.js`);
+      const status = await execRead(
+        'git diff packages/shared/ReactVersion.js',
+        {cwd}
+      );
+      if (status) {
+        console.log(theme.path`• packages/shared/ReactVersion.js`);
+      }
 
       console.log();
       if (environment === 'ci') {
diff --git a/scripts/release/publish-commands/publish-to-npm.js b/scripts/release/publish-commands/publish-to-npm.js
index 73b89f83d86be..cc925bcc66398 100644
--- a/scripts/release/publish-commands/publish-to-npm.js
+++ b/scripts/release/publish-commands/publish-to-npm.js
@@ -44,17 +44,13 @@ const run = async ({cwd, dry, packages, tags}, otp) => {
       for (let j = 1; j < tags.length; j++) {
         if (!dry) {
           await exec(
-            `npm dist-tag add ${packageName}@${version} ${
-              tags[j]
-            } --otp=${otp}`,
+            `npm dist-tag add ${packageName}@${version} ${tags[j]} --otp=${otp}`,
             {cwd: packagePath}
           );
         }
         console.log(
           theme.command(
-            `  npm dist-tag add ${packageName}@${version} ${
-              tags[j]
-            } --otp=${otp}`
+            `  npm dist-tag add ${packageName}@${version} ${tags[j]} --otp=${otp}`
           )
         );
       }
diff --git a/scripts/release/publish-commands/update-stable-version-numbers.js b/scripts/release/publish-commands/update-stable-version-numbers.js
index b94caa43c147f..0a56d8e39c66b 100644
--- a/scripts/release/publish-commands/update-stable-version-numbers.js
+++ b/scripts/release/publish-commands/update-stable-version-numbers.js
@@ -6,7 +6,7 @@ const {readFileSync, writeFileSync} = require('fs');
 const {readJson, writeJson} = require('fs-extra');
 const {join} = require('path');
 
-const run = async ({cwd, packages, tags}) => {
+const run = async ({cwd, packages, skipPackages, tags}) => {
   if (!tags.includes('latest')) {
     // Don't update version numbers for alphas.
     return;
@@ -35,15 +35,18 @@ const run = async ({cwd, packages, tags}) => {
   }
 
   // Update the shared React version source file.
-  const sourceReactVersionPath = join(cwd, 'packages/shared/ReactVersion.js');
-  const {version} = await readJson(
-    join(nodeModulesPath, 'react', 'package.json')
-  );
-  const sourceReactVersion = readFileSync(
-    sourceReactVersionPath,
-    'utf8'
-  ).replace(/module\.exports = '[^']+';/, `module.exports = '${version}';`);
-  writeFileSync(sourceReactVersionPath, sourceReactVersion);
+  // (Unless this release does not include an update to React)
+  if (!skipPackages.includes('react')) {
+    const sourceReactVersionPath = join(cwd, 'packages/shared/ReactVersion.js');
+    const {version} = await readJson(
+      join(nodeModulesPath, 'react', 'package.json')
+    );
+    const sourceReactVersion = readFileSync(
+      sourceReactVersionPath,
+      'utf8'
+    ).replace(/module\.exports = '[^']+';/, `module.exports = '${version}';`);
+    writeFileSync(sourceReactVersionPath, sourceReactVersion);
+  }
 };
 
 module.exports = run;
diff --git a/scripts/release/publish-commands/validate-skip-packages.js b/scripts/release/publish-commands/validate-skip-packages.js
new file mode 100644
index 0000000000000..af7324fdf6267
--- /dev/null
+++ b/scripts/release/publish-commands/validate-skip-packages.js
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {readJson} = require('fs-extra');
+const {join} = require('path');
+const theme = require('../theme');
+const {execRead} = require('../utils');
+
+const readPackageJSON = async (cwd, name) => {
+  const packageJSONPath = join(
+    cwd,
+    'build',
+    'node_modules',
+    name,
+    'package.json'
+  );
+  return await readJson(packageJSONPath);
+};
+
+const run = async ({cwd, packages, skipPackages}) => {
+  if (skipPackages.length === 0) {
+    return;
+  }
+
+  const validateDependencies = async (name, dependencies) => {
+    if (!dependencies) {
+      return;
+    }
+
+    for (let dependency in dependencies) {
+      // Do we depend on a package that has been skipped?
+      if (skipPackages.includes(dependency)) {
+        const version = dependencies[dependency];
+        // Do we depend on a version of the package that has not been published to NPM?
+        const info = await execRead(`npm view ${dependency}@${version}`);
+        if (!info) {
+          console.log(
+            theme`{error Package} {package ${name}} {error depends on an unpublished skipped package}`,
+            theme`{package ${dependency}}@{version ${version}}`
+          );
+          process.exit(1);
+        }
+      }
+    }
+  };
+
+  // Make sure none of the other packages depend on a skipped package,
+  // unless the dependency has already been published to NPM.
+  for (let i = 0; i < packages.length; i++) {
+    const name = packages[i];
+    const {dependencies, peerDependencies} = await readPackageJSON(cwd, name);
+
+    validateDependencies(name, dependencies);
+    validateDependencies(name, peerDependencies);
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/publish-commands/validate-tags.js b/scripts/release/publish-commands/validate-tags.js
index 0021511da3488..70d9ff6521ada 100644
--- a/scripts/release/publish-commands/validate-tags.js
+++ b/scripts/release/publish-commands/validate-tags.js
@@ -8,11 +8,13 @@ const theme = require('../theme');
 
 const run = async ({cwd, packages, tags}) => {
   // Prevent a canary release from ever being published as @latest
+  // All canaries share a version number, so it's okay to check any of them.
+  const arbitraryPackageName = packages[0];
   const packageJSONPath = join(
     cwd,
     'build',
     'node_modules',
-    'react',
+    arbitraryPackageName,
     'package.json'
   );
   const {version} = await readJson(packageJSONPath);
@@ -23,6 +25,13 @@ const run = async ({cwd, packages, tags}) => {
       );
       process.exit(1);
     }
+  } else {
+    if (tags.includes('canary')) {
+      console.log(
+        theme`{error Stable release} {version ${version}} {error cannot be tagged as} {tag canary}`
+      );
+      process.exit(1);
+    }
   }
 };
 
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index 4923204a1333f..0e7224a3e2a13 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -4,8 +4,10 @@
 
 const {join} = require('path');
 const {getPublicPackages, handleError} = require('./utils');
+const theme = require('./theme');
 
 const checkNPMPermissions = require('./publish-commands/check-npm-permissions');
+const confirmSkippedPackages = require('./publish-commands/confirm-skipped-packages');
 const confirmVersionAndTags = require('./publish-commands/confirm-version-and-tags');
 const downloadErrorCodesFromCI = require('./publish-commands/download-error-codes-from-ci');
 const parseParams = require('./publish-commands/parse-params');
@@ -14,6 +16,7 @@ const promptForOTP = require('./publish-commands/prompt-for-otp');
 const publishToNPM = require('./publish-commands/publish-to-npm');
 const updateStableVersionNumbers = require('./publish-commands/update-stable-version-numbers');
 const validateTags = require('./publish-commands/validate-tags');
+const validateSkipPackages = require('./publish-commands/validate-skip-packages');
 
 const run = async () => {
   try {
@@ -21,8 +24,24 @@ const run = async () => {
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages();
 
+    // Pre-filter any skipped packages to simplify the following commands.
+    // As part of doing this we can also validate that none of the skipped packages were misspelled.
+    params.skipPackages.forEach(packageName => {
+      const index = params.packages.indexOf(packageName);
+      if (index < 0) {
+        console.log(
+          theme`Invalid skip package {package ${packageName}} specified.`
+        );
+        process.exit(1);
+      } else {
+        params.packages.splice(index, 1);
+      }
+    });
+
     await validateTags(params);
+    await confirmSkippedPackages(params);
     await confirmVersionAndTags(params);
+    await validateSkipPackages(params);
     await checkNPMPermissions(params);
     const otp = await promptForOTP(params);
     await publishToNPM(params, otp);
diff --git a/scripts/release/prepare-canary-commands/check-environment-variables.js b/scripts/release/shared-commands/check-environment-variables.js
similarity index 100%
rename from scripts/release/prepare-canary-commands/check-environment-variables.js
rename to scripts/release/shared-commands/check-environment-variables.js
diff --git a/scripts/release/prepare-canary-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
similarity index 68%
rename from scripts/release/prepare-canary-commands/download-build-artifacts.js
rename to scripts/release/shared-commands/download-build-artifacts.js
index 2996796023474..cc65c44016a24 100644
--- a/scripts/release/prepare-canary-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -2,23 +2,27 @@
 
 'use strict';
 
-const http = require('request-promise-json');
 const {exec} = require('child-process-promise');
 const {existsSync, readdirSync} = require('fs');
 const {readJsonSync} = require('fs-extra');
 const {join} = require('path');
-const {logPromise} = require('../utils');
+const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
 
 const run = async ({build, cwd}) => {
-  // https://circleci.com/docs/2.0/artifacts/#downloading-all-artifacts-for-a-build-on-circleci
-  const metadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${build}/artifacts?circle-token=${
-    process.env.CIRCLE_CI_API_TOKEN
-  }`;
-  const metadata = await http.get(metadataURL, true);
-  const nodeModulesURL = metadata.find(
+  const artifacts = await getArtifactsList(build);
+  const nodeModulesArtifact = artifacts.find(
     entry => entry.path === 'home/circleci/project/node_modules.tgz'
-  ).url;
+  );
+
+  if (!nodeModulesArtifact) {
+    console.log(
+      theme`{error The specified build (${build}) does not contain any build artifacts.}`
+    );
+    process.exit(1);
+  }
+
+  const nodeModulesURL = nodeModulesArtifact.url;
 
   if (!existsSync(join(cwd, 'build'))) {
     await exec(`mkdir ./build`, {cwd});
@@ -36,18 +40,14 @@ const run = async ({build, cwd}) => {
   const compressedPackages = readdirSync(join(cwd, 'build/node_modules/'));
   for (let i = 0; i < compressedPackages.length; i++) {
     await exec(
-      `tar zxvf ./build/node_modules/${
-        compressedPackages[i]
-      } -C ./build/node_modules/`,
+      `tar zxvf ./build/node_modules/${compressedPackages[i]} -C ./build/node_modules/`,
       {cwd}
     );
     const packageJSON = readJsonSync(
       join(cwd, `/build/node_modules/package/package.json`)
     );
     await exec(
-      `mv ./build/node_modules/package ./build/node_modules/${
-        packageJSON.name
-      }`,
+      `mv ./build/node_modules/package ./build/node_modules/${packageJSON.name}`,
       {cwd}
     );
   }
diff --git a/scripts/release/prepare-canary-commands/get-latest-master-build-number.js b/scripts/release/shared-commands/get-latest-master-build-number.js
similarity index 65%
rename from scripts/release/prepare-canary-commands/get-latest-master-build-number.js
rename to scripts/release/shared-commands/get-latest-master-build-number.js
index c4c6f36842f9a..1d1787fad8f04 100644
--- a/scripts/release/prepare-canary-commands/get-latest-master-build-number.js
+++ b/scripts/release/shared-commands/get-latest-master-build-number.js
@@ -5,12 +5,19 @@
 const http = require('request-promise-json');
 const {logPromise} = require('../utils');
 
-const run = async () => {
+const run = async useExperimentalBuild => {
+  const targetJobName = useExperimentalBuild
+    ? 'process_artifacts_experimental'
+    : 'process_artifacts';
+
   // https://circleci.com/docs/api/#recent-builds-for-a-project-branch
   const metadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/tree/master`;
   const metadata = await http.get(metadataURL, true);
   const build = metadata.find(
-    entry => entry.branch === 'master' && entry.status === 'success'
+    entry =>
+      entry.branch === 'master' &&
+      entry.status === 'success' &&
+      entry.workflows.job_name === targetJobName
   ).build_num;
 
   return build;
diff --git a/scripts/release/prepare-canary-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
similarity index 100%
rename from scripts/release/prepare-canary-commands/parse-params.js
rename to scripts/release/shared-commands/parse-params.js
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index f523eecea0db6..5c258366fcfb8 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -5,12 +5,21 @@ const {createPatch} = require('diff');
 const {hashElement} = require('folder-hash');
 const {readdirSync, readFileSync, statSync, writeFileSync} = require('fs');
 const {readJson, writeJson} = require('fs-extra');
+const http = require('request-promise-json');
 const logUpdate = require('log-update');
 const {join} = require('path');
 const createLogger = require('progress-estimator');
 const prompt = require('prompt-promise');
 const theme = require('./theme');
 
+// The following packages are published to NPM but not by this script.
+// They are released through a separate process.
+const RELEASE_SCRIPT_PACKAGE_SKIPLIST = [
+  'react-devtools',
+  'react-devtools-core',
+  'react-devtools-inline',
+];
+
 // https://www.npmjs.com/package/progress-estimator#configuration
 const logger = createLogger({
   storagePath: join(__dirname, '.progress-estimator'),
@@ -31,15 +40,52 @@ const execRead = async (command, options) => {
   return stdout.trim();
 };
 
+const getArtifactsList = async buildID => {
+  const buildMetadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${buildID}?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
+  const buildMetadata = await http.get(buildMetadataURL, true);
+  if (!buildMetadata.workflows || !buildMetadata.workflows.workflow_id) {
+    console.log(
+      theme`{error Could not find workflow info for build ${buildID}.}`
+    );
+    process.exit(1);
+  }
+  const artifactsJobName = buildMetadata.workflows.job_name.endsWith(
+    '_experimental'
+  )
+    ? 'process_artifacts_experimental'
+    : 'process_artifacts';
+  const workflowID = buildMetadata.workflows.workflow_id;
+  const workflowMetadataURL = `https://circleci.com/api/v2/workflow/${workflowID}/job?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
+  const workflowMetadata = await http.get(workflowMetadataURL, true);
+  const job = workflowMetadata.items.find(
+    ({name}) => name === artifactsJobName
+  );
+  if (!job || !job.job_number) {
+    console.log(
+      theme`{error Could not find "${artifactsJobName}" job for workflow ${workflowID}.}`
+    );
+    process.exit(1);
+  }
+
+  const jobArtifactsURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${job.job_number}/artifacts?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
+  const jobArtifacts = await http.get(jobArtifactsURL, true);
+
+  return jobArtifacts;
+};
+
 const getBuildInfo = async () => {
   const cwd = join(__dirname, '..', '..');
 
+  const isExperimental = process.env.RELEASE_CHANNEL === 'experimental';
+
   const branch = await execRead('git branch | grep \\* | cut -d " " -f2', {
     cwd,
   });
   const commit = await execRead('git show -s --format=%h', {cwd});
   const checksum = await getChecksumForCurrentRevision(cwd);
-  const version = `0.0.0-${commit}`;
+  const version = isExperimental
+    ? `0.0.0-experimental-${commit}`
+    : `0.0.0-${commit}`;
 
   // Only available for Circle CI builds.
   // https://circleci.com/docs/2.0/env-vars/
@@ -50,7 +96,9 @@ const getBuildInfo = async () => {
   const packageJSON = await readJson(
     join(cwd, 'packages', 'react', 'package.json')
   );
-  const reactVersion = `${packageJSON.version}-canary-${commit}`;
+  const reactVersion = isExperimental
+    ? `${packageJSON.version}-experimental-${commit}`
+    : `${packageJSON.version}-${commit}`;
 
   return {branch, buildNumber, checksum, commit, reactVersion, version};
 };
@@ -68,12 +116,23 @@ const getPublicPackages = () => {
   const packagesRoot = join(__dirname, '..', '..', 'packages');
 
   return readdirSync(packagesRoot).filter(dir => {
-    const packagePath = join(packagesRoot, dir, 'package.json');
+    if (RELEASE_SCRIPT_PACKAGE_SKIPLIST.includes(dir)) {
+      return false;
+    }
 
-    if (dir.charAt(0) !== '.' && statSync(packagePath).isFile()) {
-      const packageJSON = JSON.parse(readFileSync(packagePath));
+    const packagePath = join(packagesRoot, dir, 'package.json');
 
-      return packageJSON.private !== true;
+    if (dir.charAt(0) !== '.') {
+      let stat;
+      try {
+        stat = statSync(packagePath);
+      } catch (err) {
+        return false;
+      }
+      if (stat.isFile()) {
+        const packageJSON = JSON.parse(readFileSync(packagePath));
+        return packageJSON.private !== true;
+      }
     }
 
     return false;
@@ -87,7 +146,6 @@ const handleError = error => {
   const stack = error.stack.replace(error.message, '');
 
   console.log(theme`{error ${message}}\n\n{path ${stack}}`);
-
   process.exit(1);
 };
 
@@ -121,6 +179,17 @@ const printDiff = (path, beforeContents, afterContents) => {
   return patch;
 };
 
+// Convert an array param (expected format "--foo bar baz")
+// to also accept comma input (e.g. "--foo bar,baz")
+const splitCommaParams = array => {
+  for (let i = array.length - 1; i >= 0; i--) {
+    const param = array[i];
+    if (param.includes(',')) {
+      array.splice(i, 1, ...param.split(','));
+    }
+  }
+};
+
 // This method is used by both local Node release scripts and Circle CI bash scripts.
 // It updates version numbers in package JSONs (both the version field and dependencies),
 // As well as the embedded renderer version in "packages/shared/ReactVersion".
@@ -185,12 +254,14 @@ const updateVersionsForCanary = async (cwd, reactVersion, version) => {
 module.exports = {
   confirm,
   execRead,
+  getArtifactsList,
   getBuildInfo,
   getChecksumForCurrentRevision,
   getPublicPackages,
   handleError,
   logPromise,
   printDiff,
+  splitCommaParams,
   theme,
   updateVersionsForCanary,
 };
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 15eca1b5de81c..ec0cc2c1754bb 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -25,6 +25,15 @@ const {asyncCopyTo, asyncRimRaf} = require('./utils');
 const codeFrame = require('babel-code-frame');
 const Wrappers = require('./wrappers');
 
+const RELEASE_CHANNEL = process.env.RELEASE_CHANNEL;
+
+// Default to building in experimental mode. If the release channel is set via
+// an environment variable, then check if it's "experimental".
+const __EXPERIMENTAL__ =
+  typeof RELEASE_CHANNEL === 'string'
+    ? RELEASE_CHANNEL === 'experimental'
+    : true;
+
 // Errors in promises should be fatal.
 let loggedErrors = new Set();
 process.on('unhandledRejection', err => {
@@ -98,12 +107,31 @@ const closureOptions = {
   rewrite_polyfills: false,
 };
 
-function getBabelConfig(updateBabelOptions, bundleType, filename) {
+function getBabelConfig(
+  updateBabelOptions,
+  bundleType,
+  packageName,
+  externals,
+  isDevelopment
+) {
+  const canAccessReactObject =
+    packageName === 'react' || externals.indexOf('react') !== -1;
   let options = {
     exclude: '/**/node_modules/**',
     presets: [],
     plugins: [],
   };
+  if (isDevelopment) {
+    options.plugins.push(
+      // Turn console.error/warn() into a custom wrapper
+      [
+        require('../babel/transform-replace-console-calls'),
+        {
+          shouldError: !canAccessReactObject,
+        },
+      ]
+    );
+  }
   if (updateBabelOptions) {
     options = updateBabelOptions(options);
   }
@@ -115,8 +143,6 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
         plugins: options.plugins.concat([
           // Minify invariant messages
           require('../error-codes/transform-error-messages'),
-          // Wrap warning() calls in a __DEV__ check so they are stripped from production.
-          require('../babel/wrap-warning-with-env-check'),
         ]),
       });
     case RN_OSS_DEV:
@@ -132,8 +158,6 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
             // Preserve full error messages in React Native build
             {noMinify: true},
           ],
-          // Wrap warning() calls in a __DEV__ check so they are stripped from production.
-          require('../babel/wrap-warning-with-env-check'),
         ]),
       });
     case UMD_DEV:
@@ -148,8 +172,6 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
           path.resolve('./scripts/babel/transform-object-assign-require'),
           // Minify invariant messages
           require('../error-codes/transform-error-messages'),
-          // Wrap warning() calls in a __DEV__ check so they are stripped from production.
-          require('../babel/wrap-warning-with-env-check'),
         ]),
       });
     default:
@@ -338,6 +360,8 @@ function getPlugins(
     useForks(forks),
     // Ensure we don't try to bundle any fbjs modules.
     forbidFBJSImports(),
+    // Replace any externals with their valid internal FB mappings
+    isFBBundle && replace(Bundles.fbBundleExternalsMap),
     // Use Node resolution mechanism.
     resolve({
       skip: externals,
@@ -347,11 +371,19 @@ function getPlugins(
       exclude: 'node_modules/**/*',
     }),
     // Compile to ES5.
-    babel(getBabelConfig(updateBabelOptions, bundleType)),
+    babel(
+      getBabelConfig(
+        updateBabelOptions,
+        bundleType,
+        packageName,
+        externals,
+        !isProduction
+      )
+    ),
     // Remove 'use strict' from individual source files.
     {
       transform(source) {
-        return source.replace(/['"]use strict['"']/g, '');
+        return source.replace(/['"]use strict["']/g, '');
       },
     },
     // Turn __DEV__ and process.env checks into constants.
@@ -360,6 +392,7 @@ function getPlugins(
       __PROFILE__: isProfiling || !isProduction ? 'true' : 'false',
       __UMD__: isUMDBundle ? 'true' : 'false',
       'process.env.NODE_ENV': isProduction ? "'production'" : "'development'",
+      __EXPERIMENTAL__,
     }),
     // We still need CommonJS for external deps like object-assign.
     commonjs(),
@@ -370,10 +403,6 @@ function getPlugins(
           // Don't let it create global variables in the browser.
           // https://github.com/facebook/react/issues/10909
           assume_function_wrapper: !isUMDBundle,
-          // Works because `google-closure-compiler-js` is forked in Yarn lockfile.
-          // We can remove this if GCC merges my PR:
-          // https://github.com/google/closure-compiler/pull/2707
-          // and then the compiled version is released via `google-closure-compiler-js`.
           renaming: !shouldStayReadable,
         })
       ),
@@ -456,11 +485,11 @@ async function createBundle(bundle, bundleType) {
   const packageName = Packaging.getPackageName(bundle.entry);
 
   let resolvedEntry = require.resolve(bundle.entry);
-  if (
+  const isFBBundle =
     bundleType === FB_WWW_DEV ||
     bundleType === FB_WWW_PROD ||
-    bundleType === FB_WWW_PROFILING
-  ) {
+    bundleType === FB_WWW_PROFILING;
+  if (isFBBundle) {
     const resolvedFBEntry = resolvedEntry.replace('.js', '.fb.js');
     if (fs.existsSync(resolvedFBEntry)) {
       resolvedEntry = resolvedFBEntry;
@@ -477,6 +506,10 @@ async function createBundle(bundle, bundleType) {
     const deps = Modules.getDependencies(bundleType, bundle.entry);
     externals = externals.concat(deps);
   }
+  if (isFBBundle) {
+    // Add any mapped fb bundle externals
+    externals = externals.concat(Object.values(Bundles.fbBundleExternalsMap));
+  }
 
   const importSideEffects = Modules.getImportSideEffects();
   const pureExternalModules = Object.keys(importSideEffects).filter(
@@ -634,7 +667,9 @@ function handleRollupError(error) {
 }
 
 async function buildEverything() {
-  await asyncRimRaf('build');
+  if (!argv['unsafe-partial']) {
+    await asyncRimRaf('build');
+  }
 
   // Run them serially for better console output
   // and to avoid any potential race conditions.
@@ -649,16 +684,22 @@ async function buildEverything() {
       [bundle, NODE_DEV],
       [bundle, NODE_PROD],
       [bundle, NODE_PROFILING],
-      [bundle, FB_WWW_DEV],
-      [bundle, FB_WWW_PROD],
-      [bundle, FB_WWW_PROFILING],
       [bundle, RN_OSS_DEV],
       [bundle, RN_OSS_PROD],
-      [bundle, RN_OSS_PROFILING],
-      [bundle, RN_FB_DEV],
-      [bundle, RN_FB_PROD],
-      [bundle, RN_FB_PROFILING]
+      [bundle, RN_OSS_PROFILING]
     );
+
+    if (__EXPERIMENTAL__) {
+      // FB specific builds are experimental-only.
+      bundles.push(
+        [bundle, FB_WWW_DEV],
+        [bundle, FB_WWW_PROD],
+        [bundle, FB_WWW_PROFILING],
+        [bundle, RN_FB_DEV],
+        [bundle, RN_FB_PROD],
+        [bundle, RN_FB_PROFILING]
+      );
+    }
   }
 
   if (!shouldExtractErrors && process.env.CIRCLE_NODE_TOTAL) {
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 90dc854186978..956e67065326a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -95,25 +95,6 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* React Fire *******/
-  {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      UMD_PROFILING,
-      NODE_DEV,
-      NODE_PROD,
-      NODE_PROFILING,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-      FB_WWW_PROFILING,
-    ],
-    moduleType: RENDERER,
-    entry: 'react-dom/unstable-fire',
-    global: 'ReactFire',
-    externals: ['react'],
-  },
-
   /******* Test Utils *******/
   {
     moduleType: RENDERER_UTILS,
@@ -153,12 +134,24 @@ const bundles = [
     entry: 'react-dom/server.browser',
     global: 'ReactDOMServer',
     externals: ['react'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-dom/server.node',
     externals: ['react', 'stream'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React DOM Fizz Server *******/
@@ -167,13 +160,45 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.browser',
     global: 'ReactDOMFizzServer',
-    externals: ['react'],
+    externals: ['react', 'react-dom/server'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.node',
     global: 'ReactDOMFizzServer',
+    externals: ['react', 'react-dom/server'],
+  },
+
+  /******* React DOM Flight Server Webpack *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
+    moduleType: RENDERER,
+    entry: 'react-flight-dom-webpack/server.browser',
+    global: 'ReactFlightDOMServer',
+    externals: ['react', 'react-dom/server'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: RENDERER,
+    entry: 'react-flight-dom-webpack/server.node',
+    global: 'ReactFlightDOMServer',
+    externals: ['react', 'react-dom/server'],
+  },
+
+  /******* React DOM Flight Client Webpack *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      UMD_DEV,
+      UMD_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
+    moduleType: RENDERER,
+    entry: 'react-flight-dom-webpack',
+    global: 'ReactFlightDOMClient',
     externals: ['react'],
   },
 
@@ -194,7 +219,13 @@ const bundles = [
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
-        presets: opts.presets.concat([require.resolve('babel-preset-react')]),
+        presets: opts.presets.concat([
+          require.resolve('@babel/preset-react'),
+          require.resolve('@babel/preset-flow'),
+        ]),
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
       }),
   },
 
@@ -205,6 +236,12 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
@@ -212,6 +249,12 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Native Fabric *******/
@@ -221,6 +264,12 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
@@ -228,6 +277,12 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Test Renderer *******/
@@ -237,6 +292,12 @@ const bundles = [
     entry: 'react-test-renderer',
     global: 'ReactTestRenderer',
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
   {
     bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
@@ -244,6 +305,12 @@ const bundles = [
     entry: 'react-test-renderer/shallow',
     global: 'ReactShallowRenderer',
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
   },
 
   /******* React Noop Renderer (used for tests) *******/
@@ -273,6 +340,24 @@ const bundles = [
     externals: ['react', 'scheduler', 'expect'],
   },
 
+  /******* React Noop Flight Server (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/flight-server',
+    global: 'ReactNoopFlightServer',
+    externals: ['react', 'scheduler', 'expect'],
+  },
+
+  /******* React Noop Flight Client (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/flight-client',
+    global: 'ReactNoopFlightClient',
+    externals: ['react', 'scheduler', 'expect'],
+  },
+
   /******* React Reconciler *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -291,12 +376,30 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* React Stream *******/
+  /******* React Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-server',
+    global: 'ReactServer',
+    externals: ['react'],
+  },
+
+  /******* React Flight Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-server/flight',
+    global: 'ReactFlightServer',
+    externals: ['react'],
+  },
+
+  /******* React Flight Client *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RECONCILER,
-    entry: 'react-stream',
-    global: 'ReactStream',
+    entry: 'react-flight',
+    global: 'ReactFlightClient',
     externals: ['react'],
   },
 
@@ -350,18 +453,39 @@ const bundles = [
     externals: ['react', 'scheduler'],
   },
 
-  /******* createComponentWithSubscriptions (experimental) *******/
+  /******* createComponentWithSubscriptions *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
     entry: 'create-subscription',
     global: 'createSubscription',
     externals: ['react'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
+  },
+
+  /******* Hook for managing subscriptions safely *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-subscription',
+    global: 'useSubscription',
+    externals: ['react'],
   },
 
   /******* React Scheduler (experimental) *******/
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+    ],
     moduleType: ISOMORPHIC,
     entry: 'scheduler',
     global: 'Scheduler',
@@ -399,7 +523,7 @@ const bundles = [
     // won't get copied. We also can't create just DEV bundle because it contains a
     // NODE_ENV check inside. We should probably tweak our build process to allow
     // "raw" packages that don't get bundled.
-    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV],
+    bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
@@ -410,14 +534,14 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react-fresh/babel',
+    entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
     externals: [],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD],
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV],
     moduleType: ISOMORPHIC,
-    entry: 'react-fresh/runtime',
+    entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
     externals: [],
   },
@@ -438,6 +562,7 @@ const bundles = [
   },
 
   /******* React Events (experimental) *******/
+
   {
     bundleTypes: [
       UMD_DEV,
@@ -447,10 +572,10 @@ const bundles = [
       FB_WWW_DEV,
       FB_WWW_PROD,
     ],
-    moduleType: ISOMORPHIC,
-    entry: 'react-events',
-    global: 'ReactEvents',
-    externals: [],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/events/context-menu',
+    global: 'ReactEventsContextMenu',
+    externals: ['react'],
   },
 
   {
@@ -463,8 +588,8 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/press',
-    global: 'ReactEventsPress',
+    entry: 'react-interactions/events/drag',
+    global: 'ReactEventsDrag',
     externals: ['react'],
   },
 
@@ -478,7 +603,22 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/hover',
+    entry: 'react-interactions/events/focus',
+    global: 'ReactEventsFocus',
+    externals: ['react'],
+  },
+
+  {
+    bundleTypes: [
+      UMD_DEV,
+      UMD_PROD,
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/events/hover',
     global: 'ReactEventsHover',
     externals: ['react'],
   },
@@ -493,8 +633,8 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/focus',
-    global: 'ReactEventsFocus',
+    entry: 'react-interactions/events/input',
+    global: 'ReactEventsInput',
     externals: ['react'],
   },
 
@@ -508,8 +648,8 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/focus-scope',
-    global: 'ReactEventsFocusScope',
+    entry: 'react-interactions/events/keyboard',
+    global: 'ReactEventsKeyboard',
     externals: ['react'],
   },
 
@@ -523,7 +663,56 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/swipe',
+    entry: 'react-interactions/events/press',
+    global: 'ReactEventsPress',
+    externals: [
+      'react',
+      'react-interactions/events/tap',
+      'react-interactions/events/keyboard',
+    ],
+  },
+
+  {
+    bundleTypes: [
+      UMD_DEV,
+      UMD_PROD,
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/events/press-legacy',
+    global: 'ReactEventsPressLegacy',
+    externals: ['react'],
+  },
+
+  {
+    bundleTypes: [
+      UMD_DEV,
+      UMD_PROD,
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/events/scroll',
+    global: 'ReactEventsScroll',
+    externals: ['react'],
+  },
+
+  {
+    bundleTypes: [
+      UMD_DEV,
+      UMD_PROD,
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/events/swipe',
     global: 'ReactEventsSwipe',
     externals: ['react'],
   },
@@ -538,12 +727,18 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/drag',
-    global: 'ReactEventsDrag',
+    entry: 'react-interactions/events/tap',
+    global: 'ReactEventsTap',
     externals: ['react'],
   },
 ];
 
+const fbBundleExternalsMap = {
+  'react-interactions/events/focus': 'ReactEventsFocus',
+  'react-interactions/events/keyboard': 'ReactEventsKeyboard',
+  'react-interactions/events/tap': 'ReactEventsTap',
+};
+
 // Based on deep-freeze by substack (public domain)
 function deepFreeze(o) {
   Object.freeze(o);
@@ -565,6 +760,7 @@ deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
 module.exports = {
+  fbBundleExternalsMap,
   bundleTypes,
   moduleTypes,
   bundles,
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 96790a1c1ea53..eeb0c1caee8a7 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -57,9 +57,7 @@ const forks = Object.freeze({
           'from "' +
           entry +
           '" because it does not declare "react" in the package ' +
-          'dependencies or peerDependencies. For example, this can happen if you use ' +
-          'warning() instead of warningWithoutStack() in a package that does not ' +
-          'depend on React.'
+          'dependencies or peerDependencies.'
       );
     }
     return null;
@@ -180,25 +178,10 @@ const forks = Object.freeze({
     return 'scheduler/src/forks/SchedulerHostConfig.default';
   },
 
-  // This logic is forked on www to ignore some warnings.
-  'shared/lowPriorityWarning': (bundleType, entry) => {
+  'shared/consoleWithStackDev': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
-      case FB_WWW_PROD:
-      case FB_WWW_PROFILING:
-        return 'shared/forks/lowPriorityWarning.www.js';
-      default:
-        return null;
-    }
-  },
-
-  // This logic is forked on www to ignore some warnings.
-  'shared/warningWithoutStack': (bundleType, entry) => {
-    switch (bundleType) {
-      case FB_WWW_DEV:
-      case FB_WWW_PROD:
-      case FB_WWW_PROFILING:
-        return 'shared/forks/warningWithoutStack.www.js';
+        return 'shared/forks/consoleWithStackDev.www.js';
       default:
         return null;
     }
@@ -295,9 +278,7 @@ const forks = Object.freeze({
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let rendererInfo of inlinedHostConfigs) {
       if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
-        return `react-reconciler/src/forks/ReactFiberHostConfig.${
-          rendererInfo.shortName
-        }.js`;
+        return `react-reconciler/src/forks/ReactFiberHostConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -307,13 +288,41 @@ const forks = Object.freeze({
     );
   },
 
-  'react-stream/src/ReactFizzHostConfig': (
+  'react-server/src/ReactServerHostConfig': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType
+  ) => {
+    if (dependencies.indexOf('react-server') !== -1) {
+      return null;
+    }
+    if (moduleType !== RENDERER && moduleType !== RECONCILER) {
+      return null;
+    }
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (let rendererInfo of inlinedHostConfigs) {
+      if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
+        if (!rendererInfo.isServerSupported) {
+          return null;
+        }
+        return `react-server/src/forks/ReactServerHostConfig.${rendererInfo.shortName}.js`;
+      }
+    }
+    throw new Error(
+      'Expected ReactServerHostConfig to always be replaced with a shim, but ' +
+        `found no mention of "${entry}" entry point in ./scripts/shared/inlinedHostConfigs.js. ` +
+        'Did you mean to add it there to associate it with a specific renderer?'
+    );
+  },
+
+  'react-server/src/ReactServerFormatConfig': (
     bundleType,
     entry,
     dependencies,
     moduleType
   ) => {
-    if (dependencies.indexOf('react-stream') !== -1) {
+    if (dependencies.indexOf('react-server') !== -1) {
       return null;
     }
     if (moduleType !== RENDERER && moduleType !== RECONCILER) {
@@ -322,28 +331,26 @@ const forks = Object.freeze({
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let rendererInfo of inlinedHostConfigs) {
       if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
-        if (!rendererInfo.isFizzSupported) {
+        if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-stream/src/forks/ReactFizzHostConfig.${
-          rendererInfo.shortName
-        }.js`;
+        return `react-server/src/forks/ReactServerFormatConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
-      'Expected ReactFizzHostConfig to always be replaced with a shim, but ' +
+      'Expected ReactServerFormatConfig to always be replaced with a shim, but ' +
         `found no mention of "${entry}" entry point in ./scripts/shared/inlinedHostConfigs.js. ` +
         'Did you mean to add it there to associate it with a specific renderer?'
     );
   },
 
-  'react-stream/src/ReactFizzFormatConfig': (
+  'react-flight/src/ReactFlightClientHostConfig': (
     bundleType,
     entry,
     dependencies,
     moduleType
   ) => {
-    if (dependencies.indexOf('react-stream') !== -1) {
+    if (dependencies.indexOf('react-flight') !== -1) {
       return null;
     }
     if (moduleType !== RENDERER && moduleType !== RECONCILER) {
@@ -352,16 +359,14 @@ const forks = Object.freeze({
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let rendererInfo of inlinedHostConfigs) {
       if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
-        if (!rendererInfo.isFizzSupported) {
+        if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-stream/src/forks/ReactFizzFormatConfig.${
-          rendererInfo.shortName
-        }.js`;
+        return `react-flight/src/forks/ReactFlightClientHostConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
-      'Expected ReactFizzFormatConfig to always be replaced with a shim, but ' +
+      'Expected ReactFlightClientHostConfig to always be replaced with a shim, but ' +
         `found no mention of "${entry}" entry point in ./scripts/shared/inlinedHostConfigs.js. ` +
         'Did you mean to add it there to associate it with a specific renderer?'
     );
@@ -381,9 +386,9 @@ const forks = Object.freeze({
   },
 
   // React DOM uses different top level event names and supports mouse events.
-  'events/ResponderTopLevelEventTypes': (bundleType, entry) => {
+  'legacy-events/ResponderTopLevelEventTypes': (bundleType, entry) => {
     if (entry === 'react-dom' || entry.startsWith('react-dom/')) {
-      return 'events/forks/ResponderTopLevelEventTypes.dom.js';
+      return 'legacy-events/forks/ResponderTopLevelEventTypes.dom.js';
     }
     return null;
   },
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index e6b17d0b9be85..968f98bc3f081 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -17,12 +17,16 @@ const importSideEffects = Object.freeze({
   'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'scheduler/tracing': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react-dom/server': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
 });
 
 // Bundles exporting globals that other modules rely on.
 const knownGlobals = Object.freeze({
   react: 'React',
   'react-dom': 'ReactDOM',
+  'react-dom/server': 'ReactDOMServer',
+  'react-interactions/events/keyboard': 'ReactEventsKeyboard',
+  'react-interactions/events/tap': 'ReactEventsTap',
   scheduler: 'Scheduler',
   'scheduler/tracing': 'SchedulerTracing',
   'scheduler/unstable_mock': 'SchedulerMock',
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index d6ca3b937c3ee..c5ed04df5ab6c 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -56,7 +56,7 @@ function getBundleOutputPaths(bundleType, filename, packageName) {
     case RN_OSS_PROFILING:
       switch (packageName) {
         case 'react-native-renderer':
-          return [`build/react-native/oss/${filename}`];
+          return [`build/react-native/implementations/${filename}`];
         default:
           throw new Error('Unknown RN package.');
       }
@@ -65,7 +65,12 @@ function getBundleOutputPaths(bundleType, filename, packageName) {
     case RN_FB_PROFILING:
       switch (packageName) {
         case 'react-native-renderer':
-          return [`build/react-native/fb/${filename}`];
+          return [
+            `build/react-native/implementations/${filename.replace(
+              /\.js$/,
+              '.fb.js'
+            )}`,
+          ];
         default:
           throw new Error('Unknown RN package.');
       }
@@ -82,18 +87,15 @@ async function copyWWWShims() {
 }
 
 async function copyRNShims() {
+  const reactTypesBuildTarget = 'build/react-native/shims/ReactTypes.js';
   await Promise.all([
     // React Native
     asyncCopyTo(`${__dirname}/shims/react-native`, 'build/react-native/shims'),
-    asyncCopyTo(
-      require.resolve('shared/ReactTypes.js'),
-      'build/react-native/shims/ReactTypes.js'
-    ),
+    asyncCopyTo(require.resolve('shared/ReactTypes.js'), reactTypesBuildTarget),
     asyncCopyTo(
       require.resolve('react-native-renderer/src/ReactNativeTypes.js'),
       'build/react-native/shims/ReactNativeTypes.js'
     ),
-    asyncCopyTo(`${__dirname}/shims/react-native-fb`, 'build/react-native/fb'),
   ]);
 }
 
@@ -133,9 +135,9 @@ async function prepareNpmPackage(name) {
     ),
     asyncCopyTo(`packages/${name}/npm`, `build/node_modules/${name}`),
   ]);
-  const tgzName = (await asyncExecuteCommand(
-    `npm pack build/node_modules/${name}`
-  )).trim();
+  const tgzName = (
+    await asyncExecuteCommand(`npm pack build/node_modules/${name}`)
+  ).trim();
   await asyncRimRaf(`build/node_modules/${name}`);
   await asyncExtractTar(getTarOptions(tgzName, name));
   unlinkSync(tgzName);
diff --git a/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js b/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js
index 7eaab22a75327..350d091df3a67 100644
--- a/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js
+++ b/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js
@@ -9,7 +9,7 @@
 
 const {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-} = require('ReactDOM-fb');
+} = require('ReactDOM');
 
 module.exports =
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactBrowserEventEmitter;
diff --git a/scripts/rollup/shims/facebook-www/ReactDOMComponentTree_DO_NOT_USE.js b/scripts/rollup/shims/facebook-www/ReactDOMComponentTree_DO_NOT_USE.js
deleted file mode 100644
index 1df865a7314b0..0000000000000
--- a/scripts/rollup/shims/facebook-www/ReactDOMComponentTree_DO_NOT_USE.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-const {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-} = require('ReactDOM-fb');
-
-module.exports =
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDOMComponentTree;
diff --git a/scripts/rollup/shims/facebook-www/ReactInstanceMap_DO_NOT_USE.js b/scripts/rollup/shims/facebook-www/ReactInstanceMap_DO_NOT_USE.js
deleted file mode 100644
index be387b1bfa0ba..0000000000000
--- a/scripts/rollup/shims/facebook-www/ReactInstanceMap_DO_NOT_USE.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-const {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-} = require('ReactDOM-fb');
-
-module.exports =
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap;
diff --git a/scripts/rollup/shims/facebook-www/findDOMNode.js b/scripts/rollup/shims/facebook-www/findDOMNode.js
index a90bd0aaef3ce..f10e497bc714d 100644
--- a/scripts/rollup/shims/facebook-www/findDOMNode.js
+++ b/scripts/rollup/shims/facebook-www/findDOMNode.js
@@ -10,6 +10,6 @@
 
 'use strict';
 
-const {findDOMNode} = require('ReactDOM-fb');
+const {findDOMNode} = require('ReactDOM');
 
 module.exports = findDOMNode;
diff --git a/scripts/rollup/shims/facebook-www/renderSubtreeIntoContainer_DO_NOT_USE.js b/scripts/rollup/shims/facebook-www/renderSubtreeIntoContainer_DO_NOT_USE.js
index 43e37c17bde11..3434fe349cf32 100644
--- a/scripts/rollup/shims/facebook-www/renderSubtreeIntoContainer_DO_NOT_USE.js
+++ b/scripts/rollup/shims/facebook-www/renderSubtreeIntoContainer_DO_NOT_USE.js
@@ -7,6 +7,6 @@
 
 'use strict';
 
-const ReactDOM = require('ReactDOM-fb');
+const ReactDOM = require('ReactDOM');
 
 module.exports = ReactDOM.unstable_renderSubtreeIntoContainer;
diff --git a/scripts/rollup/shims/react-native/NativeMethodsMixin.js b/scripts/rollup/shims/react-native/NativeMethodsMixin.js
index 857e298107707..c50f379fde06c 100644
--- a/scripts/rollup/shims/react-native/NativeMethodsMixin.js
+++ b/scripts/rollup/shims/react-native/NativeMethodsMixin.js
@@ -12,9 +12,9 @@
 
 const {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-} = require('ReactNative');
+} = require('./ReactNative');
 
-import type {NativeMethodsMixinType} from 'ReactNativeTypes';
+import type {NativeMethodsMixinType} from './ReactNativeTypes';
 
 const {NativeMethodsMixin} = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
diff --git a/scripts/rollup/shims/react-native/ReactFabric.js b/scripts/rollup/shims/react-native/ReactFabric.js
index 03691e23d1d8d..536ce9a6f30b6 100644
--- a/scripts/rollup/shims/react-native/ReactFabric.js
+++ b/scripts/rollup/shims/react-native/ReactFabric.js
@@ -10,19 +10,23 @@
 
 'use strict';
 
-const BatchedBridge = require('BatchedBridge');
+import {BatchedBridge} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 // TODO @sema: Adjust types
-import type {ReactNativeType} from 'ReactNativeTypes';
+import type {ReactNativeType} from './ReactNativeTypes';
 
 let ReactFabric;
 
 if (__DEV__) {
-  ReactFabric = require('ReactFabric-dev');
+  ReactFabric = require('../implementations/ReactFabric-dev');
 } else {
-  ReactFabric = require('ReactFabric-prod');
+  ReactFabric = require('../implementations/ReactFabric-prod');
 }
 
-BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
+if (global.RN$Bridgeless) {
+  global.RN$stopSurface = ReactFabric.stopSurface;
+} else {
+  BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
+}
 
 module.exports = (ReactFabric: ReactNativeType);
diff --git a/scripts/rollup/shims/react-native-fb/ReactFeatureFlags.js b/scripts/rollup/shims/react-native/ReactFeatureFlags.js
similarity index 84%
rename from scripts/rollup/shims/react-native-fb/ReactFeatureFlags.js
rename to scripts/rollup/shims/react-native/ReactFeatureFlags.js
index 86feb9c022821..9b6ec97a6234c 100644
--- a/scripts/rollup/shims/react-native-fb/ReactFeatureFlags.js
+++ b/scripts/rollup/shims/react-native/ReactFeatureFlags.js
@@ -5,13 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
 'use strict';
 
 const ReactFeatureFlags = {
   debugRenderPhaseSideEffects: false,
+  enableNativeTargetAsInstance: false,
 };
 
 module.exports = ReactFeatureFlags;
diff --git a/scripts/rollup/shims/react-native/ReactNative.js b/scripts/rollup/shims/react-native/ReactNative.js
index 13a5985f9f19d..9f471e4107a7e 100644
--- a/scripts/rollup/shims/react-native/ReactNative.js
+++ b/scripts/rollup/shims/react-native/ReactNative.js
@@ -10,14 +10,14 @@
 
 'use strict';
 
-import type {ReactNativeType} from 'ReactNativeTypes';
+import type {ReactNativeType} from './ReactNativeTypes';
 
 let ReactNative;
 
 if (__DEV__) {
-  ReactNative = require('ReactNativeRenderer-dev');
+  ReactNative = require('../implementations/ReactNativeRenderer-dev');
 } else {
-  ReactNative = require('ReactNativeRenderer-prod');
+  ReactNative = require('../implementations/ReactNativeRenderer-prod');
 }
 
 module.exports = (ReactNative: ReactNativeType);
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index c842eb4b8576b..2c09ddf3caab1 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/warning-and-invariant-args */
+/* eslint-disable react-internal/invariant-args */
 
 'use strict';
 
@@ -20,13 +20,24 @@ import type {
 const invariant = require('invariant');
 
 // Event configs
-const customBubblingEventTypes = {};
-const customDirectEventTypes = {};
-const eventTypes = {};
+const customBubblingEventTypes: {
+  [eventName: string]: $ReadOnly<{|
+    phasedRegistrationNames: $ReadOnly<{|
+      captured: string,
+      bubbled: string,
+    |}>,
+  |}>,
+  ...,
+} = {};
+const customDirectEventTypes: {
+  [eventName: string]: $ReadOnly<{|
+    registrationName: string,
+  |}>,
+  ...,
+} = {};
 
 exports.customBubblingEventTypes = customBubblingEventTypes;
 exports.customDirectEventTypes = customDirectEventTypes;
-exports.eventTypes = eventTypes;
 
 const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
@@ -51,7 +62,7 @@ function processEventTypes(
   if (bubblingEventTypes != null) {
     for (const topLevelType in bubblingEventTypes) {
       if (customBubblingEventTypes[topLevelType] == null) {
-        eventTypes[topLevelType] = customBubblingEventTypes[topLevelType] =
+        customBubblingEventTypes[topLevelType] =
           bubblingEventTypes[topLevelType];
       }
     }
@@ -60,8 +71,7 @@ function processEventTypes(
   if (directEventTypes != null) {
     for (const topLevelType in directEventTypes) {
       if (customDirectEventTypes[topLevelType] == null) {
-        eventTypes[topLevelType] = customDirectEventTypes[topLevelType] =
-          directEventTypes[topLevelType];
+        customDirectEventTypes[topLevelType] = directEventTypes[topLevelType];
       }
     }
   }
@@ -71,7 +81,6 @@ function processEventTypes(
  * Registers a native view/component by name.
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
- * This is done to avoid causing Prepack deopts.
  */
 exports.register = function(name: string, callback: ViewConfigGetter): string {
   invariant(
@@ -79,6 +88,12 @@ exports.register = function(name: string, callback: ViewConfigGetter): string {
     'Tried to register two views with the same name %s',
     name,
   );
+  invariant(
+    typeof callback === 'function',
+    'View config getter callback for component `%s` must be a function (received `%s`)',
+    name,
+    callback === null ? 'null' : typeof callback,
+  );
   viewConfigCallbacks.set(name, callback);
   return name;
 };
@@ -95,17 +110,21 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
     if (typeof callback !== 'function') {
       invariant(
         false,
-        'View config not found for name %s.%s',
+        'View config getter callback for component `%s` must be a function (received `%s`).%s',
         name,
+        callback === null ? 'null' : typeof callback,
         typeof name[0] === 'string' && /[a-z]/.test(name[0])
           ? ' Make sure to start component names with a capital letter.'
           : '',
       );
     }
-    viewConfigCallbacks.set(name, null);
     viewConfig = callback();
     processEventTypes(viewConfig);
     viewConfigs.set(name, viewConfig);
+
+    // Clear the callback after the config is set so that
+    // we don't mask any errors during registration.
+    viewConfigCallbacks.set(name, null);
   } else {
     viewConfig = viewConfigs.get(name);
   }
diff --git a/scripts/rollup/shims/react-native/createReactNativeComponentClass.js b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
index e9f5fc0f978af..86a758d918b48 100644
--- a/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
+++ b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
@@ -10,9 +10,11 @@
 
 'use strict';
 
+import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
 import type {ViewConfigGetter} from './ReactNativeTypes';
 
-const {register} = require('ReactNativeViewConfigRegistry');
+const {register} = ReactNativeViewConfigRegistry;
 
 /**
  * Creates a renderable ReactNative host component.
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index ff6cf584e4e4b..725bb040e3eb8 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -21,6 +21,17 @@ module.exports = {
     process: true,
     setImmediate: true,
     Buffer: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
+
+    // Flight
+    Uint8Array: true,
+    Promise: true,
   },
   parserOptions: {
     ecmaVersion: 5,
@@ -30,4 +41,9 @@ module.exports = {
     'no-undef': 'error',
     'no-shadow-restricted-names': 'error',
   },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 };
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index d48c9caa9315b..f8965a81ff49a 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -22,6 +22,17 @@ module.exports = {
     // Node.js Server Rendering
     setImmediate: true,
     Buffer: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
+
+    // Flight
+    Uint8Array: true,
+    Promise: true,
   },
   parserOptions: {
     ecmaVersion: 5,
@@ -31,4 +42,9 @@ module.exports = {
     'no-undef': 'error',
     'no-shadow-restricted-names': 'error',
   },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 };
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 8fb7666aa13de..9906dfb5b8ab6 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -21,6 +21,13 @@ module.exports = {
     // Fabric. See https://github.com/facebook/react/pull/15490
     // for more information
     nativeFabricUIManager: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
   },
   parserOptions: {
     ecmaVersion: 5,
@@ -30,4 +37,9 @@ module.exports = {
     'no-undef': 'error',
     'no-shadow-restricted-names': 'error',
   },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 };
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 59fb02e93e1e8..ffaeb9488e0b5 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -24,6 +24,17 @@ module.exports = {
     define: true,
     require: true,
     global: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
+
+    // Flight
+    Uint8Array: true,
+    Promise: true,
   },
   parserOptions: {
     ecmaVersion: 5,
@@ -33,4 +44,9 @@ module.exports = {
     'no-undef': 'error',
     'no-shadow-restricted-names': 'error',
   },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 };
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index cb4a947626882..364c7f26c3366 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -54,17 +54,9 @@ function checkFilesExist(bundle) {
 }
 
 const bundles = [
-  {
-    format: 'fb',
-    filePatterns: [`./build/facebook-www/*.js`],
-  },
   {
     format: 'rn',
-    filePatterns: [
-      `./build/react-native/oss/*.js`,
-      `./build/react-native/fb/ReactFabric-*.js`,
-      `./build/react-native/fb/ReactNativeRenderer-*.js`,
-    ],
+    filePatterns: [`./build/react-native/implementations/*.js`],
   },
   {
     format: 'umd',
@@ -79,4 +71,11 @@ const bundles = [
   },
 ];
 
+if (process.env.RELEASE_CHANNEL === 'experimental') {
+  bundles.push({
+    format: 'fb',
+    filePatterns: [`./build/facebook-www/*.js`],
+  });
+}
+
 bundles.map(checkFilesExist).map(lint);
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index b80e77121fb81..7f17491936968 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -71,14 +71,14 @@ ${license}
 'use strict';
 
 ${
-      globalName === 'ReactNoopRenderer' ||
-      globalName === 'ReactNoopRendererPersistent'
-        ? // React Noop needs regenerator runtime because it uses
-          // generators but GCC doesn't handle them in the output.
-          // So we use Babel for them.
-          `const regeneratorRuntime = require("regenerator-runtime");`
-        : ``
-    }
+  globalName === 'ReactNoopRenderer' ||
+  globalName === 'ReactNoopRendererPersistent'
+    ? // React Noop needs regenerator runtime because it uses
+      // generators but GCC doesn't handle them in the output.
+      // So we use Babel for them.
+      `const regeneratorRuntime = require("regenerator-runtime");`
+    : ``
+}
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
@@ -95,14 +95,14 @@ ${source}
 ${license}
  */
 ${
-      globalName === 'ReactNoopRenderer' ||
-      globalName === 'ReactNoopRendererPersistent'
-        ? // React Noop needs regenerator runtime because it uses
-          // generators but GCC doesn't handle them in the output.
-          // So we use Babel for them.
-          `const regeneratorRuntime = require("regenerator-runtime");`
-        : ``
-    }
+  globalName === 'ReactNoopRenderer' ||
+  globalName === 'ReactNoopRendererPersistent'
+    ? // React Noop needs regenerator runtime because it uses
+      // generators but GCC doesn't handle them in the output.
+      // So we use Babel for them.
+      `const regeneratorRuntime = require("regenerator-runtime");`
+    : ``
+}
 ${source}`;
   },
 
@@ -114,14 +114,14 @@ ${source}`;
 ${license}
  */
 ${
-      globalName === 'ReactNoopRenderer' ||
-      globalName === 'ReactNoopRendererPersistent'
-        ? // React Noop needs regenerator runtime because it uses
-          // generators but GCC doesn't handle them in the output.
-          // So we use Babel for them.
-          `const regeneratorRuntime = require("regenerator-runtime");`
-        : ``
-    }
+  globalName === 'ReactNoopRenderer' ||
+  globalName === 'ReactNoopRendererPersistent'
+    ? // React Noop needs regenerator runtime because it uses
+      // generators but GCC doesn't handle them in the output.
+      // So we use Babel for them.
+      `const regeneratorRuntime = require("regenerator-runtime");`
+    : ``
+}
 ${source}`;
   },
 
diff --git a/scripts/shared/evalToString.js b/scripts/shared/evalToString.js
index f98e2f234cced..aad199da5d75b 100644
--- a/scripts/shared/evalToString.js
+++ b/scripts/shared/evalToString.js
@@ -11,6 +11,7 @@
 function evalToString(ast /* : Object */) /* : string */ {
   switch (ast.type) {
     case 'StringLiteral':
+    case 'Literal': // ESLint
       return ast.value;
     case 'BinaryExpression': // `+`
       if (ast.operator !== '+') {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 66c54963c7f28..81814324e6c48 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -9,53 +9,59 @@
 module.exports = [
   {
     shortName: 'dom',
-    entryPoints: ['react-dom', 'react-dom/unstable-fizz.node'],
+    entryPoints: [
+      'react-dom',
+      'react-dom/unstable-fizz.node',
+      'react-flight-dom-webpack/server.node',
+      'react-flight-dom-webpack',
+    ],
     isFlowTyped: true,
-    isFizzSupported: true,
+    isServerSupported: true,
   },
   {
     shortName: 'dom-browser',
-    entryPoints: ['react-dom/unstable-fizz.browser'],
-    isFlowTyped: true,
-    isFizzSupported: true,
-  },
-  {
-    shortName: 'fire',
-    entryPoints: ['react-dom/unstable-fire'],
+    entryPoints: [
+      'react-dom/unstable-fizz.browser',
+      'react-flight-dom-webpack/server.browser',
+      'react-flight-dom-webpack',
+    ],
     isFlowTyped: true,
+    isServerSupported: true,
   },
   {
     shortName: 'art',
     entryPoints: ['react-art'],
     isFlowTyped: false, // TODO: type it.
-    isFizzSupported: false,
+    isServerSupported: false,
   },
   {
     shortName: 'native',
     entryPoints: ['react-native-renderer'],
     isFlowTyped: true,
-    isFizzSupported: false,
+    isServerSupported: false,
   },
   {
     shortName: 'fabric',
     entryPoints: ['react-native-renderer/fabric'],
     isFlowTyped: true,
-    isFizzSupported: false,
+    isServerSupported: false,
   },
   {
     shortName: 'test',
     entryPoints: ['react-test-renderer'],
     isFlowTyped: true,
-    isFizzSupported: false,
+    isServerSupported: false,
   },
   {
     shortName: 'custom',
     entryPoints: [
       'react-reconciler',
       'react-reconciler/persistent',
-      'react-stream',
+      'react-flight',
+      'react-server',
+      'react-server/flight',
     ],
     isFlowTyped: true,
-    isFizzSupported: true,
+    isServerSupported: true,
   },
 ];
diff --git a/scripts/shared/pathsByLanguageVersion.js b/scripts/shared/pathsByLanguageVersion.js
index dcf9b32544e81..dddd848359278 100644
--- a/scripts/shared/pathsByLanguageVersion.js
+++ b/scripts/shared/pathsByLanguageVersion.js
@@ -12,7 +12,10 @@ const esNextPaths = [
   'packages/*/*.js',
   // Source files
   'packages/*/src/**/*.js',
-  'packages/events/**/*.js',
+  'packages/dom-event-testing-library/**/*.js',
+  'packages/react-interactions/**/*.js',
+  'packages/react-interactions/**/*.js',
+  'packages/legacy-events/**/*.js',
   'packages/shared/**/*.js',
   // Shims and Flow environment
   'scripts/flow/*.js',
diff --git a/scripts/tasks/danger.js b/scripts/tasks/danger.js
index ebe488bf59831..e85dba26219cb 100644
--- a/scripts/tasks/danger.js
+++ b/scripts/tasks/danger.js
@@ -14,14 +14,21 @@ const extension = process.platform === 'win32' ? '.cmd' : '';
 
 // sizebot public_repo token (this is publicly visible on purpose)
 const token = '0a7d5c3cad9a6dbec2d9' + '9a5222cf49062a4c1ef7';
-spawn(path.join('node_modules', '.bin', 'danger-ci' + extension), [], {
-  // Allow colors to pass through
-  stdio: 'inherit',
-  env: {
-    ...process.env,
-    DANGER_GITHUB_API_TOKEN: token,
-  },
-}).on('close', function(code) {
+spawn(
+  path.join('node_modules', '.bin', 'danger-ci' + extension),
+  [
+    '--id',
+    process.env.RELEASE_CHANNEL === 'experimental' ? 'experimental' : 'stable',
+  ],
+  {
+    // Allow colors to pass through
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      DANGER_GITHUB_API_TOKEN: token,
+    },
+  }
+).on('close', function(code) {
   if (code !== 0) {
     console.error('Danger failed');
   } else {
diff --git a/scripts/yarn/downloadReactIsForPrettyFormat.js b/scripts/yarn/downloadReactIsForPrettyFormat.js
new file mode 100644
index 0000000000000..14551543edde1
--- /dev/null
+++ b/scripts/yarn/downloadReactIsForPrettyFormat.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const path = require('path');
+const pacote = require('pacote');
+const rimraf = require('rimraf');
+const prettyFormatPkg = require('pretty-format/package.json');
+const prettyFormatPkgPath = require.resolve('pretty-format/package.json');
+
+const reactIsDependencyVersion = prettyFormatPkg.dependencies['react-is'];
+
+if (!reactIsDependencyVersion) {
+  throw new Error('Unable to find `react-is` dependency in `pretty-format`');
+}
+
+const prettyFormatNodeModulesReactIsDir = path.join(
+  path.dirname(prettyFormatPkgPath),
+  'node_modules/react-is'
+);
+
+rimraf.sync(prettyFormatNodeModulesReactIsDir);
+
+pacote
+  .extract(
+    `react-is@${reactIsDependencyVersion}`,
+    prettyFormatNodeModulesReactIsDir
+  )
+  .catch(error => {
+    console.error(error);
+    process.exitCode = 1;
+  });
diff --git a/yarn.lock b/yarn.lock
index d1417acf58c86..283aa30a1ab74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,31 +2,126 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+"@babel/cli@^7.0.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.5.5.tgz#bdb6d9169e93e241a08f5f7b0265195bf38ef5ec"
+  integrity sha512-UHI+7pHv/tk9g6WXQKYz+kmXTI77YtuY3vqC59KIqcoWEjsJJSG6rAxKaLsgj3LDyadsPrCB929gVOKM6Hui0w==
+  dependencies:
+    commander "^2.8.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.1.0"
+    glob "^7.0.0"
+    lodash "^4.17.13"
+    mkdirp "^0.5.1"
+    output-file-sync "^2.0.0"
+    slash "^2.0.0"
+    source-map "^0.5.0"
+  optionalDependencies:
+    chokidar "^2.0.4"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
-  dependencies:
-    "@babel/highlight" "7.0.0-beta.49"
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30"
+  integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.5.5"
+    "@babel/helpers" "^7.5.5"
+    "@babel/parser" "^7.5.5"
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.5"
+    "@babel/types" "^7.5.5"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
 
-"@babel/generator@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0.tgz#1efd58bffa951dc846449e58ce3a1d7f02d393aa"
+"@babel/generator@^7.4.0", "@babel/generator@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
+  integrity sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==
   dependencies:
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.5.5"
     jsesc "^2.5.1"
-    lodash "^4.17.10"
+    lodash "^4.17.13"
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
+  integrity sha512-qNSR4jrmJ8M1VMM9tibvyRAHXQs2PmaksQF7c1CGJNipfe3D8p+wgNwgso/P2A2r2mdgBWAXljNWR0QRZAMW8w==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-builder-react-jsx@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.3.0.tgz#a1ac95a5d2b3e88ae5e54846bf462eeb81b318a4"
+  integrity sha512-MjA9KgwCuPEkQd9ncSXvSyJ5y+j2sICHyrI0M3L+6fnS4wMSNDc1ARXsbTfbb2cXHn17VisSnU/sHFTCxVxSMw==
+  dependencies:
+    "@babel/types" "^7.3.0"
+    esutils "^2.0.0"
+
+"@babel/helper-call-delegate@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz#87c1f8ca19ad552a736a7a27b1c1fcf8b1ff1f43"
+  integrity sha512-l79boDFJ8S1c5hvQvG+rc+wHw6IuH7YldmRKsYtpbawsxURu/paVy57FZMomGK22/JckepaikOkY0MoAmdyOlQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.4.4"
+    "@babel/traverse" "^7.4.4"
+    "@babel/types" "^7.4.4"
+
+"@babel/helper-create-class-features-plugin@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.5.tgz#401f302c8ddbc0edd36f7c6b2887d8fa1122e5a4"
+  integrity sha512-ZsxkyYiRA7Bg+ZTRpPvB6AbOFKTFFK4LrvTet8lInm0V468MWCaSYJE+I7v2z2r8KNLtYiV+K5kTCnR7dvyZjg==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.5.5"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.5.5"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+
+"@babel/helper-define-map@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz#3dec32c2046f37e09b28c93eb0b103fd2a25d369"
+  integrity sha512-fTfxx7i0B5NJqvUOBBGREnrqbTxRh7zinBANpZXAVDlsZxYdclDp467G1sQ8VZYMnAURY3RpBUAgOYT9GfzHBg==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/types" "^7.5.5"
+    lodash "^4.17.13"
+
+"@babel/helper-explode-assignable-expression@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
+  integrity sha512-NRQpfHrJ1msCHtKjbzs9YcMmJZOg6mQMmGRB+hbamEdG5PNpaSm95275VD92DvJKuyl0s2sFiDmMZ+EnnvufqA==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
 "@babel/helper-function-name@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+  integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
   dependencies:
     "@babel/helper-get-function-arity" "^7.0.0"
     "@babel/template" "^7.1.0"
@@ -35,217 +130,1789 @@
 "@babel/helper-get-function-arity@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
+  integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-split-export-declaration@^7.0.0":
+"@babel/helper-hoist-variables@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
+  integrity sha512-VYk2/H/BnYbZDDg39hr3t2kKyifAm1W6zHRfhx8jGjIHpQEBv9dry7oQ2f3+J703TLu69nYdxsovl0XYfcnK4w==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@babel/helper-member-expression-to-functions@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590"
+  integrity sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==
+  dependencies:
+    "@babel/types" "^7.5.5"
+
+"@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/highlight@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
+"@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
+  integrity sha512-jBeCvETKuJqeiaCdyaheF40aXnnU1+wkSiUs/IQg3tB85up1LyL8x77ClY8qJpuRJUcXQo+ZtdNESmZl4j56Pw==
   dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/template" "^7.4.4"
+    "@babel/types" "^7.5.5"
+    lodash "^4.17.13"
 
-"@babel/highlight@^7.0.0":
+"@babel/helper-optimise-call-expression@^7.0.0":
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
+  integrity sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-plugin-utils@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
+  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
+
+"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
+  integrity sha512-CkCYQLkfkiugbRDO8eZn6lRuR8kzZoGXCg3149iTk5se7g6qykSpy3+hELSwquhu+TgHn8nkLiBwHvNX8Hofcw==
+  dependencies:
+    lodash "^4.17.13"
+
+"@babel/helper-remap-async-to-generator@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
+  integrity sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-wrap-function" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-replace-supers@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz#f84ce43df031222d2bad068d2626cb5799c34bc2"
+  integrity sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.5.5"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/traverse" "^7.5.5"
+    "@babel/types" "^7.5.5"
+
+"@babel/helper-simple-access@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
+  integrity sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==
+  dependencies:
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-split-export-declaration@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
+  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@babel/helper-wrap-function@^7.1.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
+  integrity sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/template" "^7.1.0"
+    "@babel/traverse" "^7.1.0"
+    "@babel/types" "^7.2.0"
+
+"@babel/helpers@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.5.tgz#63908d2a73942229d1e6685bc2a0e730dde3b75e"
+  integrity sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g==
+  dependencies:
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.5"
+    "@babel/types" "^7.5.5"
+
+"@babel/highlight@^7.0.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
+  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
   dependencies:
     chalk "^2.0.0"
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.0.tgz#a7cd42cb3c12aec52e24375189a47b39759b783e"
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
+  integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==
+
+"@babel/plugin-external-helpers@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.2.0.tgz#7f4cb7dee651cd380d2034847d914288467a6be4"
+  integrity sha512-QFmtcCShFkyAsNtdCM3lJPmRe1iB+vPZymlB4LnDIKEBj2yKQLQKtoxXxJ8ePT5fwMl4QGg303p4mB0UsSI2/g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-proposal-async-generator-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
+  integrity sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.1.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
+  integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.5.5"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-proposal-dynamic-import@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz#e532202db4838723691b10a67b8ce509e397c506"
+  integrity sha512-x/iMjggsKTFHYC6g11PL7Qy58IK8H5zqfm9e6hu4z1iH2IRyAp9u9dL80zA6R76yFovETFLKz2VJIC2iIPBuFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
+"@babel/plugin-proposal-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
+  integrity sha512-MAFV1CA/YVmYwZG0fBQyXhmj0BHCB5egZHCKWIFVv/XCxAeVGIHfos3SwDck4LvCllENIAg7xMKOG5kH0dzyUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
+  integrity sha512-F2DxJJSQ7f64FyTVl5cw/9MWn6naXGdk3Q3UhDbFEEHv+EilCPoeRD3Zh/Utx1CJz4uyKlQ4uH+bJPbEhMV7Zw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
+  integrity sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz#501ffd9826c0b91da22690720722ac7cb1ca9c78"
+  integrity sha512-j1NwnOqMG9mFUOH58JTFsA/+ZYzQLUZ/drqWUqxCYLGeu2JFZL8YrNC9hBxKmWtAuOCHPcRpgv7fhap09Fb4kA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"
+
+"@babel/plugin-syntax-async-generators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
+  integrity sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-dynamic-import@^7.0.0", "@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-flow@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c"
+  integrity sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-json-strings@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
+  integrity sha512-5UGYnMSLRE1dqqZwug+1LISpA403HzlSfsg6P9VXU6TBjcSHeNlw4DxDx7LgpF+iKZoOG/+uzqoRHTdcUpiZNg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-jsx@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
+  integrity sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
+  integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
+  integrity sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
+  integrity sha512-ER77Cax1+8/8jCB9fo4Ud161OZzWN5qawi4GusDuRLcDbDG+bIGYY20zb2dfAFdTRGzrfq2xZPvF0R64EHnimg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.5.0.tgz#89a3848a0166623b5bc481164b5936ab947e887e"
+  integrity sha512-mqvkzwIGkq0bEF1zLRRiTdjfomZJDV33AH3oQzHVGkI2VzEmXLpKKOBvEVaFZBJdN0XTyH38s9j/Kiqr68dggg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.1.0"
+
+"@babel/plugin-transform-block-scoped-functions@^7.0.0", "@babel/plugin-transform-block-scoped-functions@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
+  integrity sha512-ntQPR6q1/NKuphly49+QiQiTN0O63uOwjdD6dhIjSWBI5xlrbUFh720TIpzBhpnrLfv2tNH/BXvLIab1+BAI0w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-block-scoping@^7.0.0", "@babel/plugin-transform-block-scoping@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.5.5.tgz#a35f395e5402822f10d2119f6f8e045e3639a2ce"
+  integrity sha512-82A3CLRRdYubkG85lKwhZB0WZoHxLGsJdux/cOVaJCJpvYFl1LVzAIFyRsa7CvXqW8rBM4Zf3Bfn8PHt5DP0Sg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    lodash "^4.17.13"
+
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.5.5.tgz#d094299d9bd680a14a2a0edae38305ad60fb4de9"
+  integrity sha512-U2htCNK/6e9K7jGyJ++1p5XRU+LJjrwtoiVn9SzRlDT2KubcZ11OOwy3s24TjHxPgxNwonCYP7U2K51uVYCMDg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-define-map" "^7.5.5"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.5.5"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.0.0", "@babel/plugin-transform-computed-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
+  integrity sha512-kP/drqTxY6Xt3NNpKiMomfgkNn4o7+vKxK2DDKcBG9sHj51vHqMBGy8wbDS/J4lMxnqs153/T3+DmCEAkC5cpA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-destructuring@^7.0.0", "@babel/plugin-transform-destructuring@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.0.tgz#f6c09fdfe3f94516ff074fe877db7bc9ef05855a"
+  integrity sha512-YbYgbd3TryYYLGyC7ZR+Tq8H/+bCmwoaxHfJHupom5ECstzbRLTch6gOQbhEY9Z4hiCNHEURgq06ykFv9JZ/QQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.4.4.tgz#361a148bc951444312c69446d76ed1ea8e4450c3"
+  integrity sha512-P05YEhRc2h53lZDjRPk/OektxCVevFzZs2Gfjd545Wde3k+yFDbXORgl2e0xpbq8mLcKJ7Idss4fAg0zORN/zg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"
+
+"@babel/plugin-transform-duplicate-keys@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+  integrity sha512-igcziksHizyQPlX9gfSjHkE2wmoCH3evvD2qR5w29/Dk0SMKE/eOI7f1HhBdNhR/zxJDqrgpoDTq5YSLH/XMsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-exponentiation-operator@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
+  integrity sha512-umh4hR6N7mu4Elq9GG8TOu9M0bakvlsREEC+ialrQN6ABS4oDQ69qJv1VtR3uxlKMCQMCvzk7vr17RHKcjx68A==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.1.6":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
+  integrity sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+
+"@babel/plugin-transform-for-of@^7.0.0", "@babel/plugin-transform-for-of@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556"
+  integrity sha512-9T/5Dlr14Z9TIEXLXkt8T1DU7F24cbhwhMNUziN3hB1AXoZcdzPcTiKGRn/6iOymDqtTKWnr/BtRKN9JwbKtdQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-function-name@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz#e1436116abb0610c2259094848754ac5230922ad"
+  integrity sha512-iU9pv7U+2jC9ANQkKeNF6DrPy4GBa4NWQtl6dHB4Pb3izX2JOEvDTFarlNsBj/63ZEzNNIAMs3Qw4fNCcSOXJA==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-literals@^7.0.0", "@babel/plugin-transform-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
+  integrity sha512-2ThDhm4lI4oV7fVQ6pNNK+sx+c/GM5/SaML0w/r4ZB7sAneD/piDJtwdKlNckXeyGK7wlwg2E2w33C/Hh+VFCg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-member-expression-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
+  integrity sha512-HiU3zKkSU6scTidmnFJ0bMX8hz5ixC93b4MHMiYebmk2lUVNGOboPsqQvx5LzooihijUoLR/v7Nc1rbBtnc7FA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-amd@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+  integrity sha512-n20UsQMKnWrltocZZm24cRURxQnWIvsABPJlw/fvoy9c6AgHZzoelAIzajDHAQrDpuKFFPPcFGd7ChsYuIUMpg==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74"
+  integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.4.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-systemjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249"
+  integrity sha512-Q2m56tyoQWmuNGxEtUyeEkm6qJYFqs4c+XyXH5RAuYxObRNz9Zgj/1g2GMnjYp2EUyEy7YTrxliGCXzecl/vJg==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.4.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
+"@babel/plugin-transform-modules-umd@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz#7678ce75169f0877b8eb2235538c074268dd01ae"
+  integrity sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.5.tgz#9d269fd28a370258199b4294736813a60bbdd106"
+  integrity sha512-z7+2IsWafTBbjNsOxU/Iv5CvTJlr5w4+HGu1HovKYTtgJ362f7kBcQglkfmlspKKZ3bgrbSGvLfNx++ZJgCWsg==
+  dependencies:
+    regexp-tree "^0.1.6"
+
+"@babel/plugin-transform-new-target@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
+  integrity sha512-r1z3T2DNGQwwe2vPGZMBNjioT2scgWzK9BCnDEh+46z8EEwXBq24uRzd65I7pjtugzPSj921aM15RpESgzsSuA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.5.5.tgz#c70021df834073c65eb613b8679cc4a381d1a9f9"
+  integrity sha512-un1zJQAhSosGFBduPgN/YFNvWVpRuHKU7IHBglLoLZsGmruJPOo6pbInneflUdmq7YvSVqhpPs5zdBvLnteltQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.5.5"
+
+"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
+  integrity sha512-oMh5DUO1V63nZcu/ZVLQFqiihBGo4OpxJxR1otF50GMeCLiRx5nUdtokd+u9SuVJrvvuIh9OosRFPP4pIPnwmw==
+  dependencies:
+    "@babel/helper-call-delegate" "^7.4.4"
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-property-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
+  integrity sha512-9q7Dbk4RhgcLp8ebduOpCbtjh7C0itoLYHXd9ueASKAG/is5PQtMR5VJGka9NKqGhYEGn5ITahd4h9QeBMylWQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-display-name@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
+  integrity sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-react-jsx-self@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz#461e21ad9478f1031dd5e276108d027f1b5240ba"
+  integrity sha512-v6S5L/myicZEy+jr6ielB0OR8h+EH/1QFx/YJ7c7Ua+7lqsjj/vW6fD5FR9hB/6y7mGbfT4vAURn3xqBxsUcdg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.2.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.5.0.tgz#583b10c49cf057e237085bcbd8cc960bd83bd96b"
+  integrity sha512-58Q+Jsy4IDCZx7kqEZuSDdam/1oW8OdDX8f+Loo6xyxdfg1yF0GE2XNJQSTZCaMol93+FBzpWiPEwtbMloAcPg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@babel/plugin-transform-react-jsx@^7.0.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz#f2cab99026631c767e2745a5368b331cfe8f5290"
+  integrity sha512-a/+aRb7R06WcKvQLOu4/TpjKOdvVEKRLWFpKcNuHhiREPgGRB4TQJxq07+EZLS8LFVYpfq1a5lDUnuMdcCpBKg==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.3.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@babel/plugin-transform-regenerator@^7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.5.tgz#629dc82512c55cee01341fb27bdfcb210354680f"
+  integrity sha512-gBKRh5qAaCWntnd09S8QC7r3auLCqq5DI6O0DlfoyDjslSBVqBibrMdsqO+Uhmx3+BlOmE/Kw1HFxmGbv0N9dA==
+  dependencies:
+    regenerator-transform "^0.14.0"
+
+"@babel/plugin-transform-reserved-words@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
+  integrity sha512-fz43fqW8E1tAB3DKF19/vxbpib1fuyCwSPE418ge5ZxILnBhWyhtPgz8eh1RCGGJlwvksHkyxMxh0eenFi+kFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
+  integrity sha512-QP4eUM83ha9zmYtpbnyjTLAGKQritA5XW/iG9cjtuOI8s1RuL/3V6a3DeSHfKutJQ+ayUfeZJPcnCYEQzaPQqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-spread@^7.0.0", "@babel/plugin-transform-spread@^7.2.0":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.2.2.tgz#3103a9abe22f742b6d406ecd3cd49b774919b406"
+  integrity sha512-KWfky/58vubwtS0hLqEnrWJjsMGaOeSBn90Ezn5Jeg9Z8KKHmELbP1yGylMlm5N6TPKeY9A2+UaSYLdxahg01w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-sticky-regex@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
+  integrity sha512-KKYCoGaRAf+ckH8gEL3JHUaFVyNHKe3ASNsZ+AlktgHevvxGigoIttrEJb8iKN03Q7Eazlv1s6cx2B2cQ3Jabw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
+
+"@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
+  integrity sha512-mQrEC4TWkhLN0z8ygIvEL9ZEToPhG5K7KDW3pzGqOfIGZ28Jb0POUkeWcoz8HnHvhFy6dwAT1j8OzqN8s804+g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-typeof-symbol@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
+  integrity sha512-2LNhETWYxiYysBtrBTqL8+La0jIoQQnIScUJc74OYvUGRmkskNY4EzLCnjHBzdmb38wqtTaixpo1NctEcvMDZw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-unicode-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz#ab4634bb4f14d36728bf5978322b35587787970f"
+  integrity sha512-il+/XdNw01i93+M9J9u4T7/e/Ue/vWfNZE4IRUQjplu2Mqb/AFTDimkw2tdEdSH50wuQXZAbXSql0UphQke+vA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"
+
+"@babel/polyfill@7.4.4", "@babel/polyfill@^7.2.5":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.4.4.tgz#78801cf3dbe657844eeabf31c1cae3828051e893"
+  integrity sha512-WlthFLfhQQhh+A2Gn5NSFl0Huxz36x86Jn+E9OW7ibK8edKPq+KLy4apM1yDpQ8kJOVi1OVjpP4vSDLdrI04dg==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
+"@babel/preset-env@^7.1.6":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
+  integrity sha512-GMZQka/+INwsMz1A5UEql8tG015h5j/qjptpKY2gJ7giy8ohzU710YciJB5rcKsWGWHiW3RUnHib0E5/m3Tp3A==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.5.5"
+    "@babel/plugin-transform-classes" "^7.5.5"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.5.0"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.4.4"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
+    "@babel/plugin-transform-new-target" "^7.4.4"
+    "@babel/plugin-transform-object-super" "^7.5.5"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.4.5"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.4.4"
+    "@babel/types" "^7.5.5"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.5.0"
+
+"@babel/preset-flow@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
+  integrity sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+
+"@babel/preset-react@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
+  integrity sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+
+"@babel/runtime-corejs2@^7.2.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.5.5.tgz#c3214c08ef20341af4187f1c9fbdc357fbec96b2"
+  integrity sha512-FYATQVR00NSNi7mUfpPDp7E8RYMXDuO8gaix7u/w3GekfUinKgX1AcTxs7SoiEmoEW9mbpjrwqWSW6zCmw5h8A==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
+"@babel/runtime@7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
+  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/runtime@^7.0.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
+  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
+  integrity sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.4.4"
+    "@babel/types" "^7.4.4"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
+  integrity sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.5.5"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.5.5"
+    "@babel/types" "^7.5.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a"
+  integrity sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@cliqz-oss/firefox-client@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@cliqz-oss/firefox-client/-/firefox-client-0.3.1.tgz#86479239f060835608b06584afe5e0a1dd91613c"
+  integrity sha512-RO+Tops/wGnBzWoZYkCraqyh2JqOejqJq5/a4b54HhmjTNSKdUPwAOK17EGg/zPb0nWqkuB7QyZsI9bo+ev8Kw==
+  dependencies:
+    colors "0.5.x"
+    js-select "~0.6.0"
+
+"@cliqz-oss/node-firefox-connect@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@cliqz-oss/node-firefox-connect/-/node-firefox-connect-1.2.1.tgz#1d42cf9a7ddcdde3ff232715d7712662966e2df4"
+  integrity sha512-O/IyiB5pfztCdmxQZg0/xeq5w+YiP3gtJz8d4We2EpLPKzbDVjOrtfLKYgVfm6Ya6mbvDge1uLkSRwaoVCWKnA==
+  dependencies:
+    "@cliqz-oss/firefox-client" "0.3.1"
+    es6-promise "^2.0.1"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+  integrity sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
+"@mattiasbuelens/web-streams-polyfill@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.1.0.tgz#c06ebfa7e00cc512a878c3aaae4cf113ac89ac24"
+  integrity sha512-oMsvblvOezdM/j1ph0uU8s6Wm0EfCyMZtZcxQ232CqSpjm08lrKPizeMltN0eVv4dQf0DDFaxUFyiz8x51lgAA==
+  dependencies:
+    "@types/whatwg-streams" "^0.0.6"
+
+"@octokit/endpoint@^5.1.0":
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.3.2.tgz#2deda2d869cac9ba7f370287d55667be2a808d4b"
+  integrity sha512-gRjteEM9I6f4D8vtwU2iGUTn9RX/AJ0SVXiqBUEuYEWVGGAVjSXdT0oNmghH5lvQNWs8mwt6ZaultuG6yXivNw==
+  dependencies:
+    deepmerge "4.0.0"
+    is-plain-object "^3.0.0"
+    universal-user-agent "^3.0.0"
+    url-template "^2.0.8"
+
+"@octokit/request-error@^1.0.1", "@octokit/request-error@^1.0.2":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.0.4.tgz#15e1dc22123ba4a9a4391914d80ec1e5303a23be"
+  integrity sha512-L4JaJDXn8SGT+5G0uX79rZLv0MNJmfGa4vb4vy1NnpjSnWDLJRy6m90udGwvMmavwsStgbv2QNkPzzTCMmL+ig==
+  dependencies:
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
+"@octokit/request@^5.0.0":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.0.2.tgz#59a920451f24811c016ddc507adcc41aafb2dca5"
+  integrity sha512-z1BQr43g4kOL4ZrIVBMHwi68Yg9VbkRUyuAgqCp1rU3vbYa69+2gIld/+gHclw15bJWQnhqqyEb7h5a5EqgZ0A==
+  dependencies:
+    "@octokit/endpoint" "^5.1.0"
+    "@octokit/request-error" "^1.0.1"
+    deprecation "^2.0.0"
+    is-plain-object "^3.0.0"
+    node-fetch "^2.3.0"
+    once "^1.4.0"
+    universal-user-agent "^3.0.0"
+
+"@octokit/rest@^16.14.1":
+  version "16.28.7"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.28.7.tgz#a2c2db5b318da84144beba82d19c1a9dbdb1a1fa"
+  integrity sha512-cznFSLEhh22XD3XeqJw51OLSfyL2fcFKUO+v2Ep9MTAFfFLS1cK1Zwd1yEgQJmJoDnj4/vv3+fGGZweG+xsbIA==
+  dependencies:
+    "@octokit/request" "^5.0.0"
+    "@octokit/request-error" "^1.0.2"
+    atob-lite "^2.0.0"
+    before-after-hook "^2.0.0"
+    btoa-lite "^1.0.0"
+    deprecation "^2.0.0"
+    lodash.get "^4.4.2"
+    lodash.set "^4.3.2"
+    lodash.uniq "^4.5.0"
+    octokit-pagination-methods "^1.1.0"
+    once "^1.4.0"
+    universal-user-agent "^3.0.0"
+    url-template "^2.0.8"
+
+"@reach/auto-id@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
+  integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
+
+"@reach/component-component@0.1.3", "@reach/component-component@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
+  integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
+
+"@reach/menu-button@^0.1.17":
+  version "0.1.18"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.18.tgz#cb9e3bf1c2a2bdb5d618697b87ad353dfbca123e"
+  integrity sha512-MGdN8SWaQ0u0xj6KWUnK9fFc1VBg8NhNnFhEd2sp3D56XJcr08HU5GeVq/MFf5C97mxRnIPIKGnMPPeGAn9OFA==
+  dependencies:
+    "@reach/component-component" "0.1.3"
+    "@reach/portal" "^0.2.1"
+    "@reach/rect" "0.2.1"
+    "@reach/utils" "^0.2.3"
+    "@reach/window-size" "^0.1.4"
+    warning "^4.0.2"
+
+"@reach/observe-rect@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
+  integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
+
+"@reach/portal@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.1.tgz#07720b999e0063a9e179c14dbdc60fd991cfc9fa"
+  integrity sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+
+"@reach/rect@0.2.1", "@reach/rect@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
+  integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+    "@reach/observe-rect" "^1.0.3"
+
+"@reach/tooltip@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.2.tgz#a861ce38269b586597ab40417323b33d3d6dc927"
+  integrity sha512-afcfqH6EzDHmwTB6g1k0dSbkyT0s9KPIi5bX56nNuldsCIasImFFYDjRZLhFcuxjskwIsHAi06yC3GV6mtcRxw==
+  dependencies:
+    "@reach/auto-id" "0.2.0"
+    "@reach/portal" "^0.2.1"
+    "@reach/rect" "^0.2.1"
+    "@reach/utils" "^0.2.3"
+    "@reach/visually-hidden" "^0.1.4"
+    prop-types "^15.7.2"
+
+"@reach/utils@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.3.tgz#820f6a6af4301b4c5065cfc04bb89e6a3d1d723f"
+  integrity sha512-zM9rA8jDchr05giMhL95dPeYkK67cBQnIhCVrOKKqgWGsv+2GE/HZqeptvU4zqs0BvIqsThwov+YxVNVh5csTQ==
+
+"@reach/visually-hidden@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
+  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
+
+"@reach/window-size@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.4.tgz#3257b646548f61c2708a661a683620fbe0a706cb"
+  integrity sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+
+"@sindresorhus/is@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
+  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+
+"@snyk/cli-interface@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@snyk/cli-interface/-/cli-interface-2.0.2.tgz#96dd229b3afda216a051b39a6ab520332d72db56"
+  integrity sha512-2/wTI7ML7tMy7TKk49dcVPAdiVtybILpW+dlaoUFDZKcYuthgJeWkiifQvx7fhDcmNNCjY/+6WlVYjLvVVvXKA==
+  dependencies:
+    tslib "^1.9.3"
+
+"@snyk/composer-lockfile-parser@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@snyk/composer-lockfile-parser/-/composer-lockfile-parser-1.0.3.tgz#4b703883ec36f3cec63c64355031e06698c771f5"
+  integrity sha512-hb+6E7kMzWlcwfe//ILDoktBPKL2a3+RnJT/CXnzRXaiLQpsdkf5li4q2v0fmvd+4v7L3tTN8KM+//lJyviEkg==
+  dependencies:
+    lodash "^4.17.13"
+
+"@snyk/dep-graph@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@snyk/dep-graph/-/dep-graph-1.12.0.tgz#aa0df8549849a4857bc5510e839da268293e4750"
+  integrity sha512-n7+PlHn3SqznHgsCpeBRfEvU1oiQydoGkXQlnSB2+tfImiKXvY7YZbrg4wlbvYgylYiTbpCi5CpPNkJG14S+UQ==
+  dependencies:
+    graphlib "^2.1.5"
+    lodash "^4.7.14"
+    object-hash "^1.3.1"
+    semver "^6.0.0"
+    source-map-support "^0.5.11"
+    tslib "^1.9.3"
+
+"@snyk/gemfile@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@snyk/gemfile/-/gemfile-1.2.0.tgz#919857944973cce74c650e5428aaf11bcd5c0457"
+  integrity sha512-nI7ELxukf7pT4/VraL4iabtNNMz8mUo7EXlqCFld8O5z6mIMLX9llps24iPpaIZOwArkY3FWA+4t+ixyvtTSIA==
+
+"@szmarczak/http-timer@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
+  integrity sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==
+  dependencies:
+    defer-to-connect "^1.0.1"
+
+"@types/agent-base@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/agent-base/-/agent-base-4.2.0.tgz#00644e8b395b40e1bf50aaf1d22cabc1200d5051"
+  integrity sha512-8mrhPstU+ZX0Ugya8tl5DsDZ1I5ZwQzbL/8PA0z8Gj0k9nql7nkaMzmPVLj+l/nixWaliXi+EBiLA8bptw3z7Q==
+  dependencies:
+    "@types/events" "*"
+    "@types/node" "*"
+
+"@types/babel__core@^7.1.0":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
+  integrity sha512-cfCCrFmiGY/yq0NuKNxIQvZFy9kY/1immpSpTngOnyIbD4+eJOG5mxphhHDv3CHL9GltO4GcKr54kGBg3RNdbg==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.0.2.tgz#d2112a6b21fad600d7674274293c85dce0cb47fc"
+  integrity sha512-NHcOfab3Zw4q5sEE2COkpfXjoE7o+PmqD9DQW4koUT3roNxwziUdXGnRndMat/LJNUtePwn1TlP4do3uoe3KZQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.7.tgz#2496e9ff56196cc1429c72034e07eab6121b6f3f"
+  integrity sha512-CeBpmX1J8kWLcDEnI3Cl2Eo6RfbGvzUctA+CjZUhOKDFbLfcr7fc4usEqLNWetrlJd7RhAkyYe2czXop4fICpw==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/debug@^4.1.4":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
+  integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
+
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
+"@types/glob@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
+
+"@types/istanbul-lib-report@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
+  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/json-schema@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
+  integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
+
+"@types/minimatch@*", "@types/minimatch@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
+"@types/node@*":
+  version "12.7.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.1.tgz#3b5c3a26393c19b400844ac422bd0f631a94d69d"
+  integrity sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==
+
+"@types/node@^10.12.18":
+  version "10.14.15"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.15.tgz#e8f7729b631be1b02ae130ff0b61f3e018000640"
+  integrity sha512-CBR5avlLcu0YCILJiDIXeU2pTw7UK/NIxfC63m7d7CVamho1qDEzXKkOtEauQRPMy6MI8mLozth+JJkas7HY6g==
+
+"@types/node@^6.14.4":
+  version "6.14.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.14.7.tgz#2173f79d7a61d97d3aad2feeaac7ac69a3df39af"
+  integrity sha512-YbPXbaynBTe0pVExPhL76TsWnxSPeFAvImIsmylpBWn/yfw+lHy+Q68aawvZHsgskT44ZAoeE67GM5f+Brekew==
+
+"@types/node@^8.0.7":
+  version "8.10.51"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.51.tgz#80600857c0a47a8e8bafc2dae6daed6db58e3627"
+  integrity sha512-cArrlJp3Yv6IyFT/DYe+rlO8o3SIHraALbBW/+CcCYW/a9QucpLI+n2p4sRxAvl2O35TiecpX2heSZtJjvEO+Q==
+
+"@types/package-json@^5.0.0":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/package-json/-/package-json-5.0.1.tgz#0157acd348cf3ec8834290367e7f24b85cf6e1d0"
+  integrity sha512-0M6UdBDyGmgWly5Dtenf1U9HPMNCXtAnvvxIKoK9u6b5CCrxiVxc32eoqBzLccH/1Z8ApY927UiYoQ5cwPKcJw==
+  dependencies:
+    package-json "*"
+
+"@types/semver@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
+  integrity sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
+"@types/whatwg-streams@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/whatwg-streams/-/whatwg-streams-0.0.6.tgz#5062c67efb695c886fe3dbb9618df35aac418503"
+  integrity sha512-O4Hat94N1RUCObqAbVUtd6EcucseqBcpfbFXzy12CYF6BQVHWR+ztDA3YPjewCmdKHYZ5VA7TZ5hq2bMyqxiBw==
+
+"@types/xml2js@0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@types/xml2js/-/xml2js-0.4.3.tgz#2f41bfc74d5a4022511721f872ed395a210ad3b7"
+  integrity sha512-Pv2HGRE4gWLs31In7nsyXEH4uVVsd0HNV9i2dyASvtDIlOtSTr1eczPLDpdEuyv5LWH5LT20GIXwPjkshKWI1g==
+  dependencies:
+    "@types/events" "*"
+    "@types/node" "*"
+
+"@types/yargs-parser@*":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.0.0.tgz#453743c5bbf9f1bed61d959baab5b06be029b2d0"
+  integrity sha512-wBlsw+8n21e6eTd4yVv8YD/E3xq0O6nNnJIquutAsFGE7EyMKz7W6RNT6BRu1SmdgmlCZ9tb0X+j+D6HGr8pZw==
+
+"@types/yargs@^13.0.0":
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.2.tgz#a64674fc0149574ecd90ba746e932b5a5f7b3653"
+  integrity sha512-lwwgizwk/bIIU+3ELORkyuOgDjCh7zuWDFqRtPPhhVgq9N1F7CvLNKg1TX4f2duwtKQ0p044Au9r1PLIXHrIzQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/experimental-utils@^1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz#b08c60d780c0067de2fb44b04b432f540138301e"
+  integrity sha512-zmpS6SyqG4ZF64ffaJ6uah6tWWWgZ8m+c54XXgwFtUv0jNz8aJAVx8chMCvnk7yl6xwn8d+d96+tWp7fXzTuDg==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "1.13.0"
+    eslint-scope "^4.0.0"
+
+"@typescript-eslint/typescript-estree@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.13.0.tgz#8140f17d0f60c03619798f1d628b8434913dc32e"
+  integrity sha512-b5rCmd2e6DCC6tCTN9GSUAuxdYwCM/k/2wdjHGrIRGPSJotWMCe/dGpi66u42bhuh8q3QBzqM4TMA1GUUCJvdw==
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
+"@webassemblyjs/ast@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+  integrity sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+
+"@webassemblyjs/floating-point-hex-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
+  integrity sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==
+
+"@webassemblyjs/helper-api-error@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
+  integrity sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==
+
+"@webassemblyjs/helper-buffer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
+  integrity sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==
+
+"@webassemblyjs/helper-code-frame@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+  integrity sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/helper-fsm@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+  integrity sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==
+
+"@webassemblyjs/helper-module-context@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+  integrity sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    mamacro "^0.0.3"
+
+"@webassemblyjs/helper-wasm-bytecode@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+  integrity sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==
+
+"@webassemblyjs/helper-wasm-section@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+  integrity sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+
+"@webassemblyjs/ieee754@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+  integrity sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+  integrity sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
+  integrity sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==
+
+"@webassemblyjs/wasm-edit@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
+  integrity sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/helper-wasm-section" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-opt" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/wasm-gen@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
+  integrity sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
 
-"@babel/template@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.0.tgz#58cc9572e1bfe24fe1537fdf99d839d53e517e22"
+"@webassemblyjs/wasm-opt@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
+  integrity sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
 
-"@babel/traverse@^7.0.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.0.tgz#503ec6669387efd182c3888c4eec07bcc45d91b2"
+"@webassemblyjs/wasm-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
+  integrity sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.0.0"
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    debug "^3.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.10"
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
 
-"@babel/types@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0.tgz#6e191793d3c854d19c6749989e3bc55f0e962118"
+"@webassemblyjs/wast-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
+  integrity sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==
   dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.10"
-    to-fast-properties "^2.0.0"
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/floating-point-hex-parser" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-code-frame" "1.8.5"
+    "@webassemblyjs/helper-fsm" "1.8.5"
+    "@xtuc/long" "4.2.2"
 
-"@mattiasbuelens/web-streams-polyfill@0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.1.0.tgz#c06ebfa7e00cc512a878c3aaae4cf113ac89ac24"
-  integrity sha512-oMsvblvOezdM/j1ph0uU8s6Wm0EfCyMZtZcxQ232CqSpjm08lrKPizeMltN0eVv4dQf0DDFaxUFyiz8x51lgAA==
+"@webassemblyjs/wast-printer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+  integrity sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==
   dependencies:
-    "@types/whatwg-streams" "^0.0.6"
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+    "@xtuc/long" "4.2.2"
 
-"@types/whatwg-streams@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@types/whatwg-streams/-/whatwg-streams-0.0.6.tgz#5062c67efb695c886fe3dbb9618df35aac418503"
-  integrity sha512-O4Hat94N1RUCObqAbVUtd6EcucseqBcpfbFXzy12CYF6BQVHWR+ztDA3YPjewCmdKHYZ5VA7TZ5hq2bMyqxiBw==
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+"@yarnpkg/lockfile@^1.0.2":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+  integrity sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg=
+
+JSONSelect@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.2.1.tgz#415418a526d33fe31d74b4defa3c836d485ec203"
+  integrity sha1-QVQYpSbTP+MddLTe+jyDbUhewgM=
+
+JSONStream@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
 
 abab@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
+
+abab@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
+  integrity sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w==
 
-abbrev@1:
+abbrev@1, abbrev@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
+accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
 
 acorn-globals@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538"
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.3.tgz#a86f75b69680b8780d30edd21eee4e0ea170c05e"
+  integrity sha512-vkR40VwS2SYO98AIeFvzWWh+xyc2qi9s7OoXSFEGIP/rOJKzjnhykaZJNnHdoq4BL2gGxI5EZOU16z896EYnOQ==
   dependencies:
-    acorn "^5.0.0"
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
 
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
   dependencies:
     acorn "^3.0.4"
 
+acorn-jsx@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
+  integrity sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==
+
+acorn-jsx@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
+  integrity sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==
+
+acorn-walk@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
 
-acorn@^5.0.0, acorn@^5.3.0:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
+acorn@^5.2.1, acorn@^5.3.0, acorn@^5.5.0:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^5.2.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+acorn@^6.0.1, acorn@^6.0.7, acorn@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
+  integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
 
-agent-base@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.1.2.tgz#80fa6cde440f4dcf9af2617cf246099b5d99f0c8"
+acorn@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
+  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
+
+adbkit-logcat@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz#01d7f9b0cef9093a30bcb3b007efff301508962f"
+  integrity sha1-Adf5sM75CTowvLOwB+//MBUIli8=
+
+adbkit-monkey@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz#f291be701a2efc567a63fc7aa6afcded31430be1"
+  integrity sha1-8pG+cBou/FZ6Y/x6pq/N7TFDC+E=
+  dependencies:
+    async "~0.2.9"
+
+adbkit@2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/adbkit/-/adbkit-2.11.1.tgz#7da847fe561254f3121088947bc1907ef053e894"
+  integrity sha512-hDTiRg9NX3HQt7WoDAPCplUpvzr4ZzQa2lq7BdTTJ/iOZ6O7YNAs6UYD8sFAiBEcYHDRIyq3cm9sZP6uZnhvXw==
+  dependencies:
+    adbkit-logcat "^1.1.0"
+    adbkit-monkey "~1.0.1"
+    bluebird "~2.9.24"
+    commander "^2.3.0"
+    debug "~2.6.3"
+    node-forge "^0.7.1"
+    split "~0.3.3"
+
+addons-linter@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-1.10.0.tgz#4b079647c860161602ff5772c1510bb63ec644ec"
+  integrity sha512-2i2qSayVPx4h1Aa2ZTdQlpgmjcCNIHZ4AJQS8V/QsBXIdmXl+Djmeyr096bjaC3Usq0rZfYhGgFdwR1dgHVItw==
+  dependencies:
+    ajv "6.10.0"
+    ajv-merge-patch "4.1.0"
+    chalk "2.4.2"
+    cheerio "1.0.0-rc.3"
+    columnify "1.5.4"
+    common-tags "1.8.0"
+    crx-parser "0.1.2"
+    deepmerge "3.2.0"
+    dispensary "0.37.0"
+    es6-promisify "6.0.1"
+    eslint "5.16.0"
+    eslint-plugin-no-unsafe-innerhtml "1.0.16"
+    eslint-visitor-keys "1.0.0"
+    espree "5.0.1"
+    esprima "4.0.1"
+    first-chunk-stream "3.0.0"
+    fluent-syntax "0.13.0"
+    glob "7.1.4"
+    is-mergeable-object "1.1.0"
+    jed "1.1.1"
+    mdn-browser-compat-data "0.0.82"
+    os-locale "3.1.0"
+    pino "5.12.6"
+    po2json "0.4.5"
+    postcss "7.0.16"
+    probe-image-size "4.0.0"
+    regenerator-runtime "0.13.2"
+    relaxed-json "1.0.3"
+    semver "6.1.1"
+    source-map-support "0.5.12"
+    strip-bom-stream "4.0.0"
+    tosource "1.0.0"
+    upath "1.1.2"
+    whatwg-url "7.0.0"
+    yargs "13.2.4"
+    yauzl "2.10.0"
+  optionalDependencies:
+    fsevents "2.0.7"
+
+adm-zip@~0.4.x:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.13.tgz#597e2f8cc3672151e1307d3e95cddbc75672314a"
+  integrity sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==
+
+agent-base@4, agent-base@^4.2.0, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
   dependencies:
     es6-promisify "^5.0.0"
 
-ajv-keywords@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+agent-base@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
+agentkeepalive@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-3.5.2.tgz#a113924dd3fa24a0bc3b78108c450c2abee00f67"
+  integrity sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==
+  dependencies:
+    humanize-ms "^1.2.1"
+
+ajv-errors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
+
+ajv-keywords@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+  integrity sha1-MU3QpLM2j609/NxU7eYXG4htrzw=
+
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
+
+ajv-merge-patch@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz#cd580e5860ac53431d6aa901fa3d5e2eb2b74a6c"
+  integrity sha512-0mAYXMSauA8RZ7r+B4+EAOYcZEcO9OK5EiQCR7W7Cv4E44pJj56ZnkKLJ9/PAcOc0dT+LlV9fdDcq2TxVJfOYw==
+  dependencies:
+    fast-json-patch "^2.0.6"
+    json-merge-patch "^0.2.3"
+
+ajv@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
+  integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
 
-ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
+ajv@^4.7.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  integrity sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.1.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
   dependencies:
     co "^4.6.0"
     fast-deep-equal "^1.0.0"
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-align-text@^0.1.1, align-text@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5, ajv@^6.9.1:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
+  integrity sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==
   dependencies:
-    kind-of "^3.0.2"
-    longest "^1.0.1"
-    repeat-string "^1.5.2"
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
 
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  integrity sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=
+  dependencies:
+    string-width "^2.0.0"
+
+ansi-align@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
+  integrity sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==
+  dependencies:
+    string-width "^3.0.0"
 
 ansi-colors@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"
+  integrity sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==
   dependencies:
     ansi-wrap "^0.1.0"
 
+ansi-colors@^3.0.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
+  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
+
 ansi-cyan@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
   dependencies:
     ansi-wrap "0.1.0"
 
+ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+  integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
+
 ansi-escapes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-escapes@^4.1.0, ansi-escapes@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228"
+  integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==
+  dependencies:
+    type-fest "^0.5.2"
 
 ansi-gray@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
   dependencies:
     ansi-wrap "0.1.0"
 
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
+
 ansi-red@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
   dependencies:
     ansi-wrap "0.1.0"
 
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
 
 ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+  integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=
+
 ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
 
-anymatch@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
-  dependencies:
-    micromatch "^2.1.5"
-    normalize-path "^2.0.0"
+ansicolors@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
+  integrity sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=
+
+any-promise@^1.0.0, any-promise@^1.1.0, any-promise@^1.3.0, any-promise@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
 
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
   dependencies:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-append-transform@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-1.0.0.tgz#046a52ae582a228bd72f58acfbe2967c678759ab"
-  dependencies:
-    default-require-extensions "^2.0.0"
-
-aproba@^1.0.3:
+aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+archiver-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-1.3.0.tgz#e50b4c09c70bf3d680e32ff1b7994e9f9d895174"
+  integrity sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=
+  dependencies:
+    glob "^7.0.0"
+    graceful-fs "^4.1.0"
+    lazystream "^1.0.0"
+    lodash "^4.8.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
+archiver-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.1.0.tgz#e8a460e94b693c3e3da182a098ca6285ba9249e2"
+  integrity sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==
+  dependencies:
+    glob "^7.1.4"
+    graceful-fs "^4.2.0"
+    lazystream "^1.0.0"
+    lodash.defaults "^4.2.0"
+    lodash.difference "^4.5.0"
+    lodash.flatten "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.union "^4.6.0"
+    normalize-path "^3.0.0"
+    readable-stream "^2.0.0"
+
+archiver@^3.0.0, archiver@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-3.1.1.tgz#9db7819d4daf60aec10fe86b16cb9258ced66ea0"
+  integrity sha512-5Hxxcig7gw5Jod/8Gq0OneVgLYET+oNHcxgWItq4TbhOzRLKNAFUb9edAftiMKXvXfCB0vbGrJdZDNq0dWMsxg==
+  dependencies:
+    archiver-utils "^2.1.0"
+    async "^2.6.3"
+    buffer-crc32 "^0.2.1"
+    glob "^7.1.4"
+    readable-stream "^3.4.0"
+    tar-stream "^2.1.0"
+    zip-stream "^2.1.2"
+
+archiver@~2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
+  integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=
+  dependencies:
+    archiver-utils "^1.3.0"
+    async "^2.0.0"
+    buffer-crc32 "^0.2.1"
+    glob "^7.0.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+    tar-stream "^1.5.0"
+    zip-stream "^1.2.0"
+
+archy@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
+  integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
 
 are-we-there-yet@~1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
   dependencies:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
@@ -253,12 +1920,14 @@ are-we-there-yet@~1.1.2:
 argparse@^1.0.7:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  integrity sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=
   dependencies:
     sprintf-js "~1.0.2"
 
 arr-diff@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
+  integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo=
   dependencies:
     arr-flatten "^1.0.1"
     array-slice "^0.2.3"
@@ -266,184 +1935,268 @@ arr-diff@^1.0.1:
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
   dependencies:
     arr-flatten "^1.0.1"
 
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
 
 arr-flatten@^1.0.1, arr-flatten@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
 arr-union@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
+  integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=
 
 arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
 
 array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+  integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
+
+array-find-index@^1.0.1, array-find-index@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
+array-flatten@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
+
+array-from@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+  integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+  integrity sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=
 
 array-slice@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+  integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
 
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
   dependencies:
     array-uniq "^1.0.1"
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
 
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
 array.prototype.find@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.0.4.tgz#556a5c5362c08648323ddaeb9de9d14bc1864c90"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
+  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
 
-arrify@^1.0.0, arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
 art@^0.10.1:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/art/-/art-0.10.1.tgz#38541883e399225c5e193ff246e8f157cf7b2146"
+  integrity sha1-OFQYg+OZIlxeGT/yRujxV897IUY=
 
 asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
-asn1@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+asn1.js@^4.0.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1@^0.2.4, asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
 
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 assert-plus@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+  integrity sha1-104bh+ev/A24qttwIfP+SBAasjQ=
+
+assert@^1.1.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
+  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
+  dependencies:
+    object-assign "^4.1.1"
+    util "0.10.3"
 
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+ast-types@0.x.x:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
+  integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
 
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+async-each@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async-each@^1.0.0:
+async-limiter@^1.0.0, async-limiter@~1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async-limiter@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+async-retry@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.2.3.tgz#a6521f338358d322b1a0012b79030c6f411d1ce0"
+  integrity sha512-tfDb02Th6CE6pJUF2gjW5ZVjsgwlucVXOEQMvEX9JgSJMs9gAX+Nz3xRuJBKuUYjTSYORqvDBORdAQ3LU59g7Q==
+  dependencies:
+    retry "0.12.0"
 
-async@^1.4.0:
+async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.1.4:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+async@^2.0.0, async@^2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
   dependencies:
-    lodash "^4.17.10"
+    lodash "^4.17.14"
+
+async@~0.2.9:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+async@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+  integrity sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==
+  dependencies:
+    lodash "^4.14.0"
+
+async@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.0.1.tgz#dfeb34657d1e63c94c0eee424297bf8a2c9a8182"
+  integrity sha512-ZswD8vwPtmBZzbn9xyi8XBQWXH3AvOQ43Za1KWYq7JeycrZuUYzx01KvHcVbXltjqH4y0MWrQ33008uLTqXuDw==
 
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-atob@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc"
+atob-lite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696"
+  integrity sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=
+
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+  integrity sha1-FDQt0428yU0OW4fXY81jYSwOeU8=
 
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.2.1, aws4@^1.6.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
-
-babel-cli@^6.6.5:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
-  dependencies:
-    babel-core "^6.26.0"
-    babel-polyfill "^6.26.0"
-    babel-register "^6.26.0"
-    babel-runtime "^6.26.0"
-    commander "^2.11.0"
-    convert-source-map "^1.5.0"
-    fs-readdir-recursive "^1.0.0"
-    glob "^7.1.2"
-    lodash "^4.17.4"
-    output-file-sync "^1.1.2"
-    path-is-absolute "^1.0.1"
-    slash "^1.0.0"
-    source-map "^0.5.6"
-    v8flags "^2.1.1"
-  optionalDependencies:
-    chokidar "^1.6.1"
+aws4@^1.2.1, aws4@^1.6.0, aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+babel-code-frame@^6.16.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
   dependencies:
     chalk "^1.1.3"
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.0.0, babel-core@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-generator "^6.26.0"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.26.0"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    convert-source-map "^1.5.0"
-    debug "^2.6.8"
-    json5 "^0.5.1"
-    lodash "^4.17.4"
-    minimatch "^3.0.4"
-    path-is-absolute "^1.0.1"
-    private "^0.1.7"
-    slash "^1.0.0"
-    source-map "^0.5.6"
-
-babel-core@^6.7.2:
+babel-core@^6.26.0, babel-core@^6.7.2:
   version "6.26.3"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
   dependencies:
     babel-code-frame "^6.26.0"
     babel-generator "^6.26.0"
@@ -465,9 +2218,27 @@ babel-core@^6.7.2:
     slash "^1.0.0"
     source-map "^0.5.7"
 
-babel-eslint@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.0.tgz#0bb43e6b11a119bf3defbb1ee2521f42e2d413c9"
+babel-core@^7.0.0-bridge:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
+babel-eslint@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
+  integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
+babel-eslint@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-9.0.0.tgz#7d9445f81ed9f60aff38115f838970df9f2b6220"
+  integrity sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/parser" "^7.0.0"
@@ -476,9 +2247,10 @@ babel-eslint@^10.0.0:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-generator@^6.18.0, babel-generator@^6.26.0:
+babel-generator@^6.26.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
+  integrity sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==
   dependencies:
     babel-messages "^6.23.0"
     babel-runtime "^6.26.0"
@@ -492,6 +2264,7 @@ babel-generator@^6.18.0, babel-generator@^6.26.0:
 babel-helper-builder-react-jsx@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.24.1.tgz#0ad7917e33c8d751e646daca4e77cc19377d2cbc"
+  integrity sha1-CteRfjPI11HmRtrKTnfMGTd9LLw=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -500,6 +2273,7 @@ babel-helper-builder-react-jsx@^6.24.1:
 babel-helper-call-delegate@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
+  integrity sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=
   dependencies:
     babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
@@ -509,6 +2283,7 @@ babel-helper-call-delegate@^6.24.1:
 babel-helper-define-map@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.24.1.tgz#7a9747f258d8947d32d515f6aa1c7bd02204a080"
+  integrity sha1-epdH8ljYlH0y1RX2qhx70CIEoIA=
   dependencies:
     babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
@@ -518,6 +2293,7 @@ babel-helper-define-map@^6.24.1:
 babel-helper-function-name@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
+  integrity sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=
   dependencies:
     babel-helper-get-function-arity "^6.24.1"
     babel-runtime "^6.22.0"
@@ -528,6 +2304,7 @@ babel-helper-function-name@^6.24.1:
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
+  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -535,6 +2312,7 @@ babel-helper-get-function-arity@^6.24.1:
 babel-helper-hoist-variables@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
+  integrity sha1-HssnaJydJVE+rbyZFKc/VAi+enY=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -542,23 +2320,15 @@ babel-helper-hoist-variables@^6.24.1:
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
+  integrity sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-helper-remap-async-to-generator@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
 babel-helper-replace-supers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a"
+  integrity sha1-v22/5Dk40XNpohPKiov3S2qQqxo=
   dependencies:
     babel-helper-optimise-call-expression "^6.24.1"
     babel-messages "^6.23.0"
@@ -570,104 +2340,125 @@ babel-helper-replace-supers@^6.24.1:
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
+  integrity sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=
   dependencies:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-jest@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.0.1.tgz#bbad3bf523fb202da05ed0a6540b48c84eed13a6"
-  dependencies:
-    babel-plugin-istanbul "^4.1.6"
-    babel-preset-jest "^23.0.1"
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
+babel-loader@^8.0.4:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
+  integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
+  dependencies:
+    find-cache-dir "^2.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    pify "^4.0.1"
 
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-check-es2015-constants@^6.5.0, babel-plugin-check-es2015-constants@^6.8.0:
+babel-plugin-check-es2015-constants@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  integrity sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-external-helpers@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz#2285f48b02bd5dede85175caf8c62e86adccefa1"
+babel-plugin-dynamic-import-node@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
   dependencies:
-    babel-runtime "^6.22.0"
+    object.assign "^4.1.0"
 
-babel-plugin-istanbul@^4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+babel-plugin-istanbul@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
   dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-    find-up "^2.1.0"
-    istanbul-lib-instrument "^1.10.1"
-    test-exclude "^4.2.1"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    find-up "^3.0.0"
+    istanbul-lib-instrument "^3.3.0"
+    test-exclude "^5.2.3"
 
-babel-plugin-jest-hoist@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.0.1.tgz#eaa11c964563aea9c21becef2bdf7853f7f3c148"
-
-babel-plugin-syntax-async-functions@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+babel-plugin-jest-hoist@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
 
 babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+  integrity sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=
 
 babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+  integrity sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=
 
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
 
-babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
 babel-plugin-syntax-trailing-function-commas@^6.5.0, babel-plugin-syntax-trailing-function-commas@^6.8.0:
   version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
-
-babel-plugin-transform-async-to-generator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
-  dependencies:
-    babel-helper-remap-async-to-generator "^6.24.1"
-    babel-plugin-syntax-async-functions "^6.8.0"
-    babel-runtime "^6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
 
-babel-plugin-transform-class-properties@^6.11.5, babel-plugin-transform-class-properties@^6.8.0:
+babel-plugin-transform-class-properties@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  integrity sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=
   dependencies:
     babel-helper-function-name "^6.24.1"
     babel-plugin-syntax-class-properties "^6.8.0"
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-arrow-functions@^6.5.2, babel-plugin-transform-es2015-arrow-functions@^6.8.0:
+babel-plugin-transform-es2015-arrow-functions@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  integrity sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-block-scoped-functions@^6.5.0, babel-plugin-transform-es2015-block-scoped-functions@^6.8.0:
+babel-plugin-transform-es2015-block-scoped-functions@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  integrity sha1-u8UbSflk1wy42OC5ToICRs46YUE=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.8.0:
+babel-plugin-transform-es2015-block-scoping@^6.8.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  integrity sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=
   dependencies:
     babel-runtime "^6.26.0"
     babel-template "^6.26.0"
@@ -675,9 +2466,10 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es20
     babel-types "^6.26.0"
     lodash "^4.17.4"
 
-babel-plugin-transform-es2015-classes@^6.5.2, babel-plugin-transform-es2015-classes@^6.8.0:
+babel-plugin-transform-es2015-classes@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
+  integrity sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=
   dependencies:
     babel-helper-define-map "^6.24.1"
     babel-helper-function-name "^6.24.1"
@@ -689,67 +2481,66 @@ babel-plugin-transform-es2015-classes@^6.5.2, babel-plugin-transform-es2015-clas
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-computed-properties@^6.5.2, babel-plugin-transform-es2015-computed-properties@^6.8.0:
+babel-plugin-transform-es2015-computed-properties@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
+  integrity sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=
   dependencies:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-destructuring@^6.5.0, babel-plugin-transform-es2015-destructuring@^6.8.0:
+babel-plugin-transform-es2015-destructuring@^6.8.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  integrity sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-for-of@^6.5.2, babel-plugin-transform-es2015-for-of@^6.8.0:
+babel-plugin-transform-es2015-for-of@^6.8.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  integrity sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=
   dependencies:
     babel-runtime "^6.22.0"
 
 babel-plugin-transform-es2015-function-name@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
+  integrity sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=
   dependencies:
     babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-literals@^6.5.0, babel-plugin-transform-es2015-literals@^6.8.0:
+babel-plugin-transform-es2015-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  integrity sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-modules-commonjs@^6.5.2:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
 babel-plugin-transform-es2015-modules-commonjs@^6.8.0:
   version "6.26.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
   dependencies:
     babel-plugin-transform-strict-mode "^6.24.1"
     babel-runtime "^6.26.0"
     babel-template "^6.26.0"
     babel-types "^6.26.0"
 
-babel-plugin-transform-es2015-object-super@^6.5.0, babel-plugin-transform-es2015-object-super@^6.8.0:
+babel-plugin-transform-es2015-object-super@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
+  integrity sha1-JM72muIcuDp/hgPa0CH1cusnj40=
   dependencies:
     babel-helper-replace-supers "^6.24.1"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-parameters@^6.5.0, babel-plugin-transform-es2015-parameters@^6.8.0:
+babel-plugin-transform-es2015-parameters@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
+  integrity sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=
   dependencies:
     babel-helper-call-delegate "^6.24.1"
     babel-helper-get-function-arity "^6.24.1"
@@ -758,109 +2549,95 @@ babel-plugin-transform-es2015-parameters@^6.5.0, babel-plugin-transform-es2015-p
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-shorthand-properties@^6.5.0, babel-plugin-transform-es2015-shorthand-properties@^6.8.0:
+babel-plugin-transform-es2015-shorthand-properties@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
+  integrity sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-spread@^6.5.2, babel-plugin-transform-es2015-spread@^6.8.0:
+babel-plugin-transform-es2015-spread@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  integrity sha1-1taKmfia7cRTbIGlQujdnxdG+NE=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-template-literals@^6.5.2, babel-plugin-transform-es2015-template-literals@^6.8.0:
+babel-plugin-transform-es2015-template-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  integrity sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=
   dependencies:
     babel-runtime "^6.22.0"
 
 babel-plugin-transform-es3-member-expression-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz#733d3444f3ecc41bef8ed1a6a4e09657b8969ebb"
+  integrity sha1-cz00RPPsxBvvjtGmpOCWV7iWnrs=
   dependencies:
     babel-runtime "^6.22.0"
 
 babel-plugin-transform-es3-property-literals@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz#b2078d5842e22abf40f73e8cde9cd3711abd5758"
+  integrity sha1-sgeNWELiKr9A9z6M3pzTcRq9V1g=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-strip-types@^6.8.0:
+babel-plugin-transform-flow-strip-types@^6.8.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  integrity sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988=
   dependencies:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-object-rest-spread@^6.6.5, babel-plugin-transform-object-rest-spread@^6.8.0:
+babel-plugin-transform-object-rest-spread@^6.8.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
   dependencies:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-plugin-transform-react-display-name@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-react-display-name@^6.8.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
+  integrity sha1-Z+K/Hx6ck6sI25Z5LgU5K/LMKNE=
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-react-jsx-self@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-source@^6.22.0, babel-plugin-transform-react-jsx-source@^6.8.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx@^6.24.1, babel-plugin-transform-react-jsx@^6.8.0:
+babel-plugin-transform-react-jsx@^6.8.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  integrity sha1-hAoCjn30YN/DotKfDA2R9jduZqM=
   dependencies:
     babel-helper-builder-react-jsx "^6.24.1"
     babel-plugin-syntax-jsx "^6.8.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-regenerator@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
-  dependencies:
-    regenerator-transform "^0.10.0"
-
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-polyfill@^6.23.0, babel-polyfill@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
+babel-polyfill@6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
+  integrity sha1-LUUCHfh+JqN0ttTRqcZZZNF/JCI=
   dependencies:
-    babel-runtime "^6.26.0"
-    core-js "^2.5.0"
-    regenerator-runtime "^0.10.5"
+    babel-runtime "^6.9.1"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
 
 babel-preset-fbjs@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-2.2.0.tgz#c25b879a914feefd964052b1bce4c90ee915023a"
+  integrity sha512-jj0KFJDioYZMtPtZf77dQuU+Ad/1BtN0UnAYlHDa8J8f4tGXr3YrPoJImD5MdueaOPeN/jUdrCgu330EfXr0XQ==
   dependencies:
     babel-plugin-check-es2015-constants "^6.8.0"
     babel-plugin-syntax-class-properties "^6.8.0"
@@ -891,33 +2668,18 @@ babel-preset-fbjs@^2.1.2:
     babel-plugin-transform-react-display-name "^6.8.0"
     babel-plugin-transform-react-jsx "^6.8.0"
 
-babel-preset-flow@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
-  dependencies:
-    babel-plugin-transform-flow-strip-types "^6.22.0"
-
-babel-preset-jest@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.0.1.tgz#631cc545c6cf021943013bcaf22f45d87fe62198"
+babel-preset-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
   dependencies:
-    babel-plugin-jest-hoist "^23.0.1"
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-
-babel-preset-react@^6.5.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
-  dependencies:
-    babel-plugin-syntax-jsx "^6.3.13"
-    babel-plugin-transform-react-display-name "^6.23.0"
-    babel-plugin-transform-react-jsx "^6.24.1"
-    babel-plugin-transform-react-jsx-self "^6.22.0"
-    babel-plugin-transform-react-jsx-source "^6.22.0"
-    babel-preset-flow "^6.23.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.9.0"
 
 babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  integrity sha1-btAhFz4vy0htestFxgCahW9kcHE=
   dependencies:
     babel-core "^6.26.0"
     babel-runtime "^6.26.0"
@@ -927,16 +2689,18 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.9.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
   dependencies:
     babel-runtime "^6.26.0"
     babel-traverse "^6.26.0"
@@ -944,9 +2708,10 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0, babel-traverse@^6.9.0:
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
   dependencies:
     babel-code-frame "^6.26.0"
     babel-messages "^6.23.0"
@@ -958,26 +2723,40 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0, babel-tr
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
   dependencies:
     babel-runtime "^6.26.0"
     esutils "^2.0.2"
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@6.18.0, babylon@^6.18.0:
+babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+base64-js@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
+  integrity sha1-EQHpVE9KdrG8OybUUsqW16NeeXg=
+
+base64-js@^1.0.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
   dependencies:
     cache-base "^1.0.1"
     class-utils "^0.3.5"
@@ -987,31 +2766,133 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  integrity sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=
   dependencies:
     tweetnacl "^0.14.3"
 
+before-after-hook@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
+  integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^1.0.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
 bl@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.1.tgz#cac328f7bee45730d404b692203fcb590e172d5e"
+  integrity sha1-ysMo977kVzDUBLaSID/LWQ4XLV4=
   dependencies:
     readable-stream "^2.0.5"
 
+bl@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-3.0.0.tgz#3611ec00579fd18561754360b21e9f784500ff88"
+  integrity sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==
+  dependencies:
+    readable-stream "^3.0.1"
+
+bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
+  integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
+
+bluebird@~2.9.24:
+  version "2.9.34"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8"
+  integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g=
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
 boom@2.x.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  integrity sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=
   dependencies:
     hoek "2.x.x"
 
+boxen@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
+  integrity sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==
+  dependencies:
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^2.0.0"
+
+boxen@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
+  integrity sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^5.3.1"
+    chalk "^2.4.2"
+    cli-boxes "^2.2.0"
+    string-width "^3.0.0"
+    term-size "^1.2.0"
+    type-fest "^0.3.0"
+    widest-line "^2.0.0"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
@@ -1019,14 +2900,16 @@ brace-expansion@^1.1.7:
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
   dependencies:
     expand-range "^1.8.1"
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-braces@^2.3.1:
+braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
   dependencies:
     arr-flatten "^1.1.0"
     array-unique "^0.3.2"
@@ -1039,33 +2922,239 @@ braces@^2.3.1:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
 browser-process-hrtime@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
+  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
 
-browser-resolve@^1.11.0, browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+browser-resolve@^1.11.0, browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
   dependencies:
     resolve "1.1.7"
 
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
+  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
+  dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  integrity sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^4.6.0, browserslist@^4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.6.tgz#6e4bf467cde520bc9dbdf3747dafa03531cec453"
+  integrity sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==
+  dependencies:
+    caniuse-lite "^1.0.30000984"
+    electron-to-chromium "^1.3.191"
+    node-releases "^1.1.25"
+
 bser@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.0.tgz#65fc784bf7f87c009b973c12db6546902fa9c7b5"
+  integrity sha512-8zsjWrQkkBoLK6uxASk1nJ2SKv97ltiGDo6A3wA0/yRPz+CwmEyDo0hUrhIuukG2JHpAl3bvFIixw2/3Hi0DOg==
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-from@^1.0.0:
+btoa-lite@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
+  integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
+
+buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
 
-builtin-modules@^1.0.0, builtin-modules@^1.1.0:
+buffer-crc32@^0.2.1, buffer-crc32@^0.2.13, buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
+
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
+
+buffer@^3.0.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-3.6.0.tgz#a72c936f77b96bf52f5f7e7b467180628551defb"
+  integrity sha1-pyyTb3e5a/UvX357RnGAYoVR3vs=
+  dependencies:
+    base64-js "0.0.8"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+buffer@^4.3.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+buffer@^5.1.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.4.0.tgz#33294f5c1f26e08461e528b69fa06de3c45cbd8c"
+  integrity sha512-Xpgy0IwHK2N01ncykXTy6FpCWuM+CJSHoPVBLyNqyrWxsedpLvwsYUhf0ME3WRFNUhos0dMamz9cOS/xRDtU5g==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
+builtin-modules@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+
+builtins@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
+  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
+
+bunyan@1.8.12:
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
+  integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=
+  optionalDependencies:
+    dtrace-provider "~0.8"
+    moment "^2.10.6"
+    mv "~2"
+    safe-json-stringify "~1"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+cacache@^12.0.0, cacache@^12.0.2:
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
+  integrity sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
 
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
   dependencies:
     collection-visit "^1.0.0"
     component-emitter "^1.2.1"
@@ -1077,56 +3166,99 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cacheable-request@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
+  integrity sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==
+  dependencies:
+    clone-response "^1.0.2"
+    get-stream "^5.1.0"
+    http-cache-semantics "^4.0.0"
+    keyv "^3.0.0"
+    lowercase-keys "^2.0.0"
+    normalize-url "^4.1.0"
+    responselike "^1.0.2"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  integrity sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=
   dependencies:
     callsites "^0.2.0"
 
 callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+  integrity sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=
 
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
 
-camelcase@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^2.0.0, camelcase@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
 
-camelcase@^4.1.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-capture-exit@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
+caniuse-lite@^1.0.30000984:
+  version "1.0.30000989"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
+  integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
   dependencies:
-    rsvp "^3.3.3"
+    rsvp "^4.8.4"
+
+capture-stack-trace@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
+  integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
 caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+  integrity sha1-cVuW6phBWTzDMGeSP17GDr2k99c=
 
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-center-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
-    align-text "^0.1.3"
-    lazy-cache "^1.0.3"
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
 
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -1134,81 +3266,168 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.0.tgz#a060a297a6b57e15b61ca63ce84995daa0fe6e52"
+chalk@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
+  integrity sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=
   dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
+    ansi-styles "~1.0.0"
+    has-color "~0.1.0"
+    strip-ansi "~0.1.0"
 
-chardet@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
+cheerio@1.0.0-rc.3:
+  version "1.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
+  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.1"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash "^4.15.0"
+    parse5 "^3.0.1"
 
-chokidar@^1.6.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+child-process-promise@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/child-process-promise/-/child-process-promise-2.2.1.tgz#4730a11ef610fad450b8f223c79d31d7bdad8074"
+  integrity sha1-RzChHvYQ+tRQuPIjx50x172tgHQ=
   dependencies:
-    anymatch "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
+chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.6.tgz#b6cad653a929e244ce8a834244164d241fa954c5"
+  integrity sha512-V2jUo67OKkc6ySiRpJrjlpJKl9kDuG+Xb8VgsGzb+aEouhgS1D0weyPU4lEzdAcsCAvrih2J2BqyXqHWvVLw5g==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
     is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
     path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
   optionalDependencies:
-    fsevents "^1.0.0"
+    fsevents "^1.2.7"
 
-chownr@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.2.tgz#a18f1e0b269c8a6a5d3c86eb298beb14c3dd7bf6"
+  integrity sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==
 
-ci-info@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"
+chrome-launch@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chrome-launch/-/chrome-launch-1.1.4.tgz#c8985bd022635a5cc897099bafd19831838a7252"
+  integrity sha1-yJhb0CJjWlzIlwmbr9GYMYOKclI=
+  dependencies:
+    chrome-location "^1.2.0"
+    quick-tmp "0.0.0"
+    rimraf "^2.2.8"
+    shallow-copy "0.0.1"
+
+chrome-location@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/chrome-location/-/chrome-location-1.2.1.tgz#6911511a4eac55027625c73b937ca5ca7ab94995"
+  integrity sha1-aRFRGk6sVQJ2Jcc7k3ylynq5SZU=
+  dependencies:
+    userhome "^1.0.0"
+    which "^1.0.5"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
+  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
+  dependencies:
+    tslib "^1.9.0"
+
+ci-info@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
 
 circular-json@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
 
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
   dependencies:
     arr-union "^3.1.0"
     define-property "^0.2.5"
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha1-T6kXw+WclKAEzWH47lCdplFocUM=
+
+cli-boxes@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
+  integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
+
+cli-cursor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  integrity sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
   dependencies:
-    restore-cursor "^2.0.0"
+    restore-cursor "^3.1.0"
 
 cli-table@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
+  integrity sha1-9TsFJmqLGguTSz0IIebi3FkUriM=
   dependencies:
     colors "1.0.3"
 
 cli-width@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+  integrity sha1-sjTKIJsp72b8UY2bmNWEewDt8Ao=
 
-cliui@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
-  dependencies:
-    center-align "^0.1.1"
-    right-align "^0.1.1"
-    wordwrap "0.0.2"
+clipboard-js@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/clipboard-js/-/clipboard-js-0.3.6.tgz#6260add69b5318fde40b80f9d3c8c863efdaf339"
+  integrity sha512-hyrmvbrYCeRBHdiR3KrEz0tmrUTXXEU8HLeGW0Y0icUSwYmAsmc+d6wfE4EDb/TxZmAVJG0eTfMlulCIT+ecfw==
 
-cliui@^3.2.0:
+cliui@^3.0.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
@@ -1217,26 +3436,62 @@ cliui@^3.2.0:
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
   dependencies:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
+
+clone-deep@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
+  integrity sha1-NIxhrpzb4O3+BT2R/0zFIdeQ7eg=
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.1"
+    kind-of "^3.2.2"
+    shallow-clone "^0.1.2"
+
+clone-response@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
+  integrity sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=
+  dependencies:
+    mimic-response "^1.0.0"
 
 clone-stats@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+  integrity sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
 clone@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+  integrity sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=
 
 cloneable-readable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
+  integrity sha1-pikNQT8hemEjL5XkWP84QYz7ARc=
   dependencies:
     inherits "^2.0.1"
     process-nextick-args "^1.0.6"
@@ -1245,18 +3500,22 @@ cloneable-readable@^1.0.0:
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
 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"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
 coffee-script@^1.8.0:
   version "1.12.5"
   resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.5.tgz#809f4585419112bbfe46a073ad7543af18c27346"
+  integrity sha1-gJ9FhUGRErv+RqBzrXVDrxjCc0Y=
 
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
   dependencies:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
@@ -1264,82 +3523,261 @@ collection-visit@^1.0.0:
 color-convert@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  integrity sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=
   dependencies:
     color-name "^1.1.1"
 
 color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
+
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+  integrity sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=
 
 colors@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
+
+columnify@1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
+  integrity sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=
+  dependencies:
+    strip-ansi "^3.0.0"
+    wcwidth "^1.0.0"
+
+combined-stream@^1.0.5, combined-stream@^1.0.6, combined-stream@~1.0.5, combined-stream@~1.0.6:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commander@^2.18.0, commander@^2.20.0, commander@^2.3.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+common-tags@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+component-emitter@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+compress-commons@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
+  integrity sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=
+  dependencies:
+    buffer-crc32 "^0.2.1"
+    crc32-stream "^2.0.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
+compress-commons@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-2.1.1.tgz#9410d9a534cf8435e3fbbb7c6ce48de2dc2f0610"
+  integrity sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==
+  dependencies:
+    buffer-crc32 "^0.2.13"
+    crc32-stream "^3.0.1"
+    normalize-path "^3.0.0"
+    readable-stream "^2.3.6"
+
+compressible@~2.0.16:
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
+  integrity sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==
+  dependencies:
+    mime-db ">= 1.40.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.16"
+    debug "2.6.9"
+    on-headers "~1.0.2"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@1.6.2, concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.5.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+configstore@^3.0.0, configstore@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
+  integrity sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+configstore@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7"
+  integrity sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
   dependencies:
-    delayed-stream "~1.0.0"
+    date-now "^0.1.4"
 
-commander@^2.11.0, commander@^2.12.2, commander@^2.9.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
-compare-versions@^3.1.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.3.0.tgz#af93ea705a96943f622ab309578b9b90586f39c3"
+constants-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+  integrity sha1-kld9tSe6bEzwpFaNhLwDH0QeIfI=
 
-component-emitter@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-concat-stream@^1.6.0:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.1:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
   dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
+    safe-buffer "~5.1.1"
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+cookie@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+  integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
 
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+core-js-compat@^3.1.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.2.1.tgz#0cbdbc2e386e8e00d3b85dc81c848effec5b8150"
+  integrity sha512-MwPZle5CF9dEaMYdDeWm73ao/IflDH+FjeJCWEADcEgFSE9TLimFKwJsfmkwzI8eC0Aj0mgvMDjeQjrElkz4/A==
+  dependencies:
+    browserslist "^4.6.6"
+    semver "^6.3.0"
 
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.2.1, core-js@^2.4.0, core-js@^2.5.0:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
-
-core-js@^2.4.1:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+core-js@^2.2.1, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.6.5:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+  integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
 
 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"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
 coveralls@^2.11.6:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-2.13.1.tgz#d70bb9acc1835ec4f063ff9dac5423c17b11f178"
+  integrity sha1-1wu5rMGDXsTwY/+drFQjwXsR8Xg=
   dependencies:
     js-yaml "3.6.1"
     lcov-parse "0.0.10"
@@ -1347,221 +3785,750 @@ coveralls@^2.11.6:
     minimist "1.2.0"
     request "2.79.0"
 
-create-react-class@^15.6.2, create-react-class@^15.6.3:
+crc32-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
+  integrity sha1-483TtN8xaN10494/u8t7KX/pCPQ=
+  dependencies:
+    crc "^3.4.4"
+    readable-stream "^2.0.0"
+
+crc32-stream@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-3.0.1.tgz#cae6eeed003b0e44d739d279de5ae63b171b4e85"
+  integrity sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==
+  dependencies:
+    crc "^3.4.4"
+    readable-stream "^3.4.0"
+
+crc@^3.4.4:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.8.0.tgz#ad60269c2c856f8c299e2c4cc0de4556914056c6"
+  integrity sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==
+  dependencies:
+    buffer "^5.1.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-error-class@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+cross-env@^3.1.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
+  integrity sha1-ngWF8neGTtQhznVvgamA/w1piro=
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
 cross-env@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.1.tgz#b6d8ab97f304c0f71dae7277b75fe424c08dfa74"
+  integrity sha512-Wtvr+z0Z06KO1JxjfRRsPC+df7biIOiuV4iZ73cThjFGkH+ULBZq1MkBdywEcJC4cTDbO6c8IjgRjfswx3YTBA==
   dependencies:
     cross-spawn "^5.1.0"
     is-windows "^1.0.0"
 
+cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cross-spawn@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  integrity sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
   dependencies:
     lru-cache "^4.0.1"
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+crx-parser@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/crx-parser/-/crx-parser-0.1.2.tgz#7eeeed9eddc95e22c189382e34624044a89a5a6d"
+  integrity sha1-fu7tnt3JXiLBiTguNGJARKiaWm0=
+
+crx@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/crx/-/crx-5.0.1.tgz#33f7a81375acfab1aa3a8291424223434dc0978b"
+  integrity sha512-n/PzBx/fR1+xZCiJBats9y5zw/a+YBcoJ0ABnUaY56xb1RpXuFhsiCMpNY6WjVtylLzhUUXSWsbitesVg7v2vg==
+  dependencies:
+    archiver "^3.0.3"
+    commander "^2.20.0"
+    node-rsa "^1.0.5"
+    pbf "^3.2.0"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  integrity sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=
   dependencies:
     boom "2.x.x"
 
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+crypto-browserify@~3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+  integrity sha1-ubEdvm2WUd2IKgHmzEZ99xjs8Yk=
+  dependencies:
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+crypto-random-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
+
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
+css-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
+  integrity sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash "^4.17.11"
+    postcss "^6.0.23"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
+css-select@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d"
+  integrity sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 "cssstyle@>= 0.3.1 < 0.4.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.3.1.tgz#6da9b4cff1bc5d716e6e5fe8e04fcb1b50a49adf"
+  integrity sha512-tNvaxM5blOnxanyxI6panOsnfiyLRj3HV4qjqqS45WPNS1usdYWRUQjqTEEELK73lpeP/1KoIGYUwrBn/VcECA==
   dependencies:
     cssom "0.3.x"
 
-danger@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/danger/-/danger-3.0.4.tgz#df8bb80ec9e220f68718e0c7ce83efb7fe5b5367"
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
   dependencies:
-    babel-polyfill "^6.23.0"
+    array-find-index "^1.0.1"
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+  integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
+
+d@1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
+danger@^9.1.8:
+  version "9.1.8"
+  resolved "https://registry.yarnpkg.com/danger/-/danger-9.1.8.tgz#9d615fdd06f3b57de374018f2148cc411c791ac1"
+  integrity sha512-7Iu/UNxxlv7BS8kn4hN14GKQHQveWa3AMS4OSdQOVMTlmMLQgCRTrEGHazGDrwtMdkf8kg00dYKyF8ItniSSyQ==
+  dependencies:
+    "@babel/polyfill" "^7.2.5"
+    "@octokit/rest" "^16.14.1"
+    async-retry "1.2.3"
     chalk "^2.3.0"
-    commander "^2.12.2"
-    debug "^3.1.0"
-    get-stdin "^5.0.1"
-    github "^13.0.1"
+    commander "^2.18.0"
+    debug "^4.1.1"
+    get-stdin "^6.0.0"
+    gitlab "^10.0.1"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
     hyperlinker "^1.0.0"
     jsome "^2.3.25"
-    json5 "^0.5.1"
+    json5 "^2.1.0"
     jsonpointer "^4.0.1"
+    jsonwebtoken "^8.4.0"
     lodash.find "^4.6.0"
     lodash.includes "^4.3.0"
     lodash.isobject "^3.0.2"
     lodash.keys "^4.0.8"
+    lodash.mapvalues "^4.6.0"
+    lodash.memoize "^4.1.2"
+    memfs-or-file-map-to-github-branch "^1.1.0"
+    micromatch "^3.1.10"
     node-cleanup "^2.1.2"
-    node-fetch "^1.7.3"
-    parse-diff "^0.4.0"
-    parse-git-config "^1.1.1"
+    node-fetch "^2.3.0"
+    override-require "^1.1.1"
+    p-limit "^2.1.0"
+    parse-diff "^0.5.1"
+    parse-git-config "^2.0.3"
     parse-github-url "^1.0.2"
     parse-link-header "^1.0.1"
     pinpoint "^1.1.0"
-    readline-sync "^1.4.7"
-    require-from-string "^2.0.1"
-    rfc6902 "^2.2.2"
+    readline-sync "^1.4.9"
+    require-from-string "^2.0.2"
+    rfc6902 "^3.0.1"
     supports-hyperlinks "^1.0.1"
-    vm2 patriksimek/vm2#custom_files
-    voca "^1.3.1"
 
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
   dependencies:
     assert-plus "^1.0.0"
 
+data-uri-to-buffer@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-2.0.1.tgz#ca8f56fe38b1fd329473e9d1b4a9afcd8ce1c045"
+  integrity sha512-OkVVLrerfAKZlW2ZZ3Ve2y65jgiWqBKsTfUIAFbn8nVbPcCZg6l6gikKlEYv0kXcmzqGm6mFq/Jf2vriuEkv8A==
+  dependencies:
+    "@types/node" "^8.0.7"
+
 data-urls@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.0.0.tgz#24802de4e81c298ea8a9388bb0d8e461c774684f"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
   dependencies:
-    abab "^1.0.4"
-    whatwg-mimetype "^2.0.0"
-    whatwg-url "^6.4.0"
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
+
+debounce@1.2.0, debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
 
-debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2, debug@2.6.9, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0:
+debug@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
   dependencies:
     ms "2.0.0"
 
-decamelize@^1.0.0, decamelize@^1.1.1:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^3.0.0, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-3.2.0.tgz#84b8e8f4f8c579f938e35e2cc7024907e0090851"
+  integrity sha512-4TgkVUsmmu7oCSyGBm5FvfMoACuoh9EOidm7V5/J2X2djAwwt57qb3F2KMP2ITqODTCSwb+YRV+0Zqrv18k/hw==
+  dependencies:
+    xregexp "^4.2.4"
+
+decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+decompress-response@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=
+  dependencies:
+    mimic-response "^1.0.0"
+
+deep-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
+  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
+  dependencies:
+    is-obj "^1.0.0"
+
+deep-equal@^1.0.0, deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
 
-deep-extend@~0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-default-require-extensions@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
+deepcopy@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-0.6.3.tgz#634780f2f8656ab771af8fa8431ed1ccee55c7b0"
+  integrity sha1-Y0eA8vhlardxr4+oQx7RzO5Vx7A=
+
+deepmerge@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
+  integrity sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==
+
+deepmerge@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09"
+  integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==
+
+deepmerge@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
+default-gateway@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
   dependencies:
-    strip-bom "^3.0.0"
+    execa "^1.0.0"
+    ip-regex "^2.1.0"
 
-define-properties@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+defaults@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
   dependencies:
-    foreach "^2.0.5"
-    object-keys "^1.0.8"
+    clone "^1.0.2"
+
+defer-to-connect@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.0.2.tgz#4bae758a314b034ae33902b5aac25a8dd6a8633e"
+  integrity sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw==
+
+define-properties@^1.1.2, define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
 
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
   dependencies:
     is-descriptor "^0.1.0"
 
 define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
   dependencies:
     is-descriptor "^1.0.0"
 
 define-property@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
   dependencies:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^2.0.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+degenerator@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/degenerator/-/degenerator-1.0.4.tgz#fcf490a37ece266464d9cc431ab98c5819ced095"
+  integrity sha1-/PSQo37OJmRk2cxDGrmMWBnO0JU=
   dependencies:
-    globby "^5.0.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    rimraf "^2.2.8"
+    ast-types "0.x.x"
+    escodegen "1.x.x"
+    esprima "3.x.x"
+
+del@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    globby "^6.1.0"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
 
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+deprecation@^2.0.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
+  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  integrity sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
+  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
 detect-indent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  integrity sha1-920GQ1LN9Docts5hnE7jqUdd4gg=
   dependencies:
     repeating "^2.0.0"
 
 detect-libc@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+
+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
-diff@3.3.0, diff@^3.2.0:
+diff@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
+  integrity sha512-w0XZubFWn0Adlsapj9EAWX0FqWdO4tz8kc3RiYdWLh4k/V8PTb6i0SMgXt0vRM3zyKnT8tKO7mUlieRQHIjMNg==
+
+diff@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
+  integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==
+
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dispensary@0.37.0:
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/dispensary/-/dispensary-0.37.0.tgz#7c384d78984aabd1ed4915f633b4a5c8d5e6e8aa"
+  integrity sha512-Baqbt8MDkRYQZHB7XEd8iBUP8wRkRLjNWbm16nSDTOIoGvgF4Z8Q9wV1yD72TYjFC0kj1/o3nfPXPiAvWqjC8g==
+  dependencies:
+    array-from "~2.1.1"
+    async "~3.0.0"
+    natural-compare-lite "~1.4.0"
+    pino "~5.12.0"
+    request "~2.88.0"
+    sha.js "~2.4.4"
+    snyk "^1.165.1"
+    source-map-support "~0.5.4"
+    yargs "~13.2.0"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
+
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+dockerfile-ast@0.0.16:
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/dockerfile-ast/-/dockerfile-ast-0.0.16.tgz#10b329d343329dab1de70375833495f85ad65913"
+  integrity sha512-+HZToHjjiLPl46TqBrok5dMrg5oCkZFPSROMQjRmvin0zG4FxK0DJXTpV/CUPYY2zpmEvVza55XLwSHFx/xZMw==
+  dependencies:
+    vscode-languageserver-types "^3.5.0"
 
 doctrine@^1.2.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.2:
+doctrine@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
+  integrity sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
+  integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
+  dependencies:
+    domelementtype "^1.3.0"
+    entities "^1.1.1"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
+
+domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
+domelementtype@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
+  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
+
 domexception@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
   dependencies:
     webidl-conversions "^4.0.2"
 
-dotenv@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-prop@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
+  dependencies:
+    is-obj "^1.0.0"
+
+dotnet-deps-parser@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/dotnet-deps-parser/-/dotnet-deps-parser-4.5.0.tgz#53ef53a058dec156fcdf9008b880ecc9675ddde0"
+  integrity sha512-t6rBxcWVZSDNhhWdsbq9ozaCzfPXV79FiyES1JLNEoA7nYF+zDC2VZvFZSnH8ilU3bghJXxZPH+EcKYvfw8g/g==
+  dependencies:
+    "@types/xml2js" "0.4.3"
+    lodash "^4.17.11"
+    source-map-support "^0.5.7"
+    tslib "^1.9.3"
+    xml2js "0.4.19"
+
+dtrace-provider@~0.8:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.7.tgz#dc939b4d3e0620cfe0c1cd803d0d2d7ed04ffd04"
+  integrity sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ=
+  dependencies:
+    nan "^2.10.0"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
 
-duplexify@^3.1.2:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.0.tgz#1aa773002e1578457e9d9d4a50b0ccaaebcbd604"
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
   dependencies:
-    end-of-stream "1.0.0"
+    end-of-stream "^1.0.0"
     inherits "^2.0.1"
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
@@ -1569,84 +4536,286 @@ duplexify@^3.1.2:
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  integrity sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=
   dependencies:
     jsbn "~0.1.0"
 
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-download@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/electron-download/-/electron-download-4.1.1.tgz#02e69556705cc456e520f9e035556ed5a015ebe8"
+  integrity sha512-FjEWG9Jb/ppK/2zToP+U5dds114fM1ZOJqMAR4aXXL5CvyPE9fiqBK/9YcwC9poIFQTEJk/EM/zyRwziziRZrg==
+  dependencies:
+    debug "^3.0.0"
+    env-paths "^1.0.0"
+    fs-extra "^4.0.1"
+    minimist "^1.2.0"
+    nugget "^2.0.1"
+    path-exists "^3.0.0"
+    rc "^1.2.1"
+    semver "^5.4.1"
+    sumchecker "^2.0.2"
+
+electron-to-chromium@^1.3.191:
+  version "1.3.225"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.225.tgz#c6786475b5eb5f491ade01a78b82ba2c5bfdf72b"
+  integrity sha512-7W/L3jw7HYE+tUPbcVOGBmnSrlUmyZ/Uyg24QS7Vx0a9KodtNrN0r0Q/LyGHrcYMtw2rv7E49F/vTXwlV/fuaA==
+
+electron@^5.0.0:
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.9.tgz#d7000dcb69b74a85b81cb168e7ffdcac254464e5"
+  integrity sha512-yCt+lnQr47OWB3Oei19odMVB8VKzecTwZLm75PB56f/keeJAM3UqV7+dtjKlPdKt0hJ4sWxe4vjxGPO/oZDv7A==
+  dependencies:
+    "@types/node" "^10.12.18"
+    electron-download "^4.1.0"
+    extract-zip "^1.0.3"
+
+elliptic@^6.0.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.0.tgz#2b8ed4c891b7de3200e14412a5b8248c7af505ca"
+  integrity sha512-eFOJTMyCYb7xtE/caJ6JJu+bhi67WCYNbkGSknu20pmM8Ke/bqOfdnZWxyoGN26JgfxTbXrsCkEw4KheCT/KGg==
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.0"
+
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
 encoding@^0.1.11:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
   dependencies:
     iconv-lite "~0.4.13"
 
-end-of-stream@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.0.0.tgz#d4596e702734a93e40e9af864319eabd99ff2f0e"
+end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  integrity sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==
+  dependencies:
+    once "^1.4.0"
+
+end-of-stream@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
+  integrity sha1-6TUyWLqpEIll78QcsO+K3i88+wc=
   dependencies:
     once "~1.3.0"
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+enhanced-resolve@4.1.0, enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
   dependencies:
-    once "^1.4.0"
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    tapable "^1.0.0"
 
-error-ex@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+entities@^1.1.1, entities@~1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
+entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
+  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
+
+env-paths@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
+  integrity sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=
+
+err-code@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
+  integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
 error-stack-parser@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.2.tgz#4ae8dbaa2bf90a8b450707b9149dcabca135520d"
+  integrity sha512-E1fPutRDdIj/hohG0UpT5mayXNCxXP9d+snxFsPU9X0XgccOumKraa3juDMwTUyi7+Bu5+mCGagjg4IYeNbOdw==
   dependencies:
     stackframe "^1.0.4"
 
-es-abstract@^1.5.1:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+es-abstract@^1.13.0, es-abstract@^1.5.1:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
+  integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
   dependencies:
-    es-to-primitive "^1.1.1"
+    es-to-primitive "^1.2.0"
     function-bind "^1.1.1"
-    has "^1.0.1"
-    is-callable "^1.1.3"
+    has "^1.0.3"
+    is-callable "^1.1.4"
     is-regex "^1.0.4"
+    object-keys "^1.0.12"
 
-es-abstract@^1.7.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
   dependencies:
-    es-to-primitive "^1.1.1"
-    function-bind "^1.1.1"
-    has "^1.0.1"
-    is-callable "^1.1.3"
-    is-regex "^1.0.4"
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
 
-es-to-primitive@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.14:
+  version "0.10.50"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.50.tgz#6d0e23a0abdb27018e5ac4fd09b412bc5517a778"
+  integrity sha512-KMzZTPBkeQV/JcSQhI5/z6d9VWJ3EnQ194USTUwIYZ2ZbpN8+SGXQKt1h68EX44+qt+Fzr8DO17vnxrw7c3agw==
   dependencies:
-    is-callable "^1.1.1"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.1"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "^1.0.0"
+
+es6-error@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.0.tgz#f094c7041f662599bb12720da059d6b9c7ff0f40"
+  integrity sha1-8JTHBB9mJZm7EnINoFnWucf/D0A=
+
+es6-error@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+
+es6-iterator@^2.0.3, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-map@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  integrity sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-set "~0.1.5"
+    es6-symbol "~3.1.1"
+    event-emitter "~0.3.5"
+
+es6-promise@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-2.3.0.tgz#96edb9f2fdb01995822b263dd8aadab6748181bc"
+  integrity sha1-lu258v2wGZWCKyY92KratnSBgbw=
 
 es6-promise@^4.0.3:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.2.tgz#f722d7769af88bd33bc13ec6605e1f92966b82d9"
+  integrity sha512-LSas5vsuA6Q4nEdf9wokY5/AJYXry98i0IzXsv49rYsgDGDNDPbqAYR1Pe23iFxygfbGZNR/5VrHXBCh2BhvUQ==
 
-es6-promisify@^5.0.0:
+es6-promisify@5.0.0, es6-promisify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
   dependencies:
     es6-promise "^4.0.3"
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+es6-promisify@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-6.0.1.tgz#6edaa45f3bd570ffe08febce66f7116be4b1cdb6"
+  integrity sha512-J3ZkwbEnnO+fGAKrjVpeUAnZshAdfZvbhQpqfIH9kSAspReRC4nJnu8ewm55b4y9ElyeuhCTzJD0XiH8Tsbhlw==
+
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
+  integrity sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-symbol "3.1.1"
+    event-emitter "~0.3.5"
+
+es6-symbol@3.1.1, es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
+  integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.46"
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.1"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escodegen@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.10.0.tgz#f647395de22519fbd0d928ffcf1d17e0dec2603e"
+escodegen@1.x.x, escodegen@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
+  integrity sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==
   dependencies:
     esprima "^3.1.3"
     estraverse "^4.2.0"
@@ -1655,27 +4824,60 @@ escodegen@^1.9.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  integrity sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-config-fbjs@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-1.1.1.tgz#dd29f8d912e8a755257e9eeef00bae1cce57f73a"
+  integrity sha1-3Sn42RLop1Ulfp7u8AuuHM5X9zo=
 
-eslint-plugin-babel@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-3.3.0.tgz#2f494aedcf6f4aa4e75b9155980837bc1fbde193"
+eslint-config-prettier@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64"
+  integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==
+  dependencies:
+    get-stdin "^6.0.0"
+
+eslint-plugin-babel@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-5.3.0.tgz#2e7f251ccc249326da760c1a4c948a91c32d0023"
+  integrity sha512-HPuNzSPE75O+SnxHIafbW5QB45r2w78fxqwK3HmjqIUoPfPzVrq6rD+CINU3yzoDSzEhUkX07VUphbF73Lth/w==
+  dependencies:
+    eslint-rule-composer "^0.3.0"
 
 eslint-plugin-flowtype@^2.25.0:
-  version "2.32.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.32.1.tgz#bbee185dedf97e5f63ec975cdcddd199bd2a2501"
+  version "2.50.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz#61379d6dce1d010370acd6681740fd913d68175f"
+  integrity sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==
   dependencies:
-    lodash "^4.15.0"
+    lodash "^4.17.10"
 
-eslint-plugin-jest@^21.6.1:
-  version "21.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.6.1.tgz#adca015bbdb8d23b210438ff9e1cee1dd9ec35df"
+eslint-plugin-jest@^22.15.0:
+  version "22.15.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.15.0.tgz#fe70bfff7eeb47ca0ab229588a867f82bb8592c5"
+  integrity sha512-hgnPbSqAIcLLS9ePb12hNHTRkXnkVaCfOwCt2pzQ8KpOKPWGA4HhLMaFN38NBa/0uvLfrZpcIRjT+6tMAfr58Q==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^1.13.0"
 
 eslint-plugin-no-for-of-loops@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-no-for-of-loops/-/eslint-plugin-no-for-of-loops-1.0.0.tgz#a13d91a8f1922f7fefedeab351dc0055994601f6"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-for-of-loops/-/eslint-plugin-no-for-of-loops-1.0.1.tgz#2ee3732d50c642b8d1bfacedbfe3b28f86222369"
+  integrity sha512-uCotzBHt2W+HbLw2srRmqDJHOPbJGzeVLstKh8YyxS3ppduq2P50qdpJfHKoD+UGbnqA/zhy8NRgPH6p0y8bnA==
+
+eslint-plugin-no-unsafe-innerhtml@1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsafe-innerhtml/-/eslint-plugin-no-unsafe-innerhtml-1.0.16.tgz#7d02878c8e9bf7916b88836d5ac122b42f151932"
+  integrity sha1-fQKHjI6b95FriINtWsEitC8VGTI=
+  dependencies:
+    eslint "^3.7.1"
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
@@ -1684,6 +4886,7 @@ eslint-plugin-no-for-of-loops@^1.0.0:
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78"
+  integrity sha1-xUNb6wZ3ThLH2y9qut3L+QDNP3g=
   dependencies:
     array.prototype.find "^2.0.1"
     doctrine "^1.2.2"
@@ -1691,119 +4894,328 @@ eslint-plugin-react@^6.7.1:
     jsx-ast-utils "^1.3.4"
     object.assign "^4.0.4"
 
-eslint-scope@3.7.1, eslint-scope@^3.7.1:
+eslint-rule-composer@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
+  integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
+
+eslint-scope@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^4.0.0, eslint-scope@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
+  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
+  integrity sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-visitor-keys@^1.0.0:
+eslint-utils@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
+  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
+  dependencies:
+    eslint-visitor-keys "^1.0.0"
+
+eslint-utils@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@1.0.0, eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
+
+eslint-visitor-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^4.1.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.15.0.tgz#89ab38c12713eec3d13afac14e4a89e75ef08145"
+eslint@5.16.0:
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
+  integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==
   dependencies:
-    ajv "^5.3.0"
-    babel-code-frame "^6.22.0"
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.9.1"
     chalk "^2.1.0"
-    concat-stream "^1.6.0"
-    cross-spawn "^5.1.0"
-    debug "^3.1.0"
-    doctrine "^2.0.2"
-    eslint-scope "^3.7.1"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^4.0.3"
+    eslint-utils "^1.3.1"
     eslint-visitor-keys "^1.0.0"
-    espree "^3.5.2"
-    esquery "^1.0.0"
+    espree "^5.0.1"
+    esquery "^1.0.1"
     esutils "^2.0.2"
-    file-entry-cache "^2.0.0"
+    file-entry-cache "^5.0.1"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^11.0.1"
-    ignore "^3.3.3"
+    globals "^11.7.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
-    inquirer "^3.0.6"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.9.1"
+    inquirer "^6.2.2"
+    js-yaml "^3.13.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
-    lodash "^4.17.4"
-    minimatch "^3.0.2"
+    lodash "^4.17.11"
+    minimatch "^3.0.4"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
-    pluralize "^7.0.0"
     progress "^2.0.0"
-    require-uncached "^1.0.3"
-    semver "^5.3.0"
+    regexpp "^2.0.1"
+    semver "^5.5.1"
     strip-ansi "^4.0.0"
+    strip-json-comments "^2.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+
+eslint@^3.7.1:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
+  integrity sha1-yPxiAcf0DdCJQbh8CFdnOGpnmsw=
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.5.2"
+    debug "^2.1.1"
+    doctrine "^2.0.0"
+    escope "^3.6.0"
+    espree "^3.4.0"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    glob "^7.0.3"
+    globals "^9.14.0"
+    ignore "^3.2.0"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.7.5"
+    strip-bom "^3.0.0"
     strip-json-comments "~2.0.1"
-    table "^4.0.1"
+    table "^3.7.8"
     text-table "~0.2.0"
+    user-home "^2.0.0"
 
-espree@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
+eslint@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
   dependencies:
-    acorn "^5.2.1"
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^1.4.3"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.1.2"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^7.0.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.3"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^6.1.2"
+    strip-ansi "^5.2.0"
+    strip-json-comments "^3.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@5.0.1, espree@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
+  dependencies:
+    acorn "^6.0.7"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
+
+espree@^3.4.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
+  dependencies:
+    acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
-esprima@^2.6.0:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+espree@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.2.tgz#6c272650932b4f91c3714e5e7b5f5e2ecf47262d"
+  integrity sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==
+  dependencies:
+    acorn "^7.1.0"
+    acorn-jsx "^5.1.0"
+    eslint-visitor-keys "^1.1.0"
 
-esprima@^3.1.3:
+esprima@3.x.x, esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
-esprima@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+esprima@4.0.1, esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
+esquery@^1.0.0, esquery@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+  integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
   dependencies:
     estraverse "^4.0.0"
 
 esrecurse@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
   dependencies:
     estraverse "^4.1.0"
 
 estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
-
-estree-walker@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
 estree-walker@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+  integrity sha1-5rGlHPcpJSTnI3wxLl/mZgwc4ao=
 
 estree-walker@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.0.tgz#aae3b57c42deb8010e349c892462f0e71c5dd1aa"
+  integrity sha512-/bEAy+yKAZQrEWUhGmS3H9XpGqSDBtRzX0I2PgMw9kA2n1jN22uV5B5p7MFdZdvWdXCRJztXAfx6ZeRfgkEETg==
+
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
 
-exec-sh@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.1.tgz#163b98a6e89e6b65b47c2a28d215bc1f63989c38"
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
+event-to-promise@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/event-to-promise/-/event-to-promise-0.8.0.tgz#4b84f11772b6f25f7752fc74d971531ac6f5b626"
+  integrity sha1-S4TxF3K28l93Uvx02XFTGsb1tiY=
+
+eventemitter3@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
+
+events@^3.0.0:
+  name node-events
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+  integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
+
+eventsource@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
+  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
+  dependencies:
+    original "^1.0.0"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
   dependencies:
-    merge "^1.1.3"
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
+  integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
 
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  integrity sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=
   dependencies:
     cross-spawn "^5.0.1"
     get-stream "^3.0.0"
@@ -1813,19 +5225,40 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+  integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
 
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
   dependencies:
     is-posix-bracket "^0.1.0"
 
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
   dependencies:
     debug "^2.3.3"
     define-property "^0.2.5"
@@ -1838,60 +5271,112 @@ expand-brackets@^2.1.4:
 expand-range@^1.8.1:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
   dependencies:
     fill-range "^2.1.0"
 
-expect@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-23.1.0.tgz#bfdfd57a2a20170d875999ee9787cc71f01c205f"
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
   dependencies:
+    "@jest/types" "^24.9.0"
     ansi-styles "^3.2.0"
-    jest-diff "^23.0.1"
-    jest-get-type "^22.1.0"
-    jest-matcher-utils "^23.0.1"
-    jest-message-util "^23.1.0"
-    jest-regex-util "^23.0.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
+express@^4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
 
 extend-shallow@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
+  integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=
   dependencies:
     kind-of "^1.1.0"
 
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
   dependencies:
     is-extendable "^0.1.0"
 
 extend-shallow@^3.0.0, extend-shallow@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
   dependencies:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+extend@3.0.2, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1, extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-external-editor@^2.0.4:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
   dependencies:
-    chardet "^0.4.0"
-    iconv-lite "^0.4.17"
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
 extglob@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
   dependencies:
     is-extglob "^1.0.0"
 
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
   dependencies:
     array-unique "^0.3.2"
     define-property "^1.0.0"
@@ -1905,43 +5390,107 @@ extglob@^2.0.4:
 extract-banner@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/extract-banner/-/extract-banner-0.1.2.tgz#61d1ed5cce3acdadb35f4323910b420364241a7f"
+  integrity sha1-YdHtXM46za2zX0MjkQtCA2QkGn8=
   dependencies:
     strip-bom-string "^0.1.2"
     strip-use-strict "^0.1.0"
 
+extract-zip@^1.0.3:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
+  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
+  dependencies:
+    concat-stream "1.6.2"
+    debug "2.6.9"
+    mkdirp "0.5.1"
+    yauzl "2.4.1"
+
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
 
 fancy-log@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
+  integrity sha1-9BEl49hPLn2JpD0G2VjI94vha+E=
   dependencies:
     ansi-gray "^0.1.1"
     color-support "^1.1.3"
     time-stamp "^1.0.0"
 
 fast-deep-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+
+fast-json-patch@^2.0.6:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-2.2.1.tgz#18150d36c9ab65c7209e7d4eb113f4f8eaabe6d9"
+  integrity sha512-4j5uBaTnsYAV5ebkidvxiLUYOwjQ+JSFljeqfTxCrH9bDmlCQaOJFS84oDJ2rAXZq2yskmk3ORfoP9DCwqFNig==
+  dependencies:
+    fast-deep-equal "^2.0.1"
 
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
-fast-levenshtein@~2.0.4:
+fast-levenshtein@~2.0.4, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fast-redact@^1.4.4:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-1.5.0.tgz#302892f566750c4f5eec7b830bfc9bc473484034"
+  integrity sha512-Afo61CgUjkzdvOKDHn08qnZ0kwck38AOGcMlvSGzvJbIab6soAP5rdoQayecGCDsD69AiF9vJBXyq31eoEO2tQ==
+
+fast-safe-stringify@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.6.tgz#04b26106cc56681f51a044cfc0d76cf0008ac2c2"
+  integrity sha512-q8BZ89jjc+mz08rSxROs8VsrBBcn1SIw1kq9NjolL509tkABRk9io01RAjSaEv1Xb2uFLt8VtRiZbGp5H8iDtg==
+
+fastparse@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
+faye-websocket@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.1:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
+  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
+  dependencies:
+    websocket-driver ">=0.5.1"
 
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  integrity sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=
   dependencies:
     bser "^2.0.0"
 
+fbjs-css-vars@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
+
 fbjs-scripts@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.8.3.tgz#b854de7a11e62a37f72dab9aaf4d9b53c4a03174"
+  integrity sha512-aUJ/uEzMIiBYuj/blLp4sVNkQQ7ZEB/lyplG1IzzOmZ83meiWecrGg5jBo4wWrxXmO4RExdtsSV1QkTjPt2Gag==
   dependencies:
     ansi-colors "^1.0.1"
     babel-core "^6.7.2"
@@ -1957,6 +5506,7 @@ fbjs-scripts@^0.8.3:
 fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  integrity sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=
   dependencies:
     core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
@@ -1966,37 +5516,88 @@ fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
+  dependencies:
+    core-js "^2.4.1"
+    fbjs-css-vars "^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.18"
+
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
+  dependencies:
+    pend "~1.2.0"
+
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
+  dependencies:
+    pend "~1.2.0"
+
+figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
+  integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+
+figures@^1.3.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+figures@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.0.0.tgz#756275c964646163cc6f9197c7a0295dbfd04de9"
+  integrity sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==
   dependencies:
     escape-string-regexp "^1.0.5"
 
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  integrity sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=
   dependencies:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
+file-uri-to-path@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
-
-fileset@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
-  dependencies:
-    glob "^7.0.3"
-    minimatch "^3.0.3"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
 filesize@^3.5.6:
   version "3.5.6"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.6.tgz#5fd98f3eac94ec9516ef8ed5782fad84a01a0a1a"
+  integrity sha1-X9mPPqyU7JUW747VeC+thKAaCho=
 
 fill-range@^2.1.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  integrity sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=
   dependencies:
     is-number "^2.1.0"
     isobject "^2.0.0"
@@ -2007,15 +5608,39 @@ fill-range@^2.1.0:
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
   dependencies:
     extend-shallow "^2.0.1"
     is-number "^3.0.0"
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
   dependencies:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
@@ -2023,105 +5648,281 @@ find-up@^1.0.0:
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+findup-sync@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
   dependencies:
-    locate-path "^2.0.0"
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
+firefox-profile@1.2.0, firefox-profile@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-1.2.0.tgz#2068227924e714a2b10ec5fba8392e19b5788509"
+  integrity sha512-TTEFfPOkyaz4EWx/5ZDQC1mJAe3a+JgVcchpIfD4Tvx1UspwlTJRJxOYA35x/z2iJcxaF6aW2rdh6oj6qwgd2g==
+  dependencies:
+    adm-zip "~0.4.x"
+    archiver "~2.1.0"
+    async "~2.5.0"
+    fs-extra "~4.0.2"
+    ini "~1.3.3"
+    jetpack-id "1.0.0"
+    lazystream "~1.0.0"
+    lodash "~4.17.2"
+    minimist "^1.1.1"
+    uuid "^3.0.0"
+    xml2js "~0.4.4"
+
+first-chunk-stream@3.0.0, first-chunk-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-3.0.0.tgz#06972a66263505ed82b2c4db93c1b5e078a6576a"
+  integrity sha512-LNRvR4hr/S8cXXkIY5pTgVP7L3tq6LlYWcg9nWBuW7o1NMxKZo6oOVa/6GIekMGI0Iw7uC+HWimMe9u/VAeKqw==
+
+first-match@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/first-match/-/first-match-0.0.1.tgz#a60ec642700f0f437234ebb7ec3f382476e542fd"
+  integrity sha1-pg7GQnAPD0NyNOu37D84JHblQv0=
 
 flat-cache@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
+  integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
   dependencies:
     circular-json "^0.3.1"
-    del "^2.0.2"
     graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
     write "^0.2.1"
 
-flow-bin@^0.72.0:
-  version "0.72.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.72.0.tgz#12051180fb2db7ccb728fefe67c77e955e92a44d"
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatstr@^1.0.12, flatstr@^1.0.9:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.12.tgz#c2ba6a08173edbb6c9640e3055b95e287ceb5931"
+  integrity sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw==
+
+flatted@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
+
+flow-bin@0.89:
+  version "0.89.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.89.0.tgz#6bd29c2af7e0f429797f820662f33749105c32fa"
+  integrity sha512-DkO4PsXYrl53V6G5+t5HbRMC5ajYUQej2LEGPUZ+j9okTb41Sn5j9vfxsCpXMEAslYnQoysHhYu4GUZsQX/DrQ==
+
+fluent-syntax@0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/fluent-syntax/-/fluent-syntax-0.13.0.tgz#417144d99cba94ff474c422b3e6623d5a842855a"
+  integrity sha512-0Bk1AsliuYB550zr4JV9AYhsETsD3ELXUQzdXGJfIc1Ni/ukAfBdQInDhVMYJUaT2QxoamNslwkYF7MlOrPUwg==
+
+flush-write-stream@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
+follow-redirects@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
+  dependencies:
+    debug "^3.2.6"
+
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+  integrity sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 for-own@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
   dependencies:
     for-in "^1.0.1"
 
-foreach@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
+  dependencies:
+    for-in "^1.0.1"
 
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
+form-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.0.tgz#094ec359dc4b55e7d62e0db4acd76e89fe874d37"
+  integrity sha512-WXieX3G/8side6VIqx44ablyULoGruSde5PNTxoUyo5CeyAMX6nVWUd0rgist/EuX655cjhUhTo1Fo3tRYqbcA==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
 form-data@~2.1.1:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  integrity sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
-form-data@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+form-data@~2.3.1, form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "1.0.6"
+    combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
   dependencies:
     map-cache "^0.2.2"
 
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
+  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
+
+fs-extra@^4.0.1, fs-extra@~4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
 
 fs-minipass@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.6.tgz#2c5cc30ded81282bfe8a0d7c7c1853ddeb102c07"
+  integrity sha512-crhvyXcMejjv3Z5d2Fa9sf5xLYVCF5O1c71QxbVnbLsmYMBEvDAftewesN/HhY03YRoA7zOMxjNGrF5svGaaeQ==
   dependencies:
     minipass "^2.2.1"
 
-fs-readdir-recursive@^1.0.0:
+fs-readdir-recursive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
+  integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
 
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.0.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.2.tgz#4f598f0f69b273188ef4a62ca4e9e08ace314bbf"
+fsevents@2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.0.7.tgz#382c9b443c6cbac4c57187cdda23aa3bf1ccfc2a"
+  integrity sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==
+
+fsevents@^1.2.7:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
+  integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
   dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.9.0"
+    nan "^2.12.1"
+    node-pre-gyp "^0.12.0"
 
-fsevents@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+ftp@~0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
+  integrity sha1-kZfYYa2BQvPmPVqDv+TFn3MwiF0=
   dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
+    readable-stream "1.1.x"
+    xregexp "2.0.0"
 
-function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+fx-runner@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.0.11.tgz#528d2d0c3dc8bb05570b506728c4f62e0b0ef095"
+  integrity sha512-igHogHf5wTqqaPPTOav18MMTVq/eoeTJiw/PvPUuwnzU8vbyZInFPgR66G9ZBwvwxC7e611nbtB4xSMcYVhlvg==
+  dependencies:
+    commander "2.9.0"
+    shell-quote "1.6.1"
+    spawn-sync "1.0.15"
+    when "3.7.7"
+    which "1.2.4"
+    winreg "0.0.12"
 
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -2135,57 +5936,140 @@ gauge@~2.7.3:
 generate-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+  integrity sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=
 
 generate-object-property@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
   dependencies:
     is-property "^1.0.0"
 
+genfun@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/genfun/-/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
+  integrity sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+  integrity sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=
 
-get-stdin@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
+
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
+
+get-stream@^4.0.0, get-stream@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
+  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
+  dependencies:
+    pump "^3.0.0"
+
+get-uri@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-2.0.3.tgz#fa13352269781d75162c6fc813c9e905323fbab5"
+  integrity sha512-x5j6Ks7FOgLD/GlvjKwgu7wdmMR55iuRHhn8hj/+gA+eSbxQvZ+AEomq+3MgVEZj1vpi738QahGbCCSIDtXtkw==
+  dependencies:
+    data-uri-to-buffer "2"
+    debug "4"
+    extend "~3.0.2"
+    file-uri-to-path "1"
+    ftp "~0.3.10"
+    readable-stream "3"
 
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
   dependencies:
     assert-plus "^1.0.0"
 
+gettext-parser@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gettext-parser/-/gettext-parser-1.1.0.tgz#2c5a6638d893934b9b55037d0ad82cb7004b2679"
+  integrity sha1-LFpmONiTk0ubVQN9CtgstwBLJnk=
+  dependencies:
+    encoding "^0.1.11"
+
 git-config-path@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/git-config-path/-/git-config-path-1.0.1.tgz#6d33f7ed63db0d0e118131503bab3aca47d54664"
+  integrity sha1-bTP37WPbDQ4RgTFQO6s6ykfVRmQ=
   dependencies:
     extend-shallow "^2.0.1"
     fs-exists-sync "^0.1.0"
     homedir-polyfill "^1.0.0"
 
-github@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/github/-/github-13.0.1.tgz#4ccf4a41df662f92367e77a474674eabb1b6c78d"
+git-rev-sync@1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/git-rev-sync/-/git-rev-sync-1.12.0.tgz#4468406c7e6c3ba4cf4587999e1adb28d9d1af55"
+  integrity sha1-RGhAbH5sO6TPRYeZnhrbKNnRr1U=
   dependencies:
-    debug "^3.1.0"
-    dotenv "^4.0.0"
-    https-proxy-agent "^2.1.0"
-    lodash "^4.17.4"
-    proxy-from-env "^1.0.0"
-    url-template "^2.0.8"
+    escape-string-regexp "1.0.5"
+    graceful-fs "4.1.11"
+    shelljs "0.7.7"
+
+git-up@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/git-up/-/git-up-4.0.1.tgz#cb2ef086653640e721d2042fe3104857d89007c0"
+  integrity sha512-LFTZZrBlrCrGCG07/dm1aCjjpL1z9L3+5aEeI9SBhAqSc+kiA9Or1bgZhQFNppJX6h/f5McrvJt1mQXTFm6Qrw==
+  dependencies:
+    is-ssh "^1.3.0"
+    parse-url "^5.0.0"
+
+git-url-parse@11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-11.1.2.tgz#aff1a897c36cc93699270587bea3dbcbbb95de67"
+  integrity sha512-gZeLVGY8QVKMIkckncX+iCq2/L8PlwncvDFKiWkBn9EtCfYDbliRTTp6qzyQ1VMdITUfq7293zDzfpjdiGASSQ==
+  dependencies:
+    git-up "^4.0.0"
+
+gitlab@^10.0.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/gitlab/-/gitlab-10.2.1.tgz#1f5fb2c2bad08f95b7c7d91dd41805ab5eea3960"
+  integrity sha512-z+DxRF1C9uayVbocs9aJkJz+kGy14TSm1noB/rAIEBbXOkOYbjKxyuqJzt+0zeFpXFdgA0yq6DVVbvM7HIfGwg==
+  dependencies:
+    form-data "^2.5.0"
+    humps "^2.0.1"
+    ky "^0.12.0"
+    ky-universal "^0.3.0"
+    li "^1.3.0"
+    query-string "^6.8.2"
+    universal-url "^2.0.0"
 
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
   dependencies:
     glob-parent "^2.0.0"
     is-glob "^2.0.0"
@@ -2193,19 +6077,29 @@ glob-base@^0.3.0:
 glob-parent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
   dependencies:
     is-glob "^2.0.0"
 
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
   dependencies:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.0.0.tgz#1dc99f0f39b006d3e92c2c284068382f0c20e954"
+  integrity sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-stream@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-6.1.0.tgz#7045c99413b3eb94888d83ab46d0b404cc7bdde4"
+  integrity sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=
   dependencies:
     extend "^3.0.0"
     glob "^7.1.1"
@@ -2218,41 +6112,95 @@ glob-stream@^6.1.0:
     to-absolute-glob "^2.0.0"
     unique-stream "^2.0.2"
 
-glob@^6.0.4:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+glob@7.1.4, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
   dependencies:
+    fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "2 || 3"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+glob@^6.0.1, glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
   dependencies:
-    fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "2 || 3"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^11.0.1, globals@^11.1.0:
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.4.0.tgz#b85c793349561c16076a3c13549238a27945f1bc"
+global-dirs@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+  integrity sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=
+  dependencies:
+    ini "^1.3.4"
+
+global-modules@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globals@^11.1.0, globals@^11.7.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^12.1.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.3.0.tgz#1e564ee5c4dded2ab098b0f88f24702a3c56be13"
+  integrity sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==
+  dependencies:
+    type-fest "^0.8.1"
 
-globals@^9.18.0:
+globals@^9.14.0, globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
-    arrify "^1.0.0"
     glob "^7.0.3"
     object-assign "^4.0.1"
     pify "^2.0.0"
@@ -2293,37 +6241,99 @@ google-closure-compiler@20190301.0.0:
     google-closure-compiler-linux "^20190301.0.0"
     google-closure-compiler-osx "^20190301.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4:
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  integrity sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=
+  dependencies:
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
+
+got@^9.6.0:
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
+  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
+  dependencies:
+    "@sindresorhus/is" "^0.14.0"
+    "@szmarczak/http-timer" "^1.1.2"
+    cacheable-request "^6.0.0"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^4.1.0"
+    lowercase-keys "^1.0.1"
+    mimic-response "^1.0.1"
+    p-cancelable "^1.0.0"
+    to-readable-stream "^1.0.0"
+    url-parse-lax "^3.0.0"
+
+graceful-fs@4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+  integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
+
+graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
+  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
+
+graphlib@^2.1.1, graphlib@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.7.tgz#b6a69f9f44bd9de3963ce6804a2fc9e73d86aecc"
+  integrity sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==
+  dependencies:
+    lodash "^4.17.5"
 
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
 gzip-size@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  integrity sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=
   dependencies:
     duplexer "^0.1.1"
 
-handlebars@^4.0.3:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+handle-thing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
+  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+
+handlebars@^4.1.2:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
 har-validator@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  integrity sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=
   dependencies:
     chalk "^1.1.1"
     commander "^2.9.0"
@@ -2333,35 +6343,55 @@ har-validator@~2.0.6:
 har-validator@~5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  integrity sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=
   dependencies:
     ajv "^5.1.0"
     har-schema "^2.0.0"
 
+har-validator@~5.1.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
+  dependencies:
+    ajv "^6.5.5"
+    har-schema "^2.0.0"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
   dependencies:
     ansi-regex "^2.0.0"
 
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+has-color@~0.1.0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+  integrity sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8=
 
 has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+  integrity sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=
 
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
 
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
 
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
   dependencies:
     get-value "^2.0.3"
     has-values "^0.1.4"
@@ -2370,6 +6400,7 @@ has-value@^0.3.1:
 has-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
   dependencies:
     get-value "^2.0.6"
     has-values "^1.0.0"
@@ -2378,59 +6409,218 @@ has-value@^1.0.0:
 has-values@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
 
 has-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
   dependencies:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+has-yarn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
+  integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
+
+has@^1.0.1, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hash-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
-    function-bind "^1.0.2"
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hasurl@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hasurl/-/hasurl-1.0.0.tgz#e4c619097ae1e8fc906bee904ce47e94f5e1ea37"
+  integrity sha512-43ypUd3DbwyCT01UYpA99AEZxZ4aKtRxWGBHEIbjcOsUghd9YUON0C+JF6isNjaiwC/UF5neaUudy6JS9jZPZQ==
 
 hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  integrity sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=
   dependencies:
     boom "2.x.x"
     cryptiles "2.x.x"
     hoek "2.x.x"
     sntp "1.x.x"
 
+hmac-drbg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+  integrity sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=
 
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  integrity sha1-42w/LSyufXRqhX440Y1fMqeILbg=
   dependencies:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-homedir-polyfill@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
+  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
   dependencies:
     parse-passwd "^1.0.0"
 
-hosted-git-info@^2.1.4:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
+hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.4.tgz#44119abaf4bc64692a16ace34700fed9c03e2546"
+  integrity sha512-pzXIvANXEFrc5oFFXRMkbLPQ2rXRoDERwDLyrcUxGhaZhgP54BBSl9Oheh7Vv0T090cszWBxPjkQQ5Sq1PbBRQ==
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
 
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+
+htmlparser2@^3.9.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  integrity sha1-M3la3nLfiKz7/TZ3PO/tp2RzWyA=
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-cache-semantics@^3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
+  integrity sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==
+
+http-cache-semantics@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz#495704773277eeef6e43f9ab2c2c7d259dda25c5"
+  integrity sha512-TcIMG3qeVLgDr1TEd2XvHaTnMPwYQUQMIBLy+5pLSDKYFc7UIqj39w8EGzZkaxoLv/l2K8HaI0t5AVA+YYgUew==
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
+
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@1.7.3, http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+"http-parser-js@>=0.4.0 <0.4.11":
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
+  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
+
+http-proxy-agent@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz#e4821beef5b2142a2026bd73926fe537631c5405"
+  integrity sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==
+  dependencies:
+    agent-base "4"
+    debug "3.1.0"
+
+http-proxy-middleware@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  integrity sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=
   dependencies:
     assert-plus "^0.2.0"
     jsprim "^1.2.2"
@@ -2439,106 +6629,309 @@ http-signature@~1.1.0:
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-proxy-agent@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.1.1.tgz#a7ce4382a1ba8266ee848578778122d491260fd9"
+https-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+  integrity sha1-s//f5zSyo9Sp79WOhlTJH86G6v0=
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+https-proxy-agent@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz#271ea8e90f836ac9f119daccd39c19ff7dfb0793"
+  integrity sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==
   dependencies:
-    agent-base "^4.1.0"
+    agent-base "^4.3.0"
     debug "^3.1.0"
 
+humanize-ms@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
+  integrity sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=
+  dependencies:
+    ms "^2.0.0"
+
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
+
 hyperlinker@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
+  integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
-iconv-lite@0.4.19:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+hyphenate-style-name@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
-iconv-lite@^0.4.17, iconv-lite@^0.4.4:
-  version "0.4.21"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.21.tgz#c47f8733d02171189ebc4a400f3218d348094798"
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
-    safer-buffer "^2.1.0"
+    safer-buffer ">= 2.1.2 < 3"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
 
-iconv-lite@~0.4.13:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  integrity sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=
   dependencies:
-    safer-buffer ">= 2.1.2 < 3"
+    postcss "^6.0.1"
+
+ieee754@^1.1.12, ieee754@^1.1.4:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
 ignore-walk@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  integrity sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.3:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+ignore@^3.2.0:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-import-local@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
+immutable@^4.0.0-rc.12:
+  version "4.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
+  integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==
+
+import-fresh@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.1.0.tgz#6d33fa1dcef6df930fae003446f33415af905118"
+  integrity sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
+
+import-local@2.0.0, import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
   dependencies:
-    pkg-dir "^2.0.0"
+    pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
+  dependencies:
+    repeating "^2.0.0"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
+infer-owner@^1.0.3, infer-owner@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
   dependencies:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+
+inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4, ini@~1.3.0:
+ini@^1.3.0, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0, ini@~1.3.3:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+
+inline-style-prefixer@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811"
+  integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  integrity sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
+inquirer@^6.2.2:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.1.tgz#8bfb7a5ac02dac6ff641ac4c5ff17da112fcdb42"
+  integrity sha512-uxNHBeQhRXIoHWTSNYUFhQVrHYFThIt6IVo2fFmSe8aBwdR3/w6b58hJpiL/fMukFkvGzjg+hSxFtwvVmKZmXw==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.2"
+    cli-cursor "^3.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.15"
+    mute-stream "0.0.8"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^4.1.0"
+    strip-ansi "^5.1.0"
+    through "^2.3.6"
 
-inquirer@^3.0.6:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+inquirer@^7.0.0:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.3.tgz#f9b4cd2dff58b9f73e8d43759436ace15bed4567"
+  integrity sha512-+OiOVeVydu4hnCGLCSX+wedovR/Yzskv9BFqUNNKq9uU2qg7LCcCo3R86S2E7WLo0y/x2pnEZfZe1CoYnORUAw==
   dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.2"
+    cli-cursor "^3.1.0"
     cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.15"
+    mute-stream "0.0.8"
     run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
+    rxjs "^6.5.3"
+    string-width "^4.1.0"
+    strip-ansi "^5.1.0"
     through "^2.3.6"
 
-invariant@^2.2.2:
+internal-ip@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
+  dependencies:
+    default-gateway "^4.2.0"
+    ipaddr.js "^1.9.0"
+
+interpret@1.2.0, interpret@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
+invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
   dependencies:
     loose-envify "^1.0.0"
 
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+  integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
+
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
+
+ip@^1.1.0, ip@^1.1.4, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+
+ipaddr.js@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
+  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
+
+ipaddr.js@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-absolute-url@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.0.tgz#eb21d69df2ed8ef72a3e6f243e216563036a0913"
+  integrity sha512-3OkP8XrM2Xq4/IxsJnClfMp3OaM3TAatLPLKPeWcxLBTrpe6hihwtX+XZfJTcXg/FTRi4qjy0y/C5qiyNxY24g==
+
+is-absolute@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
+  integrity sha1-hHSREZ/MtftDYhfMc39/qtUPYD8=
+  dependencies:
+    is-relative "^0.1.0"
 
 is-absolute@^0.2.5:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
+  integrity sha1-IN5p89uULvLYe5wto28XIjWxtes=
   dependencies:
     is-relative "^0.2.1"
     is-windows "^0.2.0"
@@ -2546,64 +6939,76 @@ is-absolute@^0.2.5:
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
   dependencies:
     kind-of "^3.0.2"
 
 is-accessor-descriptor@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
   dependencies:
     kind-of "^6.0.0"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-builtin-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
-  dependencies:
-    builtin-modules "^1.0.0"
-
-is-callable@^1.1.1, is-callable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
 is-ci@^1.0.10:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
   dependencies:
-    ci-info "^1.0.0"
+    ci-info "^1.5.0"
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
   dependencies:
     kind-of "^3.0.2"
 
 is-data-descriptor@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
   dependencies:
     kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
 
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
   dependencies:
     is-accessor-descriptor "^0.1.6"
     is-data-descriptor "^0.1.4"
@@ -2612,6 +7017,7 @@ is-descriptor@^0.1.0:
 is-descriptor@^1.0.0, is-descriptor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
   dependencies:
     is-accessor-descriptor "^1.0.0"
     is-data-descriptor "^1.0.0"
@@ -2620,205 +7026,346 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
 
 is-equal-shallow@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
   dependencies:
     is-primitive "^2.0.0"
 
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 
 is-extendable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
 is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
-is-generator-fn@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
   dependencies:
     is-extglob "^1.0.0"
 
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
   dependencies:
     is-extglob "^2.1.0"
 
-is-my-json-valid@^2.12.4:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
+is-glob@^4.0.0, is-glob@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-installed-globally@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+  integrity sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=
+  dependencies:
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
+
+is-mergeable-object@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.0.tgz#a846e8cf0e2bad6a8cf8b243b63b4c43b9907990"
+  integrity sha512-JfyDDwUdtS4yHCgUpxOyKB9dnfZ0gecufxB0eytX6BmSXSE+8dbxDGt+V7CNRIRJ9sYFV/WQt2KJG6hNob2sBw==
+
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+  integrity sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==
+
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.20.0.tgz#1345a6fca3e8daefc10d0fa77067f54cedafd59a"
+  integrity sha512-XTHBZSIIxNsIsZXg7XB5l8z/OBFosl1Wao4tXLpeC7eKU4Vm/kdop2azkPqULwnfGQjmeDIyey9g7afMMtdWAA==
   dependencies:
     generate-function "^2.0.0"
     generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
     jsonpointer "^4.0.0"
     xtend "^4.0.0"
 
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
+  integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+  integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
+
+is-npm@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
+  integrity sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==
 
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
   dependencies:
     kind-of "^3.0.2"
 
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
   dependencies:
     kind-of "^3.0.2"
 
-is-number@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
-
-is-odd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
-  dependencies:
-    is-number "^4.0.0"
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+is-path-cwd@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
+  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
-is-path-in-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
   dependencies:
-    is-path-inside "^1.0.0"
+    is-path-inside "^2.1.0"
 
 is-path-inside@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
   dependencies:
     path-is-inside "^1.0.1"
 
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
+  dependencies:
+    path-is-inside "^1.0.2"
+
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
+  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
+  dependencies:
+    isobject "^4.0.0"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
 
 is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
 
 is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
 is-property@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+  integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+  integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
   dependencies:
     has "^1.0.1"
 
+is-relative@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
+  integrity sha1-kF/uiuhvRbPsYUvDwVyGnfCHboI=
+
 is-relative@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
+  integrity sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=
   dependencies:
     is-unc-path "^0.1.1"
 
 is-resolvable@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+
+is-retry-allowed@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
+
+is-ssh@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.1.tgz#f349a8cadd24e65298037a522cf7520f2e81a0f3"
+  integrity sha512-0eRIASHZt1E68/ixClI8bp2YK2wmBPVWEismTs6M+M099jKgrzl/3E976zIbImSIob48N2/XGe9y7ZiYdImSlg==
   dependencies:
-    tryit "^1.0.1"
+    protocols "^1.1.0"
 
-is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-symbol@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  dependencies:
+    has-symbols "^1.0.0"
 
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
 is-unc-path@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.2.tgz#6ab053a72573c10250ff416a3814c35178af39b9"
+  integrity sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=
   dependencies:
     unc-path-regex "^0.1.0"
 
-is-utf8@^0.2.0:
+is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
 is-windows@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+  integrity sha1-3hqm1j6indJIc3tp8f+LgALSEIw=
 
-is-windows@^1.0.0, is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
+is-yarn-global@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
+  integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
 
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+  integrity sha1-NvPiLmB1CSD15yQaR2qMakInWtA=
 
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
   dependencies:
     isarray "1.0.0"
 
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+isobject@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
 
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
   dependencies:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
@@ -2826,384 +7373,464 @@ isomorphic-fetch@^2.1.1:
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-api@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.1.tgz#4c3b05d18c0016d1022e079b98dc82c40f488954"
-  dependencies:
-    async "^2.1.4"
-    compare-versions "^3.1.0"
-    fileset "^2.0.2"
-    istanbul-lib-coverage "^1.2.0"
-    istanbul-lib-hook "^1.2.0"
-    istanbul-lib-instrument "^1.10.1"
-    istanbul-lib-report "^1.1.4"
-    istanbul-lib-source-maps "^1.2.4"
-    istanbul-reports "^1.3.0"
-    js-yaml "^3.7.0"
-    mkdirp "^0.5.1"
-    once "^1.4.0"
-
-istanbul-lib-coverage@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz#f7d8f2e42b97e37fe796114cb0f9d68b5e3a4341"
-
-istanbul-lib-hook@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.1.tgz#f614ec45287b2a8fc4f07f5660af787575601805"
-  dependencies:
-    append-transform "^1.0.0"
-
-istanbul-lib-instrument@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz#724b4b6caceba8692d3f1f9d0727e279c401af7b"
-  dependencies:
-    babel-generator "^6.18.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.2.0"
-    semver "^5.3.0"
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
 
-istanbul-lib-report@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.4.tgz#e886cdf505c4ebbd8e099e4396a90d0a28e2acb5"
+istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
+  dependencies:
+    "@babel/generator" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    istanbul-lib-coverage "^2.0.5"
+    semver "^6.0.0"
+
+istanbul-lib-report@^2.0.4:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
   dependencies:
-    istanbul-lib-coverage "^1.2.0"
-    mkdirp "^0.5.1"
-    path-parse "^1.0.5"
-    supports-color "^3.1.2"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    supports-color "^6.1.0"
 
-istanbul-lib-source-maps@^1.2.4:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.5.tgz#ffe6be4e7ab86d3603e4290d54990b14506fc9b1"
+istanbul-lib-source-maps@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
   dependencies:
-    debug "^3.1.0"
-    istanbul-lib-coverage "^1.2.0"
-    mkdirp "^0.5.1"
-    rimraf "^2.6.1"
-    source-map "^0.5.3"
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    rimraf "^2.6.3"
+    source-map "^0.6.1"
 
-istanbul-reports@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.3.0.tgz#2f322e81e1d9520767597dca3c20a0cce89a3554"
+istanbul-reports@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
+  integrity sha512-SKi4rnMyLBKe0Jy2uUdx28h8oG7ph2PPuQPvIAh31d+Ci+lSiEu4C+h3oBPuJ9+mPKhOyW0M8gY4U5NM1WLeXA==
   dependencies:
-    handlebars "^4.0.3"
+    handlebars "^4.1.2"
 
 jasmine-check@^1.0.0-rc.0:
   version "1.0.0-rc.0"
   resolved "https://registry.yarnpkg.com/jasmine-check/-/jasmine-check-1.0.0-rc.0.tgz#117728c150078ecf211986c5f164275b71e937a4"
+  integrity sha1-EXcowVAHjs8hGYbF8WQnW3HpN6Q=
   dependencies:
     testcheck "^1.0.0-rc"
 
-jest-changed-files@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-23.0.1.tgz#f79572d0720844ea5df84c2a448e862c2254f60c"
+jed@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
+  integrity sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ=
+
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
   dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
     throat "^4.0.0"
 
-jest-cli@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-23.1.0.tgz#eb8bdd4ce0d15250892e31ad9b69bc99d2a8f6bf"
+jest-cli@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
   dependencies:
-    ansi-escapes "^3.0.0"
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
     chalk "^2.0.1"
     exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.1.11"
-    import-local "^1.0.0"
-    is-ci "^1.0.10"
-    istanbul-api "^1.3.1"
-    istanbul-lib-coverage "^1.2.0"
-    istanbul-lib-instrument "^1.10.1"
-    istanbul-lib-source-maps "^1.2.4"
-    jest-changed-files "^23.0.1"
-    jest-config "^23.1.0"
-    jest-environment-jsdom "^23.1.0"
-    jest-get-type "^22.1.0"
-    jest-haste-map "^23.1.0"
-    jest-message-util "^23.1.0"
-    jest-regex-util "^23.0.0"
-    jest-resolve-dependencies "^23.0.1"
-    jest-runner "^23.1.0"
-    jest-runtime "^23.1.0"
-    jest-snapshot "^23.0.1"
-    jest-util "^23.1.0"
-    jest-validate "^23.0.1"
-    jest-watcher "^23.1.0"
-    jest-worker "^23.0.1"
-    micromatch "^2.3.11"
-    node-notifier "^5.2.1"
-    realpath-native "^1.0.0"
-    rimraf "^2.5.4"
-    slash "^1.0.0"
-    string-length "^2.0.0"
-    strip-ansi "^4.0.0"
-    which "^1.2.12"
-    yargs "^11.0.0"
-
-jest-config@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.1.0.tgz#708ca0f431d356ee424fb4895d3308006bdd8241"
-  dependencies:
-    babel-core "^6.0.0"
-    babel-jest "^23.0.1"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
     chalk "^2.0.1"
     glob "^7.1.1"
-    jest-environment-jsdom "^23.1.0"
-    jest-environment-node "^23.1.0"
-    jest-get-type "^22.1.0"
-    jest-jasmine2 "^23.1.0"
-    jest-regex-util "^23.0.0"
-    jest-resolve "^23.1.0"
-    jest-util "^23.1.0"
-    jest-validate "^23.0.1"
-    pretty-format "^23.0.1"
-
-jest-diff@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.0.1.tgz#3d49137cee12c320a4b4d2b4a6fa6e82d491a16a"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
   dependencies:
     chalk "^2.0.1"
-    diff "^3.2.0"
-    jest-get-type "^22.1.0"
-    pretty-format "^23.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
 
-jest-docblock@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-23.0.1.tgz#deddd18333be5dc2415260a04ef3fce9276b5725"
+jest-docblock@^24.3.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
+  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
   dependencies:
     detect-newline "^2.1.0"
 
-jest-each@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-23.1.0.tgz#16146b592c354867a5ae5e13cdf15c6c65b696c6"
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
   dependencies:
+    "@jest/types" "^24.9.0"
     chalk "^2.0.1"
-    pretty-format "^23.0.1"
-
-jest-environment-jsdom@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-23.1.0.tgz#85929914e23bed3577dac9755f4106d0697c479c"
-  dependencies:
-    jest-mock "^23.1.0"
-    jest-util "^23.1.0"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
     jsdom "^11.5.1"
 
-jest-environment-node@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-23.1.0.tgz#452c0bf949cfcbbacda1e1762eeed70bc784c7d5"
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
   dependencies:
-    jest-mock "^23.1.0"
-    jest-util "^23.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
 
-jest-get-type@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.1.0.tgz#4e90af298ed6181edc85d2da500dbd2753e0d5a9"
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
-jest-haste-map@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.1.0.tgz#18e6c7d5a8d27136f91b7d9852f85de0c7074c49"
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
   dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
     fb-watchman "^2.0.0"
-    graceful-fs "^4.1.11"
-    jest-docblock "^23.0.1"
-    jest-serializer "^23.0.1"
-    jest-worker "^23.0.1"
-    micromatch "^2.3.11"
-    sane "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
 
-jest-jasmine2@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-23.1.0.tgz#4afab31729b654ddcd2b074add849396f13b30b8"
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
   dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
     chalk "^2.0.1"
     co "^4.6.0"
-    expect "^23.1.0"
-    is-generator-fn "^1.0.0"
-    jest-diff "^23.0.1"
-    jest-each "^23.1.0"
-    jest-matcher-utils "^23.0.1"
-    jest-message-util "^23.1.0"
-    jest-snapshot "^23.0.1"
-    jest-util "^23.1.0"
-    pretty-format "^23.0.1"
-
-jest-leak-detector@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-23.0.1.tgz#9dba07505ac3495c39d3ec09ac1e564599e861a0"
-  dependencies:
-    pretty-format "^23.0.1"
-
-jest-matcher-utils@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.0.1.tgz#0c6c0daedf9833c2a7f36236069efecb4c3f6e5f"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
   dependencies:
     chalk "^2.0.1"
-    jest-get-type "^22.1.0"
-    pretty-format "^23.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
 
-jest-message-util@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.1.0.tgz#9a809ba487ecac5ce511d4e698ee3b5ee2461ea9"
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
   dependencies:
-    "@babel/code-frame" "^7.0.0-beta.35"
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
     chalk "^2.0.1"
-    micromatch "^2.3.11"
-    slash "^1.0.0"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-23.1.0.tgz#a381c31b121ab1f60c462a2dadb7b86dcccac487"
-
-jest-regex-util@^23.0.0:
-  version "23.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-23.0.0.tgz#dd5c1fde0c46f4371314cf10f7a751a23f4e8f76"
-
-jest-resolve-dependencies@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-23.0.1.tgz#d01a10ddad9152c4cecdf5eac2b88571c4b6a64d"
+jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
   dependencies:
-    jest-regex-util "^23.0.0"
-    jest-snapshot "^23.0.1"
+    "@jest/types" "^24.9.0"
 
-jest-resolve@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.1.0.tgz#b9e316eecebd6f00bc50a3960d1527bae65792d2"
-  dependencies:
-    browser-resolve "^1.11.2"
+jest-pnp-resolver@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
+  integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
+
+jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
+jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
     chalk "^2.0.1"
-    realpath-native "^1.0.0"
-
-jest-runner@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-23.1.0.tgz#fa20a933fff731a5432b3561e7f6426594fa29b5"
-  dependencies:
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
     exit "^0.1.2"
-    graceful-fs "^4.1.11"
-    jest-config "^23.1.0"
-    jest-docblock "^23.0.1"
-    jest-haste-map "^23.1.0"
-    jest-jasmine2 "^23.1.0"
-    jest-leak-detector "^23.0.1"
-    jest-message-util "^23.1.0"
-    jest-runtime "^23.1.0"
-    jest-util "^23.1.0"
-    jest-worker "^23.0.1"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
     source-map-support "^0.5.6"
     throat "^4.0.0"
 
-jest-runtime@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-23.1.0.tgz#b4ae0e87259ecacfd4a884b639db07cf4dd620af"
-  dependencies:
-    babel-core "^6.0.0"
-    babel-plugin-istanbul "^4.1.6"
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
     chalk "^2.0.1"
-    convert-source-map "^1.4.0"
     exit "^0.1.2"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.1.11"
-    jest-config "^23.1.0"
-    jest-haste-map "^23.1.0"
-    jest-message-util "^23.1.0"
-    jest-regex-util "^23.0.0"
-    jest-resolve "^23.1.0"
-    jest-snapshot "^23.0.1"
-    jest-util "^23.1.0"
-    jest-validate "^23.0.1"
-    micromatch "^2.3.11"
-    realpath-native "^1.0.0"
-    slash "^1.0.0"
-    strip-bom "3.0.0"
-    write-file-atomic "^2.1.0"
-    yargs "^11.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
-jest-serializer@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"
+jest-snapshot-serializer-raw@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot-serializer-raw/-/jest-snapshot-serializer-raw-1.1.0.tgz#1d7f09c02f3dbbc3ae70b5b7598fb2f45e37d6c8"
+  integrity sha512-OL3bXRCnSn7Kur3YTGYj+A3Hwh2eyb5QL5VLQ9OSsPBOva7r3sCB0Jf1rOT/KN3ypzH42hrkDz96lpbiMo+AlQ==
 
-jest-snapshot@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.0.1.tgz#6674fa19b9eb69a99cabecd415bddc42d6af3e7e"
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
   dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
     chalk "^2.0.1"
-    jest-diff "^23.0.1"
-    jest-matcher-utils "^23.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^23.0.1"
-
-jest-util@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.1.0.tgz#c0251baf34644c6dd2fea78a962f4263ac55772d"
-  dependencies:
-    callsites "^2.0.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
+jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
     chalk "^2.0.1"
-    graceful-fs "^4.1.11"
-    is-ci "^1.0.10"
-    jest-message-util "^23.1.0"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
     mkdirp "^0.5.1"
-    slash "^1.0.0"
+    slash "^2.0.0"
     source-map "^0.6.0"
 
-jest-validate@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-23.0.1.tgz#cd9f01a89d26bb885f12a8667715e9c865a5754f"
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
   dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
     chalk "^2.0.1"
-    jest-get-type "^22.1.0"
-    leven "^2.1.0"
-    pretty-format "^23.0.1"
-
-jest-watcher@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-23.1.0.tgz#a8d5842e38d9fb4afff823df6abb42a58ae6cdbd"
-  dependencies:
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
+jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
     ansi-escapes "^3.0.0"
     chalk "^2.0.1"
+    jest-util "^24.9.0"
     string-length "^2.0.0"
 
-jest-worker@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.0.1.tgz#9e649dd963ff4046026f91c4017f039a6aa4a7bc"
+jest-worker@^24.6.0, jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
   dependencies:
-    merge-stream "^1.0.1"
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
 
-jest@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-23.1.0.tgz#bbb7f893100a11a742dd8bd0d047a54b0968ad1a"
+jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
   dependencies:
-    import-local "^1.0.0"
-    jest-cli "^23.1.0"
+    import-local "^2.0.0"
+    jest-cli "^24.9.0"
 
-js-tokens@^3.0.0, js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+jetpack-id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
+  integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
+
+js-levenshtein@^1.1.3:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
+
+js-select@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/js-select/-/js-select-0.6.0.tgz#c284e22824d5927aec962dcdf247174aefb0d190"
+  integrity sha1-woTiKCTVknrsli3N8kcXSu+w0ZA=
+  dependencies:
+    JSONSelect "0.2.1"
+    traverse "0.4.x"
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
 js-yaml@3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  integrity sha1-bl/mfYsgXOTSL60Ft3geja3MSzA=
   dependencies:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
-js-yaml@^3.7.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-js-yaml@^3.9.1:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.5.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
@@ -3211,10 +7838,12 @@ js-yaml@^3.9.1:
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
 jsdom@^11.5.1:
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.11.0.tgz#df486efad41aee96c59ad7a190e2449c7eb1110e"
+  integrity sha512-ou1VyfjwsSuWkudGxb03FotDajxAto6USAlmMZjE2lc0jCznt7sBWkhfRBRaWwbnmDqdMSTKTLT5d9sBFkkM7A==
   dependencies:
     abab "^1.0.4"
     acorn "^5.3.0"
@@ -3246,56 +7875,158 @@ jsdom@^11.5.1:
 jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+  integrity sha1-RsP+yMGJKxKwgz25vHYiF226s0s=
 
 jsesc@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
 jsome@^2.3.25:
-  version "2.3.26"
-  resolved "https://registry.yarnpkg.com/jsome/-/jsome-2.3.26.tgz#8cb4438924d2c9dd5294c90adf03f35414fb3ca9"
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/jsome/-/jsome-2.5.0.tgz#5e417eef4341ffeb83ee8bfa9265b36d56fe49ed"
+  integrity sha1-XkF+70NB/+uD7ov6kmWzbVb+Se0=
   dependencies:
-    chalk "^1.1.3"
+    chalk "^2.3.0"
     json-stringify-safe "^5.0.1"
-    yargs "^4.8.0"
+    yargs "^11.0.0"
+
+json-buffer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
+  integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
+
+json-merge-patch@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-0.2.3.tgz#fa2c6b5af87da77bae2966a589d52e23ed81fe40"
+  integrity sha1-+ixrWvh9p3uuKWalidUuI+2B/kA=
+  dependencies:
+    deep-equal "^1.0.0"
+
+json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
 json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+  integrity sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.0:
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
   dependencies:
     jsonify "~0.0.0"
 
 json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+json3@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
+  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
 json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
+  integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
 
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
 
 jsonpointer@^4.0.0, jsonpointer@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+  integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
+
+jsonwebtoken@8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.2.1.tgz#333ee39aa8f238f32fa41693e7a2fb7e42f82b31"
+  integrity sha512-l8rUBr0fqYYwPc8/ZGrue7GiW7vWdZtZqelxo4Sd5lMvuEeCK8/wS54sEo6tJhdZ6hqfutsj6COgC0d1XdbHGw==
+  dependencies:
+    jws "^3.1.4"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    xtend "^4.0.1"
+
+jsonwebtoken@^8.4.0:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
+  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^5.6.0"
 
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
   dependencies:
     assert-plus "1.0.0"
     extsprintf "1.3.0"
@@ -3305,63 +8036,187 @@ jsprim@^1.2.2:
 jsx-ast-utils@^1.3.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+  integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
+
+jszip@^2.4.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
+  integrity sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=
+  dependencies:
+    pako "~1.0.2"
+
+jszip@^3.1.5:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
+  integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    set-immediate-shim "~1.0.1"
+
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.4, jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
+keyv@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
+  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
+  dependencies:
+    json-buffer "3.0.0"
+
+killable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
+  integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  integrity sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=
+  dependencies:
+    is-buffer "^1.0.2"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0, kind-of@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
 kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+ky-universal@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/ky-universal/-/ky-universal-0.3.0.tgz#3fcbb0dd03da39b5f05100d9362a630d5e1d402e"
+  integrity sha512-CM4Bgb2zZZpsprcjI6DNYTaH3oGHXL2u7BU4DK+lfCuC4snkt9/WRpMYeKbBbXscvKkeqBwzzjFX2WwmKY5K/A==
+  dependencies:
+    abort-controller "^3.0.0"
+    node-fetch "^2.6.0"
+
+ky@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/ky/-/ky-0.12.0.tgz#c05be95e6745ba422a6d2cc8ae964164962279f9"
+  integrity sha512-t9b7v3V2fGwAcQnnDDQwKQGF55eWrf4pwi1RN08Fy8b/9GEwV7Ea0xQiaSW6ZbeghBHIwl8kgnla4vVo9seepQ==
+
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  integrity sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=
+  dependencies:
+    package-json "^4.0.0"
+
+latest-version@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
+  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+  dependencies:
+    package-json "^6.3.0"
 
-lazy-cache@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+  integrity sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=
+
+lazystream@^1.0.0, lazystream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
+  dependencies:
+    readable-stream "^2.0.5"
 
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  integrity sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=
   dependencies:
     invert-kv "^1.0.0"
 
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
+  dependencies:
+    invert-kv "^2.0.0"
+
 lcov-parse@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
+  integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM=
 
 left-pad@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
+  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
 
-leven@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+li@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/li/-/li-1.3.0.tgz#22c59bcaefaa9a8ef359cf759784e4bf106aea1b"
+  integrity sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs=
+
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -3369,115 +8224,415 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+loader-runner@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
+
+loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+local-storage-fallback@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/local-storage-fallback/-/local-storage-fallback-4.1.1.tgz#6dc964635c8e9ab6d522d7d88538f465b62bd161"
+  integrity sha512-Ka4rem1FOgvIaPMokxXTP8DgW8gjfAQSdJC8TGrplDug7vh3b0PZnY/9euG3O3cIGAvJLp33mMU6MJ13x6S+Pw==
+  dependencies:
+    cookie "^0.3.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
   dependencies:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6:
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
+
+lodash.assignin@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
+  integrity sha1-uo31+4QesKPoBEIysOJjqNxqKKI=
+
+lodash.clone@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
+  integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
+
+lodash.clonedeep@^4.3.0, lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
+lodash.defaults@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
+
+lodash.difference@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
+  integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
 
 lodash.find@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
+  integrity sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=
+
+lodash.flatten@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
+
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=
 
 lodash.isobject@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+  integrity sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
 
 lodash.keys@^4.0.8:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
+  integrity sha1-oIYCrBLk+4P5H8H7ejYKTZujUgU=
+
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+  integrity sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
 
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
-  version "4.17.10"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
+lodash.unescape@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+  integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
+
+lodash.union@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
+  integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.7.14, lodash@^4.8.0, lodash@~4.17.2:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
 log-driver@1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
+  integrity sha1-euTsJXMC/XkNVXyxDJcQDYV7AFY=
 
-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:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
+loglevel@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.3.tgz#77f2eb64be55a404c9fd04ad16d57c1d6d6b1280"
+  integrity sha512-LoEDv5pgpvWgPF4kNYuIp0qqSJVWak/dML0RY74xlzMZiT9w77teNAwKYKWBTYjlokMirg+o3jBwp+vlLrcfAA==
 
-loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lru-cache@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
+lowercase-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
+  integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
+
+lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.2:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
   dependencies:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+macos-release@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"
+  integrity sha512-OHhSbtcviqMPt7yfw5ef5aghS2jzFVKEFyCJndQt2YpSQ9qRVSEv2axSJI1paVThEu+FFGs584h/1YhxjVqajA==
+
 magic-string@0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  integrity sha1-FNdoATyvLsj96hakmvgvw3fnUgE=
   dependencies:
     vlq "^0.2.1"
 
 magic-string@0.22.4, magic-string@^0.22.4:
   version "0.22.4"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
+  integrity sha512-kxBL06p6iO2qPBHsqGK2b3cRwiRGpnmSuVWNhwHcMX7qJOUr1HvricYP1LZOCdkQBUp0jiWg2d6WJwR3vYgByw==
   dependencies:
     vlq "^0.2.1"
 
+make-dir@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
+  dependencies:
+    pify "^3.0.0"
+
+make-dir@^2.0.0, make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-fetch-happen@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-5.0.0.tgz#a8e3fe41d3415dd656fe7b8e8172e1fb4458b38d"
+  integrity sha512-nFr/vpL1Jc60etMVKeaLOqfGjMMb3tAHFVJWxHOFCFS04Zmd7kGlMxo0l1tzfhoQje0/UPnd0X8OeGUiXXnfPA==
+  dependencies:
+    agentkeepalive "^3.4.1"
+    cacache "^12.0.0"
+    http-cache-semantics "^3.8.1"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    node-fetch-npm "^2.0.2"
+    promise-retry "^1.1.1"
+    socks-proxy-agent "^4.0.0"
+    ssri "^6.0.0"
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
   dependencies:
     tmpl "1.0.x"
 
+mamacro@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
+  integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
+
+map-age-cleaner@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
 
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
   dependencies:
     object-visit "^1.0.0"
 
+md5.js@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+mdn-browser-compat-data@0.0.82:
+  version "0.0.82"
+  resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.82.tgz#1fdf4979e548eaeed193464d19dbb4381ba7768b"
+  integrity sha512-RmC87C45AgXLuNlkrGLCK2wh0zRwpFnnro5jsNxmS90xLCxfKmTLPtqM9cocKFD7Ro9pWmtvkIkRiesGakd1Ig==
+  dependencies:
+    extend "3.0.2"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
   dependencies:
     mimic-fn "^1.0.0"
 
-merge-stream@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+mem@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
+  integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
+  dependencies:
+    map-age-cleaner "^0.1.1"
+    mimic-fn "^2.0.0"
+    p-is-promise "^2.0.0"
+
+memfs-or-file-map-to-github-branch@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.1.2.tgz#9d46c02481b7eca8e5ee8a94f170b7e0138cad67"
+  integrity sha512-D2JKK2DTuVYQqquBWco3K6UfSVyVwmd58dgNqh+TgxHOZdTmR8I130gjMbVCkemDl/EzqDA62417cJxKL3/FFA==
+
+memoize-one@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
+  integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
+
+memory-fs@^0.4.0, memory-fs@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
   dependencies:
+    errno "^0.1.3"
     readable-stream "^2.0.1"
 
-merge@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+meow@^3.1.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^2.1.5, micromatch@^2.3.11:
+micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
   dependencies:
     arr-diff "^2.0.0"
     array-unique "^0.2.1"
@@ -3493,9 +8648,10 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.1.4, micromatch@^3.1.8:
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -3511,86 +8667,245 @@ micromatch@^3.1.4, micromatch@^3.1.8:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-mime-db@~1.33.0:
-  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.40.0, "mime-db@>= 1.40.0 < 2":
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
+  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.7:
-  version "2.1.18"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.7:
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
+  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
   dependencies:
-    mime-db "~1.33.0"
+    mime-db "1.40.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mime@^2.4.2:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
+  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
 
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  integrity sha1-5md4PZLonb00KBi1IwudYqZyrRg=
+
+mimic-fn@^2.0.0, mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+mimic-response@^1.0.0, mimic-response@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
+  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@1.2.0, minimist@^1.1.1, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
 minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
-minipass@^2.2.1, minipass@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.2.4.tgz#03c824d84551ec38a8d1bb5bc350a5a30a354a40"
+minipass@^2.2.1, minipass@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
+  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
   dependencies:
-    safe-buffer "^5.1.1"
+    safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
-minizlib@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
+minizlib@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
+  integrity sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==
   dependencies:
     minipass "^2.2.1"
 
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
 mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1:
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  integrity sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
   dependencies:
     minimist "0.0.8"
 
+moment@^2.10.6:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+ms@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
-nan@^2.9.2:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+ms@^2.0.0, ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
+multimatch@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3"
+  integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+  integrity sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA=
+
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
+mv@~2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
+  integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
+  dependencies:
+    mkdirp "~0.5.1"
+    ncp "~2.0.0"
+    rimraf "~2.4.0"
+
+mz@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.5.0.tgz#2859025df03d46b57bb317174b196477ce64cec1"
+  integrity sha1-KFkCXfA9RrV7sxcXSxlkd85kzsE=
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+mz@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nan@^2.10.0, nan@^2.12.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
 nanomatch@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.9.tgz#879f7150cb2dab7a471259066c104eee6e0fa7c2"
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
     define-property "^2.0.2"
     extend-shallow "^3.0.2"
     fragment-cache "^0.2.1"
-    is-odd "^2.0.0"
     is-windows "^1.0.2"
     kind-of "^6.0.2"
     object.pick "^1.3.0"
@@ -3598,169 +8913,436 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+natural-compare-lite@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q=
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+nconf@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/nconf/-/nconf-0.10.0.tgz#da1285ee95d0a922ca6cee75adcf861f48205ad2"
+  integrity sha512-fKiXMQrpP7CYWJQzKkPPx9hPgmq+YLDyxcG9N8RpiE9FoCkCbzD0NyW0YhE3xn3Aupe7nnDeIx4PFzYehpHT9Q==
+  dependencies:
+    async "^1.4.0"
+    ini "^1.3.0"
+    secure-keys "^1.0.0"
+    yargs "^3.19.0"
 
-ncp@^2.0.0:
+ncp@^2.0.0, ncp@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
-needle@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.0.tgz#f14efc69cee1024b72c8b21c7bdf94a731dc12fa"
+needle@^2.2.1, needle@^2.2.4:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
+  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
   dependencies:
-    debug "^2.1.2"
+    debug "^3.2.6"
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+
+netmask@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
+  integrity sha1-ICl+idhvb2QA8lDZ9Pa0wZRfzTU=
+
+next-tick@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
 node-cleanup@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
+  integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
 
-node-fetch@^1.0.1, node-fetch@^1.7.3:
+node-fetch-npm@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz#7258c9046182dca345b4208eda918daf33697ff7"
+  integrity sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==
+  dependencies:
+    encoding "^0.1.11"
+    json-parse-better-errors "^1.0.0"
+    safe-buffer "^5.1.1"
+
+node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
   dependencies:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^2.3.0, node-fetch@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
+node-forge@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+  integrity sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==
+
+node-forge@^0.7.1:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
+  integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+
+node-libs-browser@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.5.3.tgz#55efa888ec907acdb8cffc4e7a51712780e13b6a"
+  integrity sha1-Ve+oiOyQes24z/xOelFxJ4DhO2o=
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^3.0.3"
+    console-browserify "^1.1.0"
+    constants-browserify "0.0.1"
+    crypto-browserify "~3.2.6"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.0"
+    os-browserify "~0.1.2"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^1.1.13"
+    stream-browserify "^1.0.0"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.10.1"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.1"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
+node-notifier@5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.0.tgz#7b455fdce9f7de0c63538297354f3db468426e6a"
+  integrity sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ==
   dependencies:
     growly "^1.3.0"
-    semver "^5.4.1"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz#6e4ef5bb5c5203c6552448828c852c40111aac46"
+node-notifier@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-pre-gyp@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
+  integrity sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==
   dependencies:
     detect-libc "^1.0.2"
     mkdirp "^0.5.1"
-    needle "^2.2.0"
+    needle "^2.2.1"
     nopt "^4.0.1"
     npm-packlist "^1.1.6"
     npmlog "^4.0.2"
-    rc "^1.1.7"
+    rc "^1.2.7"
     rimraf "^2.6.1"
     semver "^5.3.0"
     tar "^4"
 
-node-pre-gyp@^0.9.0:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.9.1.tgz#f11c07516dd92f87199dbc7e1838eab7cd56c9e0"
+node-releases@^1.1.25:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.27.tgz#b19ec8add2afe9a826a99dceccc516104c1edaf4"
+  integrity sha512-9iXUqHKSGo6ph/tdXVbHFbhRVQln4ZDTIBJCzsa90HimnBYc5jw8RWYt4wBYFHehGyC3koIz5O4mb2fHrbPOuA==
   dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.0"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.1.7"
-    rimraf "^2.6.1"
     semver "^5.3.0"
-    tar "^4"
+
+node-rsa@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
+  integrity sha512-9o51yfV167CtQANnuAf+5owNs7aIMsAKVLhNaKuRxihsUUnfoBMN5OTVOK/2mHSOWaWq9zZBiRM3bHORbTZqrg==
+  dependencies:
+    asn1 "^0.2.4"
+
+node-version@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d"
+  integrity sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==
+
+nomnom@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7"
+  integrity sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=
+  dependencies:
+    chalk "~0.4.0"
+    underscore "~1.6.0"
 
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
   dependencies:
     abbrev "1"
     osenv "^0.1.4"
 
-normalize-package-data@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
+    resolve "^1.10.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
 normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-url@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
+
+normalize-url@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.3.0.tgz#9c49e10fc1876aeb76dba88bf1b2b5d9fa57b2ee"
+  integrity sha512-0NLtR71o4k6GLP+mr6Ty34c5GA6CMoEsncKJxvQd8NzPxaHRJNnb5gZE8R1XF4CPIS7QPHLJ74IFszwtNVAHVQ==
+
 npm-bundled@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
+  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
+
+npm-package-arg@^6.0.0, npm-package-arg@^6.1.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.1.tgz#02168cb0a49a2b75bf988a28698de7b529df5cb7"
+  integrity sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==
+  dependencies:
+    hosted-git-info "^2.7.1"
+    osenv "^0.1.5"
+    semver "^5.6.0"
+    validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.1.6:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.10.tgz#1039db9e985727e464df066f4cf0ab6ef85c398a"
+npm-packlist@^1.1.12, npm-packlist@^1.1.6:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.4.tgz#866224233850ac534b63d1a6e76050092b5d2f44"
+  integrity sha512-zTLo8UcVYtDU3gdeaFu2Xu0n0EvelfHDGuqtNIn5RO7yQj4H1TqNdBc/yZjxnWA0PVB8D3Woyp0i5B43JwQ6Vw==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
+npm-pick-manifest@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-3.0.0.tgz#c94cab52d201a85875e45198fffe1a8a348e7af7"
+  integrity sha512-H+OnFudiq38Qj8P8xcesD/1Xa0Kvr2QRn1DTlephIwNfJg3P30Szc1wtpGEgdPXfAyKZKT2ajIM2X8YtCrbXrA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+    npm-package-arg "^6.0.0"
+    semver "^5.4.1"
+
+npm-registry-fetch@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz#5ef75845b605855c7964472542c25da172af8677"
+  integrity sha512-Jllq35Jag8dtv0M17ue74XtdQTyqKzuAYGiX9mAjOhkmNjib3bBUgK6mUY61+AHnXeSRobQkpY3/xIOS/omptw==
+  dependencies:
+    JSONStream "^1.3.4"
+    bluebird "^3.5.1"
+    figgy-pudding "^3.4.1"
+    lru-cache "^5.1.1"
+    make-fetch-happen "^5.0.0"
+    npm-package-arg "^6.1.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
 npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+  dependencies:
+    boolbase "~1.0.0"
+
+nugget@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nugget/-/nugget-2.0.1.tgz#201095a487e1ad36081b3432fa3cada4f8d071b0"
+  integrity sha1-IBCVpIfhrTYIGzQy+jytpPjQcbA=
+  dependencies:
+    debug "^2.1.3"
+    minimist "^1.1.0"
+    pretty-bytes "^1.0.2"
+    progress-stream "^1.1.0"
+    request "^2.45.0"
+    single-line-log "^1.1.2"
+    throttleit "0.0.2"
+
+nullthrows@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
+  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
 nwsapi@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.3.tgz#3f4010d6c943f34018d3dfb5f2fbc0de90476959"
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f"
+  integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==
 
 oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+  integrity sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
 object-assign@^4.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"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
   dependencies:
     copy-descriptor "^0.1.0"
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-keys@^1.0.10, object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+object-hash@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
+object-keys@^1.0.11, object-keys@^1.0.12:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-keys@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
+  integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
 
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.0.4.tgz#b1c9cc044ef1b9fe63606fc141abbb32e14730cc"
+object.assign@^4.0.4, object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
   dependencies:
     define-properties "^1.1.2"
-    function-bind "^1.1.0"
-    object-keys "^1.0.10"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
 
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
   dependencies:
     define-properties "^1.1.2"
     es-abstract "^1.5.1"
@@ -3768,6 +9350,7 @@ object.getownpropertydescriptors@^2.0.3:
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
   dependencies:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
@@ -3775,30 +9358,69 @@ object.omit@^2.0.0:
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
   dependencies:
     isobject "^3.0.1"
 
+obuf@^1.0.0, obuf@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+octokit-pagination-methods@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
+  integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
   dependencies:
     wrappy "1"
 
 once@~1.3.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  integrity sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=
   dependencies:
     wrappy "1"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
+
+onetime@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
+  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
   dependencies:
-    mimic-fn "^1.0.0"
+    mimic-fn "^2.1.0"
+
+opn@5.5.0, opn@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
+  dependencies:
+    is-wsl "^1.1.0"
 
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   dependencies:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
@@ -3806,6 +9428,7 @@ optimist@^0.6.1:
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
   dependencies:
     deep-is "~0.1.3"
     fast-levenshtein "~2.0.4"
@@ -3814,189 +9437,583 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
+optionator@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.6"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    word-wrap "~1.2.3"
+
 ordered-read-streams@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.0.tgz#d674a86ffcedf83d0ae06afa2918855e96d4033a"
+  integrity sha1-1nSob/zt+D0K4Gr6KRiFXpbUAzo=
   dependencies:
     is-stream "^1.0.1"
     readable-stream "^2.0.1"
 
+original@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
+  dependencies:
+    url-parse "^1.4.3"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+
+os-browserify@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+  integrity sha1-ScoCk+CxlZCl9d4Qx/JlphfY/lQ=
+
 os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+os-locale@3.1.0, os-locale@^3.0.0, os-locale@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
+  dependencies:
+    execa "^1.0.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
 
 os-locale@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
   dependencies:
     lcid "^1.0.0"
 
 os-locale@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  integrity sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==
   dependencies:
     execa "^0.7.0"
     lcid "^1.0.0"
     mem "^1.1.0"
 
+os-name@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-name/-/os-name-3.1.0.tgz#dec19d966296e1cd62d701a5a66ee1ddeae70801"
+  integrity sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==
+  dependencies:
+    macos-release "^2.2.0"
+    windows-release "^3.1.0"
+
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+  integrity sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=
+
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
+osenv@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.0.3.tgz#cd6ad8ddb290915ad9e22765576025d411f29cb6"
+  integrity sha1-zWrY3bKQkVrZ4idlV2Al1BHynLY=
+
+osenv@^0.1.4, osenv@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
   dependencies:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-output-file-sync@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+output-file-sync@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-2.0.1.tgz#f53118282f5f553c2799541792b723a4c71430c0"
+  integrity sha512-mDho4qm7WgIXIGf4eYU1RHN2UU5tPfVYVSRwDJw0uTmj35DQUt/eNp19N7v6T3SrR0ESTEf2up2CGO73qI35zQ==
   dependencies:
-    graceful-fs "^4.1.4"
+    graceful-fs "^4.1.11"
+    is-plain-obj "^1.1.0"
     mkdirp "^0.5.1"
-    object-assign "^4.1.0"
+
+override-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/override-require/-/override-require-1.1.1.tgz#6ae22fadeb1f850ffb0cf4c20ff7b87e5eb650df"
+  integrity sha1-auIvresfhQ/7DPTCD/e4fl62UN8=
+
+p-cancelable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
+  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
+
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
+  dependencies:
+    p-reduce "^1.0.0"
 
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
+p-is-promise@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
+  integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
 p-limit@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
   dependencies:
     p-try "^1.0.0"
 
+p-limit@^2.0.0, p-limit@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
+  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
   dependencies:
     p-limit "^1.1.0"
 
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
+
+p-retry@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
+  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
+  dependencies:
+    retry "^0.12.0"
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
 
-parse-diff@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.4.0.tgz#9ce35bcce8fc0b7c58f46d71113394fc0b4982dd"
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-parse-git-config@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-1.1.1.tgz#d3a9984317132f57398712bba438e129590ddf8c"
+pac-proxy-agent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-3.0.0.tgz#11d578b72a164ad74bf9d5bac9ff462a38282432"
+  integrity sha512-AOUX9jES/EkQX2zRz0AW7lSx9jD//hQS8wFXBvcnd/J2Py9KaMJMqV/LPqJssj1tgGufotb2mmopGPR15ODv1Q==
   dependencies:
-    extend-shallow "^2.0.1"
-    fs-exists-sync "^0.1.0"
+    agent-base "^4.2.0"
+    debug "^3.1.0"
+    get-uri "^2.0.0"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
+    pac-resolver "^3.0.0"
+    raw-body "^2.2.0"
+    socks-proxy-agent "^4.0.1"
+
+pac-resolver@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pac-resolver/-/pac-resolver-3.0.0.tgz#6aea30787db0a891704deb7800a722a7615a6f26"
+  integrity sha512-tcc38bsjuE3XZ5+4vP96OfhOugrX+JcnpUbhfuc4LuXBLQhoTthOstZeoQJBDnQUDYzYmdImKsbz0xSl1/9qeA==
+  dependencies:
+    co "^4.6.0"
+    degenerator "^1.0.4"
+    ip "^1.1.5"
+    netmask "^1.0.6"
+    thunkify "^2.1.2"
+
+package-json@*, package-json@^6.3.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.5.0.tgz#6feedaca35e75725876d0b0e64974697fed145b0"
+  integrity sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==
+  dependencies:
+    got "^9.6.0"
+    registry-auth-token "^4.0.0"
+    registry-url "^5.0.0"
+    semver "^6.2.0"
+
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  integrity sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=
+  dependencies:
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pacote@^9.5.6:
+  version "9.5.8"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-9.5.8.tgz#23480efdc4fa74515855c9ecf39cf64078f99786"
+  integrity sha512-0Tl8Oi/K0Lo4MZmH0/6IsT3gpGf9eEAznLXEQPKgPq7FscnbUOyopnVpwXlnQdIbCUaojWy1Wd7VMyqfVsRrIw==
+  dependencies:
+    bluebird "^3.5.3"
+    cacache "^12.0.2"
+    chownr "^1.1.2"
+    figgy-pudding "^3.5.1"
+    get-stream "^4.1.0"
+    glob "^7.1.3"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    make-fetch-happen "^5.0.0"
+    minimatch "^3.0.4"
+    minipass "^2.3.5"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    normalize-package-data "^2.4.0"
+    npm-package-arg "^6.1.0"
+    npm-packlist "^1.1.12"
+    npm-pick-manifest "^3.0.0"
+    npm-registry-fetch "^4.0.0"
+    osenv "^0.1.5"
+    promise-inflight "^1.0.1"
+    promise-retry "^1.1.1"
+    protoduck "^5.0.1"
+    rimraf "^2.6.2"
+    safe-buffer "^5.1.2"
+    semver "^5.6.0"
+    ssri "^6.0.1"
+    tar "^4.4.10"
+    unique-filename "^1.1.1"
+    which "^1.3.1"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
+
+pako@~1.0.2, pako@~1.0.5:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  integrity sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-asn1@^5.0.0:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.4.tgz#37f6628f823fbdeb2273b4d540434a22f3ef1fcc"
+  integrity sha512-Qs5duJcuvNExRfFZ99HDD3z4mAi3r9Wl/FOjEOijlxwCZs7E7mW2vjTpgQ4J8LpTF8x5v+1Vn5UQFejmWT11aw==
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-diff@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.5.1.tgz#18b3e82a0765ac1c8796e3854e475073a691c4fb"
+  integrity sha512-/qXjo9x/pFa5bVk/ZXaJD0yr3Tf3Yp6MWWMr4vnUmumDrE0yoE6YDH2A8vmcCD/Ko3tW2o0X+zGYh2zMLXshsg==
+
+parse-git-config@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-2.0.3.tgz#6fb840d4a956e28b971c97b33a5deb73a6d5b6bb"
+  integrity sha512-Js7ueMZOVSZ3tP8C7E3KZiHv6QQl7lnJ+OkbxoaFazzSa2KyEHqApfGbU3XboUgUnq4ZuUmskUpYKTNx01fm5A==
+  dependencies:
+    expand-tilde "^2.0.2"
     git-config-path "^1.0.1"
-    ini "^1.3.4"
+    ini "^1.3.5"
 
 parse-github-url@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
+  integrity sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==
 
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
   dependencies:
     glob-base "^0.3.0"
     is-dotfile "^1.0.0"
     is-extglob "^1.0.0"
     is-glob "^2.0.0"
 
+parse-json@4.0.0, parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
   dependencies:
     error-ex "^1.2.0"
 
 parse-link-header@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-link-header/-/parse-link-header-1.0.1.tgz#bedfe0d2118aeb84be75e7b025419ec8a61140a7"
+  integrity sha1-vt/g0hGK64S+deewJUGeyKYRQKc=
   dependencies:
     xtend "~4.0.1"
 
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
+
+parse-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.1.tgz#0ec769704949778cb3b8eda5e994c32073a1adff"
+  integrity sha512-d7yhga0Oc+PwNXDvQ0Jv1BuWkLVPXcAoQ/WREgd6vNNoKYaW52KI+RdOFjI63wjkmps9yUE8VS4veP+AgpQ/hA==
+  dependencies:
+    is-ssh "^1.3.0"
+    protocols "^1.4.0"
+
+parse-url@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-5.0.1.tgz#99c4084fc11be14141efa41b3d117a96fcb9527f"
+  integrity sha512-flNUPP27r3vJpROi0/R3/2efgKkyXqnXwyP1KQ2U0SfFRgdizOdWfvrrvJg1LuOoxs7GQhmxJlq23IpQ/BkByg==
+  dependencies:
+    is-ssh "^1.3.0"
+    normalize-url "^3.3.0"
+    parse-path "^4.0.0"
+    protocols "^1.4.0"
 
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
+
+parse5@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
+  integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
+  dependencies:
+    "@types/node" "*"
+
+parseurl@~1.3.2, parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
+
+path-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
+  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
   dependencies:
     pinkie-promise "^2.0.0"
 
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
 path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
 path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
 
-path-key@^2.0.0:
+path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-parse@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
   dependencies:
     graceful-fs "^4.1.2"
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
+pbf@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.0.tgz#e76f9f5114e395c25077ad6fe463b3507d6877fc"
+  integrity sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+  integrity sha1-tuDI+plJTZTgURV1gCpZpcFC8og=
+
+pbkdf2@^3.0.3:
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
   dependencies:
     pinkie "^2.0.0"
 
 pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
+pino-std-serializers@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-2.4.2.tgz#cb5e3e58c358b26f88969d7e619ae54bdfcc1ae1"
+  integrity sha512-WaL504dO8eGs+vrK+j4BuQQq6GLKeCCcHaMB2ItygzVURcL1CycwNEUHTD/lHFHs/NL5qAz2UKrjYWXKSf4aMQ==
+
+pino@5.12.6, pino@~5.12.0:
+  version "5.12.6"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-5.12.6.tgz#04a668278d7616db71871f1bd3e26f6918e05feb"
+  integrity sha512-LM5ug2b27uymIIkaBw54ncF+9DSf8S4z1uzw+Y5I94dRu3Z+lFuB13j0kg1InAeyxy+CsLGnWHKy9+zgTreFOg==
+  dependencies:
+    fast-redact "^1.4.4"
+    fast-safe-stringify "^2.0.6"
+    flatstr "^1.0.9"
+    pino-std-serializers "^2.3.0"
+    quick-format-unescaped "^3.0.2"
+    sonic-boom "^0.7.3"
 
 pinpoint@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
+  integrity sha1-DPd1eml38b9/ajIge3CeN3OI6HQ=
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
   dependencies:
-    find-up "^2.1.0"
+    node-modules-regexp "^1.0.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
 
 plugin-error@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
+  integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=
   dependencies:
     ansi-cyan "^0.1.1"
     ansi-red "^0.1.1"
@@ -4004,153 +10021,566 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
-pluralize@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+  integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
 
 pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
+
+po2json@0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/po2json/-/po2json-0.4.5.tgz#47bb2952da32d58a1be2f256a598eebc0b745118"
+  integrity sha1-R7spUtoy1Yob4vJWpZjuvAt0URg=
+  dependencies:
+    gettext-parser "1.1.0"
+    nomnom "1.8.1"
+
+portfinder@^1.0.21:
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.21.tgz#60e1397b95ac170749db70034ece306b9a27e324"
+  integrity sha512-ESabpDCzmBS3ekHbmpAIiESq3udRsCBGiBZLsC+HgBKv2ezb0R4oG+7RnYEVZ/ZCfhel5Tx3UzdNWA0Lox2QCA==
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+
+postcss-modules-extract-imports@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz#dc87e34148ec7eab5f791f7cd5849833375b741a"
+  integrity sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss@7.0.16:
+  version "7.0.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2"
+  integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^6.0.1, postcss@^6.0.23:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
+
+prepend-http@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
+  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
+
+prettier@1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@1.13.7, prettier@^1.0.0:
+prettier@^1.0.0:
   version "1.13.7"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.7.tgz#850f3b8af784a49a6ea2d2eaa7ed1428a34b7281"
+  integrity sha512-KIU72UmYPGk4MujZGYMFwinB7lOf2LsDNGSOC8ufevsrPLISrZbNJlWstRi3m0AMuszbH+EFSQ/r6w56RSPK6w==
 
-pretty-format@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.0.1.tgz#d61d065268e4c759083bccbca27a01ad7c7601f4"
+pretty-bytes@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"
+  integrity sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=
   dependencies:
-    ansi-regex "^3.0.0"
+    get-stdin "^4.0.1"
+    meow "^3.1.0"
+
+pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
     ansi-styles "^3.2.0"
+    react-is "^16.8.4"
 
-private@^0.1.6, private@^0.1.7, private@^0.1.8:
+private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
+
+probe-image-size@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-4.0.0.tgz#d35b71759e834bcf580ea9f18ec8b9265c0977eb"
+  integrity sha512-nm7RvWUxps+2+jZKNLkd04mNapXNariS6G5WIEVzvAqjx7EUuKcY1Dp3e6oUK7GLwzJ+3gbSbPLFAASHFQrPcQ==
+  dependencies:
+    any-promise "^1.3.0"
+    deepmerge "^2.0.1"
+    inherits "^2.0.3"
+    next-tick "^1.0.0"
+    request "^2.83.0"
+    stream-parser "~0.3.1"
 
 process-nextick-args@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
 
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+
+process@^0.11.0, process@^0.11.10, process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+progress-stream@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-1.2.0.tgz#2cd3cfea33ba3a89c9c121ec3347abe9ab125f77"
+  integrity sha1-LNPP6jO6OonJwSHsM0er6asSX3c=
+  dependencies:
+    speedometer "~0.1.2"
+    through2 "~0.2.3"
+
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
 
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+  integrity sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=
 
-promise@^7.1.1:
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+promise-polyfill@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.1.0.tgz#dfa96943ea9c121fca4de9b5868cb39d3472e057"
+  integrity sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=
+
+promise-retry@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
+  integrity sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=
+  dependencies:
+    err-code "^1.0.0"
+    retry "^0.10.0"
+
+"promise@>=3.2 <8", promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+prompts@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
+  integrity sha512-VObPvJiWPhpZI6C5m60XOzTfnYg/xc/an+r9VYymj9WJW3B/DIH+REzjpAACPf8brwPeP+7vz3bIim3S+AaMjw==
   dependencies:
-    loose-envify "^1.3.1"
+    kleur "^3.0.3"
+    sisteransi "^1.0.3"
+
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
     object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+protocol-buffers-schema@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
+  integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
+
+protocols@^1.1.0, protocols@^1.4.0:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.7.tgz#95f788a4f0e979b291ffefcf5636ad113d037d32"
+  integrity sha512-Fx65lf9/YDn3hUX08XUc0J8rSux36rEsyiv21ZGUC1mOyeM3lTRpZLcrm8aAolzS4itwVfm7TAPyxC2E5zd6xg==
+
+protoduck@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/protoduck/-/protoduck-5.0.1.tgz#03c3659ca18007b69a50fd82a7ebcc516261151f"
+  integrity sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==
+  dependencies:
+    genfun "^5.0.0"
+
+proxy-addr@~2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
+  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.0"
+
+proxy-agent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-3.1.0.tgz#3cf86ee911c94874de4359f37efd9de25157c113"
+  integrity sha512-IkbZL4ClW3wwBL/ABFD2zJ8iP84CY0uKMvBPk/OceQe/cEjrxzN1pMHsLwhbzUoRhG9QbSxYC+Z7LBkTiBNvrA==
+  dependencies:
+    agent-base "^4.2.0"
+    debug "^3.1.0"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.1"
+    lru-cache "^4.1.2"
+    pac-proxy-agent "^3.0.0"
+    proxy-from-env "^1.0.0"
+    socks-proxy-agent "^4.0.1"
 
 proxy-from-env@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
+  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
 
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.24:
-  version "1.1.27"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.27.tgz#2b2c77019db86855170d903532400bf71ee085b6"
+psl@^1.1.24, psl@^1.1.28:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.3.0.tgz#e1ebf6a3b5564fa8376f3da2275da76d875ca1bd"
+  integrity sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==
+
+public-encrypt@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
 
 pump@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.2.tgz#3b3ee6512f94f0e575538c17995f9f16990a5d51"
+  integrity sha1-Oz7mUS+U8OV1U4wXmV+fFpkKXVE=
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-pumpify@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b"
+pumpify@^1.3.3, pumpify@^1.3.5:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
   dependencies:
-    duplexify "^3.1.2"
-    inherits "^2.0.1"
-    pump "^1.0.0"
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
-punycode@^1.4.1:
+punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
 qs@~6.3.0:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+  integrity sha1-51vV9uJoEioqDgvaYwslUMFmUCw=
 
-qs@~6.5.1:
+qs@~6.5.1, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+
+query-string@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.8.2.tgz#36cb7e452ae11a4b5e9efee83375e0954407b2f6"
+  integrity sha512-J3Qi8XZJXh93t2FiKyd/7Ec6GNifsjKXUsVFkSBj/kjLsDylWhnCz4NT1bkPcKotttPW+QbKGqqPH8OoI2pdqw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
+querystring-es3@^0.2.0, querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
+querystringify@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
+  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
+
+quick-format-unescaped@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-3.0.2.tgz#0137e94d8fb37ffeb70040535111c378e75396fb"
+  integrity sha512-FXTaCkwvpIlkdKeGDNgcq07SXWS383noQUuZjvdE1QcTt+eLuqof6/BDiEPqB59FWLie/l91+HtlJSw7iCViSA==
+
+quick-tmp@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/quick-tmp/-/quick-tmp-0.0.0.tgz#4165e66320ea05f9cbcccf3be1f8fd5fdb05f7df"
+  integrity sha1-QWXmYyDqBfnLzM874fj9X9sF998=
+  dependencies:
+    first-match "0.0.1"
+    osenv "0.0.3"
 
 random-seed@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/random-seed/-/random-seed-0.3.0.tgz#d945f2e1f38f49e8d58913431b8bf6bb937556cd"
+  integrity sha1-2UXy4fOPSejViRNDG4v2u5N1Vs0=
   dependencies:
     json-stringify-safe "^5.0.1"
 
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  integrity sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==
   dependencies:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-rc@^1.1.7:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092"
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.2.1, range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+raw-body@^2.2.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
+  integrity sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.3"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+raw-loader@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
+  integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
   dependencies:
-    deep-extend "~0.4.0"
+    loader-utils "^1.1.0"
+    schema-utils "^2.0.1"
+
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
     ini "~1.3.0"
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+"react-15@npm:react@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+  integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+"react-dom-15@npm:react-dom@^15":
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+  integrity sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 react-lifecycles-compat@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
+  integrity sha512-pbZOSMVVkvppW7XRn9fcHK5OgEDnYLwMva7P6TgS44/SN9uGGjfh3Z1c8tomO+y4IsHQ6Fsz2EGwmE7sMeNZgQ==
+
+react-native-web@^0.11.5:
+  version "0.11.6"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.6.tgz#7766c1550331c8724b2d5fe5d1b9ad83efe32c91"
+  integrity sha512-Hqf4mnvuuaEPzcnXyk3UkU2pX4L+UpUzFNakg4diiMq/+dCLDYTAJwQerC69YLoB7ItpWIby1LHUx0uVn3opzg==
+  dependencies:
+    array-find-index "^1.0.2"
+    create-react-class "^15.6.2"
+    debounce "^1.2.0"
+    deep-assign "^3.0.0"
+    fbjs "^1.0.0"
+    hyphenate-style-name "^1.0.2"
+    inline-style-prefixer "^5.0.3"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.6.0"
+    react-timer-mixin "^0.13.4"
+
+react-timer-mixin@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
+  integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+
+react-virtualized-auto-sizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
   dependencies:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
   dependencies:
     load-json-file "^1.0.0"
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2:
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
@@ -4160,93 +10590,264 @@ readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readdirp@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+readable-stream@1.1.x, readable-stream@^1.0.27-1, readable-stream@^1.1.13, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
   dependencies:
-    graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@3, readable-stream@^3.0.1, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
     readable-stream "^2.0.2"
-    set-immediate-shim "^1.0.1"
 
-readline-sync@^1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.7.tgz#001bfdd4c06110c3c084c63bf7c6a56022213f30"
+readline-sync@^1.4.9:
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.10.tgz#41df7fbb4b6312d673011594145705bf56d8873b"
+  integrity sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==
 
-realpath-native@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.0.0.tgz#7885721a83b43bd5327609f0ddecb2482305fdf0"
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  integrity sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
   dependencies:
     util.promisify "^1.0.0"
 
-regenerator-runtime@^0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+regenerate-unicode-properties@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
+  integrity sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==
+  dependencies:
+    regenerate "^1.4.0"
+
+regenerate@^1.2.1, regenerate@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
+
+regenerator-runtime@0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
 
 regenerator-runtime@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+  integrity sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==
 
-regenerator-transform@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
+regenerator-runtime@^0.9.5:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
+  integrity sha1-0z65XQ0gAaS+OWWXB8UbDLcc4Ck=
+
+regenerator-transform@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
+  integrity sha512-flVuee02C3FKRISbxhXl9mGzdbWUVHubl1SMaknjxkFB1/iqpJhArQUvRxOOPEc/9tAiX0BaQ28FJH10E4isSQ==
   dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
     private "^0.1.6"
 
 regex-cache@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
   dependencies:
     is-equal-shallow "^0.1.3"
 
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
   dependencies:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp-tree@^0.1.6:
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.11.tgz#c9c7f00fcf722e0a56c7390983a7a63dd6c272f3"
+  integrity sha512-7/l/DgapVVDzZobwMCCgMlqiqyLFJ0cduo/j+3BcDJIB+yJdsYCfKuI3l/04NV+H/rfNRdPIDbXNZHM9XvQatg==
+
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  integrity sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^4.5.4:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.5.5.tgz#aaffe61c2af58269b3e516b61a73790376326411"
+  integrity sha512-FpI67+ky9J+cDizQUJlIlNZFKual/lUkFr1AG6zOCpwZ9cLrg8UUVakyUQJD7fCDIe9Z2nwTQJNPyonatNmDFQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.1.0"
+    regjsgen "^0.5.0"
+    regjsparser "^0.6.0"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.1.0"
+
+registry-auth-token@^3.0.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.4.0.tgz#d7446815433f5d5ed6431cd5dca21048f66b397e"
+  integrity sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==
+  dependencies:
+    rc "^1.1.6"
+    safe-buffer "^5.0.1"
+
+registry-auth-token@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.0.0.tgz#30e55961eec77379da551ea5c4cf43cbf03522be"
+  integrity sha512-lpQkHxd9UL6tb3k/aHAVfnVtn+Bcs9ob5InuFLLEDqSqeq+AljB8GZW9xY0x7F+xYwEcjKe07nyoxzEYz6yvkw==
+  dependencies:
+    rc "^1.2.8"
+    safe-buffer "^5.0.1"
+
+registry-url@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  integrity sha1-PU74cPc93h138M+aOBQyRE4XSUI=
+  dependencies:
+    rc "^1.0.1"
+
+registry-url@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-5.1.0.tgz#e98334b50d5434b81136b44ec638d9c2009c5009"
+  integrity sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==
+  dependencies:
+    rc "^1.2.8"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
+
+regjsgen@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.0.tgz#a7634dc08f89209c2049adda3525711fb97265dd"
+  integrity sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA==
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  integrity sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=
+  dependencies:
+    jsesc "~0.5.0"
+
+regjsparser@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
+  integrity sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==
+  dependencies:
+    jsesc "~0.5.0"
+
+relaxed-json@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/relaxed-json/-/relaxed-json-1.0.3.tgz#eb2101ae0ee60e82267d95ed0ddf19a3604b8c1e"
+  integrity sha512-b7wGPo7o2KE/g7SqkJDDbav6zmrEeP4TK2VpITU72J/M949TLe/23y/ZHJo+pskcGM52xIfFoT9hydwmgr1AEg==
+  dependencies:
+    chalk "^2.4.2"
+    commander "^2.6.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
 repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+  integrity sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=
 
 repeat-string@^1.5.2, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
   dependencies:
     is-finite "^1.0.0"
 
 replace-ext@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-request-promise-core@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+request-promise-core@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
+  integrity sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==
   dependencies:
-    lodash "^4.13.1"
+    lodash "^4.17.11"
 
 request-promise-native@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59"
+  integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==
   dependencies:
-    request-promise-core "1.1.1"
-    stealthy-require "^1.1.0"
-    tough-cookie ">=2.3.3"
+    request-promise-core "1.1.2"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
 
 request@2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  integrity sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
@@ -4269,9 +10870,10 @@ request@2.79.0:
     tunnel-agent "~0.4.1"
     uuid "^3.0.0"
 
-request@^2.83.0:
+request@2.87.0:
   version "2.87.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.6.0"
@@ -4294,89 +10896,223 @@ request@^2.83.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@^2.45.0, request@^2.83.0, request@~2.88.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+  integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+require-uncached@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-2.0.0.tgz#ad54186d77fecf07b63d82f8dd7aad448863b06d"
+  integrity sha512-rPv1//BQwg4gzIbpJcKXWIfjDJEtgS8jzbsNoLcdVSE5FpBzKEKKuoG6MfCbLC28ZTv+qlQWC9/K7J5GBGPSMg==
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
 
-require-uncached@^1.0.3:
+require-uncached@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  integrity sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=
   dependencies:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+  integrity sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=
 
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
 
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
 resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.4.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
   dependencies:
-    path-parse "^1.0.5"
+    path-parse "^1.0.6"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+resolve@^1.12.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.2.tgz#dbf31d0fa98b1f29aa5169783b9c290cb865fea2"
+  integrity sha512-EjlOBLBO1kxsUxsKjLt7TAECyKW6fOh1VRkykQkKGzcBbjjPIxBqGh0jf7GJ3k/f5mxMqW3htMD3WdTUVtW8HQ==
+  dependencies:
+    path-parse "^1.0.6"
+
+responselike@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
+  dependencies:
+    lowercase-keys "^1.0.0"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  integrity sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
   dependencies:
-    onetime "^2.0.0"
+    onetime "^5.1.0"
     signal-exit "^3.0.2"
 
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-rfc6902@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/rfc6902/-/rfc6902-2.2.2.tgz#518a4e9caac1688f3d94c9df2fdcdb6ce21f29be"
+retry@0.12.0, retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
 
-right-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+retry@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
+  integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
+
+rfc6902@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/rfc6902/-/rfc6902-3.0.4.tgz#82965f13536fd20cb7799ce0376e9ce7cd3ebfe6"
+  integrity sha512-OnzreaZXrwT5w2ikKXWr5QcuI7NZpL+J3hIkAwozjOnKVUL7fPsB8Vcmu8YBiiou1/r3V0Jc0T1uQDyfAPvLzA==
+
+rimraf@2.6.3, rimraf@~2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
   dependencies:
-    align-text "^0.1.1"
+    glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
-    glob "^7.0.5"
+    glob "^7.1.3"
 
-rollup-plugin-babel@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.2.tgz#a2765dea0eaa8aece351c983573300d17497495b"
+rimraf@~2.4.0:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
+  integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
+  dependencies:
+    glob "^6.0.1"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+  integrity sha1-K/GYveFnys+lHAqSjoS2i74XH84=
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+rollup-plugin-babel@^4.0.1:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.3.3.tgz#7eb5ac16d9b5831c3fd5d97e8df77ba25c72a2aa"
+  integrity sha512-tKzWOCmIJD/6aKNz0H1GMM+lW1q9KyFubbWzGiOG540zxPPifnEAHTZwjo0g991Y+DyOZcLqBgqOdqazYE5fkw==
   dependencies:
-    rollup-pluginutils "^1.5.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    rollup-pluginutils "^2.8.1"
 
 rollup-plugin-commonjs@^8.2.6:
   version "8.2.6"
   resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
+  integrity sha512-qK0+uhktmnAgZkHkqFuajNmPw93fjrO7+CysDaxWE5jrUR9XSlSvuao5ZJP+XizxA8weakhgYYBtbVz9SGBpjA==
   dependencies:
     acorn "^5.2.1"
     estree-walker "^0.5.0"
@@ -4387,6 +11123,7 @@ rollup-plugin-commonjs@^8.2.6:
 rollup-plugin-node-resolve@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.1.1.tgz#cbb783b0d15b02794d58915350b2f0d902b8ddc8"
+  integrity sha1-y7eDsNFbAnlNWJFTULLw2QK43cg=
   dependencies:
     browser-resolve "^1.11.0"
     builtin-modules "^1.1.0"
@@ -4395,6 +11132,7 @@ rollup-plugin-node-resolve@^2.1.1:
 rollup-plugin-prettier@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-prettier/-/rollup-plugin-prettier-0.3.0.tgz#1000df8a2914d367b79507c1caa582fdbed8b0f3"
+  integrity sha1-EADfiikU02e3lQfByqWC/b7YsPM=
   dependencies:
     diff "3.3.0"
     magic-string "0.22.4"
@@ -4403,6 +11141,7 @@ rollup-plugin-prettier@^0.3.0:
 rollup-plugin-replace@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.0.0.tgz#19074089c8ed57184b8cc64e967a03d095119277"
+  integrity sha512-pK9mTd/FNrhtBxcTBXoh0YOwRIShV0gGhv9qvUtNcXHxIMRZMXqfiZKVBmCRGp8/2DJRy62z2JUE7/5tP6WxOQ==
   dependencies:
     magic-string "^0.22.4"
     minimatch "^3.0.2"
@@ -4411,91 +11150,130 @@ rollup-plugin-replace@^2.0.0:
 rollup-plugin-strip-banner@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-strip-banner/-/rollup-plugin-strip-banner-0.2.0.tgz#d5c86979c7871427f9d7f797e09a493750769fd4"
+  integrity sha1-1chpeceHFCf51/eX4JpJN1B2n9Q=
   dependencies:
     extract-banner "0.1.2"
     magic-string "0.19.1"
     rollup-pluginutils "2.0.1"
 
-rollup-pluginutils@2.0.1, rollup-pluginutils@^2.0.1:
+rollup-pluginutils@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
+  integrity sha1-fslbNXP2VDpGpkYb2afFRFJdD8A=
   dependencies:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup-pluginutils@^1.5.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97"
+  integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==
   dependencies:
-    estree-walker "^0.2.1"
-    minimatch "^3.0.2"
+    estree-walker "^0.6.1"
 
 rollup@^0.52.1:
   version "0.52.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.52.1.tgz#610e8e1be432f18fcfbfa865408a1cd7618cd707"
+  integrity sha512-cVOL8rUMivChVcScL7zq1JCl4+4gMiVOllnX9r2l6MlkUzyXRbBK7szGDGaFXyqZl6uruFtX+gFhize9o7iiKg==
 
-rsvp@^3.3.3:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  integrity sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=
+  dependencies:
+    once "^1.3.0"
 
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
   dependencies:
     is-promise "^2.1.0"
 
-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
   dependencies:
-    rx-lite "*"
+    aproba "^1.1.1"
 
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+  integrity sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI=
 
 rxjs@^5.5.6:
   version "5.5.6"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.6.tgz#e31fb96d6fd2ff1fd84bcea8ae9c02d007179c02"
+  integrity sha512-v4Q5HDC0FHAQ7zcBX7T2IL6O5ltl1a2GX4ENjPXg6SjDY69Cmx9v4113C99a4wGF16ClPv5Z8mghuYorVkg/kg==
   dependencies:
     symbol-observable "1.0.1"
 
-safe-buffer@^5.0.1:
+rxjs@^6.4.0:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
+  integrity sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==
+  dependencies:
+    tslib "^1.9.0"
+
+rxjs@^6.5.3:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
+  integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+
+safe-json-stringify@~1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
+  integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
 
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sane@^2.0.0:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.5.2.tgz#b4dc1861c21b427e929507a3e751e2a2cb8ab3fa"
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
   dependencies:
+    "@cnakazawa/watch" "^1.0.3"
     anymatch "^2.0.0"
-    capture-exit "^1.2.0"
-    exec-sh "^0.2.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
     fb-watchman "^2.0.0"
     micromatch "^3.1.4"
     minimist "^1.1.1"
     walker "~1.0.5"
-    watch "~0.18.0"
-  optionalDependencies:
-    fsevents "^1.2.3"
 
-sax@^1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
 scheduler@^0.11.0:
   version "0.11.3"
@@ -4505,71 +11283,293 @@ scheduler@^0.11.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.1.0.tgz#940363b6b1ec407800a22951bdcc23363c039393"
+  integrity sha512-g6SViEZAfGNrToD82ZPUjq52KUPDYc+fN5+g6Euo5mLokl/9Yx14z0Cu4RR1m55HtBXejO0sBt+qw79axN+Fiw==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+secure-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca"
+  integrity sha1-8MgtmKOxOah3aogIBQuCRDEIf8o=
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+
+selfsigned@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
+  integrity sha512-9AukTiDmHXGXWtWjembZ5NDmVvP2695EtpgbCsxCa68w3c88B+alqbmZ4O3hZ4VWGXeGWzEVdvqgAJD8DQPCDw==
+  dependencies:
+    node-forge "0.7.5"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  integrity sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=
+  dependencies:
+    semver "^5.0.3"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+  integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
+
+semver@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
+  integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==
+
+semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serialize-javascript@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
+  integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
+
+serve-index@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-immediate-shim@^1.0.1:
+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"
+  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
 
-set-value@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.1"
-    to-object-path "^0.3.0"
-
-set-value@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
   dependencies:
     extend-shallow "^2.0.1"
     is-extendable "^0.1.1"
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.5:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+  integrity sha1-F93t3F9yL7ZlAWWIlUYZd4ZzFbo=
+
+sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  integrity sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shallow-copy@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
+  integrity sha1-QV9CcC1z2BAzApLMXuhurhoRoXA=
 
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
   dependencies:
     shebang-regex "^1.0.0"
 
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shell-quote@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  integrity sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shell-quote@^1.6.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.1.tgz#3161d969886fb14f9140c65245a5dd19b6f0b06b"
+  integrity sha512-2kUqeAGnMAu6YrTPX4E3LfxacH9gKljzVjlkUeSqY0soGwK4KLl7TURXCem712tkhBCeeaFP9QK4dKn88s3Icg==
+
+shelljs@0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
+  integrity sha1-svXHfvlxSPS09uImguELuoZnz/E=
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shelljs@^0.7.5:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+  integrity sha1-3svPh0sNHl+3LhSxZKloMEjprLM=
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
 
 shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
+sign-addon@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-0.3.1.tgz#7798ba994c8cd803a64a11a12a377ae6f714565e"
+  integrity sha512-feaoG7+8IXr9SymOEd8VTZCSlVZArWcBDZ33IIdfXlU5NWWzXdCxCjPDqAkLQplFa7RRZr1S4lSmgMPn80Ze1A==
+  dependencies:
+    babel-polyfill "6.16.0"
+    deepcopy "0.6.3"
+    es6-error "4.0.0"
+    es6-promisify "5.0.0"
+    jsonwebtoken "8.2.1"
+    mz "2.5.0"
+    request "2.87.0"
+    source-map-support "0.4.6"
+    stream-to-promise "2.2.0"
+    when "3.7.7"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+
+single-line-log@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
+  integrity sha1-wvg/Jzo+GhbtsJlWYdoO1e8DM2Q=
+  dependencies:
+    string-width "^1.0.1"
+
+sisteransi@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb"
+  integrity sha512-SbEG75TzH8G7eVXFSN5f9EExILKfly7SUvVY5DhhYLvfhKqhDFY0OzevWa/zwak0RLRfWS5AvfMWpd9gJvr5Yg==
 
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
-slice-ansi@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+  integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
+
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
   dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+smart-buffer@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"
+  integrity sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
   dependencies:
     define-property "^1.0.0"
     isobject "^3.0.0"
@@ -4578,12 +11578,14 @@ snapdragon-node@^2.0.1:
 snapdragon-util@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
   dependencies:
     kind-of "^3.2.0"
 
 snapdragon@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
   dependencies:
     base "^0.11.1"
     debug "^2.2.0"
@@ -4597,28 +11599,330 @@ snapdragon@^0.8.1:
 sntp@1.x.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  integrity sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=
   dependencies:
     hoek "2.x.x"
 
+snyk-config@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/snyk-config/-/snyk-config-2.2.3.tgz#8e09bb98602ad044954d30a9fc1695ab5b6042fa"
+  integrity sha512-9NjxHVMd1U1LFw66Lya4LXgrsFUiuRiL4opxfTFo0LmMNzUoU5Bk/p0zDdg3FE5Wg61r4fP2D8w+QTl6M8CGiw==
+  dependencies:
+    debug "^3.1.0"
+    lodash "^4.17.15"
+    nconf "^0.10.0"
+
+snyk-docker-plugin@1.29.1:
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.29.1.tgz#4ae989e5084eef744b371f88b2890a8d971ab871"
+  integrity sha512-Mucc1rZ7l0U8Dykr5m6HPjau8b2H8JVtVaXGbKSZD6e/47JDJhudkgrWjsS5Yt/Zdp1weE3+4SguftFiVR971A==
+  dependencies:
+    debug "^4.1.1"
+    dockerfile-ast "0.0.16"
+    semver "^6.1.0"
+    tslib "^1"
+
+snyk-go-parser@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/snyk-go-parser/-/snyk-go-parser-1.3.1.tgz#427387507578baf008a3e73828e0e53ed8c796f3"
+  integrity sha512-jrFRfIk6yGHFeipGD66WV9ei/A/w/lIiGqI80w1ndMbg6D6M5pVNbK7ngDTmo4GdHrZDYqx/VBGBsUm2bol3Rg==
+  dependencies:
+    toml "^3.0.0"
+    tslib "^1.9.3"
+
+snyk-go-plugin@1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/snyk-go-plugin/-/snyk-go-plugin-1.11.0.tgz#7810242391e39588929de47b829d04938bac8f1a"
+  integrity sha512-9hsGgloioGuey5hbZfv+MkFEslxXHyzUlaAazcR0NsY7VLyG/b2g3f88f/ZwCwlWaKL9LMv/ERIiey3oWAB/qg==
+  dependencies:
+    debug "^4.1.1"
+    graphlib "^2.1.1"
+    snyk-go-parser "1.3.1"
+    tmp "0.0.33"
+    tslib "^1.10.0"
+
+snyk-gradle-plugin@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-3.0.2.tgz#b4d41fce3c98014baf74fa1b18c6b3cc6f330ef5"
+  integrity sha512-9nyR03kHmePqBGaQiUeo3RD1YJ4qE5/V4tOmDQ8LNjHTQ54Xr8OXFC5xlJMV8FCtXrRXY0/WX8RMUPEUAm4c9g==
+  dependencies:
+    "@types/debug" "^4.1.4"
+    chalk "^2.4.2"
+    clone-deep "^0.3.0"
+    debug "^4.1.1"
+    tmp "0.0.33"
+    tslib "^1.9.3"
+
+snyk-module@1.9.1, snyk-module@^1.6.0, snyk-module@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/snyk-module/-/snyk-module-1.9.1.tgz#b2a78f736600b0ab680f1703466ed7309c980804"
+  integrity sha512-A+CCyBSa4IKok5uEhqT+hV/35RO6APFNLqk9DRRHg7xW2/j//nPX8wTSZUPF8QeRNEk/sX+6df7M1y6PBHGSHA==
+  dependencies:
+    debug "^3.1.0"
+    hosted-git-info "^2.7.1"
+
+snyk-mvn-plugin@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/snyk-mvn-plugin/-/snyk-mvn-plugin-2.4.0.tgz#b653050a4095feccffc1b9387dc3a3f2f1aa69da"
+  integrity sha512-Fmt6Mjx6zZz+4q6PnBkhuNGhEX++q/pKMI26ls4p3JPkx4KxBz89oncpkmf7P8YCkoaka8oHhtDEv/R4Z9LleQ==
+  dependencies:
+    lodash "^4.17.15"
+    tslib "1.9.3"
+
+snyk-nodejs-lockfile-parser@1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.16.0.tgz#1c1d0aba4643830901ef999415816e7a92b0974d"
+  integrity sha512-cf3uozRXEG88nsjOQlo+SfOJPpcLs45qpnuk2vhBBZ577IMnV+fTOJQsP2YRiikLUbdgkVlduviwUO6OVn1PhA==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.0.2"
+    graphlib "^2.1.5"
+    lodash "^4.17.14"
+    source-map-support "^0.5.7"
+    tslib "^1.9.3"
+    uuid "^3.3.2"
+
+snyk-nuget-plugin@1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/snyk-nuget-plugin/-/snyk-nuget-plugin-1.12.0.tgz#de851a7cba80a5676257ca03c1c84020ae9aca8c"
+  integrity sha512-p11pQQAFr9GBRxxqD3oPasRpYkv6N/eDDQwdjhFBOsgPF+hZf8pIr8ZfrnnCT7XaQ0XeF7Fmj9K0blqEjUV2/g==
+  dependencies:
+    debug "^3.1.0"
+    dotnet-deps-parser "4.5.0"
+    jszip "^3.1.5"
+    lodash "^4.17.14"
+    snyk-paket-parser "1.5.0"
+    tslib "^1.9.3"
+    xml2js "^0.4.17"
+
+snyk-paket-parser@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/snyk-paket-parser/-/snyk-paket-parser-1.5.0.tgz#a0e96888d9d304b1ae6203a0369971575f099548"
+  integrity sha512-1CYMPChJ9D9LBy3NLqHyv8TY7pR/LMISSr08LhfFw/FpfRZ+gTH8W6bbxCmybAYrOFNCqZkRprqOYDqZQFHipA==
+  dependencies:
+    tslib "^1.9.3"
+
+snyk-php-plugin@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/snyk-php-plugin/-/snyk-php-plugin-1.6.4.tgz#c3470aea2f185d2f3417cfc5e966ecf7fd1efa20"
+  integrity sha512-FFQeimtbwq17nDUS0o0zuKgyjXSX7SpoC9iYTeKvxTXrmKf2QlxTtPvmMM4/hQxehEu1i40ow1Ozw0Ahxm8Dpw==
+  dependencies:
+    "@snyk/composer-lockfile-parser" "1.0.3"
+    tslib "1.9.3"
+
+snyk-policy@1.13.5:
+  version "1.13.5"
+  resolved "https://registry.yarnpkg.com/snyk-policy/-/snyk-policy-1.13.5.tgz#c5cf262f759879a65ab0810dd58d59c8ec7e9e47"
+  integrity sha512-KI6GHt+Oj4fYKiCp7duhseUj5YhyL/zJOrrJg0u6r59Ux9w8gmkUYT92FHW27ihwuT6IPzdGNEuy06Yv2C9WaQ==
+  dependencies:
+    debug "^3.1.0"
+    email-validator "^2.0.4"
+    js-yaml "^3.13.1"
+    lodash.clonedeep "^4.5.0"
+    semver "^6.0.0"
+    snyk-module "^1.9.1"
+    snyk-resolve "^1.0.1"
+    snyk-try-require "^1.3.1"
+    then-fs "^2.0.0"
+
+snyk-python-plugin@^1.13.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/snyk-python-plugin/-/snyk-python-plugin-1.13.1.tgz#cc5659c1e56c670424bba8cd3444c07a3b5fa542"
+  integrity sha512-UaOe01YFw1v8whvd4XeOmt1J6a9Y6Ri6suEzuDeieRP5Pm5ihTAbRTDNSvnu7gqrWqrBXAIWDkPSiplUTg7/Dw==
+  dependencies:
+    "@snyk/cli-interface" "^2.0.2"
+    tmp "0.0.33"
+
+snyk-resolve-deps@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/snyk-resolve-deps/-/snyk-resolve-deps-4.3.0.tgz#0f356ebaed9ca78806024aa0d564c229377f39cb"
+  integrity sha512-HWGiwnz0hH59tyvcpaWho0G8oHlFiiTMgWbx/wZMZmCcgrmmqbjNRp6g+Zg6Cr0Ng2Gy0oc4jqvwspmOoh0c4g==
+  dependencies:
+    "@types/node" "^6.14.4"
+    "@types/package-json" "^5.0.0"
+    "@types/semver" "^5.5.0"
+    ansicolors "^0.3.2"
+    debug "^3.2.5"
+    lodash.assign "^4.2.0"
+    lodash.assignin "^4.2.0"
+    lodash.clone "^4.5.0"
+    lodash.flatten "^4.4.0"
+    lodash.get "^4.4.2"
+    lodash.set "^4.3.2"
+    lru-cache "^4.0.0"
+    semver "^5.5.1"
+    snyk-module "^1.6.0"
+    snyk-resolve "^1.0.0"
+    snyk-tree "^1.0.0"
+    snyk-try-require "^1.1.1"
+    then-fs "^2.0.0"
+
+snyk-resolve@1.0.1, snyk-resolve@^1.0.0, snyk-resolve@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/snyk-resolve/-/snyk-resolve-1.0.1.tgz#eaa4a275cf7e2b579f18da5b188fe601b8eed9ab"
+  integrity sha512-7+i+LLhtBo1Pkth01xv+RYJU8a67zmJ8WFFPvSxyCjdlKIcsps4hPQFebhz+0gC5rMemlaeIV6cqwqUf9PEDpw==
+  dependencies:
+    debug "^3.1.0"
+    then-fs "^2.0.0"
+
+snyk-sbt-plugin@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/snyk-sbt-plugin/-/snyk-sbt-plugin-2.6.1.tgz#bbd01291cb778d5e44689a4a1b0e3de1727942fe"
+  integrity sha512-zWU14cm+cpamJ0CJdekTfgmv6ifdgVcapO6d27KTJThqRuR0arCqGPPyZa/Zl+jzhcK0dtRS4Ihk7g+d36SWIg==
+  dependencies:
+    semver "^6.1.2"
+    tmp "^0.1.0"
+    tree-kill "^1.2.1"
+    tslib "^1.10.0"
+
+snyk-tree@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/snyk-tree/-/snyk-tree-1.0.0.tgz#0fb73176dbf32e782f19100294160448f9111cc8"
+  integrity sha1-D7cxdtvzLngvGRAClBYESPkRHMg=
+  dependencies:
+    archy "^1.0.0"
+
+snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/snyk-try-require/-/snyk-try-require-1.3.1.tgz#6e026f92e64af7fcccea1ee53d524841e418a212"
+  integrity sha1-bgJvkuZK9/zM6h7lPVJIQeQYohI=
+  dependencies:
+    debug "^3.1.0"
+    lodash.clonedeep "^4.3.0"
+    lru-cache "^4.0.0"
+    then-fs "^2.0.0"
+
+snyk@^1.165.1:
+  version "1.216.4"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.216.4.tgz#60ca643a6462f7b1598ae3bee490e90fff174969"
+  integrity sha512-KRsICpBDJSIW1v25vVWGl1/GwMiRmThvejFrYN1hMevgj8UyV6hVVcQC8lLnXKygnZUrPLb2/6hCSM9iSlb6CA==
+  dependencies:
+    "@snyk/dep-graph" "1.12.0"
+    "@snyk/gemfile" "1.2.0"
+    "@types/agent-base" "^4.2.0"
+    abbrev "^1.1.1"
+    ansi-escapes "^4.1.0"
+    chalk "^2.4.2"
+    configstore "^3.1.2"
+    debug "^3.1.0"
+    diff "^4.0.1"
+    git-url-parse "11.1.2"
+    glob "^7.1.3"
+    inquirer "^6.2.2"
+    lodash "^4.17.14"
+    needle "^2.2.4"
+    opn "^5.5.0"
+    os-name "^3.0.0"
+    proxy-agent "^3.1.0"
+    proxy-from-env "^1.0.0"
+    semver "^6.0.0"
+    snyk-config "^2.2.1"
+    snyk-docker-plugin "1.29.1"
+    snyk-go-plugin "1.11.0"
+    snyk-gradle-plugin "^3.0.2"
+    snyk-module "1.9.1"
+    snyk-mvn-plugin "2.4.0"
+    snyk-nodejs-lockfile-parser "1.16.0"
+    snyk-nuget-plugin "1.12.0"
+    snyk-php-plugin "1.6.4"
+    snyk-policy "1.13.5"
+    snyk-python-plugin "^1.13.0"
+    snyk-resolve "1.0.1"
+    snyk-resolve-deps "4.3.0"
+    snyk-sbt-plugin "2.6.1"
+    snyk-tree "^1.0.0"
+    snyk-try-require "1.3.1"
+    source-map-support "^0.5.11"
+    strip-ansi "^5.2.0"
+    tempfile "^2.0.0"
+    then-fs "^2.0.0"
+    update-notifier "^2.5.0"
+    uuid "^3.3.2"
+
+sockjs-client@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
+  integrity sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
+    json3 "^3.3.2"
+    url-parse "^1.4.3"
+
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.0.1"
+
+socks-proxy-agent@^4.0.0, socks-proxy-agent@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz#3c8991f3145b2799e70e11bd5fbc8b1963116386"
+  integrity sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==
+  dependencies:
+    agent-base "~4.2.1"
+    socks "~2.3.2"
+
+socks@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.3.2.tgz#ade388e9e6d87fdb11649c15746c578922a5883e"
+  integrity sha512-pCpjxQgOByDHLlNqlnh/mNSAxIUkyBBuwwhTcV+enZGbDaClPvHdvm6uvOwZfFJkam7cGhBNbb4JxiP8UZkRvQ==
+  dependencies:
+    ip "^1.1.5"
+    smart-buffer "4.0.2"
+
+sonic-boom@^0.7.3:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-0.7.5.tgz#b383d92cdaaa8e66d1f77bdec71b49806d01b5f1"
+  integrity sha512-1pKrnAV6RfvntPnarY71tpthFTM3pWZWWQdghZY8ARjtDPGzG/inxqSuRwQY/7V1woUjfyxPb437zn4p5phgnQ==
+  dependencies:
+    flatstr "^1.0.12"
+
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
 source-map-resolve@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
   dependencies:
-    atob "^2.0.0"
+    atob "^2.1.1"
     decode-uri-component "^0.2.0"
     resolve-url "^0.2.1"
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-support@0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  integrity sha1-MlUqpktFg5KoXqs7C17mFScWeus=
+  dependencies:
+    source-map "^0.5.3"
+
+source-map-support@0.5.12:
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
+  integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-support@^0.4.15:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"
+source-map-support@^0.5.11, source-map-support@^0.5.6, source-map-support@^0.5.7, source-map-support@~0.5.12, source-map-support@~0.5.4:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -4626,24 +11930,30 @@ source-map-support@^0.5.6:
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spawn-sync@1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
+  integrity sha1-sAeZVX63+wyDdsKdROih6mfldHY=
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
 
 spdx-correct@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
+  integrity sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
@@ -4651,10 +11961,12 @@ spdx-correct@^3.0.0:
 spdx-exceptions@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz#2c7ae61056c714a5b9b9b2b2af7d311ef5c78fe9"
+  integrity sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==
 
 spdx-expression-parse@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
@@ -4662,20 +11974,64 @@ spdx-expression-parse@^3.0.0:
 spdx-license-ids@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz#7a7cd28470cc6d3a1cfe6d66886f6bc430d3ac87"
+  integrity sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==
+
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
+  dependencies:
+    debug "^4.1.0"
+    detect-node "^2.0.4"
+    hpack.js "^2.1.6"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
+
+spdy@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
+  integrity sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==
+  dependencies:
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
+    http-deceiver "^1.2.7"
+    select-hose "^2.0.0"
+    spdy-transport "^3.0.0"
+
+speedometer@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/speedometer/-/speedometer-0.1.4.tgz#9876dbd2a169d3115402d48e6ea6329c8816a50d"
+  integrity sha1-mHbb0qFp0xFUAtSObqYynIgWpQ0=
+
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
   dependencies:
     extend-shallow "^3.0.0"
 
+split@~0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  integrity sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=
+  dependencies:
+    through "2"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
+  integrity sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -4687,118 +12043,299 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+ssri@^6.0.0, ssri@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
+  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
 stack-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
+  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
 stackframe@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
+  integrity sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw==
 
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
   dependencies:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stealthy-require@^1.1.0:
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+
+stream-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+  integrity sha1-v5tKv7QrJ011FHnkTg/yZWtvEZM=
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^1.0.27-1"
+
+stream-browserify@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-parser@~0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stream-parser/-/stream-parser-0.3.1.tgz#1618548694420021a1182ff0af1911c129761773"
+  integrity sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=
+  dependencies:
+    debug "2"
 
 stream-shift@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+
+stream-to-array@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
+  integrity sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=
+  dependencies:
+    any-promise "^1.1.0"
+
+stream-to-promise@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stream-to-promise/-/stream-to-promise-2.2.0.tgz#b1edb2e1c8cb11289d1b503c08d3f2aef51e650f"
+  integrity sha1-se2y4cjLESidG1A8CNPyrvUeZQ8=
+  dependencies:
+    any-promise "~1.3.0"
+    end-of-stream "~1.1.0"
+    stream-to-array "~2.3.0"
+
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
   dependencies:
     astral-regex "^1.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^1.0.1, string-width@^1.0.2:
+string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
+  integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^5.2.0"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   dependencies:
     safe-buffer "~5.1.0"
 
 stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+  integrity sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=
 
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
   dependencies:
     ansi-regex "^2.0.0"
 
 strip-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
+  integrity sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=
+
+strip-bom-buf@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-2.0.0.tgz#ff9c223937f8e7154b77e9de9bde094186885c15"
+  integrity sha512-gLFNHucd6gzb8jMsl5QmZ3QgnUJmp7qn4uUSHNwEXumAp7YizoGYw19ZUVfuq4aBOQUtyn2k8X/CwzWB73W2lQ==
+  dependencies:
+    is-utf8 "^0.2.1"
+
+strip-bom-stream@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-4.0.0.tgz#4d21a651e723ef743a0a8b0d4534471805330cbb"
+  integrity sha512-0ApK3iAkHv6WbgLICw/J4nhwHeDZsBxIIsOD+gHgZICL6SeJ0S9f/WZqemka9cjkTyMN5geId6e8U5WGFAn3cQ==
+  dependencies:
+    first-chunk-stream "^3.0.0"
+    strip-bom-buf "^2.0.0"
+
 strip-bom-string@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-0.1.2.tgz#9c6e720a313ba9836589518405ccfb88a5f41b9c"
-
-strip-bom@3.0.0, strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-nG5yCjE7qYNliVGEBcz7iKX0G5w=
 
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
   dependencies:
     is-utf8 "^0.2.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
+  dependencies:
+    get-stdin "^4.0.1"
 
-strip-json-comments@~2.0.1:
+strip-json-comments@3.0.1, strip-json-comments@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
+  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
+
+strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
 strip-use-strict@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/strip-use-strict/-/strip-use-strict-0.1.0.tgz#e30e8fd2206834e41e5eb3f3dc1ea7a4e4258f5f"
+  integrity sha1-4w6P0iBoNOQeXrPz3B6npOQlj18=
+
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
+sumchecker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-2.0.2.tgz#0f42c10e5d05da5d42eea3e56c3399a37d6c5b3e"
+  integrity sha1-D0LBDl0F2l1C7qPlbDOZo31sWz4=
+  dependencies:
+    debug "^2.2.0"
+
+supports-color@6.1.0, supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
 
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.1.2:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
-supports-color@^5.0.0, supports-color@^5.3.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
+supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
+  integrity sha512-HHi5kVSefKaJkGYXbDuKbUGRVxqnWGn3J2e39CYcNJEfWciGq2zYtOhXLTlvrOZW1QU7VX67w7fMmWafHX9Pfw==
   dependencies:
     has-flag "^2.0.0"
     supports-color "^5.0.0"
@@ -4806,83 +12343,193 @@ supports-hyperlinks@^1.0.1:
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
 symbol-tree@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-table@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  integrity sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=
   dependencies:
-    ajv "^5.2.3"
-    ajv-keywords "^2.1.0"
-    chalk "^2.1.0"
-    lodash "^4.17.4"
-    slice-ansi "1.0.0"
-    string-width "^2.1.1"
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
+table@^5.2.3:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.5.tgz#c8f4ea2d8fee08c0027fac27b0ec0a4fe01dfa42"
+  integrity sha512-oGa2Hl7CQjfoaogtrOHEJroOcYILTx7BZWLGsJIlzoWmB2zmguhNfPJZsWPKYek/MgCxfco54gEi31d1uN2hFA==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+tapable@^1.0.0, tapable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
 tar-fs@^1.8.1:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.0.tgz#e877a25acbcc51d8c790da1c57c9cf439817b896"
+  integrity sha512-I9rb6v7mjWLtOfCau9eH5L7sLJyU2BnxtEZRQ5Mt+eRKmf1F0ohXmT/Jc3fr52kDvjJ/HV5MH3soQfPL5bQ0Yg==
   dependencies:
     chownr "^1.0.1"
     mkdirp "^0.5.1"
     pump "^1.0.0"
     tar-stream "^1.1.2"
 
-tar-stream@^1.1.2:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.5.tgz#5cad84779f45c83b1f2508d96b09d88c7218af55"
+tar-stream@^1.1.2, tar-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
+  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
   dependencies:
     bl "^1.0.0"
+    buffer-alloc "^1.2.0"
     end-of-stream "^1.0.0"
-    readable-stream "^2.0.0"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.1"
     xtend "^4.0.0"
 
-tar@^4:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.1.tgz#b25d5a8470c976fd7a9a8a350f42c59e9fa81749"
+tar-stream@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.0.tgz#d1aaa3661f05b38b5acc9b7020efdca5179a2cc3"
+  integrity sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==
   dependencies:
-    chownr "^1.0.1"
+    bl "^3.0.0"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
+tar@^4, tar@^4.4.10:
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.10.tgz#946b2810b9a5e0b26140cf78bea6b0b0d689eba1"
+  integrity sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==
+  dependencies:
+    chownr "^1.1.1"
     fs-minipass "^1.2.5"
-    minipass "^2.2.4"
-    minizlib "^1.1.0"
+    minipass "^2.3.5"
+    minizlib "^1.2.1"
     mkdirp "^0.5.0"
-    safe-buffer "^5.1.1"
-    yallist "^3.0.2"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
 
 targz@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/targz/-/targz-1.0.1.tgz#8f76a523694cdedfbb5d60a4076ff6eeecc5398f"
+  integrity sha1-j3alI2lM3t+7XWCkB2/27uzFOY8=
   dependencies:
     tar-fs "^1.8.1"
 
-test-exclude@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.1.tgz#dfa222f03480bca69207ca728b37d74b45f724fa"
+temp-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
+  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
+
+tempfile@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-2.0.0.tgz#6b0446856a9b1114d1856ffcbe509cccb0977265"
+  integrity sha1-awRGhWqbERTRhW/8vlCczLCXcmU=
   dependencies:
-    arrify "^1.0.1"
-    micromatch "^3.1.8"
-    object-assign "^4.1.0"
-    read-pkg-up "^1.0.1"
-    require-main-filename "^1.0.1"
+    temp-dir "^1.0.0"
+    uuid "^3.0.1"
+
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  integrity sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=
+  dependencies:
+    execa "^0.7.0"
+
+terser-webpack-plugin@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.7.0"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser@^4.1.2:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.4.tgz#4478b6a08bb096a61e793fea1a4434408bab936c"
+  integrity sha512-+ZwXJvdSwbd60jG0Illav0F06GDJF0R4ydZ21Q3wGAFKoBGyJGo34F63vzJHgvYxc1ukOtIjvwEvl9MkjzM6Pg==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+test-exclude@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
+  dependencies:
+    glob "^7.1.3"
+    minimatch "^3.0.4"
+    read-pkg-up "^4.0.0"
+    require-main-filename "^2.0.0"
 
 testcheck@^1.0.0-rc:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/testcheck/-/testcheck-1.0.0-rc.2.tgz#11356a25b84575efe0b0857451e85b5fa74ee4e4"
+  integrity sha1-ETVqJbhFde/gsIV0UehbX6dO5OQ=
 
-text-table@~0.2.0:
+text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+then-fs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/then-fs/-/then-fs-2.0.0.tgz#72f792dd9d31705a91ae19ebfcf8b3f968c81da2"
+  integrity sha1-cveS3Z0xcFqRrhnr/Piz+WjIHaI=
+  dependencies:
+    promise ">=3.2 <8"
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
+  integrity sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=
+  dependencies:
+    any-promise "^1.0.0"
 
 throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+
+throttleit@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
+  integrity sha1-z+34jmDADdlpe2H90qg0OptoDq8=
 
 through2-filter@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-2.0.0.tgz#60bc55a0dacb76085db1f9dae99ab43f83d622ec"
+  integrity sha1-YLxVoNrLdghdsfna6Zq0P4PWIuw=
   dependencies:
     through2 "~2.0.0"
     xtend "~4.0.0"
@@ -4890,53 +12537,122 @@ through2-filter@^2.0.0:
 through2@^2.0.0, through2@^2.0.1, through2@~2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  integrity sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=
   dependencies:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6:
+through2@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.2.3.tgz#eb3284da4ea311b6cc8ace3653748a52abf25a3f"
+  integrity sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=
+  dependencies:
+    readable-stream "~1.1.9"
+    xtend "~2.1.1"
+
+through@2, "through@>=2.2.7 <3", through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+thunkify@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d"
+  integrity sha1-+qDp0jDFGsyVyhOjYawFyn4EVT0=
+
+thunky@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
+  integrity sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==
 
 time-stamp@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.0.1.tgz#9f4bd23559c9365966f3302dbba2b07c6b99b151"
+  integrity sha1-n0vSNVnJNllm8zAtu6KwfGuZsVE=
+
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+  integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  integrity sha1-ycWLV1voQHN1y14kYtrO50NZ9B0=
+  dependencies:
+    process "~0.11.0"
+
+timers-browserify@^2.0.4:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
+  integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
+  dependencies:
+    setimmediate "^1.0.4"
 
-tmp@^0.0.33, tmp@~0.0.28:
+tmp@0.0.33, tmp@^0.0.33, tmp@~0.0.28:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmp@0.1.0, tmp@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
+  integrity sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==
+  dependencies:
+    rimraf "^2.6.3"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
 
 to-absolute-glob@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.1.tgz#70c375805b9e3105e899ee8dbdd6a9aa108f407b"
+  integrity sha1-cMN1gFueMQXome6NvdapqhCPQHs=
   dependencies:
     extend-shallow "^2.0.1"
     is-absolute "^0.2.5"
     is-negated-glob "^1.0.0"
 
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+
+to-buffer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
+  integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
+
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
   dependencies:
     kind-of "^3.0.2"
 
+to-readable-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
+  integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
+
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
   dependencies:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
@@ -4944,160 +12660,467 @@ to-regex-range@^2.1.0:
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
   dependencies:
     define-property "^2.0.2"
     extend-shallow "^3.0.2"
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-tough-cookie@>=2.3.3, tough-cookie@^2.3.3:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.2.tgz#aa9133154518b494efab98a58247bfc38818c00c"
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+toml@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
+  integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
+
+tosource@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tosource/-/tosource-1.0.0.tgz#42d88dd116618bcf00d6106dd5446f3427902ff1"
+  integrity sha1-QtiN0RZhi88A1hBt1URvNCeQL/E=
+
+tough-cookie@^2.3.3:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
   dependencies:
-    psl "^1.1.24"
-    punycode "^1.4.1"
+    psl "^1.1.28"
+    punycode "^2.1.1"
 
 tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
+  dependencies:
+    punycode "^1.4.1"
+
+tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
   dependencies:
+    psl "^1.1.24"
     punycode "^1.4.1"
 
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
   dependencies:
     punycode "^2.1.0"
 
+traverse@0.4.x:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.4.6.tgz#d04b2280e4c792a5815429ef7b8b60c64c9ccc34"
+  integrity sha1-0EsigOTHkqWBVCnve4tgxkyczDQ=
+
+tree-kill@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a"
+  integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+  integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+tslib@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
+
+tslib@^1, tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
   dependencies:
     safe-buffer "^5.0.1"
 
 tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+  integrity sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
   dependencies:
     prelude-ls "~1.1.2"
 
+type-fest@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
+  integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
+
+type-fest@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
+  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+type@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.0.3.tgz#16f5d39f27a2d28d86e48f8981859e9d3296c179"
+  integrity sha512-51IMtNfVcee8+9GJvj0spSuFcZHe9vSib6Xtgsny1Km9ugyz2mbS08I3rsUIRYgJohFRFU1160sgRodYz378Hg==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~1.8.10:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-1.8.10.tgz#b475d6e0dff0bf50f296e5ca6ef9fbb5c7320f1e"
+typescript@^3.7.4:
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.4.tgz#1743a5ec5fef6a1fa9f3e4708e33c81c73876c19"
+  integrity sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==
 
-ua-parser-js@^0.7.9:
-  version "0.7.18"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
+  version "0.7.20"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
+  integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
 
-uglify-js@^2.6:
-  version "2.8.29"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+uglify-js@^3.1.4:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
   dependencies:
-    source-map "~0.5.1"
-    yargs "~3.10.0"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
-
-uglify-to-browserify@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+    commander "~2.20.3"
+    source-map "~0.6.1"
 
 unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
+
+underscore@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+  integrity sha1-izixDKze9jM3uLJOT/htRa6lKag=
+
+unicode-canonical-property-names-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
+  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
+
+unicode-match-property-ecmascript@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
+  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^1.0.4"
+    unicode-property-aliases-ecmascript "^1.0.4"
+
+unicode-match-property-value-ecmascript@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
+  integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
+
+unicode-property-aliases-ecmascript@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
+  integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
 
 union-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
   dependencies:
     arr-union "^3.1.0"
     get-value "^2.0.6"
     is-extendable "^0.1.1"
-    set-value "^0.4.3"
+    set-value "^2.0.1"
+
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
+  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
+  dependencies:
+    imurmurhash "^0.1.4"
 
 unique-stream@^2.0.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.2.1.tgz#5aa003cfbe94c5ff866c4e7d668bb1c4dbadb369"
+  integrity sha1-WqADz76Uxf+GbE59ZouxxNuts2k=
   dependencies:
     json-stable-stringify "^1.0.0"
     through2-filter "^2.0.0"
 
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  integrity sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=
+  dependencies:
+    crypto-random-string "^1.0.0"
+
+universal-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universal-url/-/universal-url-2.0.0.tgz#35e7fc2c3374804905cee67ea289ed3a47669809"
+  integrity sha512-3DLtXdm/G1LQMCnPj+Aw7uDoleQttNHp2g5FnNQKR6cP6taNWS1b/Ehjjx4PVyvejKi3TJyu8iBraKM4q3JQPg==
+  dependencies:
+    hasurl "^1.0.0"
+    whatwg-url "^7.0.0"
+
+universal-user-agent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-3.0.0.tgz#4cc88d68097bffd7ac42e3b7c903e7481424b4b9"
+  integrity sha512-T3siHThqoj5X0benA5H0qcDnrKGXzU8TKoX15x/tQHw1hQBvIEBHjxQ2klizYsqBOO/Q+WuxoQUihadeeqDnoA==
+  dependencies:
+    os-name "^3.0.0"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
   dependencies:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+unzip-response@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+  integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
+
+upath@1.1.2, upath@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
+  integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==
+
+update-notifier@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.1.tgz#78ecb68b915e2fd1be9f767f6e298ce87b736250"
+  integrity sha512-grrmrB6Zb8DUiyDIaeRTBCkgISYUgETNe7NglEbVsrLWXeESnlCSP50WfRSj/GmzMPl6Uchj24S/p80nP/ZQrQ==
+  dependencies:
+    boxen "^3.0.0"
+    chalk "^2.0.1"
+    configstore "^4.0.0"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.1.0"
+    is-npm "^3.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+update-notifier@^2.1.0, update-notifier@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
+  integrity sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  dependencies:
+    punycode "^2.1.0"
+
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
+  dependencies:
+    prepend-http "^2.0.0"
+
+url-parse@^1.4.3:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
+  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
 
 url-template@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
+  integrity sha1-/FZaPMy/93MMd19WQflVV5FDnyE=
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+url@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
 
 use@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  integrity sha1-nHC/2Babwdy/SGBODwS4tJzenp8=
   dependencies:
-    kind-of "^6.0.2"
+    os-homedir "^1.0.0"
 
-user-home@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+userhome@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/userhome/-/userhome-1.0.0.tgz#b6491ff12d21a5e72671df9ccc8717e1c6688c0b"
+  integrity sha1-tkkf8S0hpecmcd+czIcX4cZojAs=
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
 util.promisify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
   dependencies:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
-uuid@^3.0.0, uuid@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
+  dependencies:
+    inherits "2.0.1"
 
-v8flags@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
+  dependencies:
+    inherits "2.0.3"
+
+util@~0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
   dependencies:
-    user-home "^1.1.1"
+    inherits "2.0.3"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+
+v8-compile-cache@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
+  integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==
+
+v8-compile-cache@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
+  integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
 validate-npm-package-license@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
+  integrity sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==
   dependencies:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+validate-npm-package-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
+  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
+  dependencies:
+    builtins "^1.0.3"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
   dependencies:
     assert-plus "^1.0.0"
     core-util-is "1.0.2"
@@ -5106,12 +13129,14 @@ verror@1.10.0:
 vinyl-sourcemaps-apply@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
+  integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
   dependencies:
     source-map "^0.5.1"
 
 vinyl@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  integrity sha1-Ah+cLPlR1rk5lDyJ617lrdT9kkw=
   dependencies:
     clone "^2.1.1"
     clone-buffer "^1.0.0"
@@ -5123,174 +13148,554 @@ vinyl@^2.0.1:
 vlq@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
+  integrity sha1-4xbVJXtAuGu0PLjV/qXX9U1rDKE=
 
-vm2@patriksimek/vm2#custom_files:
-  version "3.5.0"
-  resolved "https://codeload.github.com/patriksimek/vm2/tar.gz/7e82f90ac705fc44fad044147cb0df09b4c79a57"
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
+  dependencies:
+    indexof "0.0.1"
 
-voca@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/voca/-/voca-1.4.0.tgz#e15ac58b38290b72acc0c330366b6cc7984924d7"
+vm-browserify@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
+  integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
+
+vscode-languageserver-types@^3.5.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.14.0.tgz#d3b5952246d30e5241592b6dde8280e03942e743"
+  integrity sha512-lTmS6AlAlMHOvPQemVwo3CezxBp0sNB95KNPkqp3Nxd5VFEnuG1ByM0zlRWos0zjO3ZWtkvhal0COgiV1xIA4A==
 
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
   dependencies:
     browser-process-hrtime "^0.1.2"
 
-walker@~1.0.5:
+walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
   dependencies:
     makeerror "1.0.x"
 
-watch@~0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
   dependencies:
-    exec-sh "^0.2.0"
-    minimist "^1.2.0"
+    loose-envify "^1.0.0"
+
+watchpack@1.6.0, watchpack@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+  integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
+  dependencies:
+    chokidar "^2.0.2"
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+
+wbuf@^1.1.0, wbuf@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+wcwidth@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
+  dependencies:
+    defaults "^1.0.3"
+
+web-ext@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-3.1.1.tgz#457f81cd68fe36e4a0025693aac911dcf9b658a8"
+  integrity sha512-snTfhuxoplm8QAlv+CwOaF0XSaycDUmxsrLfi4NtZRvZ6J79+ijOu9HyTXP0rd1zT3uagWYOBc3ol/ZOsf1LQQ==
+  dependencies:
+    "@babel/polyfill" "7.4.4"
+    "@babel/runtime" "7.4.5"
+    "@cliqz-oss/firefox-client" "0.3.1"
+    "@cliqz-oss/node-firefox-connect" "1.2.1"
+    adbkit "2.11.1"
+    addons-linter "1.10.0"
+    bunyan "1.8.12"
+    camelcase "5.3.1"
+    debounce "1.2.0"
+    decamelize "3.2.0"
+    es6-error "4.1.1"
+    event-to-promise "0.8.0"
+    firefox-profile "1.2.0"
+    fx-runner "1.0.11"
+    git-rev-sync "1.12.0"
+    mkdirp "0.5.1"
+    multimatch "4.0.0"
+    mz "2.7.0"
+    node-notifier "5.4.0"
+    opn "5.5.0"
+    parse-json "4.0.0"
+    require-uncached "2.0.0"
+    sign-addon "0.3.1"
+    source-map-support "0.5.12"
+    stream-to-promise "2.2.0"
+    strip-json-comments "3.0.1"
+    tmp "0.1.0"
+    update-notifier "3.0.1"
+    watchpack "1.6.0"
+    yargs "13.2.4"
+    zip-dir "1.0.2"
 
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
+webpack-cli@^3.3.10:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
+  integrity sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==
+  dependencies:
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    enhanced-resolve "4.1.0"
+    findup-sync "3.0.0"
+    global-modules "2.0.0"
+    import-local "2.0.0"
+    interpret "1.2.0"
+    loader-utils "1.2.3"
+    supports-color "6.1.0"
+    v8-compile-cache "2.0.3"
+    yargs "13.2.4"
+
+webpack-dev-middleware@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.0.tgz#ef751d25f4e9a5c8a35da600c5fda3582b5c6cff"
+  integrity sha512-qvDesR1QZRIAZHOE3iQ4CXLZZSQ1lAUsSpnQmlB1PBfoN/xdRjmge3Dok0W4IdaVLJOGJy3sGI4sZHwjRU0PCA==
+  dependencies:
+    memory-fs "^0.4.1"
+    mime "^2.4.2"
+    range-parser "^1.2.1"
+    webpack-log "^2.0.0"
+
+webpack-dev-server@^3.3.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.8.0.tgz#06cc4fc2f440428508d0e9770da1fef10e5ef28d"
+  integrity sha512-Hs8K9yI6pyMvGkaPTeTonhD6JXVsigXDApYk9JLW4M7viVBspQvb1WdAcWxqtmttxNW4zf2UFLsLNe0y87pIGQ==
+  dependencies:
+    ansi-html "0.0.7"
+    bonjour "^3.5.0"
+    chokidar "^2.1.6"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
+    debug "^4.1.1"
+    del "^4.1.1"
+    express "^4.17.1"
+    html-entities "^1.2.1"
+    http-proxy-middleware "^0.19.1"
+    import-local "^2.0.0"
+    internal-ip "^4.3.0"
+    ip "^1.1.5"
+    is-absolute-url "^3.0.0"
+    killable "^1.0.1"
+    loglevel "^1.6.3"
+    opn "^5.5.0"
+    p-retry "^3.0.1"
+    portfinder "^1.0.21"
+    schema-utils "^1.0.0"
+    selfsigned "^1.10.4"
+    semver "^6.3.0"
+    serve-index "^1.9.1"
+    sockjs "0.3.19"
+    sockjs-client "1.3.0"
+    spdy "^4.0.1"
+    strip-ansi "^3.0.1"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.7.0"
+    webpack-log "^2.0.0"
+    ws "^6.2.1"
+    yargs "12.0.5"
+
+webpack-log@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
+  dependencies:
+    ansi-colors "^3.0.0"
+    uuid "^3.3.2"
+
+webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@^4.41.2:
+  version "4.41.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
+  integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
+websocket-driver@>=0.5.1:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
+  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
+  dependencies:
+    http-parser-js ">=0.4.0 <0.4.11"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
   dependencies:
-    iconv-lite "0.4.19"
+    iconv-lite "0.4.24"
 
 whatwg-fetch@>=0.10.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
+  integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
-whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"
+whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@7.0.0, whatwg-url@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+  integrity sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
 
-whatwg-url@^6.4.0, whatwg-url@^6.4.1:
+whatwg-url@^6.4.1:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
   dependencies:
     lodash.sortby "^4.7.0"
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+when@3.7.7:
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
+  integrity sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg=
 
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@^1.2.12, which@^1.2.9:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+which@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.4.tgz#1557f96080604e5b11b3599eb9f45b50a9efd722"
+  integrity sha1-FVf5YIBgTlsRs1meufRbUKnv1yI=
   dependencies:
-    isexe "^2.0.0"
+    is-absolute "^0.1.7"
+    isexe "^1.1.1"
 
-which@^1.3.0:
+which@^1.0.5, which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
 wide-align@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
   dependencies:
-    string-width "^1.0.2"
+    string-width "^1.0.2 || 2"
 
-window-size@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+widest-line@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
+  integrity sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==
+  dependencies:
+    string-width "^2.1.1"
 
-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+window-size@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
+  integrity sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=
 
-wordwrap@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+windows-release@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.2.0.tgz#8122dad5afc303d833422380680a79cdfa91785f"
+  integrity sha512-QTlz2hKLrdqukrsapKsINzqMgOUpQW268eJ0OaOpJN32h272waxR9fkB9VoWRtK7uKHG5EHJcTXQBD8XZVJkFA==
+  dependencies:
+    execa "^1.0.0"
+
+winreg@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/winreg/-/winreg-0.0.12.tgz#07105554ba1a9d08979251d129475bffae3006b7"
+  integrity sha1-BxBVVLoanQiXklHRKUdb/64wBrc=
+
+word-wrap@~1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
 wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+  dependencies:
+    errno "~0.1.7"
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+write-file-atomic@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+write-file-atomic@^2.0.0:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
+  integrity sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
 write@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  integrity sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=
   dependencies:
     mkdirp "^0.5.1"
 
 ws@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"
+  integrity sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==
   dependencies:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
 
+ws@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+ws@^7:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.1.2.tgz#c672d1629de8bb27a9699eb599be47aeeedd8f73"
+  integrity sha512-gftXq3XI81cJCgkUiAVixA0raD9IVmXqsylCrjRygw4+UOOGzPoxnQ6r/CnVL9i+mDncJo94tSkyrtuuQVBmrg==
+  dependencies:
+    async-limiter "^1.0.0"
+
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+  integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+xml2js@0.4.19, xml2js@^0.4.17, xml2js@~0.4.4:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
+
+xregexp@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943"
+  integrity sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM=
+
+xregexp@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.4.tgz#02a4aea056d65a42632c02f0233eab8e4d7e57ed"
+  integrity sha512-sO0bYdYeJAJBcJA8g7MJJX7UrOZIfJPd8U2SC7B2Dd/J24U0aQNoGp33shCaBSWeb0rD5rh6VBUIXOkGal1TZA==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.2.0"
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+xtend@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
+  integrity sha1-bv7MKk2tjmlixJAbM3znuoe10os=
+  dependencies:
+    object-keys "~0.4.0"
 
-y18n@^3.2.1:
+y18n@^3.2.0, y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
+
+"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
+  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
-yargs-parser@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^13.1.0, yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
   dependencies:
-    camelcase "^3.0.0"
-    lodash.assign "^4.0.6"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
 yargs-parser@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
   dependencies:
     camelcase "^4.1.0"
 
+yargs@12.0.5:
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
+yargs@13.2.4, yargs@~13.2.0:
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
+  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.0"
+
 yargs@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"
+  integrity sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==
   dependencies:
     cliui "^4.0.0"
     decamelize "^1.1.1"
@@ -5305,30 +13710,73 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
-yargs@^4.8.0:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+yargs@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
   dependencies:
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
     require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
+    require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
+
+yargs@^3.19.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  integrity sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=
+  dependencies:
+    camelcase "^2.0.1"
+    cliui "^3.0.3"
+    decamelize "^1.1.1"
+    os-locale "^1.4.0"
     string-width "^1.0.1"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
-    y18n "^3.2.1"
-    yargs-parser "^2.4.1"
+    window-size "^0.1.4"
+    y18n "^3.2.0"
+
+yauzl@2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
+  dependencies:
+    fd-slicer "~1.0.1"
 
-yargs@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+zip-dir@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-1.0.2.tgz#253f907aead62a21acd8721d8b88032b2411c051"
+  integrity sha1-JT+QeurWKiGs2HIdi4gDKyQRwFE=
+  dependencies:
+    async "^1.5.2"
+    jszip "^2.4.0"
+
+zip-stream@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
+  integrity sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=
+  dependencies:
+    archiver-utils "^1.3.0"
+    compress-commons "^1.2.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+
+zip-stream@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-2.1.2.tgz#841efd23214b602ff49c497cba1a85d8b5fbc39c"
+  integrity sha512-ykebHGa2+uzth/R4HZLkZh3XFJzivhVsjJt8bN3GvBzLaqqrUdRacu+c4QtnUgjkkQfsOuNE1JgLKMCPNmkKgg==
   dependencies:
-    camelcase "^1.0.2"
-    cliui "^2.1.0"
-    decamelize "^1.0.0"
-    window-size "0.1.0"
+    archiver-utils "^2.1.0"
+    compress-commons "^2.1.1"
+    readable-stream "^3.4.0"